feat: 홈 페이지에서 유저 정보를 가져와 카드 내용을 구성하도록 구현#34
Conversation
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthrough인증 상태 변화에 따라 Firestore에서 사용자의 프로필을 로드하고 todos를 함께 초기화/정리하도록 홈 페이지 데이터 흐름을 통합했으며, ProfileSection에 profile prop을 전달하도록 컴포넌트를 변경했습니다. todo 정렬을 생성 시각 오름차순으로 변경하고, 회원가입에 streakDays/tilCount 초기값을 추가했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Home as Home Page (page.tsx)
participant Auth as Auth Listener
participant ProfileSvc as Profile Service
participant TodoSvc as Todo Service
participant Firestore as Firestore
participant ProfileComp as ProfileSection
User->>Home: 페이지 접근
Home->>Auth: onAuthStateChanged 등록
Auth-->>Home: currentUser 변경 알림
Home->>ProfileSvc: getProfile(currentUser.uid)
ProfileSvc->>Firestore: users/{uid} 문서 조회
Firestore-->>ProfileSvc: 프로필 데이터 또는 null
ProfileSvc-->>Home: Profile 반환
Home->>TodoSvc: fetchTodos(currentUser.uid)
TodoSvc->>Firestore: todos 쿼리 (createAt ASC)
Firestore-->>TodoSvc: todo 목록 반환
TodoSvc-->>Home: todos 반환
Home->>ProfileComp: profile prop 및 todos 전달
ProfileComp->>User: 프로필 및 통계 렌더링
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 분 Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
✏️ Tip: You can disable this entire section by setting Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@app/`(with-sidebar)/(home)/page.tsx:
- Around line 83-97: The loadData function inside the useEffect needs to handle
errors from getProfile to avoid unhandled promise rejections: wrap the
getProfile call (and subsequent setProfile / loadTodos sequence) in a try/catch
inside loadData, on error log or surface the error (e.g., via console.error or
processLogger) and setProfile(null) and setTodos([]) as a safe fallback; keep
the existing loadTodos error handling unchanged and ensure loadData still
returns/awaits properly.
In `@lib/home/profileService.ts`:
- Around line 5-11: The Profile interface declares required fields streakDays,
tilCount, and dailyGoal but signup creates only nickname, email, createdAt, so
new users will get undefined for those fields; update the Profile interface
(Profile) to make streakDays, tilCount, and dailyGoal optional OR modify
getProfile to supply defaults when reading from Firestore (e.g., in getProfile
use fallback values for profile.streakDays, profile.tilCount,
profile.dailyGoal), and ensure api/signup.api.ts creates documents with either
those default fields or rely on getProfile’s defaults for consistency.
🧹 Nitpick comments (3)
lib/home/profileService.ts (1)
23-23: 미완성 코드: 프로필 업데이트 함수 누락프로필 업데이트 기능에 대한 주석만 있고 구현이 없습니다. 추후 구현 예정이라면 TODO 주석으로 명시하거나, 불필요하다면 제거하는 것이 좋습니다.
이 기능 구현이 필요하시면 도움을 드릴 수 있습니다. 이슈를 생성해 드릴까요?
components/home/ProfileSection.tsx (2)
19-27: profile이 null일 때 빈 값 렌더링 처리 필요
profile이null인 경우 (로딩 중 또는 fetch 실패 시) 닉네임, 이메일 등이 빈 값으로 표시됩니다. 로딩 상태나 기본값을 표시하는 것이 사용자 경험 개선에 도움이 됩니다.♻️ 기본값 또는 플레이스홀더 적용 예시
<h3 className="text-xl font-bold text-gray-900"> - {profile?.nickname} + {profile?.nickname ?? '로딩 중...'} </h3> -<p className="text-sm text-gray-500">{profile?.email}</p> +<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">{profile?.streakDays}일 </span>연속 + <span className="text-primary">{profile?.streakDays ?? 0}일 </span>연속 <span className="text-gray-400">|</span> - <span className="text-primary">{profile?.tilCount}개 </span>TIL + <span className="text-primary">{profile?.tilCount ?? 0}개 </span>TIL </div>
32-39: 하드코딩된 목표 달성률 값 발견PR 목적이 하드코딩된 목데이터를 제거하는 것인데, "3/5" 목표 달성률이 여전히 하드코딩되어 있습니다. PR 설명에 따르면 이 부분은 추후 구현 예정으로 보이지만, 명확히 하기 위해 TODO 주석을 추가하거나
profile?.dailyGoal을 활용하는 것을 권장합니다.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/(with-sidebar)/(home)/page.tsxcomponents/home/ProfileSection.tsxlib/home/profileService.tslib/home/todoService.ts
🧰 Additional context used
🧬 Code graph analysis (3)
lib/home/profileService.ts (2)
lib/firebase.ts (1)
db(26-26)api/signup.api.ts (1)
signupWithEmail(11-20)
components/home/ProfileSection.tsx (1)
lib/home/profileService.ts (1)
Profile(5-11)
app/(with-sidebar)/(home)/page.tsx (3)
lib/home/profileService.ts (2)
Profile(5-11)getProfile(14-21)lib/home/todoService.ts (1)
Todo(14-19)lib/firebase.ts (1)
auth(25-25)
🔇 Additional comments (3)
lib/home/todoService.ts (1)
24-24: LGTM!할 일 목록 정렬 순서가 생성 시간 기준 오름차순(오래된 항목 먼저)으로 변경되었습니다. 의도된 변경으로 보입니다.
app/(with-sidebar)/(home)/page.tsx (2)
74-81: LGTM!인증 상태 감지 로직이 데이터 로딩 로직과 깔끔하게 분리되어 있습니다.
onAuthStateChanged구독 해제도 클린업 함수에서 적절히 처리하고 있습니다.
115-118: LGTM!
ProfileSection에profileprop이 올바르게 전달되고 있습니다.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| // 사용자가 존재하면 데이터 불러옴 | ||
| useEffect(() => { | ||
| if (currentUser) { | ||
| const loadData = async () => { | ||
| const userProfile = await getProfile(currentUser.uid); | ||
| setProfile(userProfile); | ||
|
|
||
| await loadTodos(currentUser.uid); | ||
| }; | ||
| loadData(); | ||
| } else { | ||
| setTodos([]); | ||
| setProfile(null); | ||
| } | ||
| }, [currentUser]); |
There was a problem hiding this comment.
getProfile 호출 시 에러 처리 누락
loadTodos 함수는 내부적으로 try/catch로 에러를 처리하지만, getProfile 호출은 에러 처리가 없습니다. Firestore 요청 실패 시 unhandled promise rejection이 발생할 수 있습니다.
🛠️ 에러 처리 추가 제안
useEffect(() => {
if (currentUser) {
const loadData = async () => {
- const userProfile = await getProfile(currentUser.uid);
- setProfile(userProfile);
-
- await loadTodos(currentUser.uid);
+ 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]);🤖 Prompt for AI Agents
In `@app/`(with-sidebar)/(home)/page.tsx around lines 83 - 97, The loadData
function inside the useEffect needs to handle errors from getProfile to avoid
unhandled promise rejections: wrap the getProfile call (and subsequent
setProfile / loadTodos sequence) in a try/catch inside loadData, on error log or
surface the error (e.g., via console.error or processLogger) and
setProfile(null) and setTodos([]) as a safe fallback; keep the existing
loadTodos error handling unchanged and ensure loadData still returns/awaits
properly.
1) 작업한 이슈번호
#31
2) 변경 요약 (What & Why)
3) 스크린샷/동영상 (UI 변경 시)
4) 상세 변경사항
5) 참고사항
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항
✏️ Tip: You can customize this high-level summary in your review settings.