Merge pull request #25 from Read-bird/feature/yj

기능수정, 추가
Read-bird · Dec 27, 2023 · f21f478 · f21f478
2 parents 4c68af7 + c1a6f41
commit f21f478
Show file tree

Hide file tree

Showing 30 changed files with 1,305 additions and 276 deletions.
diff --git a/src/api/plan.ts b/src/api/plan.ts
@@ -18,18 +18,3 @@ export const getPlanList = async (date: string): Promise<TResponse<TPlanData | s
     return { error: true, success: false, data: '' };
   }
 };
-
-// 플랜 삭제하기
-export const deletePlan = async (planId: number, userId: number): Promise<TResponse<string>> => {
-  try {
-    const result = await authFetch.delete(`/api/plan/${planId}`, { data: { userId } });
-
-    return { error: false, success: true, data: result.data };
-  } catch (e: any) {
-    if (e instanceof AxiosError) {
-      return { error: true, success: false, data: e.response?.data.message ?? '' };
-    }
-
-    return { error: true, success: false, data: '' };
-  }
-};
diff --git a/src/api/types/planRegister.ts b/src/api/types/planRegister.ts
@@ -1,10 +1,29 @@
+import { TBook } from '@/store/reducers';
+
 export interface IRegisterForm {
-    planId: number | null;
-    title: string | null;
-    author: string | null;
-    publisher: string | null
-    totalPage: string | number | null;
-    currentPage: string;
-    startDate: string;
-    endDate: string;
+  planId: number | null;
+  title: string | null;
+  author: string | null;
+  publisher: string | null;
+  totalPage: string | number | null;
+  currentPage: string;
+  startDate: string;
+  endDate: string;
 }
+
+export type TRegisterFormValue = {
+  planId: number | null;
+  title: string | null;
+  author: string | null;
+  publisher: string | null;
+  totalPage: number;
+  currentPage: number;
+  startDate: string;
+  endDate: string;
+  bookId: number | null;
+  searchData: {
+    bookList: TBook[];
+    page: number;
+    totalPage: number;
+  };
+};
diff --git a/src/components/common/Calendar/Calendar.tsx b/src/components/common/Calendar/Calendar.tsx
@@ -1,20 +1,18 @@
 import { TPlanRecord } from '@api/types';
 import { DayBird } from '@components/common/DayBird';
 import { cls, getClassByStatus } from '@utils/classname';
