Merge branch 'dev' into feature-074

teamViNO · Feb 20, 2024 · 932e2cc · 932e2cc
2 parents 75e2d51 + c25eae5
commit 932e2cc
Show file tree

Hide file tree

Showing 19 changed files with 187 additions and 441 deletions.
diff --git a/src/components/PhoneCheck.tsx b/src/components/PhoneCheck.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { sendSMSAPI, checkSMSAPI, sendSMSFindAPI } from '@/apis/sms';
 import Container from '@/styles/PhoneCheck';
+import { AxiosError } from "axios";
 
 
 interface PhoneCheckProps {
@@ -84,7 +85,7 @@ const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel, type}) =
       const handleCertifyNum = async () => {
             if(isSend){
                 SetIsCheck(false);
-                setTime(10);
+                setTime(5*60);
             }
             try{
                 const {data} = type === true ? (await sendSMSAPI({
@@ -100,7 +101,9 @@ const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel, type}) =
                         setToken(data.result.token);
                     }
             } catch(e){
-                setPhoneCertify(true);
+                const err = e as AxiosError;
+                if(err.response?.status === 400)
+                    setPhoneCertify(true);
             }
 
       }

diff --git a/src/components/layout/header/alarm/AlarmItem.tsx b/src/components/layout/header/alarm/AlarmItem.tsx
@@ -70,20 +70,25 @@ const AlarmItem = ({
   };
 
   const handleClick = async () => {
-    if (alarm.type === 'notice') {
-      navigate('/guide');
-      onClose();
-    }
-    if (alarm.type === 'video' && !alarm.is_confirm && alarm.alarm_id !== 999) {
+    if (!alarm.is_confirm) {
       try {
         await confirmSelectAlarmAPI({ alarms: [alarm.alarm_id] });
         onRefresh();
-        navigate(`/summary/${alarm.video_id}`);
-        onClose();
       } catch (e) {
         console.error(e);
       }
     }
+    if (alarm.type === 'notice') {
+      navigate('/guide');
+    }
+    if (
+      alarm.type === 'video' &&
+      alarm.state === 'success' &&
+      alarm.alarm_id !== 999
+    ) {
+      navigate(`/summary/${alarm.video_id}`);
+    }
+    onClose();
   };
 
   const handleClickRemoveButton: React.MouseEventHandler<HTMLButtonElement> = (

diff --git a/src/components/layout/sideBar/AddCategory.tsx b/src/components/layout/sideBar/AddCategory.tsx
@@ -1,18 +1,22 @@
 import * as AddCategoryStyle from '@/styles/layout/sideBar/AddCategory.style';
 import PlusSvg from '@/assets/icons/plus.svg?react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { topCategoryModalState } from '@/stores/modal';
+import { addCategoryModalState } from '@/stores/modal';
 import { userTokenState } from '@/stores/user';
 import { useState } from 'react';
 import NoticeModal from '@/components/modals/NoticeModal';
 
 const AddCategory = () => {
   const isUser = useRecoilValue(userTokenState);
-  const setTopCategoryModal = useSetRecoilState(topCategoryModalState);
+  const setIsAddCategoryModalOpen = useSetRecoilState(addCategoryModalState);
   const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
 
   const openAddModal = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setTopCategoryModal(true);
+    setIsAddCategoryModalOpen({
+      location: 'top',
+      isOpen: true,
+      categoryId: -1,
+    });
     e.stopPropagation();
   };
 

diff --git a/src/components/layout/sideBar/SubCategory.tsx b/src/components/layout/sideBar/SubCategory.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import * as SubCategoryStyles from '@/styles/layout/sideBar/SubCategory.style';
 import Option from './Option';
 import handleDrag from '@/utils/handleDrag';
-import { ISubFolderProps } from 'types/category';
+import { IEditProps, ISubFolderProps } from 'types/category';
 import EditCategoryName from '@/components/category/EditCategoryName';
 import useCreateToast from '@/hooks/useCreateToast';
 
@@ -13,10 +13,8 @@ interface ISubCategoryProps {
   subId: number;
   subFolder: ISubFolderProps;
   grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>;
-  isEditing: { activated: boolean; categoryId: number };
-  setIsEditing: React.Dispatch<
-    React.SetStateAction<{ activated: boolean; categoryId: number }>
-  >;
+  isEditing: IEditProps;
+  setIsEditing: React.Dispatch<React.SetStateAction<IEditProps>>;
   setIsDeleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   putCategoryFolder: () => void;
   setCategoryId: React.Dispatch<React.SetStateAction<number | null>>;

diff --git a/src/components/layout/sideBar/TopCategory.tsx b/src/components/layout/sideBar/TopCategory.tsx
@@ -7,7 +7,12 @@ import useOutsideClick from '@/hooks/useOutsideClick';
 import SubCategory from './SubCategory';
 import Option from './Option';
 import handleDrag from '@/utils/handleDrag';
-import { IFolderProps, ISubFolderProps } from 'types/category';
+import {
+  IAddCategoryModalProps,
+  IEditProps,
+  IFolderProps,
+  ISubFolderProps,
+} from 'types/category';
 import EditCategoryName from '@/components/category/EditCategoryName';
 
 interface ITopCategoryProps {
@@ -17,11 +22,11 @@ interface ITopCategoryProps {
   grabedCategory: React.MutableRefObject<ISubFolderProps | undefined>;
   dropedCategory: React.MutableRefObject<number | undefined>;
   category: IFolderProps;
-  isEditing: { activated: boolean; categoryId: number };
-  setIsEditing: React.Dispatch<
-    React.SetStateAction<{ activated: boolean; categoryId: number }>
+  isEditing: IEditProps;
+  setIsEditing: React.Dispatch<React.SetStateAction<IEditProps>>;
+  setIsAddCategoryModalOpen: React.Dispatch<
+    React.SetStateAction<IAddCategoryModalProps>
   >;
-  setIsSubCategoryModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setIsDeleteModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setCategoryId: React.Dispatch<React.SetStateAction<number | null>>;
   putCategoryFolder: () => void;
@@ -36,7 +41,7 @@ const TopCategory = ({
   category,
   isEditing,
   setIsEditing,
-  setIsSubCategoryModalOpen,
+  setIsAddCategoryModalOpen,
   setIsDeleteModalOpen,
   putCategoryFolder,
   setCategoryId,
@@ -53,7 +58,12 @@ const TopCategory = ({
   const handleOptionClick = (e: React.MouseEvent, option: string) => {
     e.stopPropagation();
     if (option === '추가') {
-      setIsSubCategoryModalOpen(true);
+      console.log(category.categoryId);
+      setIsAddCategoryModalOpen({
+        location: 'sub',
+        isOpen: true,
+        categoryId: category.categoryId,
+      });
     } else if (option === '수정') {
       setIsEditing({ activated: true, categoryId: category.categoryId });
       setBeforeEdit(edit);
@@ -101,7 +111,6 @@ const TopCategory = ({
   return (
     <>
       <TopCategoryStyles.Container
-        className={`${topId}`}
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
         onDragEnd={putCategoryFolder}

diff --git a/src/components/layout/sideBar/UserMode.tsx b/src/components/layout/sideBar/UserMode.tsx
@@ -1,8 +1,8 @@
 import LookSvg from '@/assets/icons/look.svg?react';
 import * as UserModeStyle from '@/styles/layout/sideBar/UserMode.style';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
-import { topCategoryModalState } from '@/stores/modal';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { addCategoryModalState } from '@/stores/modal';
 import AddCategoryModal from '@/components/modals/AddCategoryModal';
 import SuccessAddCategoryModal from '@/components/modals/SuccessAddCategoryModal';
 import { useRef, useState } from 'react';
@@ -16,15 +16,16 @@ import useUpdateCategories from '@/hooks/useUpdateCategories';
 import useCreateToast from '@/hooks/useCreateToast';
 
 const UserMode = () => {
-  const isTopCategoryModalOpen = useRecoilValue(topCategoryModalState);
+  const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useRecoilState(
+    addCategoryModalState,
+  );
   const [isSuccessAddCategoryModalOpen, setIsSuccessAddCategoryModalOpen] =
     useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [categoryName, setCategoryName] = useState('');
   const [categoryId, setCategoryId] = useState<number | null>(null);
   const [to, setTo] = useState('');
   const categories = useRecoilValue(categoryState);
-  const [isSubCategoryModalOpen, setIsSubCategoryModalOpen] = useState(false);
   const grabedCategory = useRef<ISubFolderProps | undefined>(undefined);
   const dropedCategory = useRef<number | undefined>(undefined);
   const { createToast } = useCreateToast();
@@ -96,22 +97,19 @@ const UserMode = () => {
             category={category}
             isEditing={isEditing}
             setIsEditing={setIsEditing}
-            setIsSubCategoryModalOpen={setIsSubCategoryModalOpen}
+            setIsAddCategoryModalOpen={setIsAddCategoryModalOpen}
             setIsDeleteModalOpen={setIsDeleteModalOpen}
             putCategoryFolder={putCategoryFolder}
             setCategoryId={setCategoryId}
             key={`${category.name}-${category.categoryId}`}
           />
         ))}
       </>
-      {(isTopCategoryModalOpen || isSubCategoryModalOpen) && (
+      {isAddCategoryModalOpen.isOpen && (
         <AddCategoryModal
-          isTopCategoryModalOpen={isTopCategoryModalOpen}
-          setIsSubCategoryModalOpen={setIsSubCategoryModalOpen}
           categoryName={categoryName}
           setCategoryName={setCategoryName}
           setIsSuccessAddCategoryModalOpen={setIsSuccessAddCategoryModalOpen}
-          topCategoryId={topId}
           setTo={setTo}
         />
       )}

diff --git a/src/components/modals/AddCategoryModal.tsx b/src/components/modals/AddCategoryModal.tsx
@@ -1,6 +1,6 @@
 import useOutsideClick from '@/hooks/useOutsideClick';
-import { topCategoryModalState } from '@/stores/modal';
-import { useSetRecoilState } from 'recoil';
+import { addCategoryModalState } from '@/stores/modal';
+import { useRecoilState } from 'recoil';
 import OpenFileSvg from '@/assets/icons/open-file.svg?react';
 import CloseSvg from '@/assets/icons/close.svg?react';
 import * as AddTopCategoryModalStyles from '@/styles/modals/AddCategoryModal.style';
@@ -17,22 +17,18 @@ import useUpdateCategories from '@/hooks/useUpdateCategories';
 import useCreateToast from '@/hooks/useCreateToast';
 
 interface IAddTopCategoryModalProps extends ICommonModalProps {
-  isTopCategoryModalOpen: boolean;
-  setIsSubCategoryModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  topCategoryId: number;
   setTo: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const AddCategoryModal = ({
-  isTopCategoryModalOpen,
-  setIsSubCategoryModalOpen,
   categoryName,
   setCategoryName,
   setIsSuccessAddCategoryModalOpen,
-  topCategoryId,
   setTo,
 }: IAddTopCategoryModalProps) => {
-  const setIsTopCategoryModalOpen = useSetRecoilState(topCategoryModalState);
+  const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useRecoilState(
+    addCategoryModalState,
+  );
   const { createToast } = useCreateToast();
   const { updateCategories } = useUpdateCategories();
   const { editText } = handleEdit();
@@ -42,13 +38,14 @@ const AddCategoryModal = ({
   const categoryNameRegex = /^[a-zA-Z0-9가-힣\s]*$/;
   const checkCategoryNameRegex = categoryNameRegex.test(categoryName);
   const addEnabled = categoryName.length > 0 && checkCategoryNameRegex;
+  const isTopAdd = isAddCategoryModalOpen.location === 'top';
 
-  const onCloseModal = () => {
-    isTopCategoryModalOpen
-      ? setIsTopCategoryModalOpen(false)
-      : setIsSubCategoryModalOpen(false);
-    setCategoryName('');
-  };
+  const onCloseModal = () =>
+    setIsAddCategoryModalOpen({
+      location: '',
+      isOpen: false,
+      categoryId: -1,
+    });
 
   const [topCategoryModalRef] = useOutsideClick<HTMLDivElement>(onCloseModal);
 
@@ -60,13 +57,13 @@ const AddCategoryModal = ({
       createToast(`'기타' 이름은 사용하실 수 없어요`);
       return;
     }
-    const response = isTopCategoryModalOpen
+    const response = isTopAdd
       ? await postTopCategroy(categoryName)
-      : await postSubCategroy(categoryName, topCategoryId);
+      : await postSubCategroy(categoryName, isAddCategoryModalOpen.categoryId);
     if (response.isSuccess) {
       updateCategories();
       setTo(
-        isTopCategoryModalOpen
+        isTopAdd
           ? `${response.result.categoryId}`
           : `${response.result.topCategoryId}/${response.result.categoryId}`,
       );
@@ -83,7 +80,7 @@ const AddCategoryModal = ({
         </CommonCloseButton>
         <OpenFileSvg width={56} height={56} />
         <AddTopCategoryModalStyles.Title>
-          {isTopCategoryModalOpen ? '상위' : '하위'} 카테고리 추가
+          {isTopAdd ? '상위' : '하위'} 카테고리 추가
         </AddTopCategoryModalStyles.Title>
         <AddTopCategoryModalStyles.SubTitle>
           만들고 싶은 카테고리의 이름을 작성해주세요