✨ [Feature] 캘린더 화면 api 연동 (#35)

[hyeeon]

📌 작업 내용

• 월별 일정 마커 조회 API 연결 (GET /api/v1/calendars/monthly)
• 날짜별 일정+체크리스트 조회 API 연결 (GET /api/v1/calendars/daily)
• 주별 일정+체크리스트 조회 API 연결 (GET /api/v1/calendars/weekly)
• 체크리스트 항목 완료 처리 API 연결 (PATCH /api/v1/checklists/{checklistId}/complete)
• 체크리스트가 있을 때만 토글 아이콘 표시 및 펼침 영역 노출

📷 스크린 샷

⚠️ 참고 사항

🔗 관련 이슈

Closes #35

Summary by CodeRabbit

• 새로운 기능
  • 캘린더 화면을 주간 뷰와 월간 뷰로 자유롭게 전환 가능하도록 완전히 개편
  • 자녀별 필터링 기능으로 선택한 자녀의 일정과 체크리스트만 확인
  • 이벤트 카드에서 체크리스트의 각 항목을 개별적으로 토글하고 완료 처리
  • 실시간 데이터 로드와 낙관적 업데이트로 즉각적이고 부드러운 사용 경험 제공

[coderabbitai]

Warning

Rate limit exceeded

@hyeeon has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 39 minutes and 4 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 32dd3c29-a74d-448d-a08e-9f601ff5f480

📥 Commits

Reviewing files that changed from the base of the PR and between b09d2d5 and 636ecb7.

📒 Files selected for processing (2)

• app/(tabs)/calendar.tsx
• src/api/calendar.ts

📝 Walkthrough

Walkthrough

캘린더 API 클라이언트 모듈(src/api/calendar.ts)을 신규 추가하고, 월/주 캘린더 UI 컴포넌트를 구현한 후, 캘린더 화면을 정적 플레이스홀더에서 데이터 페칭 및 낙관적 업데이트를 지원하는 상태ful 컴포넌트로 교체합니다.

Changes

캘린더 API 및 UI 통합

Layer / File(s)	Summary
API 계약 및 인증 설정 src/api/auth.ts, src/api/calendar.ts	apiClient 공개화 후, CalendarApiError, getAuthHeader, 그리고 CalendarChecklist, CalendarEvent, DailyResult, WeeklyResult, ChildInfo, MonthlyMarker 타입을 정의하여 API 응답 구조를 계약합니다.
API 클라이언트 함수 src/api/calendar.ts	fetchChildren, fetchMonthlyMarkers, fetchDailyEvents, fetchWeeklyEvents 조회 함수와 completeChecklist 변경 함수를 구현하여 캘린더 엔드포인트(/api/v1/children, /api/v1/calendars/monthly, /api/v1/calendars/daily, /api/v1/calendars/weekly, /api/v1/checklists/{checklistId}/complete)와 통신합니다.
캘린더 UI 컴포넌트 src/components/calendar/EventCard.tsx, src/components/calendar/MonthCalendar.tsx, src/components/calendar/WeekCalendar.tsx	EventCard는 이벤트를 카드 형태로 렌더링하고 체크리스트 확장/토글을 지원하며, MonthCalendar는 월별 날짜 그리드와 마커 도트를 표시하고, WeekCalendar는 7일 행 레이아웃과 네비게이션을 구성합니다.
캘린더 화면 구현 및 스타일 src/styles/calendar/calendar.ts, app/(tabs)/calendar.tsx	CalendarScreen이 자녀 필터, 월/주 전환, 데이터 페칭, 낙관적 업데이트/롤백, 초기 스크롤 위치 동기화를 포함한 상태ful 구현으로 전환되며, 헤더, 필터바, 일정 리스트, 체크리스트 UI 스타일을 새로 정의합니다.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• GACHI-Project/GACHI-FE#34: CalendarScreen의 주/월 전환, EventCard/MonthCalendar/WeekCalendar 컴포넌트 구현, 그리고 이벤트 카드 확장/체크리스트 토글 로직이 중복됩니다.

Suggested reviewers

• chae1125

Poem

🐰 캘린더 API와 UI 춤을 춘다,
주와 달이 손을 맞잡고,
체크리스트 항목들은 희망의 도트로 반짝이니,
낙관적 업데이트가 롤백되어도 괜찮아,
우리는 함께 일정을 이루리! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 '캘린더 화면 api 연동'으로 주요 변경사항(캘린더 API 연동)을 명확하게 요약하고 있으며, 전체 변경사항과 일치한다.
Linked Issues check	✅ Passed	PR의 모든 변경사항이 연결된 이슈 #35의 요구사항을 충족한다: 월별 마커, 날짜별 이벤트, 주별 이벤트 조회 API와 체크리스트 완료 처리 API가 모두 구현되었다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 캘린더 API 연동과 관련 UI 구현 범위 내에 있으며, 요구사항 범위를 벗어난 변경은 없다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/calendar-api

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/`(tabs)/calendar.tsx:
- Around line 86-113: The three useEffect hooks (week: fetchWeeklyEvents →
setWeeklyData, month: fetchMonthlyMarkers → setMonthlyMarkers, day:
fetchDailyEvents → setDayEvents) can suffer from out-of-order responses
overwriting newer state; protect each async call with a per-effect
cancellation/version guard (e.g., an incrementing requestId or AbortController)
captured when the effect starts, check the guard before calling
setWeeklyData/setMonthlyMarkers/setDayEvents and only apply results when the id
matches (or cancel the fetch via AbortController.signal), and clean up in the
effect return to invalidate/cancel previous requests; also ensure the .finally
handlers only clear the loading flag when the response belongs to the current
request.

In `@src/api/calendar.ts`:
- Around line 92-97: The code directly accesses response.data.result.markedDates
which can throw if result is missing; change all such accesses (e.g., the
response variable in the apiClient.get call in src/api/calendar.ts and the other
occurrences around lines referenced) to guard with optional chaining and a safe
default — use response.data?.result?.markedDates ?? [] (and similarly for any
other result properties you read in the other blocks at the noted locations) so
the function returns an empty array instead of throwing when result is
undefined.
- Around line 25-28: The getAuthHeader helper currently builds Authorization:
`Bearer ${token}` even when token is null; update getAuthHeader to check the
result of SecureStore.getItemAsync('accessToken') and if the token is falsy
either (preferred) throw a clear Error('Missing access token') so callers can
handle auth flow, or return null/undefined (or an empty object) so the
Authorization header is omitted; adjust callers of getAuthHeader (where used) to
handle the thrown error or null return accordingly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: de508a21-42a4-43a8-beff-4133ae2fc67f

📥 Commits

Reviewing files that changed from the base of the PR and between 68e0ad1 and b09d2d5.

📒 Files selected for processing (7)

• app/(tabs)/calendar.tsx
• src/api/auth.ts
• src/api/calendar.ts
• src/components/calendar/EventCard.tsx
• src/components/calendar/MonthCalendar.tsx
• src/components/calendar/WeekCalendar.tsx
• src/styles/calendar/calendar.ts

📜 Review details

🔇 Additional comments (5)

src/api/auth.ts (1)

23-27: LGTM!

src/components/calendar/EventCard.tsx (1)

15-93: LGTM!

src/components/calendar/MonthCalendar.tsx (1)

22-139: LGTM!

src/components/calendar/WeekCalendar.tsx (1)

21-69: LGTM!

src/styles/calendar/calendar.ts (1)

6-218: LGTM!

[chae1125]

아주 좋아용 고생하셨습니다