[Feature] Picker 컴포넌트 구현 (#139)

* chore: day picker 설치

* feat: LeftArrow 아이콘 추가

* feat: DatePicker UI 초기구현

* fix: Date Button UI 수정

* feat: Calendar 아이콘 추가

* feat: Date 전용 DropDown 추가

* fix: thead 관련 오류 수정, 필요 없는 import 삭제

* feat: button 클릭 영역 확대

* feat: single mode로 제한

* feat: DateDropDown 빌드

* feat: usePickerState 훅 분리

* feat: Picker button style 분리

* feat: TimePicker 초기 UI

* feat: TimePicker를 usePickerState 훅을 이용해서 동작할 수 있도록 구현

* chore: TimePicker 내보내기 추가

* fix: label 스타일 변경 및 TimePicker 라벨 추가

* design: 버튼 스타일 변경

* fix: 12시 관련 에러처리

* design: 아이콘 cursor 속성 추가

* fix: 출력 date, time 네이밍 수정 및 isAM 관련 로직 수정

* fix: initialDate 객체가 아니라 바로 받을 수 있도록 수정, 12시 엣지케이스 수정

* feat: Date range도 선택할 수 있도록 수정

* feat: usePickerRangeDateState, usePickerTimeState 훅 분리

* fix: month 관련 오류 수정

* fix: 0시 12시로 변환

* chore: 추가 컴포넌트 빌드

* refactor: Context API 활용

* remove: 불필요한 hook 삭제

* chore: PickerGroup 빌드

* fix: a11y color-contrast 체크 해제

* refactor: Date to string 유틸함수 사용하기

* refactor: pickerClassNames 분리

* refactor: pickerComponents 분리

* rename: 폴더구조 변경

* chore: 빌드 내용 추가

* fix: 복잡한 삼항연산자 개선 및 빌드 에러를 해결하기 위한 폴더구조 재변경

* refactor: 여러번 호출되는 getHours 개선

* fix: styled와 className 통일 및 불필요한 styled 삭제

* feat: 시작, 끝 날짜 선택 후 재선택 시 초기화

* refactor: format~ 으로 함수 네이밍 변경

* refactor: format~ 함수 util로 분리

* refactor: useTimeState 훅 분리

* refactor: formatDateToString return값 변경

* fix: 타입 단언 제거

* chore: pickerComponents 빌드 제외

* chore: package.json 변경 및 rollup config 변경

* chore: 스토리북 console.log 삭제

* feat: DatePicker 바깥 영역 클릭 시 드롭다운 닫기

* chore: changeset 추가

* design: TimePicker select 및 active 시 디자인 적용

* chore: 불필요한 닫는 태그 삭제

* refactor: useTimeState 훅 코드리뷰 반영

* fix: 여러 타입 모두 disabled 상태일 때 이벤트 막기

.changeset/lazy-sheep-pull.md

@@ -0,0 +1,5 @@
+---
+"wowds-ui": patch
+---
+
+RangeDatePicker, SingleDatePicker, TimePicker 컴포넌트를 구현합니다.

.changeset/sour-swans-wait.md

@@ -0,0 +1,5 @@
+---
+"wowds-icons": patch
+---
+
+LeftArrow 아이콘을 추가합니다.

packages/scripts/generateBuildConfig.ts

@@ -25,6 +25,7 @@ const excludedComponents = [
   "DropDownWrapper",
   "CollectionContext",
   "DropDownOptionList",
+  "pickerComponents",
 ];
 
 const getFilteredComponentFiles = async (directoryPath: string) => {

packages/wow-icons/src/component/Calendar.tsx

@@ -0,0 +1,50 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const Calendar = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "24",
+      height = "24",
+      viewBox = "0 0 24 24",
+      stroke = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="calendar icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          d="M21.3 4.7V20.3H2.7V4.7L21.3 4.7Z"
+          stroke={color[stroke]}
+          strokeWidth="1.4"
+        />
+        <path d="M17 2V7" stroke={color[stroke]} strokeWidth="1.4" />
+        <path d="M12 2V7" stroke={color[stroke]} strokeWidth="1.4" />
+        <path d="M7 2V7" stroke={color[stroke]} strokeWidth="1.4" />
+        <path d="M3 9.5L21 9.5" stroke={color[stroke]} strokeWidth="1.4" />
+        <path
+          d="M18.5 15.5C18.5 16.6046 17.6046 17.5 16.5 17.5C15.3954 17.5 14.5 16.6046 14.5 15.5C14.5 14.3954 15.3954 13.5 16.5 13.5C17.6046 13.5 18.5 14.3954 18.5 15.5Z"
+          stroke={color[stroke]}
+          strokeWidth="1.4"
+        />
+      </svg>
+    );
+  }
+);
+
+Calendar.displayName = "Calendar";
+export default Calendar;

