feat: 오늘의 목표 달성률 표시 구현

Author: moo1677

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

@@ -8,49 +8,22 @@ import ButtonSection from '@/components/home/ButtonSection';
 
 import { useEffect, useState } from 'react';
 import { useAuthUser } from '@/hooks/useAuthUser';
-
-import {
-  Todo,
-  fetchTodos,
-  AddTodo,
-  toggleTodoStatus,
-} from '@/services/home/todoService.service';
+import { useTodayPlanItems } from '@/hooks/useTodayPlanItems';
 import { getProfile, Profile } from '@/services/home/profileService.service';
 
 const Page = () => {
   // 현재 사용자 정보
   const { user: currentUser, authLoading } = useAuthUser();
-
   const [profile, setProfile] = useState<Profile | null>(null);
-  const [todos, setTodos] = useState<Todo[]>([]);
   const [error, setError] = useState<string | null>(null);
 
-  // 1. 할 일 목록 불러오기
-  const loadTodos = async (uid: string) => {
-    try {
-      setError(null);
-
-      const fetchedTodos = await fetchTodos(uid);
-      setTodos(fetchedTodos);
-    } catch (err) {
-      console.error(err);
-      setError('데이터를 불러오는 데 실패하였습니다');
-    }
-  };
-
-  // 3. 할 일 상태 토글
-  const handleToggleTodo = async (id: string, currentStatus: boolean) => {
-    if (!currentUser) return;
-    try {
-      setError(null);
-
-      await toggleTodoStatus(currentUser.uid, id, currentStatus);
-      await loadTodos(currentUser.uid);
-    } catch (err) {
-      console.error(err);
-      setError('상태를 업데이트하는 데 실패하였습니다');
-    }
-  };
+  const {
+    items,
+    loading: planLoading,
+    error: planError,
+    toggle,
+    progressText,
+  } = useTodayPlanItems(currentUser?.uid);
 
   // 사용자가 존재하면 데이터 불러옴
   useEffect(() => {
@@ -59,7 +32,6 @@ const Page = () => {
       try {
         const userProfile = await getProfile(currentUser.uid);
         setProfile(userProfile);
-        await loadTodos(currentUser.uid);
       } catch (err) {
         console.error(err);
         setError('프로필 정보를 불러오는 데 실패하였습니다');
@@ -96,6 +68,7 @@ const Page = () => {
         className="grid grid-cols-1 gap-4 md:grid-cols-3"
         profile={profile}
         uid={currentUser.uid}
+        progressText={progressText}
       />
 
       {/* 2-2. GraphSection */}
@@ -104,7 +77,10 @@ const Page = () => {
       {/* 2-3. BottomSection */}
       <BottomSection
         className="grid grid-cols-1 gap-4 md:grid-cols-2"
-        uid={currentUser.uid}
+        items={items}
+        loading={planLoading}
+        error={planError}
+        onToggle={toggle}
       />
 
       {/* 3. ButtonSection */}

components/home/BottomSection.tsx

@@ -1,45 +1,33 @@
 'use client';
 
 import TodayPlanContainer from './TodayPlanContainer';
+import type { PlanItem } from '@/services/plans/planManageService.service';
+
 interface BottomSectionProps {
-  uid: string;
   className?: string;
+  items: PlanItem[];
+  loading: boolean;
+  error: string | null;
+  onToggle: (id: string, checked: boolean) => void;
 }
 
-// const TODAY_DUMMY = [
-//   { id: 't1', text: 'React Hooks 정리', isChecked: false },
-//   { id: 't2', text: 'GSAP ScrollTrigger 복습', isChecked: true },
-//   { id: 't3', text: '알고리즘 1문제 풀기', isChecked: false },
-// ];
-
-// const UPCOMING_DUMMY = [
-//   { id: 'u1', text: 'Next.js App Router 정리', isChecked: false },
-//   { id: 'u2', text: '포트폴리오 리팩토링', isChecked: false },
-// ];
-
-export default function BottomSection({ className, uid }: BottomSectionProps) {
-  // const [today, setToday] = useState<ChecklistItem[]>(TODAY_DUMMY);
-  // const [upcoming, setUpcoming] = useState<ChecklistItem[]>(UPCOMING_DUMMY);
-
-  // const toggleToday = (id: string) => {
-  //   setToday((prev) =>
-  //     prev.map((it) =>
-  //       it.id === id ? { ...it, isChecked: !it.isChecked } : it
-  //     )
-  //   );
-  // };
+export default function BottomSection({
+  className,
+  items,
+  loading,
+  error,
+  onToggle,
+}: BottomSectionProps) {
 
-  // const toggleUpcoming = (id: string) => {
-  //   setUpcoming((prev) =>
-  //     prev.map((it) =>
-  //       it.id === id ? { ...it, isChecked: !it.isChecked } : it
-  //     )
-  //   );
-  // };
 
   return (
     <div className={className}>
-      <TodayPlanContainer uid={uid}></TodayPlanContainer>
+      <TodayPlanContainer
+        items={items}
+        loading={loading}
+        error={error}
+        onToggle={onToggle}
+      ></TodayPlanContainer>
 
       {/* <Card title="다가오는 일정">
         <CheckList

components/home/ProfileSection.tsx

@@ -7,9 +7,15 @@ interface ProfileSectionProps {
   className?: string;
   profile: Profile | null;
   uid: string;
+  progressText: string;
 }
 
-const ProfileSection = ({ className, profile, uid }: ProfileSectionProps) => {
+const ProfileSection = ({
+  className,
+  profile,
+  uid,
+  progressText,
+}: ProfileSectionProps) => {
   const icon = getRandomProfileIcon(uid);
   const avatarUrl = profile?.avatar_url;
 
@@ -49,7 +55,9 @@ const ProfileSection = ({ className, profile, uid }: ProfileSectionProps) => {
 
       <div className="md:col-span-1">
         <Card className="flex h-full flex-col items-center justify-center text-center">
-          <div className="text-primary mb-1 text-4xl font-bold">3/5</div>
+          <div className="text-primary mb-1 text-4xl font-bold">
+            {progressText}
+          </div>
           <div className="text-sm font-medium text-gray-500">
             오늘의 목표 달성률
           </div>

components/home/TodayPlanContainer.tsx

@@ -2,11 +2,21 @@
 
 import Card from '@/components/home/Card';
 import CheckList from '@/components/home/CheckList';
-import { useTodayPlanItems } from '@/hooks/useTodayPlanItems';
+import { PlanItem } from '@/services/plans/planManageService.service';
 
-export default function TodayPlanContainer({ uid }: { uid: string }) {
-  const { items, loading, error, toggle } = useTodayPlanItems(uid);
+type TodayPlanContainerProps = {
+  items: PlanItem[];
+  loading: boolean;
+  error: string | null;
+  onToggle: (id: string, checked: boolean) => void;
+};
 
+export default function TodayPlanContainer({
+  items,
+  loading,
+  error,
+  onToggle,
+}: TodayPlanContainerProps) {
   if (loading) {
     return <div className="text-sm text-gray-400">불러오는 중...</div>;
   }
@@ -19,7 +29,7 @@ export default function TodayPlanContainer({ uid }: { uid: string }) {
     <Card title="오늘의 할 일">
       <CheckList
         items={items}
-        onToggleTodo={(id, checked) => toggle(id, checked)}
+        onToggleTodo={(id, checked) => onToggle(id, checked)}
         emptyText="오늘 완료할 계획이 없습니다"
       />
     </Card>

hooks/useTodayPlanItems.ts

@@ -26,7 +26,6 @@ export const useTodayPlanItems = (uid?: string) => {
     }
   }, [uid]);
 
-  // ✅ 진행률 계산
   const total = useMemo(() => items.length, [items]);
   const completed = useMemo(
     () => items.reduce((acc, it) => acc + (it.isChecked ? 1 : 0), 0),