feat: 다가오는 일정 표시

Author: moo1677

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

@@ -76,6 +76,7 @@ const Page = () => {
 
       {/* 2-3. BottomSection */}
       <BottomSection
+        uid={currentUser.uid}
         className="grid grid-cols-1 gap-4 md:grid-cols-2"
         items={items}
         loading={planLoading}

components/home/BottomSection.tsx

@@ -1,9 +1,13 @@
 'use client';
 
 import TodayPlanContainer from './TodayPlanContainer';
+import UpcomingPlanContainer from '@/components/home/UpcomingPlanContainer';
 import type { PlanItem } from '@/services/plans/planManageService.service';
+import { useTodayPlanItems } from '@/hooks/useTodayPlanItems';
+import { useUpcomingPlanItems } from '@/hooks/useUpcomingPlanItems';
 
 interface BottomSectionProps {
+  uid: string;
   className?: string;
   items: PlanItem[];
   loading: boolean;
@@ -12,30 +16,33 @@ interface BottomSectionProps {
 }
 
 export default function BottomSection({
+  uid,
   className,
   items,
   loading,
   error,
   onToggle,
 }: BottomSectionProps) {
-
+  const today = useTodayPlanItems(uid);
+  const upcoming = useUpcomingPlanItems(uid);
 
   return (
     <div className={className}>
+      {/* 오늘의 목표 */}
       <TodayPlanContainer
         items={items}
         loading={loading}
         error={error}
         onToggle={onToggle}
       ></TodayPlanContainer>
 
-      {/* <Card title="다가오는 일정">
-        <CheckList
-          items={upcoming}
-          onToggle={toggleUpcoming}
-          emptyText="다가오는 일정이 없습니다"
-        />
-      </Card> */}
+      {/* 다가오는 일정 */}
+      <UpcomingPlanContainer
+        items={upcoming.items}
+        loading={upcoming.loading}
+        error={upcoming.error}
+        limit={today.total}
+      />
     </div>
   );
 }

components/home/UpcomingPlanContainer.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import Card from '@/components/home/Card';
+import CheckList from '@/components/home/CheckList';
+import { PlanItem } from '@/services/plans/planManageService.service';
+
+type Props = {
+  items: PlanItem[];
+  loading: boolean;
+  error: string | null;
+  limit: number;
+};
+
+export default function UpcomingPlanContainer({
+  items,
+  loading,
+  error,
+  limit,
+}: Props) {
+  if (loading) {
+    return <div className="text-sm text-gray-400">불러오는 중...</div>;
+  }
+
+  if (error) {
+    return <div className="text-sm text-red-500">{error}</div>;
+  }
+
+  const visible = items.slice(0, limit);
+  const hiddenCount = Math.max(items.length - limit, 0);
+
+  return (
+    <Card title="다가오는 일정">
+      <CheckList
+        items={visible}
+        onToggleTodo={() => {}}
+        emptyText="다가오는 일정이 없습니다"
+      />
+
+      {hiddenCount > 0 && (
+        <p className="mt-2 text-xs text-gray-400">
+          +{hiddenCount}개의 일정이 더 있습니다
+        </p>
+      )}
+    </Card>
+  );
+}

hooks/useTodayPlanItems.ts

@@ -36,7 +36,6 @@ export const useTodayPlanItems = (uid?: string) => {
     [completed, total]
   );
 
-  // ✅ 토글만
   const toggle = useCallback(
     async (id: string, current: boolean) => {
       if (!uid) return;
@@ -71,5 +70,6 @@ export const useTodayPlanItems = (uid?: string) => {
     error,
     toggle,
     progressText,
+    total,
   };
 };

hooks/useUpcomingPlanItems.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { PlanItem } from '@/services/plans/planManageService.service';
+import { fetchUpcomingPlanItems } from '@/services/plans/planManageService.service';
+
+const startOfTomorrowKST = () => {
+  // KST 기준 "내일 00:00"
+  const now = new Date();
+  const kst = new Date(now.getTime() + 9 * 60 * 60 * 1000);
+
+  const y = kst.getUTCFullYear();
+  const m = kst.getUTCMonth();
+  const d = kst.getUTCDate();
+
+  // 내일 00:00 KST => UTC로 다시 변환(= -9h)
+  const tomorrowKSTMidnightUTC = new Date(Date.UTC(y, m, d + 2, 0, 0, 0));
+  const backToLocal = new Date(
+    tomorrowKSTMidnightUTC.getTime() - 9 * 60 * 60 * 1000
+  );
+
+  return backToLocal;
+};
+
+export const useUpcomingPlanItems = (uid?: string) => {
+  const [items, setItems] = useState<PlanItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fromDate = useMemo(() => startOfTomorrowKST(), []);
+
+  const loadUpcoming = useCallback(async () => {
+    if (!uid) return;
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await fetchUpcomingPlanItems(uid, fromDate);
+      setItems(data);
+    } catch (e) {
+      console.error(e);
+      setError('다가오는 일정을 불러오는 데 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }, [uid, fromDate]);
+
+  useEffect(() => {
+    if (!uid) return;
+    loadUpcoming();
+  }, [uid, loadUpcoming]);
+
+  return {
+    items,
+    loading,
+    error,
+    loadUpcoming,
+  };
+};

services/plans/planManageService.service.ts

@@ -187,6 +187,7 @@ export const updatePlanItem = async (
   }
 };
 
+// 오늘의 할일 가져오기
 export const fetchTodayPlanItems = async (uid: string): Promise<PlanItem[]> => {
   const itemsRef = collection(db, 'users', uid, 'planItems');
 
@@ -217,3 +218,35 @@ export const fetchTodayPlanItems = async (uid: string): Promise<PlanItem[]> => {
     };
   }) as PlanItem[];
 };
+
+// 다가오는 일정 가져오기
+export const fetchUpcomingPlanItems = async (
+  uid: string,
+  fromDate: Date
+): Promise<PlanItem[]> => {
+  const itemsRef = collection(db, 'users', uid, 'planItems');
+
+  const q = query(
+    itemsRef,
+    where('deadline', '>=', Timestamp.fromDate(fromDate))
+  );
+
+  const snapshot = await getDocs(q);
+
+  const items = snapshot.docs.map((d) => {
+    const data = d.data();
+    return {
+      id: d.id,
+      ...data,
+      createdAt: data.createdAt?.toDate?.() ?? new Date(),
+      deadline: data.deadline?.toDate?.() ?? new Date(),
+    } as PlanItem;
+  });
+
+  //정렬
+  items.sort(
+    (a, b) => +a.deadline - +b.deadline || +a.createdAt - +b.createdAt
+  );
+
+  return items;
+};