feat: 날짜피커 커스텀 생성

Author: dasosann

src/components/ui/scrollable-date-picker.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+const ITEM_HEIGHT = 32;
+const VISIBLE_ITEMS = 7;
+const CONTAINER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS; // 224px
+
+interface PickerColumnProps {
+  items: number[];
+  value: number;
+  label: string;
+  onChange: (value: number) => void;
+}
+
+function PickerColumn({ items, value, label, onChange }: PickerColumnProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const isScrollingRef = React.useRef(false);
+  const scrollTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  // Calculate padding to center first/last items
+  const paddingItems = Math.floor(VISIBLE_ITEMS / 2); // 3 items padding top/bottom
+
+  // Scroll to value on mount and when value changes externally
+  React.useEffect(() => {
+    if (containerRef.current && !isScrollingRef.current) {
+      const index = items.indexOf(value);
+      if (index !== -1) {
+        containerRef.current.scrollTop = index * ITEM_HEIGHT;
+      }
+    }
+  }, [value, items]);
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+
+    // Clear existing timeout
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    isScrollingRef.current = true;
+
+    // Debounce: wait for scroll to stop
+    scrollTimeoutRef.current = setTimeout(() => {
+      if (!containerRef.current) return;
+
+      const scrollTop = containerRef.current.scrollTop;
+      const index = Math.round(scrollTop / ITEM_HEIGHT);
+      const clampedIndex = Math.max(0, Math.min(index, items.length - 1));
+
+      // Snap to exact position
+      containerRef.current.scrollTop = clampedIndex * ITEM_HEIGHT;
+
+      const newValue = items[clampedIndex];
+      if (newValue !== undefined && newValue !== value) {
+        onChange(newValue);
+      }
+
+      isScrollingRef.current = false;
+    }, 100);
+  };
+
+  const handleItemClick = (index: number) => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: index * ITEM_HEIGHT,
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  return (
+    <div className='relative h-[224px] overflow-hidden'>
+      <div
+        ref={containerRef}
+        className='scrollbar-hide h-full overflow-y-auto scroll-smooth'
+        onScroll={handleScroll}
+        style={{
+          scrollSnapType: 'y mandatory',
+        }}
+      >
+        {/* Top padding spacer */}
+        <div style={{ height: paddingItems * ITEM_HEIGHT }} />
+
+        {items.map((item, index) => (
+          <div
+            key={item}
+            className='flex cursor-pointer items-center justify-center'
+            style={{
+              height: ITEM_HEIGHT,
+              scrollSnapAlign: 'center',
+            }}
+            onClick={() => handleItemClick(index)}
+          >
+            <div
+              className={cn(
+                'typo-heading-sm-medium whitespace-nowrap transition-colors duration-200',
+                value === item ? 'text-text-basic' : 'text-text-disabled',
+              )}
+            >
+              {item}
+              {label}
+            </div>
+          </div>
+        ))}
+
+        {/* Bottom padding spacer */}
+        <div style={{ height: paddingItems * ITEM_HEIGHT }} />
+      </div>
+    </div>
+  );
+}
+
+interface ScrollableDatePickerProps {
+  value?: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+export function ScrollableDatePicker({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+}: ScrollableDatePickerProps) {
+  const currentDate = value || new Date();
+
+  const selectedYear = currentDate.getFullYear();
+  const selectedMonth = currentDate.getMonth() + 1;
+  const selectedDay = currentDate.getDate();
+
+  // Generate years
+  const currentYear = new Date().getFullYear();
+  const minYear = minDate?.getFullYear() || currentYear - 50;
+  const maxYear = maxDate?.getFullYear() || currentYear + 50;
+
+  const years = React.useMemo(
+    () => Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i),
+    [minYear, maxYear],
+  );
+
+  const months = React.useMemo(
+    () => Array.from({ length: 12 }, (_, i) => i + 1),
+    [],
+  );
+
+  const getDaysInMonth = (year: number, month: number) => {
+    return new Date(year, month, 0).getDate();
+  };
+
+  const days = React.useMemo(
+    () =>
+      Array.from(
+        { length: getDaysInMonth(selectedYear, selectedMonth) },
+        (_, i) => i + 1,
+      ),
+    [selectedYear, selectedMonth],
+  );
+
+  const handleYearChange = (year: number) => {
+    const daysInNewMonth = getDaysInMonth(year, selectedMonth);
+    const newDay = Math.min(selectedDay, daysInNewMonth);
+    onChange(new Date(year, selectedMonth - 1, newDay));
+  };
+
+  const handleMonthChange = (month: number) => {
+    const daysInNewMonth = getDaysInMonth(selectedYear, month);
+    const newDay = Math.min(selectedDay, daysInNewMonth);
+    onChange(new Date(selectedYear, month - 1, newDay));
+  };
+
+  const handleDayChange = (day: number) => {
+    onChange(new Date(selectedYear, selectedMonth - 1, day));
+  };
+
+  return (
+    <div className='relative mx-auto flex h-[224px] w-full max-w-sm items-center justify-center overflow-hidden'>
+      {/* Selection Indicator */}
+      <div
+        className='pointer-events-none absolute inset-x-4 top-1/2 z-0 h-[32px] -translate-y-1/2 rounded-[6px]'
+        style={{ backgroundColor: 'var(--color-element-gray-light, #F1F2F3)' }}
+      />
+
+      {/* Columns Container */}
+      <div className='z-10 flex h-full w-full justify-center px-4'>
+        <div className='relative h-full min-w-0 flex-1'>
+          <PickerColumn
+            items={years}
+            value={selectedYear}
+            label='년'
+            onChange={handleYearChange}
+          />
+        </div>
+        <div className='relative h-full min-w-0 flex-1'>
+          <PickerColumn
+            items={months}
+            value={selectedMonth}
+            label='월'
+            onChange={handleMonthChange}
+          />
+        </div>
+        <div className='relative h-full min-w-0 flex-1'>
+          <PickerColumn
+            items={days}
+            value={selectedDay}
+            label='일'
+            onChange={handleDayChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/global/components/DateXInput.tsx

@@ -1,10 +1,13 @@
 'use client';
-import { Calendar } from '@/components/ui/calendar';
+
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
+import { ScrollableDatePicker } from '@/components/ui/scrollable-date-picker';
 import { cn } from '@/lib/utils';
 import { format } from 'date-fns';
 import { CalendarIcon } from 'lucide-react';
@@ -52,8 +55,8 @@ export default function DateXInput({
             {label}
           </div>
         )}
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger asChild>
             <button
               type='button'
               disabled={disabled}
@@ -70,25 +73,25 @@ export default function DateXInput({
               </span>
               <CalendarIcon className='text-text-subtler ml-2 h-5 w-5' />
             </button>
-          </PopoverTrigger>
-          <PopoverContent
-            align='start'
-            className='border-none bg-transparent p-0 shadow-none'
-          >
-            <Calendar
-              mode='single'
-              selected={parsedDate}
-              onSelect={(date: Date | undefined) => {
-                if (date) {
-                  onChange(format(date, 'yyyy-MM-dd'));
-                  setOpen(false);
-                }
-              }}
-              fromDate={minDate}
-              toDate={maxDate}
-            />
-          </PopoverContent>
-        </Popover>
+          </DrawerTrigger>
+          <DrawerContent className='bg-background-white'>
+            <div className='mx-auto w-full max-w-sm'>
+              <DrawerHeader>
+                <DrawerTitle className='text-center'>날짜 선택</DrawerTitle>
+              </DrawerHeader>
+              <div className='p-4 pb-8' data-vaul-no-drag>
+                <ScrollableDatePicker
+                  value={parsedDate}
+                  onChange={(date: Date) => {
+                    onChange(format(date, 'yyyy-MM-dd'));
+                  }}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                />
+              </div>
+            </div>
+          </DrawerContent>
+        </Drawer>
         {(error || helperText) && (
           <div
             className={`typo-caption-sm-medium px-2 ${