Merge pull request #30 from DeveloperBlog-Devflow/feature/home-page

GamjaIsMine02 · web-flow · commit 6ff687aae159 · 2026-01-15T22:09:13.000+09:00
feat: 홈 페이지 계획 추가 &amp; 계획 완료 토글 기능 구현
diff --git a/app/(with-sidebar)/(home)/page.tsx b/app/(with-sidebar)/(home)/page.tsx
@@ -1,10 +1,99 @@
+'use client';
+
 import BottomSection from '@/components/home/BottomSection';
 import GraphSection from '@/components/home/GraphSection';
 import HeaderSection from '@/components/home/HeaderSection';
 import ProfileSection from '@/components/home/ProfileSection';
 import ButtonSection from '@/components/home/ButtonSection';
 
+import { useEffect, useState } from 'react';
+
+import {
+  Todo,
+  fetchTodos,
+  AddTodo,
+  toggleTodoStatus,
+} from '@/lib/home/todoService';
+
+import { User, onAuthStateChanged } from 'firebase/auth';
+import { auth } from '@/lib/firebase';
+
 const Page = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  // 현재 사용자 정보
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+
+  // 사용자 로그인 상태 감지
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setCurrentUser(user);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  // 사용자가 존재하면 데이터 불러옴
+  useEffect(() => {
+    if (currentUser) {
+      loadTodos(currentUser.uid);
+    } else {
+      setTodos([]);
+    }
+  }, [currentUser]);
+
+  // 1. 할 일 목록 불러오기
+  const loadTodos = async (uid: string) => {
+    try {
+      setError(null);
+
+      const fetchedTodos = await fetchTodos(uid);
+      setTodos(fetchedTodos);
+    } catch (err) {
+      console.error(err);
+      setError('데이터를 불러오는 데 실패하였습니다');
+    }
+  };
+
+  // 2. 할 일 추가
+  const handleAddTodo = async (text: string) => {
+    if (!currentUser) return;
+
+    try {
+      setError(null);
+
+      await AddTodo(currentUser.uid, text);
+      await loadTodos(currentUser.uid);
+    } 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('상태를 업데이트하는 데 실패하였습니다');
+    }
+  };
+
+  if (!currentUser) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p>로그인이 필요합니다.</p>
+      </div>
+    );
+  }
+
   return (
     <div className="bg-background flex min-h-screen flex-col gap-4 font-sans md:p-[137px]">
       {/* 1. Header */}
@@ -17,10 +106,14 @@ const Page = () => {
       <GraphSection></GraphSection>
 
       {/* 2-3. BottomSection */}
-      <BottomSection className="grid grid-cols-1 gap-4 md:grid-cols-2" />
+      <BottomSection
+        className="grid grid-cols-1 gap-4 md:grid-cols-2"
+        todos={todos}
+        onToggleTodo={handleToggleTodo}
+      />
 
       {/* 3. ButtonSection */}
-      <ButtonSection />
+      <ButtonSection onAddTodo={handleAddTodo} />
     </div>
   );
 };
diff --git a/components/home/BottomSection.tsx b/components/home/BottomSection.tsx
@@ -2,60 +2,67 @@
 
 import { useState } from 'react';
 import Card from './Card';
-import CheckList, { ChecklistItem } from './CheckList';
+import CheckList from './CheckList';
+import { Todo } from '@/lib/home/todoService';
 
 interface BottomSectionProps {
   className?: string;
+  todos: Todo[];
+  onToggleTodo: (id: string, currentStatus: 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 }: 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
-      )
-    );
-  };
-
-  const toggleUpcoming = (id: string) => {
-    setUpcoming((prev) =>
-      prev.map((it) =>
-        it.id === id ? { ...it, isChecked: !it.isChecked } : it
-      )
-    );
-  };
+// 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,
+  todos,
+  onToggleTodo,
+}: 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
+  //     )
+  //   );
+  // };
+
+  // const toggleUpcoming = (id: string) => {
+  //   setUpcoming((prev) =>
+  //     prev.map((it) =>
+  //       it.id === id ? { ...it, isChecked: !it.isChecked } : it
+  //     )
+  //   );
+  // };
 
   return (
     <div className={className}>
       <Card title="오늘 할 일">
         <CheckList
-          items={today}
-          onToggle={toggleToday}
+          items={todos}
+          onToggleTodo={onToggleTodo}
           emptyText="오늘 할 일이 없습니다"
         />
       </Card>
 
-      <Card title="다가오는 일정">
+      {/* <Card title="다가오는 일정">
         <CheckList
           items={upcoming}
           onToggle={toggleUpcoming}
           emptyText="다가오는 일정이 없습니다"
         />
-      </Card>
+      </Card> */}
     </div>
   );
 }
