From ba5561942479cb893614e92e37a728d398376be0 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Thu, 15 Aug 2024 02:01:32 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feaT:=20bottomSheet=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=ED=8B=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + .../common/BottomSheet/BottomSheet.tsx | 67 ++++++ .../components/SteppingBtnSection.tsx | 8 +- yarn.lock | 195 +++++++++++++++++- 4 files changed, 269 insertions(+), 2 deletions(-) create mode 100644 src/components/common/BottomSheet/BottomSheet.tsx diff --git a/package.json b/package.json index 6d8adc13..03273945 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "lint:css": "stylelint './src/**/*.{ts,tsx}'" }, "dependencies": { + "@radix-ui/react-dialog": "^1.1.1", "@tanstack/react-query": "^5.45.1", "@tanstack/react-query-devtools": "^5.45.1", "@types/axios": "^0.14.0", diff --git a/src/components/common/BottomSheet/BottomSheet.tsx b/src/components/common/BottomSheet/BottomSheet.tsx new file mode 100644 index 00000000..87f93763 --- /dev/null +++ b/src/components/common/BottomSheet/BottomSheet.tsx @@ -0,0 +1,67 @@ +import { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; + +import * as Dialog from '@radix-ui/react-dialog'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +import Text from '../atomComponents/Text'; + +interface BottomSheetProps extends PropsWithChildren> { + children?: ReactNode; + isOpen?: boolean; + onClose: () => void; +} + +function BottomSheet({ children, isOpen, onClose }: BottomSheetProps) { + return ( + + + + dialog open + + + + + + + + title + + + + + description + + + + + dialog close + + + + + + + ); +} + +export default BottomSheet; + +const BottomSheetContent = styled(Dialog.Content)` + width: 500px; + height: 500px; + background-color: ${theme.colors.white}; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +`; + +const StyledBackground = styled(Dialog.Overlay)` + display: flex; + position: fixed; + inset: 0; + align-items: center; + justify-content: center; + background: var(--semantic-color-background-dimmed, rgb(15 15 18 / 80%)); +`; diff --git a/src/pages/steppingStone/components/SteppingBtnSection.tsx b/src/pages/steppingStone/components/SteppingBtnSection.tsx index dbda0840..379ff429 100644 --- a/src/pages/steppingStone/components/SteppingBtnSection.tsx +++ b/src/pages/steppingStone/components/SteppingBtnSection.tsx @@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; +import BottomSheet from 'components/common/BottomSheet/BottomSheet'; +import useModalState from 'components/common/Modal/hooks/useModalState'; import CopyToClipboard from 'react-copy-to-clipboard'; import { useParams } from 'react-router'; import { Link, useLocation } from 'react-router-dom'; @@ -19,6 +21,8 @@ function SteppingBtnSection({ steppingType }: SteppingProps) { const { meetingId } = useParams(); const [isModalOpen, setIsModalOpen] = useState(false); + const {isOpen, onClose}= useModalState(true); + useEffect(()=>{ setIsModalOpen(true); },[]) @@ -30,7 +34,8 @@ function SteppingBtnSection({ steppingType }: SteppingProps) { { meetComplete: ( <> - + + {/* 회의방 링크가 생성되었어요! 링크를 복사하여 팀원에게 공유해주세요 @@ -46,6 +51,7 @@ function SteppingBtnSection({ steppingType }: SteppingProps) { + */} - - + + - - - - */} + + + + + + + 회의방을 생성하시겠어요? + + + 입력한 회의 정보가 맞는지 확인해주세요 + + + + + + {meetingInfo.title} + + + + + + {placeType[meetingInfo.place]} + + + + + + {parseAvailableDates(meetingInfo.availableDates)} + + + + + + {durationType.find((item) => item.enum === meetingInfo.duration)?.time || ''} + + + + + + + + {'방장'.padEnd(5, 'ㅤ')} + {meetingInfo.name} + + + {'비밀번호'.padEnd(5, 'ㅤ')} + {meetingInfo.password} + + + + + + - - + + ); } @@ -73,3 +153,106 @@ const StyledBtnWrapper = styled.section` bottom: 1.2rem; border-radius: 50%; `; + +const BottomSheetDescription = styled.div` + display: flex; + flex-direction: column; + gap: 0.8rem; + margin-bottom: 2.4rem; +`; + +const BottomSheetContents = styled.div` +display:flex; +flex-direction:column; +gap:1.2rem; + margin-bottom:28px; + ` + +const MeetingInfoWrapper = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 1.2rem; + padding: 1.8rem 2.4rem; + background-color:${theme.colors.grey7}; + border-radius:0.8rem; + justify-content: center; + +`; + +const MeetingInfoDetail = styled.ul` + display: flex; + flex-direction: column; + gap: 4px; + justify-content: center; + padding:0; +`; + +const MeetingInfoLine = styled.li` + display: flex; + align-items: center; + gap: 0.8rem; +`; + +const HostInfoDetail = styled.ul` +display:flex; +flex-direction:column; +gap:4px; +justify-content:center; +padding:0; +` + +const HostInfoLine = styled.li` + display: flex; + align-items: center; + gap: 0.8rem; +` + +const PlaceIcon = () => { + return ( + + + + ); +}; + +const DateIcon = () => { + return ( + + + + + + ); +}; + +const TimeIcon = () => { + return ( + + + + ); +}; diff --git a/src/pages/createMeeting/components/useFunnel/SetPlace.tsx b/src/pages/createMeeting/components/useFunnel/SetPlace.tsx index 68795954..948b0136 100644 --- a/src/pages/createMeeting/components/useFunnel/SetPlace.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetPlace.tsx @@ -12,7 +12,7 @@ function SetPlace({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { return ( - {placeType.map((type, i) => { + {Object.keys(placeType).map((type, i) => { return (