refactor: QA/QC로 발견된 버그를 해결합니다. (#282)

* refactor: 일정 중요도 명칭 결제 수단으로 변경 * refactor: 일정 추가 후 ScheduleDrawer reset해서 비우기 * refactor: ScheduleDrawer title typograpy 수정 * refactor: ScheduleDrawer 날짜 입력 칸 arrow 컬러 수정 * refactor: ScheduleDrawer 템플릿 선택 뱃지 구현 * refactor: ScheduleDrawer 반복 옵션 요약 표현 구현 * refactor: home/month mock api 수입/지출 금액 계산 * refactor: home/month, day mock api 수입/지출 금액 계산 * refactor: 불필요한 코드 제거 * refactor: 불필요한 코드 제거 * refactor: home/week mock api 수입 지출 계산 구현
soyoung125 · May 6, 2024 · ecf944c · ecf944c
1 parent c078d03
commit ecf944c
Show file tree

Hide file tree

Showing 18 changed files with 245 additions and 48 deletions.
diff --git a/src/app/tanstack-query/home/useWeekSchedules.ts b/src/app/tanstack-query/home/useWeekSchedules.ts
@@ -21,7 +21,6 @@ const fetchWeekSchedules = async (query: HomeQuery) => {
     },
     body: JSON.stringify(query),
   }).then<WeekSchedule>(async (res) => {
-    console.log(res);
     if (!res.ok) {
       return init_data(query.main_month);
     }

diff --git a/src/components/ScheduleDrawer/hooks/useScheduleForm.ts b/src/components/ScheduleDrawer/hooks/useScheduleForm.ts
@@ -15,6 +15,7 @@ import {
   CATEGORIES,
   INCOME_CATEGORY,
 } from "@components/ScheduleDrawer/pages/ScheduleFormPage/components/CategoryPicker/constants.ts";
+import { RequestSchedule } from "@app/types/schedule.ts";
 
 export const getType = (category: string) => {
   if (INCOME_CATEGORY.includes(category)) {
@@ -190,6 +191,26 @@ export const useScheduleForm = () => {
     );
   };
 
+  const getRepeat = () => {
+    if (!scheduleForm) return;
+
+    const type = { day: "일", week: "주", month: "달", year: "년" };
+    const repeatType = scheduleForm.repeat.kind_type;
+
+    if (repeatType === "none") return;
+
+    const term = scheduleForm.repeat[`${repeatType}_type`].repeat_term;
+    const repeat = `${term}${type[repeatType]}마다`;
+    switch (scheduleForm.period.kind_type) {
+      case "is_repeat_again":
+        return `${repeat} 반복`;
+      case "repeat_number_time":
+        return `${repeat} ${scheduleForm.period.repeat_number_time}회 반복`;
+      case "repeat_end_line":
+        return `${repeat} ${scheduleForm.period.repeat_end_line}까지 반복`;
+    }
+  };
+
   const updateAllDay = (state: {
     target: { value: boolean; name: string };
   }) => {
@@ -313,6 +334,7 @@ export const useScheduleForm = () => {
     setRandomGeneratedSchedule,
     updatePeriod,
     updateYearRepeat,
+    getRepeat,
     updateCategory,
   };
 };
diff --git a/src/components/ScheduleDrawer/pages/AssetFormPage/ExclusionInput.tsx b/src/components/ScheduleDrawer/pages/AssetFormPage/ExclusionInput.tsx
@@ -19,7 +19,7 @@ function ExclusionInput() {
       px={2.5}
       py={1}
     >
-      <Typography variant="h4" sx={{ color: "primary.main" }}>
+      <Typography variant="h2" color="#131416">
         {SCHEDULE_DRAWER.exclusion_title}
       </Typography>
       <Stack direction="row" alignItems="center">

diff --git a/src/components/ScheduleDrawer/pages/AssetFormPage/PaymentTypeInput.tsx b/src/components/ScheduleDrawer/pages/AssetFormPage/PaymentTypeInput.tsx
@@ -15,8 +15,9 @@ function PaymentTypeInput() {
   return (
     <Stack spacing="10px" px={2.5}>
       <Typography
-        variant="h4"
-        sx={{ color: "primary.main", py: 1, borderBottom: "1px solid #F7F7F8" }}
+        variant="h2"
+        color="#131416"
+        sx={{ py: 1, borderBottom: "1px solid #F7F7F8" }}
       >
         {SCHEDULE_DRAWER.set_payment_type_title}
       </Typography>

diff --git a/src/components/ScheduleDrawer/pages/AssetFormPage/SpendingInput.tsx b/src/components/ScheduleDrawer/pages/AssetFormPage/SpendingInput.tsx
@@ -62,8 +62,8 @@ function SpendingInput() {
       <Box
         py={1.5}
         sx={{
-          typography: "h4",
-          color: "primary.main",
+          typography: "h2",
+          color: "#131416",
           borderBottom: "1px solid #F7F7F8",
         }}
       >
@@ -175,7 +175,7 @@ function SpendingInput() {
         alignItems="center"
         py={1}
       >
-        <Typography variant="h4" sx={{ color: "primary.main" }}>
+        <Typography variant="h2" color="#131416">
           {SCHEDULE_DRAWER.fix_amount}
         </Typography>
         <Stack direction="row" alignItems="center">

diff --git a/src/components/ScheduleDrawer/pages/ScheduleFormPage/ScheduleFormPage.tsx b/src/components/ScheduleDrawer/pages/ScheduleFormPage/ScheduleFormPage.tsx
@@ -7,6 +7,7 @@ import RepeatInput from "./components/RepeatInput.tsx";
 import { useSelector } from "react-redux";
 import { selectScheduleForm } from "@redux/slices/scheduleSlice.tsx";
 import { Dispatch, SetStateAction } from "react";
+import SelectTemplate from "@components/ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate";
 
 export interface ScheduleFormPageProps {
   showError: boolean;
@@ -24,6 +25,7 @@ function ScheduleFormPage({
     return (
       <Stack spacing={2} pt={2}>
         <Stack spacing="10px">
+          <SelectTemplate />
           {/* 이벤트 제목 */}
           <NameInput showError={showError} />
 

diff --git a/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/CategoryInput.tsx b/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/CategoryInput.tsx
@@ -30,7 +30,7 @@ export default function CategoryInput({
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              <Box sx={{ color: "primary.main", fontWeight: 500 }}>
+              <Box sx={{ typography: "h2", color: "#131416" }}>
                 {SCHEDULE_DRAWER.category_title}
               </Box>
             </InputAdornment>

diff --git a/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/DateInput/InputDateTime.tsx b/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/DateInput/InputDateTime.tsx
@@ -67,7 +67,7 @@ function InputDateTime({ date, time, type, isAllDay }: InputDateTimeProps) {
 
   return (
     <Box sx={{ py: 1 }}>
-      <Typography variant="subtitle1" color="primary">
+      <Typography variant="h2" color="#131416">
         {title}
       </Typography>
 

diff --git a/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/DateInput/index.tsx b/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/DateInput/index.tsx
@@ -43,7 +43,9 @@ function DateInput({ showError }: DateInputProps) {
         alignItems="center"
         sx={{ height: "34px", py: 1 }}
       >
-        <Typography variant="h4">{SCHEDULE_DRAWER.all_day}</Typography>
+        <Typography variant="h2" color="#131416">
+          {SCHEDULE_DRAWER.all_day}
+        </Typography>
         <SwitchButton
           checked={isAllDay}
           handleChange={() =>

diff --git a/...awer/pages/ScheduleFormPage/components/DateInput/select/SelectDateTime/SelectDateTime.tsx b/...awer/pages/ScheduleFormPage/components/DateInput/select/SelectDateTime/SelectDateTime.tsx
@@ -22,7 +22,7 @@ function SelectDateTime({
       sx={{ height: "50px", borderBottom: "1px solid #F7F7F8", flexGrow: 1 }}
     >
       <Box>{dateTime}</Box>
-      <ExpandMoreRoundedIcon />
+      <ExpandMoreRoundedIcon color="primary" />
     </Stack>
   );
 }

diff --git a/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/NameInput.tsx b/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/NameInput.tsx
@@ -38,7 +38,7 @@ function NameInput({ showError }: NameInputProps) {
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              <Box sx={{ color: "primary.main", fontWeight: 500 }}>
+              <Box sx={{ typography: "h2", color: "#131416" }}>
                 {SCHEDULE_DRAWER.name}
               </Box>
             </InputAdornment>

diff --git a/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/RepeatInput.tsx b/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/RepeatInput.tsx
@@ -10,7 +10,7 @@ interface RepeatInputProps {
 }
 
 function RepeatInput({ repeatType, onClick, handleChange }: RepeatInputProps) {
-  const { updateRepeat } = useScheduleForm();
+  const { updateRepeat, getRepeat } = useScheduleForm();
 
   const changeRepeat = (state: UpdateStateInterface) => {
     handleChange
@@ -23,10 +23,16 @@ function RepeatInput({ repeatType, onClick, handleChange }: RepeatInputProps) {
 
   return (
     <Box>
-      <Stack direction="row" justifyContent="space-between" sx={{ px: 2.5 }}>
-        <Box sx={{ color: "primary.main", flexGrow: 1 }} onClick={onClick}>
+      <Stack direction="row" spacing={1} alignItems="end" sx={{ px: 2.5 }}>
+        <Box sx={{ typography: "h2" }} onClick={onClick}>
           반복
         </Box>
+        <Box
+          sx={{ flexGrow: 1, typography: "subtitle2", color: "primary.main" }}
+          onClick={onClick}
+        >
+          {getRepeat()}
+        </Box>
         <SwitchButton
           checked={repeatType !== "none"}
           handleChange={() =>

diff --git a/...onents/ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/SelectTemplate.tsx b/...onents/ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/SelectTemplate.tsx
@@ -0,0 +1,55 @@
+import { Box, Stack, Typography } from "@mui/material";
+import { SCHEDULE_DRAWER } from "@constants/schedule.ts";
+import { useState } from "react";
+import { TemplateBadge } from "@components/ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/SelecteTemplate.styles.ts";
+
+function SelectTemplate() {
+  const [selected, setSelected] = useState(0);
+  const templates = [
+    {
+      id: 1,
+      name: "이전 템플릿",
+    },
+    {
+      id: 2,
+      name: "이전 템플릿",
+    },
+    {
+      id: 3,
+      name: "이전 템플릿",
+    },
+  ];
+
+  return (
+    <Box px={2.5}>
+      <Stack py={1} spacing={1.5} sx={{ borderBottom: "1px solid #F7F7F8" }}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Typography variant="h2" color="#131416">
+            {SCHEDULE_DRAWER.template}
+          </Typography>
+          <Typography fontSize="12px" fontWeight={600} color="#8C919C">
+            {SCHEDULE_DRAWER.showAllTemplate}
+          </Typography>
+        </Stack>
+
+        <Stack direction="row" spacing={1}>
+          {templates.map((t) => (
+            <TemplateBadge
+              key={t.id}
+              $selected={selected === t.id}
+              onClick={() => setSelected(t.id)}
+            >
+              {t.name}
+            </TemplateBadge>
+          ))}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
+
+export default SelectTemplate;
diff --git a/...ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/SelecteTemplate.styles.ts b/...ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/SelecteTemplate.styles.ts
@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+
+export const TemplateBadge = styled.div<{ $selected: boolean }>`
+  display: flex;
+  padding: 7px 10px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  color: ${({ $selected }) => ($selected ? "#FFF" : "#8C919C")};
+  background-color: ${({ $selected }) => ($selected ? "#735BF2" : "#DEE0E3")};
+`;
diff --git a/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/index.ts b/src/components/ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/index.ts
@@ -0,0 +1,3 @@
+import SelectTemplate from "@components/ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/SelectTemplate.tsx";
+
+export default SelectTemplate;
diff --git a/src/constants/schedule.ts b/src/constants/schedule.ts
@@ -123,6 +123,8 @@ export const SCHEDULE_DRAWER = {
     read: "일정",
     modify: "일정 편집",
   },
+  template: "기록된 반복 일정",
+  showAllTemplate: "전체보기",
   name: "제목",
   date: "날짜",
   start: "시작",
@@ -139,7 +141,7 @@ export const SCHEDULE_DRAWER = {
   won: "원",
   expected_spending: "예상 비용",
   fix_amount: "금액 고정",
-  set_payment_type_title: "일정 중요도",
+  set_payment_type_title: "결제 수단",
   account: "ACCOUNT", // 저장 데이터와 연동되어 있음 (수정금지)
   card: "CARD", // 저장 데이터와 연동되어 있음 (수정금지)
   cash: "CASH", // 저장 데이터와 연동되어 있음 (수정금지)

diff --git a/src/hooks/useSchedule.ts b/src/hooks/useSchedule.ts
@@ -44,6 +44,7 @@ const useSchedule = () => {
     };
 
     createSchedule(scheduleWithUuid);
+    resetSchedule();
   };
 
   const handleDeleteSchedule = async (
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import SelectTemplate from "@components/ScheduleDrawer/pages/ScheduleFormPage/components/SelectTemplate/SelectTemplate.tsx";

		export default SelectTemplate;
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,6 +44,7 @@ const useSchedule = () => { @@
         };
         createSchedule(scheduleWithUuid);
+        resetSchedule();
       };
       const handleDeleteSchedule = async (
@@ Expand Down @@