[Hotfix] 판매 정보 수정 페이지 모달 backdrop 클릭 시 close 되도록 수정

src/components/Seller/SellerMyPageModifyProfile/ModifyProfileHeader.tsx

@@ -1,39 +1,44 @@
-import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
-import { White } from 'styles/color';
 import { ReactComponent as LeftArrowIcon } from 'assets/icons/left-arrow.svg';
 import { ReactComponent as XIcon } from 'assets/icons/icon-x.svg';
 import { Heading } from 'styles/font';
 import { TabB2 } from 'components/Common/TabB2';
-import { SetStateAction } from 'react';
 import { isOutPopupOpenState } from 'utils/atom';
 import { useSetRecoilState } from 'recoil';
+
+//
+//
+//
+
 interface ModifyProfileHeaderProps {
   isSetChatTime: boolean;
-  setIsSetChatTime: React.Dispatch<SetStateAction<boolean>>;
   isNoProfile: boolean;
+  handleSelectTimeCloseClick: () => void;
 }
+
+//
+//
+//
+
 export const ModifyProfileHeader = ({
   isSetChatTime,
-  setIsSetChatTime,
   isNoProfile,
+  handleSelectTimeCloseClick,
 }: ModifyProfileHeaderProps) => {
-  const navigate = useNavigate();
   const setIsOutPopupOpen = useSetRecoilState(isOutPopupOpenState);
+
+  //
+  //
+  //
+
   return (
     <TabB2>
       <div className="left-icon">
         {isSetChatTime ? (
-          <XIcon
-            onClick={() => {
-              setIsOutPopupOpen(true);
-            }}
-          />
+          <XIcon onClick={handleSelectTimeCloseClick} />
         ) : (
           <LeftArrowIcon
             onClick={() => {
               setIsOutPopupOpen(true);
-              // navigate('/seller/mypage/viewProfile');
             }}
           />
         )}

src/components/Seller/SellerMyPageModifyProfile/SetChatTimeSection.tsx

@@ -1,19 +1,23 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Black, Green, Grey1, Grey3, Grey4, Grey5 } from 'styles/color';
 import { ReactComponent as CheckIcon2SVG } from 'assets/icons/icon-check2.svg';
 import { ReactComponent as PlusIconSVG } from 'assets/icons/icon-plus.svg';
 import { ReactComponent as MinusIconSVG } from 'assets/icons/icon-minus.svg';
-import { Body1 } from 'styles/font';
 import Input from 'components/Common/Input';
 import TimeSelectModal from './TimeSelectModal';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { isOutPopupOpenState, isTimeModalOpenState } from 'utils/atom';
 import { BackDrop } from 'components/Common/BackDrop';
 import { BottomButton } from '../Common/BottomButton';
 import { Space } from 'components/Common/Space';
 import { formatTimeRange } from 'utils/formatTimeRange';
 import IsOutPopup from './IsOutPopup';
+
+//
+//
+//
+
 const dayEngtoKor: Record<string, string> = {
   MON: '월',
   TUE: '화',
@@ -23,14 +27,29 @@ const dayEngtoKor: Record<string, string> = {
   SAT: '토',
   SUN: '일',
 };
+
+//
+//
+//
+
+//TODO: move to util file
 const dayList: string[] = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
+
+//
+//
+//
 export interface SelectedTimeList {
   [key: string]: string[];
 }
 
 interface IsSelected {
   [key: string]: boolean;
 }
+
+//
+//
+//
+
 function SetChatTimeSection({
   setSelectedList,
   setIsSetChatTime,
@@ -65,9 +84,12 @@ function SetChatTimeSection({
 
   const [isTimeModalOpen, setIsTimeModalOpen] =
     useRecoilState(isTimeModalOpenState);
-  const [isOutPopupOpen, setIsOutPopupOpen] =
-    useRecoilState(isOutPopupOpenState);
-  const scrollRef = useRef();
+  const isOutPopupOpen = useRecoilValue(isOutPopupOpenState);
+  const scrollRef = useRef(null);
+
+  //
+  //
+  //
 
   return (
     <Wrapper ref={scrollRef}>

src/components/Seller/SellerMyPageModifyProfile/TimeSelectModal.tsx

@@ -1,6 +1,5 @@
-import { lightGreen } from '@mui/material/colors';
 import { Space } from 'components/Common/Space';
-import React, { SetStateAction, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import styled, { keyframes } from 'styled-components';
 import {
@@ -15,8 +14,18 @@ import {
 } from 'styles/color';
 import { Body1, Button2, Caption2 } from 'styles/font';
 import { isTimeModalOpenState } from 'utils/atom';
+
+//
+//
+//
+
 // 0부터 24까지 배열 생성
 const hourList = Array.from({ length: 25 }, (_, index) => index);
+
+//
+//
+//
+
 interface SelectedTimeList {
   [key: string]: string[];
 }
@@ -30,6 +39,11 @@ interface TimeSelectModalProps {
   setIsActive: React.Dispatch<React.SetStateAction<ActiveDay>>;
   setIsSelected: React.Dispatch<React.SetStateAction<ActiveDay>>;
 }
+
+//
+//
+//
+
 function TimeSelectModal({
   isSelected,
   selectedTimeList,
@@ -43,6 +57,7 @@ function TimeSelectModal({
   const foundDayKey: any = Object.keys(isSelected).find(
     (key) => isSelected[key] === true,
   );
+
   useEffect(() => {
     if (selectedTimeList[foundDayKey][0]) {
       const [startNumber, endNumber] = selectedTimeList[foundDayKey][0]
@@ -51,6 +66,7 @@ function TimeSelectModal({
       setBlockRange([startNumber, endNumber]);
     }
   }, [foundDayKey]);
+
   // 모달 오픈 여부
   const [isTimeModalOpen, setIsTimeModalOpen] =
     useRecoilState(isTimeModalOpenState);
@@ -134,6 +150,11 @@ function TimeSelectModal({
       console.error('No day selected.'); // 선택된 요일이 없는 경우 에러 처리
     }
   };
+
+  //
+  //
+  //
+
   return (
     <Wrapper visible={isTimeModalOpen}>
       <div className="bar-wrapper">

src/pages/Seller/SellerMyPageModifyProfile.tsx

@@ -14,7 +14,7 @@ import { useCustomSelect } from 'hooks/useCustomSelect';
 import { useInput } from 'hooks/useInput';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import { LoadingSpinner } from 'utils/LoadingSpinner';
 import {
@@ -26,7 +26,20 @@ import {
   isTypeOpenModalState,
   isUpdateModalOpenState,
 } from 'utils/atom';
-const categoryList = {
+
+//
+//
+//
+
+interface CategoryList {
+  [key: string]: number;
+}
+
+//
+//
+//
+
+const categoryList: CategoryList = {
   연애갈등: 1,
   '이별/재회': 2,
   여자심리: 3,
@@ -37,6 +50,10 @@ const categoryList = {
   기타: 8,
 };
 
+//
+//
+//
+
 export const SellerMypageModifyProfile = () => {
   // 상담 카테고리 enum List,, 후에 POST할 때 Mapping 필요
   const [selectCategory, setSelectCategory] = useState<number[]>([]);
@@ -69,10 +86,10 @@ export const SellerMypageModifyProfile = () => {
   const [isBankModalOpen, setIsBankModalOpen] =
     useRecoilState<boolean>(isBankModalOpenState);
 
-  const [isSucessUpdate, setIsUpdateSuccess] =
-    useRecoilState<boolean>(isSuccessUpdateState);
   const [isOutPopupOpen, setIsOutPopupOpen] =
     useRecoilState(isOutPopupOpenState);
+
+  const isSucessUpdate = useRecoilValue<boolean>(isSuccessUpdateState);
   // 채팅 상담시간 페이지로 이동할지여부
   const [isSetChatTime, setIsSetChatTime] = useState<boolean>(false);
 
@@ -91,6 +108,38 @@ export const SellerMypageModifyProfile = () => {
   const [isNoProfile, setIsNoProfile] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const navigate = useNavigate();
+
+  /**
+   *
+   */
+  const handleClickBackdrop = () => {
+    if (isCategoryModalOpen) {
+      setIsCategoryModalOpen(false);
+    }
+    if (isOutPopupOpen) {
+      setIsOutPopupOpen(false);
+    }
+    if (isStyleModalOpen) {
+      setIsStyleModalOpen(false);
+    }
+    if (isTypeModalOpen) {
+      setIsTypeModalOpen(false);
+    }
+    if (isBankModalOpen) {
+      setIsBankModalOpen(false);
+    }
+    if (isUpdateModalOpen) {
+      setIsUpdateModalOpen(false);
+    }
+  };
+
+  /**
+   *
+   */
+  const handleSelectTimeCloseClick = () => {
+    setIsSetChatTime(false);
+  };
+
   useEffect(() => {
     const fetchProfile = async () => {
       try {
@@ -104,14 +153,14 @@ export const SellerMypageModifyProfile = () => {
         } else {
           const profileRes: any = await getProfiles();
           const data = profileRes.data;
-          if (profileRes?.response?.status === 404) {
+          if (profileRes.response?.status === 404) {
             alert('판매 정보가 등록되어 있지 않습니다.');
             navigate('/seller/mypage');
           }
           nickname.setValue(data?.nickname);
           category.setViewValue(data?.consultCategories.join(', '));
           setSelectCategory(
-            data?.consultCategories.map((item: any) => categoryList[item]),
+            data?.consultCategories.map((item: string) => categoryList[item]),
           );
           style.setViewValue(data?.consultStyle);
           setSelectStyle(data?.consultStyle);
@@ -148,12 +197,17 @@ export const SellerMypageModifyProfile = () => {
     };
     fetchProfile();
   }, []);
+
+  //
+  //
+  //
+
   return (
     <>
       <ModifyProfileHeader
         isNoProfile={isNoProfile}
         isSetChatTime={isSetChatTime}
-        setIsSetChatTime={setIsSetChatTime}
+        handleSelectTimeCloseClick={handleSelectTimeCloseClick}
       />
       {isLoading ? (
         <>
@@ -194,7 +248,7 @@ export const SellerMypageModifyProfile = () => {
       isTypeModalOpen ||
       isBankModalOpen ||
       isUpdateModalOpen ? (
-        <BackDrop />
+        <BackDrop onClick={handleClickBackdrop} />
       ) : null}
       {isCategoryModalOpen && (
         <CategoryModal