refactor: useTimeState 훅 코드리뷰 반영

GDSC-Hongik · Aug 30, 2024 · 3e3c2fc · 3e3c2fc
1 parent 2c6ae10
commit 3e3c2fc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 23 deletions.
diff --git a/packages/wow-ui/src/components/Picker/TimePicker.tsx b/packages/wow-ui/src/components/Picker/TimePicker.tsx
@@ -44,8 +44,10 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
       };
     const setSelectedTime = context?.setSelectedTime || propSetSelectedTime!;
 
-    const { isAM, handleClickAMOrPM, handleChangeHour, handleChangeMinute } =
-      useTimeState({ selectedTime, setSelectedTime });
+    const { isAM, handleClickAMOrPM, handleChangeTime } = useTimeState({
+      selectedTime,
+      setSelectedTime,
+    });
 
     const strTime = formatTimeToString(selectedTime);
 
@@ -77,7 +79,7 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 {strTime.hour}
               </button>
             }
-            onChange={handleChangeHour}
+            onChange={(value) => handleChangeTime("hour", value)}
           >
             {hours.map((hour) => (
               <DropDownOption
@@ -98,7 +100,7 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 {strTime.minute}
               </button>
             }
-            onChange={handleChangeMinute}
+            onChange={(value) => handleChangeTime("minute", value)}
           >
             {minutes.map((minute) => (
               <DropDownOption

diff --git a/packages/wow-ui/src/hooks/useTimeState.ts b/packages/wow-ui/src/hooks/useTimeState.ts
@@ -19,33 +19,21 @@ const useTimeState = ({ selectedTime, setSelectedTime }: TimeStateProps) => {
     setIsAM((prev) => !prev);
   };
 
-  const handleChangeHour = (value: {
-    selectedValue: string;
-    selectedText: React.ReactNode;
-  }) => {
+  const handleChangeTime = (
+    type: "hour" | "minute",
+    value: { selectedValue: string; selectedText: React.ReactNode }
+  ) => {
     setSelectedTime({
       isAM: isAM,
-      hour: +value.selectedValue,
-      minute: selectedTime.minute,
-    });
-  };
-
-  const handleChangeMinute = (value: {
-    selectedValue: string;
-    selectedText: React.ReactNode;
-  }) => {
-    setSelectedTime({
-      isAM: isAM,
-      hour: selectedTime.hour,
-      minute: +value.selectedValue,
+      hour: type === "hour" ? +value.selectedValue : selectedTime.hour,
+      minute: type === "minute" ? +value.selectedValue : selectedTime.minute,
     });
   };
 
   return {
     isAM,
     handleClickAMOrPM,
-    handleChangeHour,
-    handleChangeMinute,
+    handleChangeTime,
   };
 };