refactor: ScheduleDrawer 디자인 수정 (#295)

* refactor: ScheduleDrawer에 Puller 적용 * refactor: ScheduleDrawer 템플릿 선택기 컴포넌트 위치 조정 * refactor: ScheduleDrawer 높이 조정 * refactor: ScheduleDrawer 불필요한 참조 제거 * refactor: ScheduleDrawer 반복 옵션 설정 페이지 디자인 수정, 저장 로직 수정 * refactor: TopNavigationBar 위치 옵션 sticky 로 설정하여 스크롤 시 사라지지 않도록 조정
soyoung125 · May 29, 2024 · d6ae66c · d6ae66c
1 parent 47f3f91
commit d6ae66c
Show file tree

Hide file tree

Showing 26 changed files with 457 additions and 246 deletions.
diff --git a/src/app/types/schedule.ts b/src/app/types/schedule.ts
@@ -50,9 +50,11 @@ export interface ScheduleRepeat {
     repeat_term: string;
     year_category: YearCategory; //"MonthAndDay" | "NthDayOfMonth" | "LastDayOfMonth"
   };
-  kind_type: "day" | "week" | "month" | "year" | "none";
+  kind_type: repeatKindType;
 }
 
+export type repeatKindType = "day" | "week" | "month" | "year" | "none";
+
 export type YearCategory = "MonthAndDay" | "NthDayOfMonth" | "LastDayOfMonth";
 
 export interface SchedulePeriod {
@@ -87,6 +89,12 @@ export interface HomeQuery {
 
 export interface RepeatTypeProps {
   repeatType: string;
+  repeat: ScheduleRepeat;
+}
+
+export interface PeriodTypeProps {
+  periodType: string;
+  period: SchedulePeriod;
 }
 
 export interface RepeatOptionProps {
@@ -95,6 +103,8 @@ export interface RepeatOptionProps {
 
 export interface RepeatProps extends RepeatTypeProps, RepeatOptionProps {}
 
+export interface PeriodProps extends PeriodTypeProps, RepeatOptionProps {}
+
 export interface ScheduleResponse {
   count: number;
   data: Schedule[];

diff --git a/src/components/ScheduleDrawer/ScheduleDrawer.tsx b/src/components/ScheduleDrawer/ScheduleDrawer.tsx
@@ -1,7 +1,7 @@
-import { Box, Stack } from "@mui/material";
+import { Box } from "@mui/material";
 import { SyntheticEvent, useState } from "react";
 import AssetFormPage from "./pages/AssetFormPage";
-import ScheduleDrawerHeader from "./layouts/ScheduleDrawerHeader.tsx";
+import ScheduleDrawerHeader from "./layouts/ScheduleDrawerHeader/ScheduleDrawerHeader.tsx";
 import ScheduleDrawerFooter from "./layouts/ScheduleDrawerFooter/ScheduleDrawerFooter.tsx";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Swiper as SwiperType } from "swiper/types";
@@ -50,51 +50,39 @@ function ScheduleDrawer({ handleClose, resetSchedule }: ScheduleDrawerProps) {
   }
 
   return (
-    <div>
-      <Box
-        sx={{
-          height: "100%",
-          pt: 1,
-          mb: 3,
-        }}
-      >
-        <ScheduleDrawerHeader
-          value={value}
-          handleChange={handleChange}
-          handleReset={handleReset}
-        />
-
-        <Stack
-          justifyContent="space-between"
-          spacing={2}
-          onTouchStart={(e) => e.stopPropagation()}
-        >
-          <Swiper
-            className="mySwiper"
-            spaceBetween={50}
-            onSlideChange={(e) => setValue(e.activeIndex)}
-            onSwiper={(swiper) => setSwiper(swiper)}
-          >
-            <SwiperSlide style={{ overflow: "scroll" }}>
-              <ScheduleFormPage
-                showError={showError}
-                setIsCategoryPickerOpen={setIsCategoryPickerOpen}
-                setIsRepeatPickerOpen={setIsRepeatPickerOpen}
-              />
-            </SwiperSlide>
-            <SwiperSlide>
-              <AssetFormPage />
-            </SwiperSlide>
-          </Swiper>
+    <Box>
+      <ScheduleDrawerHeader
+        value={value}
+        handleChange={handleChange}
+        handleReset={handleReset}
+      />
 
-          {/* 제출 버튼 */}
-          <ScheduleDrawerFooter
-            handleClose={handleClose}
-            setShowError={setShowError}
+      <Swiper
+        className="mySwiper"
+        spaceBetween={50}
+        autoHeight={true}
+        onSlideChange={(e) => setValue(e.activeIndex)}
+        onSwiper={(swiper) => setSwiper(swiper)}
+        style={{ marginBottom: "135px" }}
+      >
+        <SwiperSlide style={{ overflow: "scroll" }}>
+          <ScheduleFormPage
+            showError={showError}
+            setIsCategoryPickerOpen={setIsCategoryPickerOpen}
+            setIsRepeatPickerOpen={setIsRepeatPickerOpen}
           />
-        </Stack>
-      </Box>
-    </div>
+        </SwiperSlide>
+        <SwiperSlide>
+          <AssetFormPage />
+        </SwiperSlide>
+      </Swiper>
+
+      {/* 제출 버튼 */}
+      <ScheduleDrawerFooter
+        handleClose={handleClose}
+        setShowError={setShowError}
+      />
+    </Box>
   );
 }
 

diff --git a/src/components/ScheduleDrawer/hooks/useScheduleForm.ts b/src/components/ScheduleDrawer/hooks/useScheduleForm.ts
@@ -15,7 +15,7 @@ import {
   CATEGORIES,
   INCOME_CATEGORY,
 } from "@components/ScheduleDrawer/pages/ScheduleFormPage/components/CategoryPicker/constants.ts";
-import { RequestSchedule } from "@app/types/schedule.ts";
+import { SchedulePeriod, ScheduleRepeat } from "@app/types/schedule.ts";
 
 export const getType = (category: string) => {
   if (INCOME_CATEGORY.includes(category)) {
@@ -32,7 +32,7 @@ export const getPriceTypeSign = (type: string) => {
   return type;
 };
 
-const getRepeatEndDate = (
+export const getRepeatEndDate = (
   startDate: string | undefined,
   type: string | undefined
 ) => {
@@ -192,12 +192,12 @@ export const useScheduleForm = () => {
   };
 
   const getRepeat = () => {
-    if (!scheduleForm) return;
+    if (!scheduleForm) return "";
 
     const type = { day: "일", week: "주", month: "달", year: "년" };
     const repeatType = scheduleForm.repeat.kind_type;
 
-    if (repeatType === "none") return;
+    if (repeatType === "none") return "";
 
     const term = scheduleForm.repeat[`${repeatType}_type`].repeat_term;
     const repeat = `${term}${type[repeatType]}마다`;
@@ -223,77 +223,51 @@ export const useScheduleForm = () => {
   };
 
   const updateRepeat = (state: UpdateStateInterface) => {
-    const { id, value } = state.target;
-    if (id === "repeat") {
-      const period = {
-        ...scheduleForm?.period,
-        repeat_end_line: getRepeatEndDate(
-          scheduleForm?.start_date,
-          value as string
-        ),
-      };
-      dispatch(
-        setDrawerScheduleForm({
-          ...scheduleForm,
-          repeat: {
-            ...scheduleForm?.repeat,
-            kind_type: value,
-          },
-          period,
-          is_all_day: true,
-        })
-      );
-      return;
-    }
-
-    const type = scheduleForm?.repeat.kind_type ?? "none";
-    if (type !== "none") {
-      const kind_type = `${type}_type` as const;
-      const newValue = {
-        ...scheduleForm?.repeat[kind_type],
-        [id]: value,
-      };
-      dispatch(
-        setDrawerScheduleForm({
-          ...scheduleForm,
-          repeat: {
-            ...scheduleForm?.repeat,
-            [kind_type]: newValue,
-          },
-        })
-      );
-    }
+    const { value } = state.target;
+    const period = {
+      ...scheduleForm?.period,
+      repeat_end_line: getRepeatEndDate(
+        scheduleForm?.start_date,
+        value as string
+      ),
+    };
+    dispatch(
+      setDrawerScheduleForm({
+        ...scheduleForm,
+        repeat: {
+          ...scheduleForm?.repeat,
+          kind_type: value,
+        },
+        period,
+        is_all_day: true,
+      })
+    );
   };
 
   const updateExclusion = (state: boolean) => {
     dispatch(setDrawerScheduleForm({ ...scheduleForm, exclusion: state }));
   };
 
-  const updatePeriod = (state: UpdateStateInterface) => {
-    const { id, value } = state.target;
-    if (id === "period") {
+  const updateRepeatAndPeriod = (
+    repeat: ScheduleRepeat,
+    period: SchedulePeriod
+  ) => {
+    if (repeat.kind_type !== "none") {
       dispatch(
         setDrawerScheduleForm({
           ...scheduleForm,
-          period: {
-            ...scheduleForm?.period,
-            is_repeat_again: value === "is_repeat_again",
-            kind_type: value,
-          },
+          repeat,
+          period,
+          is_all_day: true,
         })
       );
-      return;
-    }
-
-    const type = scheduleForm?.period.kind_type ?? "";
-    if (type !== "") {
+    } else {
       dispatch(
         setDrawerScheduleForm({
           ...scheduleForm,
-          period: {
-            ...scheduleForm?.period,
-            [type]: value,
-          },
+          repeat,
+          period,
+          is_all_day: false,
         })
       );
     }
@@ -332,7 +306,7 @@ export const useScheduleForm = () => {
     updateRepeat,
     updateExclusion,
     setRandomGeneratedSchedule,
-    updatePeriod,
+    updateRepeatAndPeriod,
     updateYearRepeat,
     getRepeat,
     updateCategory,

diff --git a/src/components/ScheduleDrawer/layouts/ScheduleDrawerFooter/ScheduleDrawerFooter.style.ts b/src/components/ScheduleDrawer/layouts/ScheduleDrawerFooter/ScheduleDrawerFooter.style.ts
@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+
+export const FooterContainer = styled.div`
+  //background-color: transparent;
+  position: fixed;
+  bottom: 0;
+  z-index: 1300;
+`;
+
+export const AutoSaveContainer = styled.div`
+  display: flex;
+  padding: 4px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  opacity: 1;
+
+  color: #8c919c;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px; /* 157.143% */
+  letter-spacing: 0.4px;
+`;
+
+export const ActionContainer = styled.div`
+  background-color: white;
+  padding-bottom: 28px;
+`;
diff --git a/src/components/ScheduleDrawer/layouts/ScheduleDrawerFooter/ScheduleDrawerFooter.tsx b/src/components/ScheduleDrawer/layouts/ScheduleDrawerFooter/ScheduleDrawerFooter.tsx
@@ -1,10 +1,15 @@
-import { Box, Divider } from "@mui/material";
+import { Divider } from "@mui/material";
 import { selectScheduleForm } from "@redux/slices/scheduleSlice.tsx";
-import { RequestSchedule, Schedule } from "@app/types/schedule.ts";
+import { RequestSchedule } from "@app/types/schedule.ts";
 import { useAppSelector } from "@redux/hooks.ts";
 import Save from "@assets/icons/save_icon.svg";
 import ModifyFooter from "./ModifyFooter.tsx";
 import CreateFooter from "./CreateFooter.tsx";
+import {
+  ActionContainer,
+  AutoSaveContainer,
+  FooterContainer,
+} from "@components/ScheduleDrawer/layouts/ScheduleDrawerFooter/ScheduleDrawerFooter.style.ts";
 
 interface ScheduleDrawerFooterProps {
   handleClose: () => void;
@@ -32,30 +37,22 @@ function ScheduleDrawerFooter({
   };
 
   return (
-    <Box>
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-          color: "#8C919C",
-          fontSize: "14px",
-          mb: 0.5,
-        }}
-      >
+    <FooterContainer>
+      <AutoSaveContainer>
         <img src={Save} alt="save" />
         입력 정보는 자동으로 저장됩니다.
-      </Box>
+      </AutoSaveContainer>
 
-      <Divider />
+      <ActionContainer>
+        <Divider />
 
-      {schedule && schedule.schedule_id ? (
-        <ModifyFooter handleSubmit={handleSubmit} handleClose={handleClose} />
-      ) : (
-        <CreateFooter handleSubmit={handleSubmit} handleClose={handleClose} />
-      )}
-    </Box>
+        {schedule && schedule.schedule_id ? (
+          <ModifyFooter handleSubmit={handleSubmit} handleClose={handleClose} />
+        ) : (
+          <CreateFooter handleSubmit={handleSubmit} handleClose={handleClose} />
+        )}
+      </ActionContainer>
+    </FooterContainer>
   );
 }
 

diff --git a/src/components/ScheduleDrawer/layouts/ScheduleDrawerHeader.tsx b/src/components/ScheduleDrawer/layouts/ScheduleDrawerHeader.tsx