From 1ea14a4ceab6ce1637eec279187a032f7c2e09ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yoonkyoung=20=28=EB=B9=99=EB=B4=89=29?= Date: Sat, 12 Oct 2024 02:14:20 +0900 Subject: [PATCH] =?UTF-8?q?[FE]=20'=EC=95=BD=EC=86=8D=20=ED=9B=84=EB=B3=B4?= =?UTF-8?q?=20=EB=82=A0=EC=A7=9C=20=EC=84=A0=ED=83=9D'=EA=B3=BC=20'?= =?UTF-8?q?=EC=95=BD=EC=86=8D=20=EC=8B=9C=EA=B0=84=20=EB=B2=94=EC=9C=84=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D'=20=EC=82=AC=EC=9D=B4=EC=97=90=20=EA=B0=84?= =?UTF-8?q?=EA=B2=A9=EC=9D=84=20=EC=84=A4=EC=A0=95=20(#397)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * rename: CreateMeetingPage 디렉터리 내부 구조 변경 MeetingDateTime, MeetingHostInfo, MeetingName 컴포넌트를 components 디렉터리 내부로 이동 * design: '약속 후보 날짜 선택'과 '약속 시간 범위 선택' 사이에 간격을 설정 * design: 요소가 넘쳐서 안 보이는 경우 스크롤 가능하게 설정 * fix: logoSunglass svg 패턴 정의 --- frontend/src/assets/images/logoSunglass.svg | 7 +++++- .../MeetingDateTime/MeetingDateTime.styles.ts | 16 +++++++++++++ .../MeetingDateTime/index.tsx} | 23 +++++++++++-------- .../MeetingHostInfo/index.tsx} | 0 .../MeetingName/index.tsx} | 0 .../src/pages/CreateMeetingPage/index.tsx | 6 ++--- 6 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 frontend/src/pages/CreateMeetingPage/components/MeetingDateTime/MeetingDateTime.styles.ts rename frontend/src/pages/CreateMeetingPage/{MeetingDateTime.tsx => components/MeetingDateTime/index.tsx} (91%) rename frontend/src/pages/CreateMeetingPage/{MeetingHostInfo.tsx => components/MeetingHostInfo/index.tsx} (100%) rename frontend/src/pages/CreateMeetingPage/{MeetingName.tsx => components/MeetingName/index.tsx} (100%) diff --git a/frontend/src/assets/images/logoSunglass.svg b/frontend/src/assets/images/logoSunglass.svg index 4df236bc2..85c0f5bf6 100644 --- a/frontend/src/assets/images/logoSunglass.svg +++ b/frontend/src/assets/images/logoSunglass.svg @@ -1,4 +1,9 @@ - + + + + + + diff --git a/frontend/src/pages/CreateMeetingPage/components/MeetingDateTime/MeetingDateTime.styles.ts b/frontend/src/pages/CreateMeetingPage/components/MeetingDateTime/MeetingDateTime.styles.ts new file mode 100644 index 000000000..5a773edeb --- /dev/null +++ b/frontend/src/pages/CreateMeetingPage/components/MeetingDateTime/MeetingDateTime.styles.ts @@ -0,0 +1,16 @@ +import { css } from '@emotion/react'; + +export const s_container = css` + overflow: scroll; + display: flex; + flex-direction: column; + gap: 2.4rem; + + height: calc(100% - 6rem); +`; + +export const s_dateCandidateSelector = css` + display: flex; + flex-direction: column; + gap: 1.2rem; +`; diff --git a/frontend/src/pages/CreateMeetingPage/MeetingDateTime.tsx b/frontend/src/pages/CreateMeetingPage/components/MeetingDateTime/index.tsx similarity index 91% rename from frontend/src/pages/CreateMeetingPage/MeetingDateTime.tsx rename to frontend/src/pages/CreateMeetingPage/components/MeetingDateTime/index.tsx index daa6d7860..9983c6a59 100644 --- a/frontend/src/pages/CreateMeetingPage/MeetingDateTime.tsx +++ b/frontend/src/pages/CreateMeetingPage/components/MeetingDateTime/index.tsx @@ -16,6 +16,8 @@ import type { UseTimeRangeDropdownReturn } from '@hooks/useTimeRangeDropdown/use import { FIELD_DESCRIPTIONS } from '@constants/inputFields'; +import { s_container, s_dateCandidateSelector } from './MeetingDateTime.styles'; + interface MeetingDateTimeProps { meetingDateInput: ReturnType; meetingTimeInput: UseTimeRangeDropdownReturn; @@ -69,8 +71,8 @@ export default function MeetingDateTime({ }; return ( - <> - +
+
@@ -100,14 +102,15 @@ export default function MeetingDateTime({ - - + +
+ {!isChecked && ( @@ -123,6 +126,6 @@ export default function MeetingDateTime({ 약속 생성하기 - +
); } diff --git a/frontend/src/pages/CreateMeetingPage/MeetingHostInfo.tsx b/frontend/src/pages/CreateMeetingPage/components/MeetingHostInfo/index.tsx similarity index 100% rename from frontend/src/pages/CreateMeetingPage/MeetingHostInfo.tsx rename to frontend/src/pages/CreateMeetingPage/components/MeetingHostInfo/index.tsx diff --git a/frontend/src/pages/CreateMeetingPage/MeetingName.tsx b/frontend/src/pages/CreateMeetingPage/components/MeetingName/index.tsx similarity index 100% rename from frontend/src/pages/CreateMeetingPage/MeetingName.tsx rename to frontend/src/pages/CreateMeetingPage/components/MeetingName/index.tsx diff --git a/frontend/src/pages/CreateMeetingPage/index.tsx b/frontend/src/pages/CreateMeetingPage/index.tsx index 077018d2b..397c4a295 100644 --- a/frontend/src/pages/CreateMeetingPage/index.tsx +++ b/frontend/src/pages/CreateMeetingPage/index.tsx @@ -1,6 +1,6 @@ -import MeetingDateTime from '@pages/CreateMeetingPage/MeetingDateTime'; -import MeetingHostInfo from '@pages/CreateMeetingPage/MeetingHostInfo'; -import MeetingName from '@pages/CreateMeetingPage/MeetingName'; +import MeetingDateTime from '@pages/CreateMeetingPage/components/MeetingDateTime'; +import MeetingHostInfo from '@pages/CreateMeetingPage/components/MeetingHostInfo'; +import MeetingName from '@pages/CreateMeetingPage/components/MeetingName'; import useCreateMeeting from '@hooks/useCreateMeeting/useCreateMeeting'; import useFunnel from '@hooks/useFunnel/useFunnel';