packages/wow-icons/src/component/LeftArrow.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const LeftArrow = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "20",
+      height = "20",
+      viewBox = "0 0 20 20",
+      stroke = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="left-arrow icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          d="M12.5 16L7.5 10L12.5 4"
+          stroke={color[stroke]}
+          strokeLinejoin="bevel"
+          strokeWidth="1.4"
+        />
+      </svg>
+    );
+  }
+);
+
+LeftArrow.displayName = "LeftArrow";
+export default LeftArrow;

packages/wow-icons/src/component/index.ts

@@ -1,8 +1,10 @@
+export { default as Calendar } from "./Calendar.tsx";
 export { default as Check } from "./Check.tsx";
 export { default as Close } from "./Close.tsx";
 export { default as DownArrow } from "./DownArrow.tsx";
 export { default as Edit } from "./Edit.tsx";
 export { default as Help } from "./Help.tsx";
+export { default as LeftArrow } from "./LeftArrow.tsx";
 export { default as Link } from "./Link.tsx";
 export { default as Plus } from "./Plus.tsx";
 export { default as Reload } from "./Reload.tsx";

packages/wow-ui/package.json

@@ -70,6 +70,31 @@
       "require": "./dist/RadioGroup.cjs",
       "import": "./dist/RadioGroup.js"
     },