-import { convertObject } from '@utils/function';
 import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import ReactCalendar, { TileContentFunc, TileDisabledFunc } from 'react-calendar';
 import '../../../styles/calendar.css';
 
 type TProps = {
   currentDate: Date;
-  record: TPlanRecord[];
+  record: Record<string, TPlanRecord>;
   changeCurrentDate: (date: string) => void;
 };
 
 export const Calendar = ({ record, currentDate, changeCurrentDate }: TProps) => {
-  const planDateRecord = useMemo(() => convertObject(record, 'date'), [record]);
   const onChange = (value: Date) => {
     changeCurrentDate(dayjs(value).format());
   };
@@ -23,7 +21,7 @@ export const Calendar = ({ record, currentDate, changeCurrentDate }: TProps) =>
     ({ date }) => {
       const formatDate = dayjs(date).format('YYYY-MM-DD');
 
-      const data = planDateRecord[formatDate];
+      const data = record[formatDate];
       const className = getClassByStatus(date, data?.achievementStatus ?? null, currentDate);
 
       return (
@@ -36,7 +34,7 @@ export const Calendar = ({ record, currentDate, changeCurrentDate }: TProps) =>
         </DayBird>
       );
     },
-    [planDateRecord, currentDate]
+    [record, currentDate]
   );
 
   const tileDisabled: TileDisabledFunc = useCallback(

diff --git a/src/components/common/Loading/Dots.tsx b/src/components/common/Loading/Dots.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 
 export const Dots = () => {
   const intervalId = useRef<NodeJS.Timeout | null>(null);
-  const [dots, setDots] = useState('.');
+  const [dots, setDots] = useState('...');
 
   useEffect(() => {
     if (intervalId.current !== null) {

diff --git a/src/components/templates/HomeTemplate/Month/MonthTemplate.tsx b/src/components/templates/HomeTemplate/Month/MonthTemplate.tsx
@@ -1,11 +1,15 @@
-import { setCurrentDate } from '@/store/reducers';
+import { setCurrentDate, setMonthRecord } from '@/store/reducers';
 import { TAppDispatch, TRootState } from '@/store/state';
+import { axiosFetch } from '@api/axios';
 import { EAchievementStatus } from '@api/types';
 import { IconBook, IconDayBirdMini, IconSuccess } from '@assets/icons';
 import { Calendar } from '@components/common/Calendar';
 import { Spacing } from '@components/common/Spacing';
-import { dummy } from '@mocks/index';
-import { useCallback, useMemo } from 'react';
+import { Alert } from '@utils/Alert';
+import { convertError } from '@utils/errors';
+import { AxiosError } from 'axios';
+import dayjs from 'dayjs';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { DefinitionList, FlexBox, GuideLabel, GuideText, Section, SubTitle, Wrap } from './Styled';
@@ -18,7 +22,7 @@ const data = {
 };
 
 export const MonthTemplate = () => {
-  const { monthCurrentDate } = useSelector((state: TRootState) => state.planStore);
+  const { monthCurrentDate, monthRecord } = useSelector((state: TRootState) => state.planStore);
   const nowDate = useMemo(() => new Date(monthCurrentDate), [monthCurrentDate]);
   const dispatch = useDispatch<TAppDispatch>();
   const navigate = useNavigate();
@@ -31,11 +35,37 @@ export const MonthTemplate = () => {
     [dispatch, navigate]
   );
 
+  const getRecordList = async () => {
+    try {
+      const response = await axiosFetch({
+        url: '/api/record',
+        method: 'get',
+        options: {
+          params: {
+            date: dayjs(monthCurrentDate).format('YYYY-MM')
+          }
+        }
+      });
+
+      if (response.status === 200) {
+        dispatch(setMonthRecord(response.data.record));
+      }
+    } catch (e) {
+      if (e instanceof AxiosError) {
+        Alert.error({ title: convertError(e.response?.data.message) });
+      }
+    }
+  };
+
+  useEffect(() => {
+    getRecordList();
+  }, [monthCurrentDate]);
+
   return (
     <Wrap>
       <Section>
         <Calendar
-          record={dummy.monthCalendar(new Date())}
+          record={monthRecord}
           currentDate={nowDate}
           changeCurrentDate={changeCurrentDate}
         />

diff --git a/src/components/templates/HomeTemplate/Plan/Dots/Dots.tsx b/src/components/templates/HomeTemplate/Plan/Dots/Dots.tsx
@@ -1,12 +1,16 @@
-import { deletePlan } from '@api/plan';
+import { deletePlanData } from '@/store/reducers';
+import { axiosFetch } from '@api/axios';
 import { IconReact } from '@assets/icons';
 import { MiniModal } from '@components/templates/HomeTemplate/Plan/Modal';
+import { PlanModalTemplate } from '@components/templates/PlanModalTemplate';
 import { colors } from '@style/global-style';
 import { Alert } from '@utils/Alert';
+import { convertError } from '@utils/errors';
+import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import { MouseEvent, useCallback, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
-import {PlanModalTemplate} from "@components/templates/PlanModalTemplate";
 
 type TProps = {
   planId: number;
@@ -18,6 +22,7 @@ export const Dots = ({ planId, userId, selectDate }: TProps) => {
   const [isOpen, setOpen] = useState<number | null>(null);
   const isSame = useMemo(() => dayjs(selectDate).isSame(new Date(), 'date'), [selectDate]);
   const [isEditModal, setIsEditModal] = useState(false);
+  const dispatch = useDispatch();
 
   const handleClose = useCallback(() => {
     setOpen(null);
@@ -38,6 +43,7 @@ export const Dots = ({ planId, userId, selectDate }: TProps) => {
     setIsEditModal(true);
   }, []);
 
+  // 플랜삭제
   const handleClickRemove = useCallback(
     (planId: number, userId: number | null) => () => {
       if (userId === null) return;
@@ -47,13 +53,29 @@ export const Dots = ({ planId, userId, selectDate }: TProps) => {
         text: '* 삭제된 플랜은 마이페이지에서 2주동안 보관됩니다.',
         action: async (result) => {
           if (result.isConfirmed) {
-            const result = await deletePlan(planId, userId);
-            if (result.success) {
-              Alert.success({ title: '삭제되었습니다!' });
-            } else {
-              Alert.error({ title: `${result.data.replace('Bad Request :', '')}` });
+            try {
+              const result = await axiosFetch({
+                url: `api/plan/${planId}`,
+                method: 'delete',
+                options: {
+                  data: { userId }
+                }
+              });
+
+              if (result.status === 200) {
+                Alert.success({
+                  title: '삭제되었습니다!',
+                  action: () => {
+                    dispatch(deletePlanData(planId));
+                    setOpen(null);
+                  }
+                });
+              }
+            } catch (e) {
+              if (e instanceof AxiosError) {
+                Alert.error({ title: convertError(e.response?.data.message) });
+              }
             }
-            setOpen(null);
           }
         }
       });
@@ -75,13 +97,12 @@ export const Dots = ({ planId, userId, selectDate }: TProps) => {
         <Button onClick={handleClickRemove(planId, userId)}>삭제</Button>
       </MiniModal>
 
-        <PlanModalTemplate
-            isOpen={isEditModal}
-            setIsOpen={setIsEditModal}
-            modalIndex={1}
-            isEdit={true}
-            planId={planId}
-        />
+      <PlanModalTemplate
+        isOpen={isEditModal}
+        setIsOpen={setIsEditModal}
+        modalIndex={1}
+        planId={planId}
+      />
     </Wrap>
   );
 };

diff --git a/src/components/templates/HomeTemplate/Plan/Plan.tsx b/src/components/templates/HomeTemplate/Plan/Plan.tsx
@@ -1,37 +1,62 @@
 import { TRootState } from '@/store/state';
-import { TPlan } from '@api/types';
+import { TPlan, TRegisterFormValue } from '@api/types';
 import { Images } from '@assets/images';
 import { ProgressBar } from '@components/common/ProgressBar';
 import { Spacing } from '@components/common/Spacing';
 import { Dots } from '@components/templates/HomeTemplate/Plan/Dots';
 import { Stamp } from '@components/templates/HomeTemplate/Plan/Stamp';
 import { calculateDday } from '@utils/calendar';
 import { useMemo } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 type TProps = TPlan;
 
-export const Plan = ({
-  coverImage,
-  title,
-  target,
-  totalPage,
-  currentPage,
-  planId,
-  endDate,
-  recordStatus
-}: TProps) => {
+export const Plan = (props: TProps) => {
+  const {
+    coverImage,
+    title,
+    target,
+    totalPage,
+    currentPage,
+    planId,
+    endDate,
+    startDate,
+    recordStatus,
+    author,
+    publisher
+  } = props;
+
   const imgStyle = useMemo(() => ({ borderRadius: '10px' }), []);
   const { currentDate } = useSelector((state: TRootState) => state.planStore);
   const { userId } = useSelector((state: TRootState) => state.userStore);
+  const methods = useForm<TRegisterFormValue>({
+    mode: 'onSubmit',
+    defaultValues: {
+      bookId: null,
+      planId,
+      author,
+      currentPage,
+      startDate,
+      endDate,
+      publisher,
+      title,
+      totalPage,
+      searchData: {
+        bookList: [],
+        page: 1,
+        totalPage: 0
+      }
+    }
+  });
 
   return (
     <Wrap>
       <ImageWrap>
         <Images
           imgUrl={coverImage ?? undefined}
-          imgAlt={`${title} 책 표지 이미지`}
+          imgAlt={`${title.padEnd(10, '')} 책 표지 이미지`}
           imgWidth={55}
           imgHeight={78}
           imgStyle={imgStyle}
@@ -58,7 +83,9 @@ export const Plan = ({
         />
       </ProgressWrap>
       <StatusWrap>
-        <Dots planId={planId} userId={userId} selectDate={currentDate} />
+        <FormProvider {...methods}>
+          <Dots planId={planId} userId={userId} selectDate={currentDate} />
+        </FormProvider>
         <Stamp
           planId={planId}
           recordStatus={recordStatus}

diff --git a/src/components/templates/HomeTemplate/Plan/Stamp/Stamp.tsx b/src/components/templates/HomeTemplate/Plan/Stamp/Stamp.tsx
@@ -5,6 +5,7 @@ import { MiniModal } from '@components/templates/HomeTemplate/Plan/Modal';
 import { colors } from '@style/global-style';
 import { Alert } from '@utils/Alert';
 import { cls } from '@utils/classname';
+import { convertError } from '@utils/errors';
 import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import { MouseEvent, useCallback, useMemo, useState } from 'react';
@@ -56,7 +57,7 @@ export const Stamp = ({ planId, recordStatus, selectDate, maxPage }: TProps) =>
       console.log(result.data.newCharacter);
     } catch (e) {
       if (e instanceof AxiosError) {
-        Alert.error({ title: `${e.response?.data.message}` });
+        Alert.error({ title: convertError(e.response?.data.message) });
       }
     } finally {
       setOpen(null);

diff --git a/src/components/templates/HomeTemplate/Styled.tsx b/src/components/templates/HomeTemplate/Styled.tsx
@@ -12,7 +12,7 @@ export const Wrap = styled.div`
 export const Head = styled.section`
   position: relative;
   width: 100%;
-  flex: 0 0 90px;
+  flex: 0 0 95px;
 
   display: flex;
   flex-direction: column;
@@ -24,7 +24,7 @@ export const Body = styled.section`
   position: relative;
   flex: 1;
   width: 100%;
-  height: calc(100vh - 160px);
+  height: calc(100vh - 165px);
   border-radius: 50px 50px 0 0%;
   background-color: ${({ theme }) => theme.colors.white};