Merge pull request #47 from DeveloperBlog-Devflow/feature/plan-management-page

feat: 계획 관리 페이지 하위 항목 제거 기능 및 마감일 설정 기능 구현

Author: GamjaIsMine02

app/(with-sidebar)/plans/page.tsx

@@ -3,7 +3,13 @@
 import { useState, useEffect } from 'react';
 import { User, onAuthStateChanged } from 'firebase/auth';
 import { auth } from '@/lib/firebase';
-import { addPlan, deletePlan, fetchPlans, Plan } from '@/lib/planManageService';
+import {
+  addPlan,
+  deletePlan,
+  deletePlanItem,
+  fetchPlans,
+  Plan,
+} from '@/lib/planManageService';
 
 import PageHeader from '@/components/common/PageHeader';
 import Card from '@/components/home/Card';
@@ -147,39 +153,42 @@ const Page = () => {
       {/* 검색 바 */}
       <SearchBar />
 
-      {/* 메인 플랜 목록 */}
-      <section className="space-y-6">
-        {isLoading ? (
-          <p>플랜을 불러오는 중...</p>
-        ) : plans.length > 0 && user ? (
-          plans.map((plan) => (
-            <PlanSection
-              key={plan.id}
-              userId={user.uid}
-              planId={plan.id}
-              title={plan.title}
-              description={plan.description}
-              onDelete={handleDeletePlan}
-            />
-          ))
-        ) : (
-          <p>아직 생성된 플랜이 없습니다. 첫 플랜을 추가해보세요!</p>
-        )}
-      </section>
-
-      {/* 하단 추가 버튼 or 인라인 폼 */}
-      <div className="mt-6">
-        {isAdding ? (
-          <InlineAddPlanForm
-            onSave={handleSavePlan}
-            onCancel={handleCancelAdd}
-          />
-        ) : (
-          <div onClick={() => setIsAdding(true)}>
-            <AddPlanButton />
+      {isLoading ? (
+        <p>플랜을 불러오는 중...</p>
+      ) : (
+        <div>
+          <section className="space-y-6">
+            {plans.length > 0 && user ? (
+              plans.map((plan) => (
+                <PlanSection
+                  key={plan.id}
+                  userId={user.uid}
+                  planId={plan.id}
+                  title={plan.title}
+                  description={plan.description}
+                  onDeletePlan={handleDeletePlan}
+                />
+              ))
+            ) : (
+              <p>아직 생성된 플랜이 없습니다. 첫 플랜을 추가해보세요!</p>
+            )}
+          </section>
+
+          {/* 하단 추가 버튼 or 인라인 폼 */}
+          <div className="mt-6">
+            {isAdding ? (
+              <InlineAddPlanForm
+                onSave={handleSavePlan}
+                onCancel={handleCancelAdd}
+              />
+            ) : (
+              <div onClick={() => setIsAdding(true)}>
+                <AddPlanButton />
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {
   ChevronDown,
   ChevronUp,
@@ -17,30 +17,32 @@ import {
   toggleItemStatus,
   PlanItem,
   addPlanItem,
-  deletePlan,
+  deletePlanItem,
 } from '@/lib/planManageService';
 
 interface PlanSectionProps {
   userId: string;
   planId: string;
   title: string;
   description?: string;
-  onDelete: (planId: string, title: string) => void;
+  onDeletePlan: (planId: string, title: string) => void;
 }
 
 export default function PlanSection({
   userId,
   planId,
   title,
   description,
-  onDelete,
+  onDeletePlan,
 }: PlanSectionProps) {
   const [isOpen, setIsOpen] = useState(true);
   const [tasks, setTasks] = useState<PlanItem[]>([]);
   const [isTasksLoading, setIsTasksLoading] = useState(true);
   const [isAddingTask, setIsAddingTask] = useState(false);
 
-  const [showMenu, setShowMenu] = useState(false);
+  const [showPlanMenu, setShowPlanMenu] = useState(false);
+
+  const menuRef = useRef<HTMLDivElement>(null);
 
   // 1. 초기 데이터 로드
   useEffect(() => {
@@ -59,10 +61,29 @@ export default function PlanSection({
         setIsTasksLoading(false);
       }
     };
-
     loadInitialTasks();
   }, [userId, planId]); // userId나 planId가 바뀔 때만 실행됨
 
+  // 1-2. 마우스 클릭 감지
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // 메뉴가 열려있고, 클릭된 요소가 menuRef 내부가 아니라면 닫기
+      if (
+        showPlanMenu &&
+        menuRef.current &&
+        !menuRef.current.contains(event.target as Node)
+      ) {
+        setShowPlanMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+
+    // 언마운트 시 제거
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showPlanMenu]);
+
   // 2. 하위 항목 상태(완료/미완료) 토글 핸들러
   const handleToggleTask = async (itemId: string, currentStatus: boolean) => {
     try {
@@ -80,7 +101,7 @@ export default function PlanSection({
       const updatedTasks = await fetchPlanItems(userId, planId);
       setTasks(updatedTasks);
     } catch (error) {
-      console.error('상태 변경 실패:', error);
+      console.error('상태 변경 실패: ', error);
       // 에러 시 원래대로 돌리거나 다시 불러오기
       const rolledBackTasks = await fetchPlanItems(userId, planId);
       setTasks(rolledBackTasks);
@@ -99,17 +120,32 @@ export default function PlanSection({
 
       setIsAddingTask(false); // 입력 폼 닫기
     } catch (error) {
-      console.error('하위 항목 추가 실패:', error);
+      console.error('하위 항목 추가 실패: ', error);
     }
   };
 
-  //
-  const handleDeleteClick = (e: React.MouseEvent) => {
+  // 4. 플랜 삭제 핸들러
+  const handleDeletePlan = (e: React.MouseEvent) => {
     e.stopPropagation(); // 카드 열림/닫힘 방지
 
-    onDelete(planId, title);
+    onDeletePlan(planId, title);
+
+    setShowPlanMenu(false);
+  };
 
-    setShowMenu(false);
+  // 5. 하위 항목 삭제 핸들러
+  const handleDeletePlanItem = async (itemId: string, title: string) => {
+    if (confirm(`'${title}' 하위 항목을 정말 삭제하시겠습니까?`)) {
+      try {
+        await deletePlanItem(userId, itemId);
+
+        // 목록 새로고침
+        const fetchedPlanItems = await fetchPlanItems(userId, planId);
+        setTasks(fetchedPlanItems);
+      } catch (err) {
+        console.error(err);
+      }
+    }
   };
 
   // 완료된 할 일 개수 계산
@@ -119,7 +155,7 @@ export default function PlanSection({
   // isOpen 상태 false 시 포커스 초기화
   useEffect(() => {
     setIsAddingTask(false); //
-    setShowMenu(false); // 드롭다운 메뉴
+    setShowPlanMenu(false); // 드롭다운 메뉴
   }, [isOpen]);
 
   return (
@@ -141,32 +177,32 @@ export default function PlanSection({
               {completedCount}/{totalCount}
             </span>
           </div>
-          <div className="relative z-10">
+          <div className="relative z-10" ref={menuRef}>
             <button
               onClick={(e) => {
                 e.stopPropagation(); // 부모 클릭(아코디언 토글) 방지
-                setShowMenu(!showMenu);
+                setShowPlanMenu(!showPlanMenu);
               }}
               className="rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100"
             >
               <MoreVertical size={20} />
             </button>
 
             {/* 드롭다운 메뉴 (절대 위치) */}
-            {showMenu && (
+            {showPlanMenu && (
               <div className="absolute top-8 right-0 w-32 overflow-hidden rounded-lg border border-gray-100 bg-white py-1 shadow-lg">
                 <button
                   className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
                   onClick={(e) => {
                     e.stopPropagation();
-                    alert('수정 기능');
+                    alert('플랜 수정 기능');
                   }}
                 >
                   <Edit2 size={14} /> 수정
                 </button>
                 <button
                   className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50"
-                  onClick={handleDeleteClick}
+                  onClick={handleDeletePlan}
                 >
                   <Trash2 size={14} /> 삭제
                 </button>
@@ -201,6 +237,7 @@ export default function PlanSection({
                   deadline={task.deadline}
                   isCompleted={task.isChecked}
                   onToggle={handleToggleTask}
+                  onDelete={handleDeletePlanItem}
                 />
               ))
             )}
@@ -215,7 +252,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>