Merge pull request #136 from Team-inglo/feat/IGW-61/135

[Fix/IGW-61/135] BottomSheet 닫혔을 때 원상태로 돌아오도록 수정하기
Team-inglo · Dec 22, 2024 · 177b02e · 177b02e
2 parents c400f32 + 0f91e78
commit 177b02e
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,15 +55,16 @@ const WorkDayTimeWithRestBottomSheet = ({
         break_start_time: breakStartTime!,
         break_end_time: breakEndTime!,
       };
-    })
-    onClose(result)
+    });
+    onClose(result);
   };
 
   return (
     <BottomSheetLayout
       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
@@ -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
@@ -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
@@ -7,19 +7,24 @@ 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();
 
   return (
     <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
@@ -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
@@ -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
@@ -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">