feat: DayPicker 컴포넌트 생성 및 마감일 설정 기능 구현

Author: GamjaIsMine02

components/plans/DatePicker.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import * as Popover from '@radix-ui/react-popover';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { CalendarIcon } from 'lucide-react';
+import { useState } from 'react';
+import { DayPicker } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+
+interface DatePickerProps {
+  date: Date | undefined;
+  setDate: (date: Date | undefined) => void;
+}
+
+const DatePicker = ({ date, setDate }: DatePickerProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelectDate = (selectedDate: Date | undefined) => {
+    setDate(selectedDate);
+    setIsOpen(false); // 날짜 고르면 팝오버 닫기
+  };
+
+  return (
+    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Popover.Trigger asChild>
+        <button
+          className={`bg-background flex items-center gap-1.5 rounded-md border-2 px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200 ${
+            date
+              ? 'bg-background border-[#d5dcfb] text-gray-900 hover:bg-gray-50'
+              : 'bg-surface border-gray-200 text-gray-400 hover:text-gray-600'
+          } focus:outline-none`}
+        >
+          <CalendarIcon size={16} />
+          {date ? format(date, 'yyyy-MM-dd') : <span>마감일 선택</span>}
+        </button>
+      </Popover.Trigger>
+
+      <Popover.Portal>
+        <Popover.Content
+          className="animate-in fade-in zoom-in-95 z-50 rounded-xl border border-gray-100 bg-white p-2 shadow-xl duration-200"
+          align="start" // 버튼의 왼쪽 라인에 맞춰서 열림
+          sideOffset={5} // 버튼과 5px 간격
+        >
+          <DayPicker
+            mode="single" // 날짜 하나만 선택
+            selected={date} // 현재 선택된 날짜 표시
+            onSelect={handleSelectDate} // 선택 핸들러
+            locale={ko} // 한국어 달력 (월, 요일)
+            // 커스텀 스타일 (Tailwind 색상 적용)
+            modifiersClassNames={{
+              selected:
+                'bg-purple-600 text-white hover:bg-purple-500 rounded-full', // 선택된 날짜 색상
+              today: 'text-purple-600 font-bold', // 오늘 날짜 색상
+            }}
+            // DayPicker 기본 스타일 오버라이드 (선택사항)
+            styles={{
+              head_cell: { width: '40px', color: '#9ca3af' },
+              cell: { width: '40px' },
+              day: { margin: 'auto', borderRadius: '50%' },
+            }}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+export default DatePicker;

components/plans/InlineAddTaskForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { Calendar, Plus, X } from 'lucide-react';
+import DatePicker from './DatePicker';
 
 interface InlineAddTaskFormProps {
   onSave: (text: string, date?: Date) => Promise<void>; // 저장 핸들러
@@ -15,8 +16,7 @@ export default function InlineAddTaskForm({
   const [text, setText] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // 날짜 라이브러리를 붙일 예정이므로 지금은 임시 상태
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+  const [deadline, setDeadline] = useState<Date | undefined>();
 
   const handleSubmit = async (e?: React.FormEvent) => {
     e?.preventDefault();
@@ -25,7 +25,7 @@ export default function InlineAddTaskForm({
     setIsSubmitting(true);
 
     try {
-      await onSave(text, selectedDate);
+      await onSave(text, deadline);
       setText(''); // 저장 후 초기화
       onCancel(); // 저장 후 닫기
     } catch (error) {
@@ -45,7 +45,7 @@ export default function InlineAddTaskForm({
   };
 
   return (
-    <div className="border-border-focus-blue mb-2 flex items-center gap-3 rounded-xl border-2 bg-white p-2 pl-4 shadow-sm">
+    <div className="mt-2 mb-2 flex items-center gap-3 rounded-xl border-2 border-[#D5DCFB] bg-white p-2 pl-4 shadow-sm">
       {/* 1. 체크박스 자리 (비활성 모양) */}
       <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-gray-50">
         <Plus size={14} className="text-gray-400" />
@@ -66,14 +66,7 @@ export default function InlineAddTaskForm({
 
         {/* 3. 마감일 버튼 (요청하신 부분) */}
         <div className="flex items-center">
-          <button
-            type="button"
-            className="flex items-center gap-1.5 rounded-md bg-gray-100 px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200"
-            onClick={() => alert('나중에 달력 라이브러리 연결될 곳!')}
-          >
-            <Calendar size={12} />
-            {selectedDate ? selectedDate.toLocaleDateString() : '마감일 설정'}
-          </button>
+          <DatePicker date={deadline} setDate={setDeadline} />
         </div>
       </div>
 

components/plans/PlanSection.tsx

@@ -215,7 +215,7 @@ export default function PlanSection({
           ) : (
             <button
               onClick={() => setIsAddingTask(true)}
-              className="mt-2 flex w-full items-center justify-center gap-1 rounded-xl border-2 border-dashed border-[#556BD6]/30 py-3 text-sm font-medium text-[#556BD6] transition-colors hover:bg-[#556BD6]/5"
+              className="mt-2 flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-[#556BD6]/30 py-3 text-sm font-medium text-[#556BD6] transition-colors hover:bg-[#556BD6]/5"
             >
               <Plus size={16} /> 새 하위항목 추가
             </button>