From 0f91e78b440aadcd5a4d3c7d916e1533c7edc871 Mon Sep 17 00:00:00 2001
From: nakyong82 <nakyong7770@gmail.com>
Date: Sat, 21 Dec 2024 22:00:39 +0900
Subject: [PATCH] =?UTF-8?q?:bug:=20fix:=20BottomSheet=20=EB=8B=AB=ED=98=94?=
 =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EC=9B=90=EC=83=81=ED=83=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EB=8F=8C=EC=95=84=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=ED=95=98=EA=B8=B0=20#135?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ApplicationDetail/ApplicationDetailBottomSheet.tsx     | 2 +-
 src/components/Common/BottomSheetLayout.tsx                | 2 +-
 src/components/Common/WorkDayTimeBottomSheet.tsx           | 5 ++++-
 src/components/Common/WorkDayTimeWithRestBottomSheet.tsx   | 7 +++++--
 src/components/Employer/PostCreate/Step1.tsx               | 6 ++----
 .../Employer/WriteDocument/EmployerLaborContractForm.tsx   | 3 ++-
 src/components/Profile/LogoutBottomSheet.tsx               | 7 ++++++-
 src/hooks/useBottomSheet.ts                                | 2 +-
 src/pages/Employer/Profile/EmployerProfilePage.tsx         | 2 ++
 src/pages/Profile/ProfilePage.tsx                          | 2 ++
 10 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/ApplicationDetail/ApplicationDetailBottomSheet.tsx b/src/components/ApplicationDetail/ApplicationDetailBottomSheet.tsx
