[FE] '약속 후보 날짜 선택'과 '약속 시간 범위 선택' 사이에 간격을 설정 (#397)

* rename: CreateMeetingPage 디렉터리 내부 구조 변경 MeetingDateTime, MeetingHostInfo, MeetingName 컴포넌트를 components 디렉터리 내부로 이동 * design: '약속 후보 날짜 선택'과 '약속 시간 범위 선택' 사이에 간격을 설정 * design: 요소가 넘쳐서 안 보이는 경우 스크롤 가능하게 설정 * fix: logoSunglass svg 패턴 정의
woowacourse-teams · Oct 11, 2024 · 1ea14a4 · 1ea14a4
1 parent dd6740f
commit 1ea14a4
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 14 deletions.
diff --git a/frontend/src/assets/images/logoSunglass.svg b/frontend/src/assets/images/logoSunglass.svg
diff --git a/frontend/src/pages/CreateMeetingPage/components/MeetingDateTime/MeetingDateTime.styles.ts 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/...ges/CreateMeetingPage/MeetingDateTime.tsx → ...Page/components/MeetingDateTime/index.tsx b/...ges/CreateMeetingPage/MeetingDateTime.tsx → ...Page/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<typeof useDateSelect>;
   meetingTimeInput: UseTimeRangeDropdownReturn;
@@ -69,8 +71,8 @@ export default function MeetingDateTime({
   };
 
   return (
-    <>
-      <Field>
+    <div css={s_container}>
+      <div css={s_dateCandidateSelector}>
         <Field>
           <Field.Label id="날짜선택" labelText="약속 후보 날짜 선택" />
           <Field.Description description={FIELD_DESCRIPTIONS.date} />
@@ -100,14 +102,15 @@ export default function MeetingDateTime({
             <Calendar.Body renderDate={renderDate} />
           </Calendar>
         </Field>
-      </Field>
 
-      <Checkbox
-        onChange={handleToggleIsChecked}
-        id="meetingType"
-        isChecked={isChecked}
-        labelText="날짜만 선택할래요"
-      />
+        <Checkbox
+          onChange={handleToggleIsChecked}
+          id="meetingType"
+          isChecked={isChecked}
+          labelText="날짜만 선택할래요"
+        />
+      </div>
+
       {!isChecked && (
         <Field>
           <Field.Label id="약속시간범위선택" labelText="약속 시간 범위 선택" />
@@ -123,6 +126,6 @@ export default function MeetingDateTime({
       <BottomFixedButton onClick={onMeetingCreateButtonClick} disabled={isCreateMeetingFormInvalid}>
         약속 생성하기
       </BottomFixedButton>
-    </>
+    </div>
   );
 }
diff --git a/...ges/CreateMeetingPage/MeetingHostInfo.tsx → ...Page/components/MeetingHostInfo/index.tsx b/...ges/CreateMeetingPage/MeetingHostInfo.tsx → ...Page/components/MeetingHostInfo/index.tsx
diff --git a/...c/pages/CreateMeetingPage/MeetingName.tsx → ...tingPage/components/MeetingName/index.tsx b/...c/pages/CreateMeetingPage/MeetingName.tsx → ...tingPage/components/MeetingName/index.tsx
diff --git 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';