✨Feat: date picker components 구현

package.json

@@ -34,6 +34,11 @@
     "svg-sprite-loader": "^6.0.11",
     "tailwindcss": "4.1.14",
     "typescript": "^5",
-    "class-variance-authority": "^0.7.1"
+    "class-variance-authority": "^0.7.1",
+    "@radix-ui/react-popover": "^1.1.15",
+    "date-fns": "^4.1.0",
+    "react-day-picker": "^9.11.1",
+    "@radix-ui/react-slot": "^1.2.3",
+    "lucide-react": "^0.540.0"
   }
 }

src/pages/index.tsx

@@ -1,30 +1,20 @@
-import { ControlBar, Header, Tag } from '@/shared/components';
+import { DatePicker } from '@/shared/components';
 import { Icon } from '@/shared/icons';
-import LocationBubble from '@/shared/components/container/LocationBubble';
-import LocationCard from '@/shared/components/container/LocationCard';
-import EventCard from '@/shared/components/container/EventCard';
-import AddressCopy from '@/shared/components/button/AddressCopy';
+import { useState } from 'react';
 
 export default function Home() {
+  const [date, setDate] = useState<Date>();
+
   return (
     <>
       <div className='flex flex-col items-center justify-center  min-h-screen py-2 bg-gray-50'>
         <main className='flex flex-col items-center justify-center w-full flex-1 px-4 sm:px-20 text-center'>
-          <Header onClick={() => {}} className='' title={'글다'} />
-          <ControlBar isLoggedIn={false} onLogin={() => {}} userName={''} />
-          <ControlBar isLoggedIn={true} userName='홍길동' onLogin={() => {}} />
+          <DatePicker value={date} onChange={setDate} />
+
           <h1 className='text-4xl sm:text-6xl font-extrabold text-gray-900 mb-4'>
             초기 세팅 완료
             <Icon name='User' color='mint-600' />
           </h1>
-
-          <Tag label='리스트로 보기' icon='MapPin_' variant='toggle' />
-          <Tag label='지도로 보기' icon='FadersHorizontal' variant='toggle' />
-          <Tag label='#데이트' variant='hash' />
-          <Icon name='CalendarBlank' size={200} color='gray-900' />
-          <Icon name='User' size={200} color='blue-400' />
-          <Icon name='User' size={200} color='red-300' />
-          <Icon name='User' size={200} color='red-300' />
           <p className='mt-3 text-lg sm:text-2xl text-gray-600'>
             Next.js(Page Router) + TS + Tailwind + Axios
           </p>

src/shared/components/datePicker/CalendarDropdownAdapter.tsx

@@ -0,0 +1,23 @@
+import { CustomDropdown } from './CustomDropdown';
+import type { DropdownProps } from 'react-day-picker';
+
+export function CalendarDropdownAdapter({
+  value,
+  onChange,
+  options,
+  'aria-label': ariaLabel,
+}: DropdownProps) {
+  return (
+    <CustomDropdown
+      value={value as number}
+      options={options ?? []}
+      aria-label={ariaLabel}
+      onChange={(next) => {
+        const evt = {
+          target: { value: String(next) },
+        } as unknown as React.ChangeEvent<HTMLSelectElement>;
+        onChange?.(evt);
+      }}
+    />
+  );
+}

src/shared/components/datePicker/CustomDropdown.tsx

@@ -0,0 +1,177 @@
+import { cn } from '@/shared/lib';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { DropdownOption } from 'react-day-picker';
+
+export interface CustomDropdownProps {
+  value?: number;
+  onChange: (next: number) => void;
+  options: DropdownOption[];
+  'aria-label'?: string;
+  className?: string;
+}
+
+export function CustomDropdown({
+  value,
+  onChange,
+  options,
+  'aria-label': ariaLabel,
+  className,
+}: CustomDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  const calcSelectedIndex = useCallback(() => {
+    const i = options.findIndex((o) => o.value === value);
+    return i >= 0 ? i : 0;
+  }, [options, value]);
+
+  const [activeIndex, setActiveIndex] = useState<number>(calcSelectedIndex());
+
+  useEffect(() => {
+    setActiveIndex(calcSelectedIndex());
+  }, [calcSelectedIndex]);
+
+  const label =
+    options.find((o) => o.value === value)?.label ?? options[0]?.label ?? '';
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handler = (e: Event) => {
+      const t = (e as Event).target as Node | null;
+      if (!t) return;
+      if (!buttonRef.current?.contains(t) && !listRef.current?.contains(t)) {
+        setOpen(false);
+      }
+    };
+
+    const usePointer =
+      typeof window !== 'undefined' && 'PointerEvent' in window;
+
+    if (usePointer) {
+      document.addEventListener('pointerdown', handler as EventListener, true);
+      return () =>
+        document.removeEventListener(
+          'pointerdown',
+          handler as EventListener,
+          true,
+        );
+    } else {
+      document.addEventListener('mousedown', handler as EventListener, true);
+      document.addEventListener('touchstart', handler as EventListener, true);
+      return () => {
+        document.removeEventListener(
+          'mousedown',
+          handler as EventListener,
+          true,
+        );
+        document.removeEventListener(
+          'touchstart',
+          handler as EventListener,
+          true,
+        );
+      };
+    }
+  }, [open]);
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (
+      !open &&
+      (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === ' ')
+    ) {
+      e.preventDefault();
+      setOpen(true);
+      return;
+    }
+    if (!open) return;
+
+    if (e.key === 'Escape') {
+      setOpen(false);
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      let i = activeIndex + 1;
+      while (i < options.length && options[i].disabled) i++;
+      setActiveIndex(Math.min(i, options.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      let i = activeIndex - 1;
+      while (i >= 0 && options[i].disabled) i--;
+      setActiveIndex(Math.max(i, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const opt = options[activeIndex];
+      if (opt && !opt.disabled) {
+        onChange(opt.value);
+        setOpen(false);
+      }
+    }
+  };
+
+  return (
+    <div className={cn('relative inline-block', className)}>
+      <button
+        ref={buttonRef}
+        type='button'
+        aria-haspopup='listbox'
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        onClick={() => setOpen((v) => !v)}
+        onKeyDown={onKeyDown}
+        className={cn(
+          'h-[32px] rounded-[12px] bg-pink-50 border border-pink-100',
+          'px-3 pr-8 text-label-lg text-pink-800 inline-flex items-center gap-1',
+          'focus:outline-none focus:ring-2 focus:ring-pink-200',
+        )}
+      >
+        {label}
+      </button>
+
+      {open && (
+        <ul
+          ref={listRef}
+          role='listbox'
+          tabIndex={-1}
+          aria-label={ariaLabel}
+          className={cn(
+            'absolute z-50 mt-2 w-[14rem] max-h-[20rem] overflow-auto',
+            'rounded-[12px] border border-pink-200 bg-white p-1 shadow-xl',
+          )}
+        >
+          {options.map((opt, idx) => {
+            const selected = opt.value === value;
+            const highlighted = idx === activeIndex;
+
+            return (
+              <li
+                key={opt.value}
+                role='option'
+                aria-selected={selected}
+                aria-disabled={opt.disabled || undefined}
+                onMouseEnter={() => setActiveIndex(idx)}
+                onPointerDown={(e) => e.preventDefault()}
+                onClick={() => {
+                  if (!opt.disabled) {
+                    onChange(opt.value);
+                    setOpen(false);
+                  }
+                }}
+                className={cn(
+                  'relative cursor-pointer select-none rounded-[8px] px-3 py-2 text-body-md',
+                  opt.disabled && 'opacity-40 pointer-events-none',
+                  highlighted && 'bg-pink-50',
+                  selected && 'text-pink-800 font-medium',
+                )}
+              >
+                {opt.label}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

src/shared/components/datePicker/DatePicker.tsx

@@ -0,0 +1,88 @@
+'use client';
+import { Calendar } from './calendar';
+import { Button } from './button';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Icon } from '@/shared/icons';
+import { cn } from '@/shared/lib';
+import { useEffect, useState } from 'react';
+
+interface DatePickerProps {
+  value?: Date;
+  onChange?: (date: Date) => void;
+  defaultValue?: Date;
+  className?: string;
+}
+const toFirstOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
+export function DatePicker({
+  value,
+  onChange,
+  defaultValue,
+  className,
+  ...calendarProps
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [innerDate, setInnerDate] = useState<Date | undefined>(defaultValue);
+
+  const [displayMonth, setDisplayMonth] = useState<Date>(
+    toFirstOfMonth(value ?? innerDate ?? new Date()),
+  );
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setInnerDate(value);
+      setDisplayMonth(toFirstOfMonth(value));
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (open) {
+      const base = value ?? innerDate ?? new Date();
+      setDisplayMonth(toFirstOfMonth(base));
+    }
+  }, [open, value, innerDate]);
+
+  const selected = value ?? innerDate;
+
+  const handleSelect = (d?: Date) => {
+    if (!d) return;
+    onChange ? onChange(d) : setInnerDate(d);
+    setDisplayMonth(toFirstOfMonth(d));
+    setOpen(false);
+  };
+
+  const today = new Date();
+  const startOfToday = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate(),
+  );
+
+  return (
+    <div className={cn('flex flex-col gap-3', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button className='w-[16rem] h-[4rem] justify-between rounded-[500px] text-label-lg text-pink-300 bg-pink-50 border border-pink-100'>
+            {selected ? selected.toLocaleDateString() : 'Select date'}
+            <Icon name='CalendarBlank' color='pink-400' size={14} />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent className='w-[24rem] p-0' align='start'>
+          <Calendar
+            mode='single'
+            className='w-[24rem] h-auto p-3 [--cell-size:2.8rem]'
+            selected={selected}
+            onSelect={handleSelect}
+            month={displayMonth}
+            onMonthChange={setDisplayMonth}
+            captionLayout='dropdown'
+            disabled={{ before: startOfToday }}
+            fromDate={startOfToday}
+            toYear={new Date(new Date().getFullYear() + 5, 0, 1).getFullYear()}
+            {...calendarProps}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

src/shared/components/datePicker/PopoverContent.client.tsx

@@ -0,0 +1,32 @@
+'use client';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@/shared/lib';
+import { forwardRef } from 'react';
+
+export const PopoverContent = forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(function PopoverContent(
+  { className, align = 'center', sideOffset = 4, ...props },
+  ref,
+) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        data-slot='popover-content'
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+          'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 w-72 origin-(--radix-popover-content-transform-origin)',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+});