diff --git a/api/signup.api.ts b/api/signup.api.ts index 4bc10fb..d284ad9 100644 --- a/api/signup.api.ts +++ b/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; } diff --git a/app/(with-sidebar)/(home)/page.tsx b/app/(with-sidebar)/(home)/page.tsx index 5e0543c..338362c 100644 --- a/app/(with-sidebar)/(home)/page.tsx +++ b/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(null); const [todos, setTodos] = useState([]); + const [error, setError] = useState(null); // 현재 사용자 정보 const [currentUser, setCurrentUser] = useState(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 (
@@ -94,13 +109,17 @@ const Page = () => { ); } + // 유저 정보가 있을 시 return (
{/* 1. Header */} {/* 2-1. ProfileSection */} - + {/* 2-2. GraphSection */} diff --git a/components/home/ProfileSection.tsx b/components/home/ProfileSection.tsx index c3d52a6..81b5811 100644 --- a/components/home/ProfileSection.tsx +++ b/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 (
@@ -14,12 +16,14 @@ const ProfileSection = ({ className }: ProfileSectionProps) => {
-

이건무

-

@mnmnnmm324

+

+ {profile?.nickname} +

+

{profile?.email}

- 38193일 연속 + {profile?.streakDays}일 연속 | - 12개 TIL + {profile?.tilCount}개 TIL
diff --git a/lib/home/profileService.ts b/lib/home/profileService.ts new file mode 100644 index 0000000..f88daa6 --- /dev/null +++ b/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 => { + const userDocRef = doc(db, 'users', uid); + const docSnap = await getDoc(userDocRef); + + if (docSnap.exists()) { + return docSnap.data() as Profile; + } else return null; +}; + +// 2. 사용자 프로필 정보 업데이트 diff --git a/lib/home/todoService.ts b/lib/home/todoService.ts index b6113a5..228ee8a 100644 --- a/lib/home/todoService.ts +++ b/lib/home/todoService.ts @@ -21,7 +21,7 @@ export interface Todo { // 1. 할 일 목록 가져오기 export const fetchTodos = async (uid: string): Promise => { 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) => ({