index a48d0714..25411b32 100644
--- a/src/components/ApplicationDetail/ApplicationDetailBottomSheet.tsx
+++ b/src/components/ApplicationDetail/ApplicationDetailBottomSheet.tsx
@@ -5,7 +5,7 @@ import { buttonTypeKeys } from '@/constants/components';
 
 type ApplicationDetailBottomSheetType = {
   isShowBottomsheet: boolean;
-  setIsShowBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsShowBottomSheet: (isShowBottomsheet: boolean) => void;
   blackButtonTitle: string;
   onClickBlackButton: () => void;
   yellowButtonTitle: string;
diff --git a/src/components/Common/BottomSheetLayout.tsx b/src/components/Common/BottomSheetLayout.tsx
index db208833..735236eb 100644
--- a/src/components/Common/BottomSheetLayout.tsx
+++ b/src/components/Common/BottomSheetLayout.tsx
@@ -6,7 +6,7 @@ type BottomSheetLayoutProps = {
   hasHandlebar: boolean; // 최상단의 바 모양 존재 여부
   isAvailableHidden: boolean; // 아래로 내렸을 때 사라지도록 하는 여부
   isShowBottomsheet: boolean; // BottomSheet 보이기
-  setIsShowBottomSheet?: React.Dispatch<React.SetStateAction<boolean>>; // isShowBottomsheet 값 동기화하기 위한 함수
+  setIsShowBottomSheet?: (isShowBottomsheet: boolean) => void; // isShowBottomsheet 값 동기화하기 위한 함수
   children: ReactNode;
   isFixedBackground?: boolean;
 };
diff --git a/src/components/Common/WorkDayTimeBottomSheet.tsx b/src/components/Common/WorkDayTimeBottomSheet.tsx
index e5e1d6a9..a24757c3 100644
--- a/src/components/Common/WorkDayTimeBottomSheet.tsx
+++ b/src/components/Common/WorkDayTimeBottomSheet.tsx
@@ -23,9 +23,11 @@ type DayType = (typeof DAYS)[keyof typeof DAYS];
 const WorkDayTimeBottomSheet = ({
   onClose,
   isShowBottomsheet,
+  setIsShowBottomSheet,
 }: {
   onClose: (value: WorkDayTime[]) => void;
   isShowBottomsheet: boolean;
+  setIsShowBottomSheet: (isShowBottomsheet: boolean) => void;
 }) => {
   const [isCheckAllWeek, setIsCheckAllWeek] = useState<boolean>(false);
   const [isCheckAllTime, setIsCheckAllTime] = useState<boolean>(false);
@@ -86,6 +88,7 @@ const WorkDayTimeBottomSheet = ({
       hasHandlebar={true}
       isAvailableHidden={true}
       isShowBottomsheet={isShowBottomsheet}
+      setIsShowBottomSheet={setIsShowBottomSheet}
     >
       <div className="w-full">
         <div className="w-full py-[0.75rem] px-[3.125rem] flex flex-col items-center gap-[0.75rem]">
@@ -111,7 +114,7 @@ const WorkDayTimeBottomSheet = ({
             <div className="flex flex-wrap gap-[0.5rem] w-full">
               {Object.keys(DAYS).map((value, index) => (
                 <button
-                  className={`py-[0.375rem] px-[0.875rem] body-3 border border-[#EFEFEF] rounded-[1.125rem] ${isCheckAllWeek ? 'bg-[#F4F4F9] text-[#BDBDBD]' : (dayOfWeek.includes(value as DayType) ? 'bg-[#FEF387] text-[#1E1926]' : 'bg-white text-[#656565]')}`}
+                  className={`py-[0.375rem] px-[0.875rem] body-3 border border-[#EFEFEF] rounded-[1.125rem] ${isCheckAllWeek ? 'bg-[#F4F4F9] text-[#BDBDBD]' : dayOfWeek.includes(value as DayType) ? 'bg-[#FEF387] text-[#1E1926]' : 'bg-white text-[#656565]'}`}
                   key={`${value}_${index}`}
                   onClick={() => onClickDayOfWeek(value as DayType)}
                   disabled={isCheckAllWeek}
diff --git a/src/components/Common/WorkDayTimeWithRestBottomSheet.tsx b/src/components/Common/WorkDayTimeWithRestBottomSheet.tsx
index 41a9b4cf..b1e0e722 100644
--- a/src/components/Common/WorkDayTimeWithRestBottomSheet.tsx
+++ b/src/components/Common/WorkDayTimeWithRestBottomSheet.tsx
@@ -13,9 +13,11 @@ type DayType = (typeof DAYS)[keyof typeof DAYS];
 const WorkDayTimeWithRestBottomSheet = ({
   onClose,
   isShowBottomsheet,
+  setIsShowBottomSheet,
 }: {
   onClose: (value: WorkDayTimeWithRest[]) => void;
   isShowBottomsheet: boolean;
+  setIsShowBottomSheet: (isShowBottomsheet: boolean) => void;
 }) => {
   const [dayOfWeek, setDayOfWeek] = useState<DayType[]>([]);
   const [workStartTime, setWorkStartTime] = useState<string | null>(null);
@@ -53,8 +55,8 @@ const WorkDayTimeWithRestBottomSheet = ({
         break_start_time: breakStartTime!,
         break_end_time: breakEndTime!,
       };
-    })
-    onClose(result)
+    });
+    onClose(result);
   };
 
   return (
@@ -62,6 +64,7 @@ const WorkDayTimeWithRestBottomSheet = ({
       hasHandlebar={true}
       isAvailableHidden={true}
       isShowBottomsheet={isShowBottomsheet}
+      setIsShowBottomSheet={setIsShowBottomSheet}
     >
       <div className="w-full">
         <div className="w-full py-[0.75rem] px-[3.125rem] flex flex-col items-center gap-[0.75rem]">
diff --git a/src/components/Employer/PostCreate/Step1.tsx b/src/components/Employer/PostCreate/Step1.tsx
index d71f214c..918eb3d3 100644
--- a/src/components/Employer/PostCreate/Step1.tsx
+++ b/src/components/Employer/PostCreate/Step1.tsx
@@ -104,10 +104,7 @@ const Step1 = ({
             <div className="w-full h-full overflow-x-auto flex items-center gap-2">
               {newPostInfo.body.work_day_times.length > 0 &&
                 newPostInfo.body.work_day_times.map((workdaytime, index) => (
-                  <div
-                    key={index}
-                    className="flex-shrink-0"
-                  >
+                  <div key={index} className="flex-shrink-0">
                     <div className="w-full h-6 flex items-center justify-center px-3 py-1 bg-[#FEF387] button-2 rounded-[1.125rem] whitespace-nowrap">
                       {workDayTimeToString(workdaytime)}
                     </div>
@@ -234,6 +231,7 @@ const Step1 = ({
             setIsModal(false);
           }}
           isShowBottomsheet={isModal}
+          setIsShowBottomSheet={setIsModal}
         />
       )}
     </div>
diff --git a/src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx b/src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx
index da2bf307..5c267a8a 100644
--- a/src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx
+++ b/src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx
@@ -650,7 +650,7 @@ const EmployerLaborContractForm = ({
         </InputLayout>
         {/* 서명 입력 */}
         <InputLayout title="서명" isEssential>
-        <SignaturePad
+          <SignaturePad
             onSave={(signature: string) =>
               setNewDocumentData({
                 ...newDocumentData,
@@ -700,6 +700,7 @@ const EmployerLaborContractForm = ({
             setIsModal(false);
           }}
           isShowBottomsheet={isModal}
+          setIsShowBottomSheet={setIsModal}
         />
       )}
     </div>
diff --git a/src/components/Profile/LogoutBottomSheet.tsx b/src/components/Profile/LogoutBottomSheet.tsx
index c89d64fe..5c74ca2a 100644
--- a/src/components/Profile/LogoutBottomSheet.tsx
+++ b/src/components/Profile/LogoutBottomSheet.tsx
@@ -7,11 +7,15 @@ import { isEmployer } from '@/utils/signup';
 type LogoutBottomSheetProps = {
   handleLogout: () => void;
   handleLogoutCancel: () => void;
+  isShowBottomsheet: boolean;
+  setIsShowBottomSheet: (isShowBottomsheet: boolean) => void;
 };
 
 const LogoutBottomSheet = ({
   handleLogout,
   handleLogoutCancel,
+  isShowBottomsheet,
+  setIsShowBottomSheet,
 }: LogoutBottomSheetProps) => {
   const { pathname } = useLocation();
 
@@ -19,7 +23,8 @@ const LogoutBottomSheet = ({
     <BottomSheetLayout
       hasHandlebar={true}
       isAvailableHidden={true}
-      isShowBottomsheet={true}
+      isShowBottomsheet={isShowBottomsheet}
+      setIsShowBottomSheet={setIsShowBottomSheet}
     >
       <div className="w-full flex flex-col py-10">
         <div className="head-2 text-[#1E1926] py-3 px-12 text-center">
diff --git a/src/hooks/useBottomSheet.ts b/src/hooks/useBottomSheet.ts
index e68fdb69..44772c88 100644
--- a/src/hooks/useBottomSheet.ts
+++ b/src/hooks/useBottomSheet.ts
@@ -5,7 +5,7 @@ import usePreviousValue from '@/hooks/usePreviousValue';
 const VIEW_HEIGHT = window.innerHeight;
 
 const useBottomSheet = (
-  setIsShowBottomSheet?: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsShowBottomSheet?: (isShowBottomsheet: boolean) => void,
 ) => {
   const [isOpen, setIsOpen] = useState(false);
   const controls = useAnimation();
diff --git a/src/pages/Employer/Profile/EmployerProfilePage.tsx b/src/pages/Employer/Profile/EmployerProfilePage.tsx
index 0ffc13e0..90b3882d 100644
--- a/src/pages/Employer/Profile/EmployerProfilePage.tsx
+++ b/src/pages/Employer/Profile/EmployerProfilePage.tsx
@@ -46,6 +46,8 @@ const EmployerProfilePage = () => {
         <LogoutBottomSheet
           handleLogout={handleLogout} // 로그아웃 버튼
           handleLogoutCancel={() => setLogoutBottomSheet(false)} // 취소 버튼
+          isShowBottomsheet={logoutBottomSheet}
+          setIsShowBottomSheet={setLogoutBottomSheet}
         />
       )}
       <div>
diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
index ccc27855..acc1edd1 100644
--- a/src/pages/Profile/ProfilePage.tsx
+++ b/src/pages/Profile/ProfilePage.tsx
@@ -63,6 +63,8 @@ const ProfilePage = () => {
             <LogoutBottomSheet
               handleLogout={handleLogout}
               handleLogoutCancel={handleLogoutCancel}
+              isShowBottomsheet={bottomSheetOpen}
+              setIsShowBottomSheet={setBottomSheetOpen}
             />
           )}
           <div className="w-full h-full min-h-[100vh] bg-profilePageGradient">