+    "./DateDropDown": {
+      "types": "./dist/components/Picker/DateDropDown.d.ts",
+      "require": "./dist/DateDropDown.cjs",
+      "import": "./dist/DateDropDown.js"
+    },
+    "./PickerGroup": {
+      "types": "./dist/components/Picker/PickerGroup.d.ts",
+      "require": "./dist/PickerGroup.cjs",
+      "import": "./dist/PickerGroup.js"
+    },
+    "./RangeDatePicker": {
+      "types": "./dist/components/Picker/RangeDatePicker.d.ts",
+      "require": "./dist/RangeDatePicker.cjs",
+      "import": "./dist/RangeDatePicker.js"
+    },
+    "./SingleDatePicker": {
+      "types": "./dist/components/Picker/SingleDatePicker.d.ts",
+      "require": "./dist/SingleDatePicker.cjs",
+      "import": "./dist/SingleDatePicker.js"
+    },
+    "./TimePicker": {
+      "types": "./dist/components/Picker/TimePicker.d.ts",
+      "require": "./dist/TimePicker.cjs",
+      "import": "./dist/TimePicker.js"
+    },
     "./MultiGroup": {
       "types": "./dist/components/MultiGroup/index.d.ts",
       "require": "./dist/MultiGroup.cjs",
@@ -154,6 +179,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "lottie-react": "^2.4.0",
+    "react-day-picker": "^9.0.8",
     "wowds-icons": "workspace:^"
   },
   "peerDependencies": {

packages/wow-ui/rollup.config.js

@@ -30,6 +30,11 @@ export default {
     SearchBar: "./src/components/SearchBar",
     RadioButton: "./src/components/RadioGroup/RadioButton",
     RadioGroup: "./src/components/RadioGroup/RadioGroup",
+    DateDropDown: "./src/components/Picker/DateDropDown",
+    PickerGroup: "./src/components/Picker/PickerGroup",
+    RangeDatePicker: "./src/components/Picker/RangeDatePicker",
+    SingleDatePicker: "./src/components/Picker/SingleDatePicker",
+    TimePicker: "./src/components/Picker/TimePicker",
     MultiGroup: "./src/components/MultiGroup",
     DropDownOption: "./src/components/DropDown/DropDownOption",
     DropDown: "./src/components/DropDown",

packages/wow-ui/src/components/Button/index.tsx

@@ -134,7 +134,7 @@ const ButtonStyle = cva({
         _disabled: {
           borderColor: "darkDisabled",
           color: "darkDisabled",
-          cursor: "not-allowed",
+          pointerEvents: "none",
         },
         _hover: {
           borderColor: "blueHover",
@@ -152,7 +152,7 @@ const ButtonStyle = cva({
 
         _disabled: {
           color: "blueDisabled",
-          cursor: "not-allowed",
+          pointerEvents: "none",
         },
         _hover: {
           shadow: "blue",

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

@@ -0,0 +1,115 @@
+"use client";
+
+import { cva } from "@styled-system/css";
+import { Flex, styled } from "@styled-system/jsx";
+import { Calendar } from "wowds-icons";
+
+interface DateDropDownPropsBase {
+  label?: string;
+  placeholder?: string;
+  onClick: () => void;
+}
+
+interface SingleDateDropDownProps extends DateDropDownPropsBase {
+  mode: "single";
+  selectedValue?: string;
+}
+
+interface RangeDateDropDownProps extends DateDropDownPropsBase {
+  mode: "range";
+  selectedValue?: { start?: string; end?: string };
+}
+
+type DateDropDownProps = SingleDateDropDownProps | RangeDateDropDownProps;
+
+const DateDropDown = ({
+  mode,
+  placeholder,
+  label,
+  selectedValue,
+  onClick,
+}: DateDropDownProps) => {
+  const formatSelectedValue = () => {
+    if (!selectedValue) return placeholder;
+    if (mode === "range" && selectedValue.start) return selectedValue.start;
+    if (mode === "single") return selectedValue;
+  };
+
+  return (
+    <Flex direction="column" gap="0.75rem" onClick={onClick}>
+      {label && (
+        <styled.span color="sub" textStyle="label2">
+          {label}
+        </styled.span>
+      )}
+      <button aria-haspopup={true} className={dropdownStyle()}>
+        <div
+          className={placeholderStyle({
+            type: selectedValue ? "selected" : "default",
+          })}
+        >
+          {formatSelectedValue()}
+        </div>
+        {mode === "range" && (
+          <div
+            className={placeholderStyle({
+              type: selectedValue ? "selected" : "default",
+            })}
+          >
+            {selectedValue ? `~ ${selectedValue.end}` : placeholder}
+          </div>
+        )}
+        <Calendar stroke="outline" />
+      </button>
+    </Flex>
+  );
+};
+
+export default DateDropDown;
+
+const dropdownStyle = cva({
+  base: {
+    lg: {
+      maxWidth: "22.375rem",
+    },
+    smDown: {
+      width: "100%",
+    },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+
+    border: "1px solid",
+    borderRadius: "sm",
+    borderColor: "outline",
+    outline: "none",
+
+    paddingY: "xs",
+    paddingX: "sm",
+
+    backgroundColor: "background",
+    cursor: "pointer",
+  },
+});
+
+const placeholderStyle = cva({
+  base: {
+    textStyle: "body1",
+  },
+  variants: {
+    type: {
+      default: {
+        color: "outline",
+        _hover: {
+          color: "sub",
+        },
+      },
+      focused: {
+        color: "primary",
+      },
+      selected: {
+        color: "textBlack",
+      },
+    },
+  },
+});