Feat(client): Time picker 구현 (#49)

* setting: default white, black color token 추가

* feat: 최소한의 스타일만 가진 headless default time picker 구현

* chore: ncdai/react-wheel-picker 의존성 추가

* feat: wheel picker 공통 component 구현

* chore: index에 공통 picker 컴포넌트 export 추가

* feat: onboarding time picker 구현

* feat: onboarding page 추가

* chore: time picker client onboarding로 파일 위치 변경

* feat: pds vite config에 vite-tsconfig-paths 의존성 및 설정 추가

* chore: cn export 하던 lib 절대 경로 제거

* chore: 사용하지 않는 코드 제거

* fix: design-system 내 lib, icons 절대 경로를 상대 경로로 수정

* feat: time picker state 로직 추가

* feat: onSave 인터페이스 구현

* refactor: mouse event handler import 추가

Author: constantly-dev

apps/client/src/pages/onBoarding/OnBoarding.tsx

@@ -0,0 +1,5 @@
+const OnBoarding = () => {
+  return <div>OnBoarding</div>;
+};
+
+export default OnBoarding;

apps/client/src/pages/onBoarding/components/.gitkeep

@@ -0,0 +1,90 @@
+import {
+  Button,
+  WheelPicker,
+  WheelPickerOption,
+  WheelPickerWrapper,
+} from '@pinback/design-system/ui';
+import { MouseEventHandler, useState } from 'react';
+
+const createArray = (length: number, add = 0): WheelPickerOption[] =>
+  Array.from({ length }, (_, i) => {
+    const value = i + add;
+    return {
+      label: value.toString().padStart(2, '0'),
+      value: value.toString(),
+    };
+  });
+
+const hourOptions = createArray(12, 1);
+const minuteOptions = createArray(60);
+const meridiemOptions: WheelPickerOption[] = [
+  { label: 'AM', value: 'AM' },
+  { label: 'PM', value: 'PM' },
+];
+
+interface TimePickerProps {
+  onSave: (time: { hour: string; minute: string; meridiem: string }) => void;
+  onCancel: () => void;
+  onClick: MouseEventHandler<HTMLDivElement>;
+}
+
+const TimePicker = ({ onSave, onCancel, onClick }: TimePickerProps) => {
+  const [selectedHour, setSelectedHour] = useState(hourOptions[0].value);
+  const [selectedMinute, setSelectedMinute] = useState(minuteOptions[0].value);
+  const [selectedMeridiem, setSelectedMeridiem] = useState(
+    meridiemOptions[0].value
+  );
+
+  return (
+    <div
+      onClick={onClick}
+      className="common-shadow flex w-[26rem] flex-col items-center px-[1.6rem]"
+    >
+      <WheelPickerWrapper className="flex h-[16.8rem] !items-center py-[0.8rem]">
+        <WheelPicker
+          options={hourOptions}
+          aria-label="시"
+          infinite
+          optionItemHeight={56}
+          onValueChange={(value: string) => setSelectedHour(value)}
+        />
+        <p className="bod y2-m z-2 mx-[0.8rem] flex h-[5.6rem] items-center justify-center">
+          :
+        </p>
+        <WheelPicker
+          options={minuteOptions}
+          aria-label="분"
+          infinite
+          optionItemHeight={56}
+          onValueChange={(value: string) => setSelectedMinute(value)}
+        />
+        <div className="mx-[0.4rem]" />
+        <WheelPicker
+          options={meridiemOptions}
+          aria-label="오전/오후"
+          optionItemHeight={56}
+          onValueChange={(value: string) => setSelectedMeridiem(value)}
+        />
+      </WheelPickerWrapper>
+      <div className="flex w-full gap-[1.2rem] pb-[2.4rem] pt-[0.8rem]">
+        <Button variant="secondary" onClick={onCancel}>
+          취소
+        </Button>
+        <Button
+          variant="primary"
+          onClick={() =>
+            onSave({
+              hour: selectedHour,
+              minute: selectedMinute,
+              meridiem: selectedMeridiem,
+            })
+          }
+        >
+          확인
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TimePicker;

apps/client/src/pages/onBoarding/components/timePicker/TimePicker.tsx

@@ -1,6 +1,7 @@
 import Category from '@pages/category/Category';
 import Level from '@pages/level/Level';
 import MyBookmark from '@pages/myBookmark/MyBookmark';
+import OnBoarding from '@pages/onBoarding/OnBoarding';
 import Remind from '@pages/remind/Remind';
 import { ROUTES_CONFIG } from '@routes/routesConfig';
 import { createBrowserRouter } from 'react-router-dom';
@@ -27,6 +28,10 @@ export const router = createBrowserRouter([
         path: ROUTES_CONFIG.level.path,
         element: <Level />,
       },
+      {
+        path: ROUTES_CONFIG.onBoarding.path,
+        element: <OnBoarding />,
+      },
     ],
   },
 ]);

apps/client/src/routes/router.tsx

@@ -15,4 +15,8 @@ export const ROUTES_CONFIG = {
     title: '레벨',
     path: '/level',
   },
+  onBoarding: {
+    title: '온보딩',
+    path: '/onBoarding',
+  },
 };

apps/client/src/routes/routesConfig.ts

@@ -17,5 +17,8 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "iconLibrary": "lucide",
+  "registries": {
+    "@ncdai": "https://chanhdai.com/r/{name}.json"
+  }
 }

packages/design-system/components.json

@@ -48,9 +48,11 @@
     "typescript": "5.9.2",
     "typescript-eslint": "^8.39.1",
     "vite": "^7.1.2",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@ncdai/react-wheel-picker": "^1.0.15",
     "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",

packages/design-system/package.json

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { within, userEvent } from '@storybook/test';
-import Badge, { type BadgeProps } from './Badge';
+import Badge from './Badge';
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',

packages/design-system/src/components/badge/Badge.stories.tsx

@@ -1,5 +1,5 @@
-import { cn } from '@/lib';
 import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary';

packages/design-system/src/components/button/Button.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@/icons';
 import chippiNoImage from '../../assets/chippi_no_image.svg';
+import { Icon } from '../../icons';
 import BaseCard from './BaseCard';
 
 interface MyBookmarkCardProps {