Upt. 카테고리

ddok-ddak · Jul 7, 2024 · 8c5e525 · 8c5e525
1 parent a7d4624
commit 8c5e525
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 18 deletions.
diff --git a/src/api/auth.ts b/src/api/auth.ts
@@ -201,7 +201,7 @@ export const setTemplate = async (templateType: UserTemplateType) => {
 export const updateTemplate = async (templateType: UserTemplateType) => {
   const response = await callAPI({
     url: '/api/v1/members/custom/category-template',
-    method: 'PUT',
+    method: 'PATCH',
     body: { templateType },
   });
 

diff --git a/src/pages/category/CategoryPage.tsx b/src/pages/category/CategoryPage.tsx
@@ -7,9 +7,9 @@ import {
   Typography,
 } from '@mui/material';
 import { Box } from '@mui/system';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import Circle from '../../components/common/Circle';
 import FolderTop from '../../components/common/FolderTop';
@@ -27,7 +27,7 @@ import { currentUserInfo } from '@/store/info';
 import { getCategories } from '@/api/category.api';
 import { modalState } from '@/store/modal';
 import { modalAnswer } from '@/constants/message';
-import { UserData, UserTemplateType } from '@/api/auth';
+import { updateTemplate, UserData, UserTemplateType } from '@/api/auth';
 import { useModalCommon } from '@/hooks/modalCommon';
 
 export interface MainCategoryProps {
@@ -71,23 +71,23 @@ export const UserModeList: ModeProps[] = [
     name: '일반인',
     modalTitle: '일반인 모드 선택 시 기존 데이터가 삭제됩니다.',
     modalMsg:
-      '학업, 직장 카테고리와 데이터가 삭제됩니다. 그래도 변경 하시겠습니까?',
+      '학업, 직장 카테고리와 데이터가 삭제됩니다.\n그래도 변경 하시겠습니까?',
   },
   {
     id: 'worker',
     type: 'WORKER',
     name: '직장인',
     modalTitle: '직장인 모드 선택 시 기존 데이터가 삭제됩니다.',
     modalMsg:
-      '학업 카테고리와 데이터가 삭제되고 직장 카테고리가 새롭게 추가됩니다. 그래도 변경 하시겠습니까?',
+      '학업 카테고리와 데이터가 삭제되고 직장 카테고리가 새롭게 추가됩니다.\n그래도 변경 하시겠습니까?',
   },
   {
     id: 'student',
     type: 'STUDENT',
     name: '학생',
     modalTitle: '학생 모드 선택 시 기존 데이터가 삭제됩니다.',
     modalMsg:
-      '직장 카테고리와 데이터가 삭제되고 학업 카테고리가 새롭게 추가됩니다. 그래도 변경 하시겠습니까?',
+      '직장 카테고리와 데이터가 삭제되고 학업 카테고리가 새롭게 추가됩니다.\n그래도 변경 하시겠습니까?',
   },
 ];
 
@@ -103,19 +103,22 @@ const CategoryPage = () => {
     selectedSubCategoryState,
   );
 
-  const setUserInfo = useSetRecoilState<UserData>(currentUserInfo);
+  const [userInfo, setUserInfo] = useRecoilState<UserData>(currentUserInfo);
   const setModalInfo = useSetRecoilState(modalState);
   const categoryMode = useRecoilValue<CategoryViewType>(categoryViewMode);
 
   const [categories, setCategories] = useState<MainCategoryProps[]>([]);
   const [currentUserMode, setCurrentUserMode] = useState<ModeProps>();
+  const refValue = useRef(currentUserMode);
+
+  useEffect(() => {
+    refValue.current = currentUserMode;
+  }, [currentUserMode]);
 
   const getUserInfo = () => {
-    const data: UserData = { email: '', nickname: '', templateType: 'STUDENT' };
-    setUserInfo(data);
     setCurrentUserMode(
       UserModeList.filter((userMode: ModeProps) => {
-        return userMode.type === data.templateType;
+        return userMode.type === userInfo.templateType;
       })[0],
     );
   };
@@ -171,7 +174,21 @@ const CategoryPage = () => {
       btn1Text: modalAnswer.no,
       btn1ClickHandler: closeModal,
       btn2Text: modalAnswer.yes,
-      btn2ClickHandler: closeModal,
+      btn2ClickHandler: async (event: any, reason: any) => {
+        const type = refValue.current!.type;
+        closeModal(event, reason);
+
+        await updateTemplate(type).then((response) => {
+          if (response.status === 'SUCCESS') {
+            setUserInfo({
+              ...userInfo,
+              templateType: type
+            });
+          } else {
+            alert('error');
+          }
+        });
+      },
     });
   };
 
@@ -203,6 +220,7 @@ const CategoryPage = () => {
               display: 'flex',
               flexDirection: 'row',
               justifyContent: 'space-evenly',
+              gap: '15px'
             }}
           >
             {UserModeList.map((mode, idx) => {
@@ -252,16 +270,16 @@ const CategoryPage = () => {
           </Box>
         </Container>
         <Spacer y={27} />
-      </Box>
-
-      <Divider
+        <Divider
         sx={{
           width: '100vw',
           height: '3px',
           backgroundColor: 'chart.customBackground',
           border: 'none',
         }}
       />
+      </Box>
+
 
       <Spacer y={27} />
 

diff --git a/src/pages/record/EditRecordPage.tsx b/src/pages/record/EditRecordPage.tsx
@@ -12,7 +12,6 @@ import {
 } from '@mui/material';
 
 import { BaseSyntheticEvent, ReactElement, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
 
@@ -53,6 +52,7 @@ import { theme } from '@/styles';
 import { buttonText } from '@/constants/message';
 import { popupShowState, popupSuccessState } from '@/store/popupMessage';
 import { MainCategoryProps, SubCategoryProps } from '../category/CategoryPage';
+import { categoryViewMode } from '@/store/category';
 
 export interface SelectedRangeData {
   start: Date;
@@ -131,6 +131,8 @@ const EditRecordPage = (): ReactElement => {
 
   const [eventTimeType, setEventTimeType] = useState<string>('start');
 
+  const setCategoryMode = useSetRecoilState<CategoryViewType>(categoryViewMode);
+
   /**
    * render time picker swiper
    * @param type type (hour / minute / period)
@@ -757,8 +759,10 @@ const EditRecordPage = (): ReactElement => {
         <Container sx={{ textAlign: 'right' }}>
           <Button
             variant="text"
-            component={Link}
-            to="/category"
+            onClick={() => {
+              setCategoryMode('');
+              navigate('/category');
+            }}
             sx={{ color: 'grey.500', paddingTop: '17px' }}
           >
             카테고리 설정