diff --git a/components/home/ButtonSection.tsx b/components/home/ButtonSection.tsx
@@ -1,4 +1,15 @@
-const ButtonSection = () => {
+interface ButtonSectionProps {
+  onAddTodo: (text: string) => void;
+}
+
+const ButtonSection = ({ onAddTodo }: ButtonSectionProps) => {
+  const handleAddClick = () => {
+    const text = prompt('할 일을 입력하세요');
+    if (text) {
+      onAddTodo(text);
+    }
+  };
+
   return (
     <div className="flex w-full gap-6">
       <button
@@ -10,6 +21,7 @@ const ButtonSection = () => {
 
       <button
         type="button"
+        onClick={handleAddClick}
         className="flex-1 rounded-xl border border-slate-300 bg-none py-4 text-center text-base font-semibold text-slate-700 transition hover:bg-slate-200 active:bg-slate-300 disabled:cursor-not-allowed disabled:opacity-60"
       >
         계획 추가하기
diff --git a/components/home/CheckList.tsx b/components/home/CheckList.tsx
@@ -1,22 +1,23 @@
 'use client';
 
+import { Todo } from '@/lib/home/todoService';
 import { CheckItem } from './CheckItem';
 
-export type ChecklistItem = {
-  id: string;
-  text: string;
-  isChecked: boolean;
-};
+// export type ChecklistItem = {
+//   id: string;
+//   text: string;
+//   isChecked: boolean;
+// };
 
 interface CheckListProps {
-  items: ChecklistItem[];
-  onToggle: (id: string) => void;
+  items: Todo[];
+  onToggleTodo: (id: string, currentStatus: boolean) => void;
   emptyText?: string;
 }
 
 export default function CheckList({
   items,
-  onToggle,
+  onToggleTodo,
   emptyText = '아직 항목이 없습니다',
 }: CheckListProps) {
   if (items.length === 0) {
@@ -30,7 +31,9 @@ export default function CheckList({
           key={item.id}
           checked={item.isChecked}
           text={item.text}
-          onToggle={() => onToggle(item.id)}
+          onToggle={() => {
+            onToggleTodo(item.id, item.isChecked);
+          }}
         />
       ))}
     </div>
diff --git a/lib/home/todoService.ts b/lib/home/todoService.ts
@@ -0,0 +1,53 @@
+import {
+  addDoc,
+  collection,
+  doc,
+  getDocs,
+  orderBy,
+  query,
+  Timestamp,
+  updateDoc,
+} from 'firebase/firestore';
+import { db } from '../firebase';
+
+// 할 일 데이터 타입
+export interface Todo {
+  id: string;
+  text: string;
+  isChecked: boolean;
+  createAt: Date;
+}
+
+// 1. 할 일 목록 가져오기
+export const fetchTodos = async (uid: string): Promise<Todo[]> => {
+  const todosCollectionPath = collection(db, 'users', uid, 'todos');
+  const q = query(todosCollectionPath, orderBy('createAt', 'desc'));
+  const snapshot = await getDocs(q);
+
+  return snapshot.docs.map((doc) => ({
+    id: doc.id,
+    ...doc.data(),
+    createAt: doc.data().createAt.toDate() ?? new Date(),
+  })) as Todo[];
+};
+
+// 2. 할 일 추가하기
+export const AddTodo = async (uid: string, text: string) => {
+  await addDoc(collection(db, 'users', uid, 'todos'), {
+    text,
+    isChecked: false,
+    createAt: Timestamp.now(),
+  });
+};
+
+// 3. 완료 상태 토글
+export const toggleTodoStatus = async (
+  uid: string,
+  todoId: string,
+  currentStatus: boolean
+) => {
+  const todoRef = doc(db, 'users', uid, 'todos', todoId);
+  await updateDoc(todoRef, {
+    isChecked: !currentStatus,
+  });
+};
