feat: 계획 관리 페이지 상단 카드에 보여지는 전체 플랜 수, 진행 중인 플랜 수, 완료된 플랜 수를 보여지도록 메서드 구현 및 UI 적용

Author: GamjaIsMine02

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

@@ -7,8 +7,10 @@ import {
   addPlan,
   deletePlan,
   deletePlanItem,
+  fetchAllPlanItems,
   fetchPlans,
   Plan,
+  PlanItem,
   updatePlan,
 } from '@/services/plans/planManageService.service';
 
@@ -30,17 +32,72 @@ const Page = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 4;
 
+  const [stats, setStats] = useState({
+    total: 0,
+    working: 0, // 진행중
+    completed: 0, // 완료됨
+  });
+
+  // 카드 업데이트를 위한 stats 가져오기 메서드
+  const fetchAndCalculate = async (uid: string) => {
+    try {
+      // 1. 데이터 병렬 로드
+      const [fetchedPlans, fetchedItems] = await Promise.all([
+        fetchPlans(uid),
+        fetchAllPlanItems(uid),
+      ]);
+
+      setPlans(fetchedPlans); // 플랜 목록 업데이트
+
+      // 2. 통계 계산 로직
+      let completedCount = 0;
+      let workingCount = 0;
+
+      fetchedPlans.forEach((plan) => {
+        const myItems = fetchedItems.filter(
+          (item: PlanItem) => item.planId === plan.id
+        );
+        // ⚠️ 하위 항목이 하나라도 있는 경우에만 상태를 판별합니다.
+        if (myItems.length > 0) {
+          const isAllChecked = myItems.every(
+            (item: PlanItem) => item.isChecked
+          );
+
+          if (isAllChecked) {
+            completedCount++; // 모두 완료됨
+          } else {
+            workingCount++; // 항목은 있는데 아직 다 완료 안 됨 -> 진행중
+          }
+        }
+      });
+
+      // 3. 통계 State 업데이트
+      setStats({
+        total: fetchedPlans.length,
+        completed: completedCount,
+        working: workingCount,
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   // 사용자 인증 상태 리스너 및 초기 플랜 목록 로드
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
       setUser(currentUser);
 
       if (currentUser) {
         try {
-          const fetchedPlans = await fetchPlans(currentUser.uid);
-          setPlans(fetchedPlans);
+          const [fetchedPlans, fetchedItems] = await Promise.all([
+            fetchPlans(currentUser.uid),
+            fetchAllPlanItems(currentUser.uid),
+          ]);
 
+          setPlans(fetchedPlans);
           setCurrentPage(1);
+
+          await fetchAndCalculate(currentUser.uid);
         } catch (err) {
           console.error('플랜 목록 로딩 실패:', err);
           setPlans([]);
@@ -69,6 +126,8 @@ const Page = () => {
       setPlans(fetchedPlans);
       setCurrentPage(1);
 
+      await fetchAndCalculate(user.uid);
+
       setIsAdding(false); // 폼 닫기
     } catch (err) {
       console.error('플랜 추가 실패:', err);
@@ -99,6 +158,8 @@ const Page = () => {
         const fetchedPlans = await fetchPlans(user.uid);
         setPlans(fetchedPlans);
 
+        await fetchAndCalculate(user.uid);
+
         // 페이지 조절
         if (
           currentPage > Math.ceil((plans.length - 1) / itemsPerPage) &&
@@ -136,6 +197,7 @@ const Page = () => {
     }
   };
 
+  // 페이지네이션 파트
   const totalPages = Math.ceil(plans.length / itemsPerPage);
   const startIndex = (currentPage - 1) * itemsPerPage;
   const endIndex = startIndex + itemsPerPage;
@@ -181,7 +243,9 @@ const Page = () => {
             <span className="text-text-sub text-sm font-medium">
               진행중인 플랜 수
             </span>
-            <span className="text-4xl font-bold text-[#7B44C4]">1</span>
+            <span className="text-4xl font-bold text-[#7B44C4]">
+              {stats.working}
+            </span>
           </div>
 
           {/* 오른쪽: 아이콘 영역 */}
@@ -195,7 +259,9 @@ const Page = () => {
             <span className="text-text-sub text-sm font-medium">
               완료된 플랜 수
             </span>
-            <span className="text-4xl font-bold text-[#00841F]">1</span>
+            <span className="text-4xl font-bold text-[#00841F]">
+              {stats.completed}
+            </span>
           </div>
 
           {/* 오른쪽: 아이콘 영역 */}
@@ -237,6 +303,7 @@ const Page = () => {
                   description={plan.description}
                   onDeletePlan={handleDeletePlan}
                   onUpdatePlan={handleUpdatePlan}
+                  onChangeStats={() => fetchAndCalculate(user!.uid)}
                 />
               ))
             ) : (

components/plans/PlanSection.tsx

@@ -33,6 +33,7 @@ interface PlanSectionProps {
     newTitle: string,
     newDescription: string
   ) => void;
+  onChangeStats: () => void;
 }
 
 export default function PlanSection({
@@ -42,6 +43,7 @@ export default function PlanSection({
   description,
   onDeletePlan,
   onUpdatePlan,
+  onChangeStats,
 }: PlanSectionProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [tasks, setTasks] = useState<PlanItem[]>([]);
@@ -111,6 +113,8 @@ export default function PlanSection({
       // 데이터 최신화: DB 업데이트 후 목록을 다시 불러옵니다.
       const updatedTasks = await fetchPlanItems(userId, planId);
       setTasks(updatedTasks);
+
+      onChangeStats();
     } catch (error) {
       console.error('상태 변경 실패: ', error);
       // 에러 시 원래대로 돌리거나 다시 불러오기
@@ -142,6 +146,8 @@ export default function PlanSection({
     onDeletePlan(planId, title);
 
     setShowPlanMenu(false);
+
+    onChangeStats();
   };
 
   // 5. 하위 항목 삭제 핸들러
@@ -157,6 +163,8 @@ export default function PlanSection({
         console.error(err);
       }
     }
+
+    onChangeStats();
   };
 
   // 6. 플랜 수정 핸들러
@@ -170,6 +178,7 @@ export default function PlanSection({
     setShowPlanMenu(false); // 메뉴 닫기
   };
 
+  // 플랜 수정 핸들러
   const handleSaveEdit = (e: React.MouseEvent) => {
     e.stopPropagation();
 

services/plans/planManageService.service.ts

@@ -211,3 +211,17 @@ export const updatePlanItem = async (
     await updateDoc(itemRef, updatePayload);
   }
 };
+
+// 10. 하위 항목 모두 가져오기
+export const fetchAllPlanItems = async (uid: string): Promise<PlanItem[]> => {
+  const allPlanItemsRef = collection(db, 'users', uid, 'planItems');
+  const q = query(allPlanItemsRef);
+  const snapshot = await getDocs(q);
+
+  return snapshot.docs.map((doc) => ({
+    id: doc.id,
+    planId: doc.data().planId,
+    isChecked: doc.data().isChecked,
+    ...doc.data(),
+  })) as PlanItem[];
+};