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

feat: 홈 페이지에서 유저 정보를 가져와 카드 내용을 구성하도록 구현

Author: GamjaIsMine02

api/signup.api.ts

@@ -6,6 +6,8 @@ export type SignupPayload = {
   nickname: string;
   email: string;
   password: string;
+  streakDays: number;
+  tilCount: number;
 };
 
 export async function signupWithEmail(p: SignupPayload) {
@@ -15,6 +17,8 @@ export async function signupWithEmail(p: SignupPayload) {
     nickname: p.nickname,
     email: p.email,
     createdAt: serverTimestamp(),
+    streakDays: 0,
+    tilCount: 0,
   });
   return cred.user;
 }

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

@@ -14,35 +14,20 @@ import {
   AddTodo,
   toggleTodoStatus,
 } from '@/lib/home/todoService';
+import { getProfile, Profile } from '@/lib/home/profileService';
 
 import { User, onAuthStateChanged } from 'firebase/auth';
 import { auth } from '@/lib/firebase';
 
 const Page = () => {
+  const [profile, setProfile] = useState<Profile | null>(null);
   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 {
@@ -86,6 +71,36 @@ const Page = () => {
     }
   };
 
+  // 사용자 로그인 상태 감지
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setCurrentUser(user);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  // 사용자가 존재하면 데이터 불러옴
+  useEffect(() => {
+    if (currentUser) {
+      const loadData = async () => {
+        try {
+          const userProfile = await getProfile(currentUser.uid);
+          setProfile(userProfile);
+          await loadTodos(currentUser.uid);
+        } catch (err) {
+          console.error(err);
+          setError('프로필 정보를 불러오는 데 실패하였습니다');
+        }
+      };
+      loadData();
+    } else {
+      setTodos([]);
+      setProfile(null);
+    }
+  }, [currentUser]);
+
+  // 유저 정보가 없을 시
   if (!currentUser) {
     return (
       <div className="flex min-h-screen items-center justify-center">
@@ -94,13 +109,17 @@ const Page = () => {
     );
   }
 
+  // 유저 정보가 있을 시
   return (
     <div className="bg-background flex min-h-screen flex-col gap-4 font-sans md:p-[137px]">
       {/* 1. Header */}
       <HeaderSection />
 
       {/* 2-1. ProfileSection */}
-      <ProfileSection className="grid grid-cols-1 gap-4 md:grid-cols-3" />
+      <ProfileSection
+        className="grid grid-cols-1 gap-4 md:grid-cols-3"
+        profile={profile}
+      />
 
       {/* 2-2. GraphSection */}
       <GraphSection></GraphSection>

components/home/ProfileSection.tsx

@@ -1,10 +1,12 @@
+import { Profile } from '@/lib/home/profileService';
 import Card from './Card';
 
 interface ProfileSectionProps {
   className?: string;
+  profile: Profile | null;
 }
 
-const ProfileSection = ({ className }: ProfileSectionProps) => {
+const ProfileSection = ({ className, profile }: ProfileSectionProps) => {
   return (
     <div className={className}>
       <div className="md:col-span-2">
@@ -14,12 +16,14 @@ const ProfileSection = ({ className }: ProfileSectionProps) => {
           </div>
 
           <div>
-            <h3 className="text-xl font-bold text-gray-900">이건무</h3>
-            <p className="text-sm text-gray-500">@mnmnnmm324</p>
+            <h3 className="text-xl font-bold text-gray-900">
+              {profile?.nickname}
+            </h3>
+            <p className="text-sm text-gray-500">{profile?.email}</p>
             <div className="mt-1 flex gap-2 text-xs font-medium">
-              <span className="text-primary">38193일 </span>연속
+              <span className="text-primary">{profile?.streakDays}일 </span>연속
               <span className="text-gray-400">|</span>
-              <span className="text-primary">12개 </span>TIL
+              <span className="text-primary">{profile?.tilCount}개 </span>TIL
             </div>
           </div>
         </Card>

lib/home/profileService.ts

@@ -0,0 +1,22 @@
+import { doc, getDoc } from 'firebase/firestore';
+import { db } from '../firebase';
+
+// 프로필 데이터 타입
+export interface Profile {
+  nickname: string;
+  email: string;
+  streakDays: number;
+  tilCount: number;
+}
+
+// 1. 유저 프로필 정보 가져오기
+export const getProfile = async (uid: string): Promise<Profile | null> => {
+  const userDocRef = doc(db, 'users', uid);
+  const docSnap = await getDoc(userDocRef);
+
+  if (docSnap.exists()) {
+    return docSnap.data() as Profile;
+  } else return null;
+};
+
+// 2. 사용자 프로필 정보 업데이트

lib/home/todoService.ts

@@ -21,7 +21,7 @@ export interface Todo {
 // 1. 할 일 목록 가져오기
 export const fetchTodos = async (uid: string): Promise<Todo[]> => {
   const todosCollectionPath = collection(db, 'users', uid, 'todos');
-  const q = query(todosCollectionPath, orderBy('createAt', 'desc'));
+  const q = query(todosCollectionPath, orderBy('createAt', 'asc'));
   const snapshot = await getDocs(q);
 
   return snapshot.docs.map((doc) => ({