feat: 계획 관리 페이지 플랜 수정 기능 구현

Author: GamjaIsMine02

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

@@ -9,6 +9,7 @@ import {
   deletePlanItem,
   fetchPlans,
   Plan,
+  updatePlan,
 } from '@/services/plans/planManageService.service';
 
 import PageHeader from '@/components/common/PageHeader';
@@ -94,6 +95,28 @@ const Page = () => {
     }
   };
 
+  // 플랜 수정 핸들러
+  const handleUpdatePlan = async (
+    planId: string,
+    title: string,
+    description: string
+  ) => {
+    if (!user) {
+      alert('로그인이 필요합니다.');
+      return;
+    }
+
+    try {
+      await updatePlan(user.uid, planId, { title, description });
+
+      // 목록 새로고침
+      const fetchedPlans = await fetchPlans(user.uid);
+      setPlans(fetchedPlans);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   return (
     <div className="bg-background min-h-screen p-11">
       <PageHeader
@@ -167,6 +190,7 @@ const Page = () => {
                   title={plan.title}
                   description={plan.description}
                   onDeletePlan={handleDeletePlan}
+                  onUpdatePlan={handleUpdatePlan}
                 />
               ))
             ) : (

components/plans/PlanSection.tsx

@@ -2,12 +2,14 @@
 
 import { useState, useEffect, useRef } from 'react';
 import {
+  Check,
   ChevronDown,
   ChevronUp,
   Edit2,
   MoreVertical,
   Plus,
   Trash2,
+  X,
 } from 'lucide-react';
 import Card from '../home/Card';
 import TaskItem from './TaskItem';
@@ -26,6 +28,11 @@ interface PlanSectionProps {
   title: string;
   description?: string;
   onDeletePlan: (planId: string, title: string) => void;
+  onUpdatePlan: (
+    planId: string,
+    newTitle: string,
+    newDescription: string
+  ) => void;
 }
 
 export default function PlanSection({
@@ -34,14 +41,18 @@ export default function PlanSection({
   title,
   description,
   onDeletePlan,
+  onUpdatePlan,
 }: PlanSectionProps) {
   const [isOpen, setIsOpen] = useState(true);
   const [tasks, setTasks] = useState<PlanItem[]>([]);
   const [isTasksLoading, setIsTasksLoading] = useState(true);
   const [isAddingTask, setIsAddingTask] = useState(false);
 
-  const [showPlanMenu, setShowPlanMenu] = useState(false);
+  const [isEditingPlan, setIsEditingPlan] = useState(false);
+  const [editTitle, setEditTitle] = useState(title);
+  const [editDesc, setEditDesc] = useState(description || '');
 
+  const [showPlanMenu, setShowPlanMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
   // 1. 초기 데이터 로드
@@ -148,6 +159,33 @@ export default function PlanSection({
     }
   };
 
+  // 6. 플랜 수정 핸들러
+  const handleStartEdit = (e: React.MouseEvent) => {
+    e.stopPropagation(); // 아코디언 토글 방지
+
+    setEditTitle(title); // props로 받은 최신값으로 초기화
+    setEditDesc(description || '');
+
+    setIsEditingPlan(true);
+    setShowPlanMenu(false); // 메뉴 닫기
+  };
+
+  const handleSaveEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    // 부모 컴포넌트에게 변경된 내용 전달
+    onUpdatePlan(planId, editTitle, editDesc);
+
+    setIsEditingPlan(false); // 수정 모드 종료
+  };
+
+  // 7. 플랜 수정 취소 핸들러
+  const handleCancelEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    setIsEditingPlan(false); // 수정 모드 종료
+  };
+
   // 완료된 할 일 개수 계산
   const completedCount = tasks.filter((t) => t.isChecked).length;
   const totalCount = tasks.length;
@@ -163,12 +201,51 @@ export default function PlanSection({
       {/* 헤더 영역 */}
       <div
         className="flex cursor-pointer items-start justify-between"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => !isEditingPlan && setIsOpen(!isOpen)}
       >
-        <div>
-          <h3 className="text-xl font-bold text-gray-900">{title}</h3>
-          <p className="mt-1 text-sm text-gray-500">{description}</p>
-        </div>
+        {isEditingPlan ? (
+          <div
+            className="flex cursor-default flex-col gap-2"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* 제목 입력창 */}
+            <input
+              type="text"
+              value={editTitle}
+              onChange={(e) => setEditTitle(e.target.value)}
+              className="w-full border-b-2 border-[#556BD6] bg-transparent text-xl font-bold text-gray-900 focus:outline-none"
+              placeholder="플랜 제목"
+              autoFocus
+            />
+            {/* 설명 입력창 */}
+            <input
+              type="text"
+              value={editDesc}
+              onChange={(e) => setEditDesc(e.target.value)}
+              className="w-full border-b border-gray-300 bg-transparent text-sm text-gray-600 focus:border-[#556BD6] focus:outline-none"
+              placeholder="설명 (선택사항)"
+            />
+            <div className="mt-1 flex gap-2">
+              <button
+                onClick={handleSaveEdit}
+                className="flex items-center gap-1 rounded bg-[#556BD6] px-2 py-1 text-xs text-white transition-colors hover:bg-[#4456a8]"
+              >
+                <Check size={12} /> 저장
+              </button>
+              <button
+                onClick={handleCancelEdit}
+                className="flex items-center gap-1 rounded bg-gray-200 px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-300"
+              >
+                <X size={12} /> 취소
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div>
+            <h3 className="text-xl font-bold text-gray-900">{title}</h3>
+            <p className="mt-1 text-sm text-gray-500">{description}</p>
+          </div>
+        )}
 
         <div className="flex items-center gap-4">
           <div className="text-right">
@@ -193,10 +270,7 @@ export default function PlanSection({
               <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('플랜 수정 기능');
-                  }}
+                  onClick={handleStartEdit}
                 >
                   <Edit2 size={14} /> 수정
                 </button>

services/plans/planManageService.service.ts

@@ -146,17 +146,17 @@ export const deletePlanItem = async (uid: string, itemId: string) => {
 export const updatePlan = async (
   uid: string,
   planId: string,
-  updates: { text?: string; description?: string }
+  updates: { title?: string; description?: string }
 ) => {
   const planRef = doc(db, 'users', uid, 'plans', planId);
 
   const updatePayload: {
-    text?: string;
+    title?: string;
     description?: string;
   } = {};
 
-  if (updates.text !== undefined) {
-    updatePayload.text = updates.text;
+  if (updates.title !== undefined) {
+    updatePayload.title = updates.title;
   }
   if (updates.description !== undefined) {
     updatePayload.description = updates.description;