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

DongEun02 · web-flow · commit 92176c08a969 · 2026-01-29T17:06:38.000+09:00
feat: 계획 관리 페이지 하위 항목 수정 기능, 플랜 검색 기능 구현
diff --git a/app/(with-sidebar)/plans/page.tsx b/app/(with-sidebar)/plans/page.tsx
@@ -38,6 +38,8 @@ const Page = () => {
     completed: 0, // 완료됨
   });
 
+  const [searchQuery, setSearchQuery] = useState('');
+
   // 카드 업데이트를 위한 stats 가져오기 메서드
   const fetchAndCalculate = async (
     uid: string,
@@ -166,12 +168,16 @@ const Page = () => {
         await fetchAndCalculate(user.uid);
 
         // 페이지 조절
+        const newFilteredLength = fetchedPlans.filter((plan) =>
+          plan.title.toLowerCase().includes(searchQuery.toLowerCase())
+        ).length;
+
         if (
-          currentPage > Math.ceil((plans.length - 1) / itemsPerPage) &&
-          Math.ceil((plans.length - 1) / itemsPerPage) > 0
+          currentPage > Math.ceil(newFilteredLength / itemsPerPage) &&
+          Math.ceil(newFilteredLength / itemsPerPage) > 0
         ) {
-          setCurrentPage(Math.ceil((plans.length - 1) / itemsPerPage));
-        } else if (Math.ceil((plans.length - 1) / itemsPerPage) === 0) {
+          setCurrentPage(Math.ceil(newFilteredLength / itemsPerPage));
+        } else if (Math.ceil(newFilteredLength / itemsPerPage) === 0) {
           setCurrentPage(1);
         }
       } catch (err) {
@@ -202,19 +208,29 @@ const Page = () => {
     }
   };
 
+  // 검색 로직
+  const filteredPlans = plans.filter((plan) =>
+    plan.title.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
   // 페이지네이션 파트
-  const totalPages = Math.ceil(plans.length / itemsPerPage);
+  const totalPages = Math.ceil(filteredPlans.length / itemsPerPage);
   const startIndex = (currentPage - 1) * itemsPerPage;
   const endIndex = startIndex + itemsPerPage;
-  const paginatedPlans = plans.slice(startIndex, endIndex);
+  const paginatedPlans = filteredPlans.slice(startIndex, endIndex);
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setCurrentPage(1); // 검색 결과가 바뀌면 첫 페이지로 리셋
+  };
 
   useEffect(() => {
     if (currentPage > totalPages && totalPages > 0) {
       setCurrentPage(totalPages);
     } else if (totalPages === 0 && currentPage !== 1) {
       setCurrentPage(1);
     }
-  }, [plans.length, totalPages, currentPage]);
+  }, [totalPages, currentPage]);
 
   return (
     <div className="bg-background min-h-screen p-11">
@@ -277,7 +293,7 @@ const Page = () => {
       </div>
 
       {/* 검색 바 */}
-      <SearchBar />
+      <SearchBar value={searchQuery} onChange={handleSearch} />
 
       {/* 하단 추가 버튼 or 인라인 폼 */}
       <div className="mt-6 mb-4">
diff --git a/components/plans/PlanSection.tsx b/components/plans/PlanSection.tsx
@@ -20,6 +20,7 @@ import {
   PlanItem,
   addPlanItem,
   deletePlanItem,
+  updatePlanItem,
 } from '@/services/plans/planManageService.service';
 
 interface PlanSectionProps {
@@ -167,7 +168,7 @@ export default function PlanSection({
     onChangeStats();
   };
 
-  // 6. 플랜 수정 핸들러
+  // 6. 플랜 수정 시작 핸들러
   const handleStartEdit = (e: React.MouseEvent) => {
     e.stopPropagation(); // 아코디언 토글 방지
 
@@ -195,6 +196,27 @@ export default function PlanSection({
     setIsEditingPlan(false); // 수정 모드 종료
   };
 
+  // 8. 하위 항목 수정 핸들러
+  const handleUpdatePlanItem = async (
+    itemId: string,
+    newText: string,
+    newDeadline?: Date | null
+  ) => {
+    try {
+      // 1. 서비스 함수 호출 (작성해두신 메서드 사용)
+      await updatePlanItem(userId, itemId, {
+        text: newText,
+        deadline: newDeadline, // Date 객체 또는 null(날짜 삭제 시)
+      });
+
+      // 2. 목록 새로고침 & 통계 갱신
+      const updatedTasks = await fetchPlanItems(userId, planId);
+      setTasks(updatedTasks);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   // 완료된 할 일 개수 계산
   const completedCount = tasks.filter((t) => t.isChecked).length;
   const totalCount = tasks.length;
@@ -321,6 +343,7 @@ export default function PlanSection({
                   isCompleted={task.isChecked}
                   onToggle={handleToggleTask}
                   onDelete={handleDeletePlanItem}
+                  onUpdate={handleUpdatePlanItem}
                 />
               ))
             )}
diff --git a/components/plans/SearchBar.tsx b/components/plans/SearchBar.tsx
@@ -1,12 +1,19 @@
 import { Search } from 'lucide-react';
 
-export default function SearchBar() {
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function SearchBar({ value, onChange }: SearchBarProps) {
   return (
     <div className="mb-4 flex justify-end">
       <div className="relative">
         <input
           type="text"
-          placeholder="검색어를 입력하세요"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="플랜 제목으로 검색..."
           className="w-64 rounded-full border border-gray-200 bg-white py-2 pr-10 pl-4 text-sm shadow-sm focus:border-purple-400 focus:outline-none"
         />
         <Search className="absolute top-2.5 right-3 text-gray-400" size={18} />
diff --git a/components/plans/TaskItem.tsx b/components/plans/TaskItem.tsx
@@ -1,15 +1,21 @@
 'use client';
 
-import { Check, Calendar, Edit2, Trash2, MoreVertical } from 'lucide-react';
+import { Check, Calendar, Edit2, Trash2, MoreVertical, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import DatePicker from './DatePicker';
 
 interface TaskItemProps {
   id: string; // id (토글 식별용)
   text: string;
   isCompleted: boolean;
-  deadline?: string | Date; // Date 타입 받을 수 있게 유연하게
+  deadline?: Date; // Date 타입 받을 수 있게 유연하게
   onToggle: (id: string, currentStatus: boolean) => void; // 토글 핸들러
   onDelete: (itemId: string, text: string) => void;
+  onUpdate: (
+    itemId: string,
+    newText: string,
+    newDeadline?: Date | null
+  ) => void;
 }
 
 export default function TaskItem({
@@ -19,9 +25,15 @@ export default function TaskItem({
   deadline,
   onToggle,
   onDelete,
+  onUpdate,
 }: TaskItemProps) {
   const [showPlanItemMenu, setShowPlanItemMenu] = useState(false);
 
+  const [isEditing, setIsEditing] = useState(false);
+  const [editText, setEditText] = useState(text);
+  // deadline이 string으로 올 수도 있으니 안전하게 변환 (보통은 Date로 옴)
+  const [editDeadline, setEditDeadline] = useState<Date | undefined>(undefined);
+
   const menuRef = useRef<HTMLDivElement>(null);
 
   // 날짜 포맷팅 (Date 객체나 문자열 모두 처리)
@@ -63,77 +75,147 @@ export default function TaskItem({
     setShowPlanItemMenu(false);
   };
 
-  return (
-    <div
-      className={`mb-2 flex items-center justify-between rounded-xl p-4 transition-colors ${
-        isCompleted ? 'bg-gray-50' : 'bg-gray-100'
-      }`}
-    >
-      <div className="flex w-full items-center gap-3">
-        {/* 체크박스 (클릭 가능) */}
-        <div
-          onClick={() => onToggle(id, isCompleted)}
-          className={`flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-md border transition-colors ${
-            isCompleted
-              ? 'border-green-500 bg-green-500 text-white'
-              : 'border-gray-300 bg-white hover:border-purple-400'
-          }`}
-        >
-          {isCompleted && <Check size={16} strokeWidth={3} />}
+  // 하위항목 수정 모드 시작
+  const handleStartEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    setEditText(text);
+    setEditDeadline(deadline);
+
+    setIsEditing(true);
+    setShowPlanItemMenu(false);
+  };
+
+  // 하위 항목 수정 저장
+  const handleSaveEdit = () => {
+    if (!editText.trim()) return;
+    // 변경된 내용 부모에게 전달 (날짜가 없으면 null)
+    onUpdate(id, editText, editDeadline || null);
+    setIsEditing(false);
+  };
+
+  // 하위 항목 수정 취소
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className="animate-fadeIn mb-2 flex items-center gap-3 rounded-xl border-2 border-[#556BD6]/30 bg-white p-2 pl-4 shadow-sm">
+        {/* 아이콘 (수정 모드임을 표시) */}
+        <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md border border-gray-200 bg-gray-50">
+          <Edit2 size={14} className="text-[#556BD6]" />
         </div>
 
-        {/* 텍스트 내용 */}
-        <div className="flex flex-col">
-          <span
-            className={`text-sm font-medium ${
-              isCompleted ? 'text-gray-400 line-through' : 'text-gray-700'
-            }`}
+        <div className="flex flex-1 flex-col gap-2">
+          {/* 텍스트 입력 */}
+          <input
+            autoFocus
+            type="text"
+            value={editText}
+            onChange={(e) => setEditText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.nativeEvent.isComposing)
+                handleSaveEdit();
+              if (e.key === 'Escape') handleCancelEdit();
+            }}
+            className="w-full bg-transparent text-sm font-medium text-gray-900 placeholder:text-gray-400 focus:outline-none"
+          />
+
+          {/* 날짜 선택 (DatePicker 재사용) */}
+          <div className="flex items-center">
+            <DatePicker date={editDeadline} setDate={setEditDeadline} />
+          </div>
+        </div>
+
+        {/* 저장/취소 버튼 */}
+        <div className="flex items-center gap-1 pr-2">
+          <button
+            onClick={handleSaveEdit}
+            className="rounded-lg p-2 text-[#556BD6] transition-colors hover:bg-[#556BD6]/10"
           >
-            {text}
-          </span>
-          {deadline && (
-            <span className="mt-0.5 flex items-center gap-1 text-xs text-gray-400">
-              {/* 작은 달력 아이콘 추가 */}
-              <Calendar size={10} />
-              마감: {formatDate(deadline)}
-            </span>
-          )}
+            <span className="text-xs font-bold">저장</span>
+          </button>
+          <button
+            onClick={handleCancelEdit}
+            className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+          >
+            <X size={18} />
+          </button>
         </div>
       </div>
+    );
+  } else {
+    return (
       <div
-        ref={menuRef}
-        className={`relative ${showPlanItemMenu ? 'z-50' : 'z-10'}`}
+        className={`mb-2 flex items-center justify-between rounded-xl p-4 transition-colors ${
+          isCompleted ? 'bg-gray-50' : 'bg-gray-100'
+        }`}
       >
-        <button
-          onClick={(e) => {
-            e.stopPropagation(); // 부모 클릭(아코디언 토글) 방지
-            setShowPlanItemMenu(!showPlanItemMenu);
-          }}
-          className="rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100"
-        >
-          <MoreVertical size={20} />
-        </button>
-
-        {showPlanItemMenu && (
-          <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('수정 기능');
-              }}
-            >
-              <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={handleDeletePlanItem}
+        <div className="flex w-full items-center gap-3">
+          {/* 체크박스 */}
+          <div
+            onClick={() => onToggle(id, isCompleted)}
+            className={`flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-md border transition-colors ${
+              isCompleted
+                ? 'border-green-500 bg-green-500 text-white'
+                : 'border-gray-300 bg-white hover:border-purple-400'
+            }`}
+          >
+            {isCompleted && <Check size={16} strokeWidth={3} />}
+          </div>
+
+          {/* 텍스트 및 날짜 표시 */}
+          <div className="flex flex-col">
+            <span
+              className={`text-sm font-medium ${
+                isCompleted ? 'text-gray-400 line-through' : 'text-gray-700'
+              }`}
             >
-              <Trash2 size={14} /> 삭제
-            </button>
+              {text}
+            </span>
+            {deadline && (
+              <span className="mt-0.5 flex items-center gap-1 text-xs text-gray-400">
+                <Calendar size={10} />
+                마감: {formatDate(deadline)}
+              </span>
+            )}
           </div>
-        )}
+        </div>
+
+        {/* 메뉴 버튼 */}
+        <div
+          ref={menuRef}
+          className={`relative ${showPlanItemMenu ? 'z-50' : 'z-10'}`}
+        >
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowPlanItemMenu(!showPlanItemMenu);
+            }}
+            className="rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100"
+          >
+            <MoreVertical size={20} />
+          </button>
+
+          {showPlanItemMenu && (
+            <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={handleStartEdit} // ✅ 수정 시작
+              >
+                <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={handleDeletePlanItem}
+              >
+                <Trash2 size={14} /> 삭제
+              </button>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
