[Fix] Picker 컴포넌트 QA사항 반영

.changeset/fresh-dodos-approve.md

@@ -0,0 +1,5 @@
+---
+"wowds-ui": patch
+---
+
+Picker 컴포넌트와 DropDownOption 컴포넌트를 수정합니다.

packages/wow-ui/src/components/DropDown/DropDownOption.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { cva } from "@styled-system/css";
+import { cva, cx } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { forwardRef, useCallback, useEffect } from "react";
 
 import { useDropDownContext } from "@/components/DropDown/context/DropDownContext";
@@ -14,16 +14,20 @@ import { useCollection } from "./context/CollectionContext";
  *
  * @param {string} value 옵션의 값입니다.
  * @param {() => void} [onClick] 옵션이 클릭되었을 때 호출되는 함수입니다.
- * @param {React.ReactNode} [text] 드롭다운 옵션에 들어갈 텍스트.
+ * @param {React.ReactNode} text 드롭다운 옵션에 들어갈 텍스트.
+ * @param {CSSProperties} [style] 드롭다운 옵션의 커스텀 스타일.
+ * @param {string} [className] 드롭다운 옵션에 전달하는 커스텀 클래스.
  */
 export interface DropDownOptionProps {
   value: string;
   onClick?: () => void;
   text: ReactNode;
+  style?: CSSProperties;
+  className?: string;
 }
 
 const DropDownOption = forwardRef<HTMLLIElement, DropDownOptionProps>(
-  function Option({ value, onClick, text }, ref) {
+  function Option({ value, onClick, text, className, ...rest }, ref) {
     const { focusedValue, selectedValue, handleSelect, dropdownId } =
       useDropDownContext();
     const isSelected = selectedValue === value;
@@ -52,12 +56,16 @@ const DropDownOption = forwardRef<HTMLLIElement, DropDownOptionProps>(
         ref={ref}
         role="option"
         tabIndex={isSelected ? 0 : -1}
-        className={optionStyle({
-          type: isSelected ? "selected" : isFocused ? "focused" : "default",
-        })}
+        className={cx(
+          optionStyle({
+            type: isSelected ? "selected" : isFocused ? "focused" : "default",
+          }),
+          className
+        )}
         onClick={() => {
           handleOptionClick(value, onClick);
         }}
+        {...rest}
       >
         {text}
       </styled.li>

packages/wow-ui/src/components/Picker/DatePicker.stories.tsx

@@ -108,3 +108,17 @@ export const TimeRange = () => {
     </Flex>
   );
 };
+
+export const DisabledDatePicker = () => {
+  const [selected, setSelected] = useState<Date | undefined>(new Date());
+
+  return (
+    <PickerGroup selectedDate={selected} setSelectedDate={setSelected}>
+      <DatePicker
+        disabled={{ from: new Date("2024-09-04"), to: new Date("2024-09-05") }}
+        label="종료 날짜"
+      />
+      <TimePicker disabled label="종료 시간" />
+    </PickerGroup>
+  );
+};

packages/wow-ui/src/components/Picker/PickerGroup.tsx

@@ -21,9 +21,9 @@ const PickerGroup = ({
   setSelectedDate,
   label,
 }: PickerGroupProps) => {
-  const hours = selectedDate?.getHours() || 12;
+  const hours = selectedDate?.getHours();
   const [time, setTime] = useState<Time>({
-    isAM: selectedDate ? hours < 12 : true,
+    isAM: selectedDate && hours ? hours < 12 : true,
     hour: selectedDate && hours && hours !== 12 ? hours % 12 : 12,
     minute: selectedDate ? selectedDate.getMinutes() : 0,
   });

packages/wow-ui/src/components/Picker/TimePicker.tsx

@@ -14,12 +14,14 @@ interface TimePickerProps
     Pick<PickerContextProps, "selectedTime" | "setSelectedTime">
   > {
   label?: string;
+  disabled?: boolean;
 }
 
 const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
   (
     {
       label,
+      disabled,
       selectedTime: propSelectedTime,
       setSelectedTime: propSetSelectedTime,
     },
@@ -52,7 +54,11 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
     const strTime = formatTimeToString(selectedTime);
 
     return (
-      <Flex direction="column" gap="0.75rem">
+      <Flex
+        direction="column"
+        gap="0.75rem"
+        pointerEvents={disabled ? "none" : "auto"}
+      >
         {label && (
           <styled.span color="sub" textStyle="label2">
             {label}
@@ -62,7 +68,7 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
           <button
             className={pickerButtonStyle({
               variant: "time",
-              state: selected ? "selected" : "default",
+              state: disabled ? "disabled" : selected ? "selected" : "default",
             })}
             onClick={handleClickAMOrPM}
           >
@@ -73,7 +79,11 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
               <button
                 className={pickerButtonStyle({
                   variant: "time",
-                  state: selected ? "selected" : "default",
+                  state: disabled
+                    ? "disabled"
+                    : selected
+                      ? "selected"
+                      : "default",
                 })}
               >
                 {strTime.hour}
@@ -84,6 +94,7 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
             {hours.map((hour) => (
               <DropDownOption
                 key={hour}
+                style={{ padding: "0.25rem 0.5rem", textAlign: "center" }}
                 text={hour.padStart(2, "0")}
                 value={hour}
               />
@@ -94,7 +105,11 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
               <button
                 className={pickerButtonStyle({
                   variant: "time",
-                  state: selected ? "selected" : "default",
+                  state: disabled
+                    ? "disabled"
+                    : selected
+                      ? "selected"
+                      : "default",
                 })}
               >
                 {strTime.minute}
@@ -105,6 +120,7 @@ const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
             {minutes.map((minute) => (
               <DropDownOption
                 key={minute}
+                style={{ padding: "0.25rem 0.5rem", textAlign: "center" }}
                 text={minute.padStart(2, "0")}
                 value={minute}
               />

packages/wow-ui/src/components/Picker/pickerButtonStyle.css.ts

@@ -67,5 +67,15 @@ export const pickerButtonStyle = cva({
         },
       },
     },
+    {
+      variant: "time",
+      state: "disabled",
+      css: {
+        background: "monoBackgroundPressed",
+        color: "outline",
+
+        borderWidth: 0,
+      },
+    },
   ],
 });

packages/wow-ui/src/components/Picker/pickerClassNames.ts

@@ -29,6 +29,10 @@ const pickerClassNames: Partial<ClassNames> | undefined = {
     width: "100%",
   }),
   weekday: pickerButtonStyle({ variant: "date", state: "default" }),
+  disabled: pickerButtonStyle({
+    variant: "date",
+    state: "disabled",
+  }),
   day: pickerButtonStyle({ variant: "date", state: "default" }),
   day_button: css({
     width: "100%",