Feat(client): Time picker 구현

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/timePicker/TimePicker.tsx

@@ -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/routes/router.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/routesConfig.ts

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

packages/design-system/components.json

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

packages/design-system/package.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/src/components/badge/Badge.stories.tsx

@@ -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/button/Button.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/card/MyBookmarkCard.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 {

packages/design-system/src/components/card/RemindCard.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 RemindCardProps {

packages/design-system/src/components/index.ts

@@ -4,8 +4,10 @@ export { default as Card } from './card/Card';
 export { default as Chip } from './chip/Chip';
 export { default as Input } from './input/Input';
 export { default as Level } from './level/Level';
+export { Progress } from './progress/Progress';
 export { Switch } from './switch/Switch';
 export { Textarea } from './textarea/Textarea';
-export { Progress } from './progress/Progress';
 export { default as AutoDismissToast } from './toast/hooks/uesFadeOut';
 export { default as Toast } from './toast/Toast';
+export { WheelPicker, WheelPickerWrapper } from './wheelPicker/WheelPicker';
+export type { WheelPickerOption } from './wheelPicker/WheelPicker';

packages/design-system/src/components/progress/Progress.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
 
 const track = cva('relative w-full overflow-hidden rounded-full', {
   variants: {

packages/design-system/src/components/switch/Switch.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { cn } from '@lib/utils';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
 
 function Switch({
   className,

packages/design-system/src/components/textarea/Textarea.tsx

@@ -1,6 +1,5 @@
-// Textarea.tsx
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 export interface TextareaProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength'> {

packages/design-system/src/components/toast/Toast.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils';
+import { cn } from '../../lib/utils';
 
 export interface ToastProps {
   text: string;

packages/design-system/src/components/toast/hooks/uesFadeOut.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface AutoDismissToastProps {
   children: React.ReactNode;

packages/design-system/src/components/wheelPicker/WheelPicker.tsx

@@ -0,0 +1,45 @@
+import '@ncdai/react-wheel-picker/style.css';
+
+import * as WheelPickerPrimitive from '@ncdai/react-wheel-picker';
+
+import { cn } from '../../lib/utils';
+
+type WheelPickerOption = WheelPickerPrimitive.WheelPickerOption;
+type WheelPickerClassNames = WheelPickerPrimitive.WheelPickerClassNames;
+
+function WheelPickerWrapper({
+  className,
+  ...props
+}: React.ComponentProps<typeof WheelPickerPrimitive.WheelPickerWrapper>) {
+  return (
+    <WheelPickerPrimitive.WheelPickerWrapper
+      className={cn('flex', className)}
+      {...props}
+    />
+  );
+}
+
+function WheelPicker({
+  classNames,
+  ...props
+}: React.ComponentProps<typeof WheelPickerPrimitive.WheelPicker>) {
+  return (
+    <WheelPickerPrimitive.WheelPicker
+      classNames={{
+        ...classNames,
+        optionItem: cn(
+          'text-gray300 !font-medium !text-[1.6rem] !leading-[150%] !tracking-[-0.025em]',
+          classNames?.optionItem
+        ),
+        highlightWrapper: cn(
+          'bg-white border-y-[0.5px] border-gray300 !font-medium !text-[1.6rem] !leading-[150%] !tracking-[-0.025em]',
+          classNames?.highlightWrapper
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+
+export { WheelPicker, WheelPickerWrapper };
+export type { WheelPickerClassNames, WheelPickerOption };

packages/design-system/tsconfig.json

@@ -6,8 +6,7 @@
     "outDir": "dist",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
-      "@lib/*": ["./src/lib/*"]
+      "@/*": ["./src/*"]
     },
     "jsx": "react-jsx"
   },

packages/design-system/vite.config.ts

@@ -1,11 +1,12 @@
 import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
 /// <reference types="vitest/config" />
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
+import { fileURLToPath } from 'node:url';
 import path from 'path';
 import { defineConfig } from 'vite';
-import { fileURLToPath } from 'node:url';
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import tsconfigPaths from 'vite-tsconfig-paths';
 const dirname =
   typeof __dirname !== 'undefined'
     ? __dirname
@@ -16,18 +17,13 @@ export default defineConfig({
   plugins: [
     react(),
     tailwindcss(),
+    tsconfigPaths(),
     svgSpritePlugin({
       iconDirs: ['src/icons/source'],
       symbolId: 'icon-[name]',
       inject: 'body-last',
     }),
   ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-      '@lib': path.resolve(__dirname, '/src/lib'),
-    },
-  },
   build: {
     lib: {
       entry: 'src/components/index.ts',

packages/tailwind-config/shared-styles.css

@@ -161,6 +161,11 @@
 @theme {
   --color-*: initial;
 
+  /* default */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-transparent: transparent;
+
   /* Main Color */
   --color-main0: #f9fffb;
   --color-main100: #c9f2e1;