Skip to content

feat: 홈 화면 모바일 반응형 적용 (#184) - #185

Merged
mgYang53 merged 2 commits into
developfrom
feat/home-responsive-184
Jul 26, 2026
Merged

mgYang53 merged 2 commits into
developfrom
feat/home-responsive-184

Conversation

@mgYang53

@mgYang53 mgYang53 commented Jul 22, 2026 •

Copy link
Copy Markdown
Contributor

🚀 풀 리퀘스트 제안

📋 작업 내용

홈 화면을 첨부된 모바일 시안의 데이터·빈 상태·약속 펼침 상태에 맞춰 반응형으로 구현했습니다.

🔧 변경 사항

  • 홈 섹션 헤더·타이포그래피·탭 간격을 모바일 기준으로 조정
  • 지금 읽고 있는 책 카드의 크기와 가로 스크롤 동작 개선
  • 내 약속 카드의 모바일 레이아웃, 상태 배지, 펼치기/접기 동작 적용
  • 즐겨찾는 모임을 모바일 단일 열 카드 목록으로 조정
  • 모바일에서 캐러셀 좌우 화살표 비노출 처리

📸 스크린샷

스크린샷 2026-07-23 오전 12 24 22 스크린샷 2026-07-23 오전 12 24 36

📄 기타

관련 이슈: closes #184

Summary by CodeRabbit

  • 새로운 기능

    • 내 모임 목록을 최대 3개까지 접어서 표시하고, 펼치기 시 추가 모임을 불러올 수 있습니다.
    • 펼치기/접기 상태가 보조기기에 전달되도록 접근성이 개선되었습니다.
  • 개선 사항

    • 모바일 화면에서 홈 화면의 카드, 모임, 책 목록 및 버튼 배치가 더욱 보기 좋게 조정되었습니다.
    • 즐겨찾기 버튼의 키보드 조작과 포커스 표시가 개선되었습니다.
    • 책 캐러셀의 가로 스크롤과 화살표 표시 동작이 화면 크기에 맞게 개선되었습니다.
    • 빈 독서 목록에서 “책 추가하기” 버튼이 더욱 눈에 띄게 변경되었습니다.

@coderabbitai

coderabbitai Bot commented Jul 22, 2026 •

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 2123656f-0f30-4d0d-8470-90b96d26acf8

📥 Commits

Reviewing files that changed from the base of the PR and between cea80f3 and a20b78f.

📒 Files selected for processing (3)
  • src/features/gatherings/components/GatheringCard.tsx
  • src/pages/Home/HomePage.tsx
  • src/pages/Home/components/MyMeetingsSection.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/pages/Home/HomePage.tsx
  • src/pages/Home/components/MyMeetingsSection.tsx

Walkthrough

홈 화면 전반에 모바일 반응형 레이아웃, 타이포그래피, 카드 및 캐러셀 스타일이 적용되었습니다. 약속 목록은 3개 기준의 펼치기/접기 상태와 접근성 속성을 사용하도록 변경되었으며, 책 빈 상태와 탭 간격도 조정되었습니다.

Changes

홈 모바일 반응형 개편

Layer / File(s) Summary
캐러셀 및 카드 반응형 스타일
src/features/book/components/BookCarousel.tsx, src/features/gatherings/components/GatheringCard.tsx, src/pages/Home/components/HomeMeetingCard.tsx
캐러셀 오버스크롤·화살표 표시, 모임 카드의 모바일 레이아웃, 즐겨찾기 버튼의 크기·포커스·키보드 이벤트가 변경되었습니다.
홈 섹션 레이아웃 및 타이포그래피
src/pages/Home/HomePage.tsx, src/pages/Home/components/HomeSectionHeader.tsx, src/pages/Home/components/FavoriteGatheringsSection.tsx, src/pages/Home/components/HomeBookCard.tsx
홈 인사말, 섹션 헤더, 즐겨찾는 모임 목록, 책 카드에 반응형 그리드·타이포그래피·간격·접근성 스타일이 적용되었습니다.
약속 목록 펼침 상태
src/pages/Home/components/MyMeetingsSection.tsx
약속 목록을 기본 3개로 표시하고 펼침 상태에서 필요한 다음 페이지를 조회하도록 변경했습니다. 탭 변경 시 접힘 상태로 초기화되며, 펼치기/접기 버튼에 aria-expanded와 aria-controls가 추가되었습니다.
빈 상태 및 탭 간격
src/pages/Home/components/ReadingBooksSection.tsx, src/shared/ui/Tabs.tsx
책 빈 상태의 정렬·높이·버튼 스타일과 작은 화면의 탭 간격이 변경되었습니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MyMeetingsSection
  participant MeetingQuery
  User->>MyMeetingsSection: 펼치기 클릭
  MyMeetingsSection->>MyMeetingsSection: isExpanded 설정
  MyMeetingsSection->>MeetingQuery: fetchNextPage()
  MeetingQuery-->>MyMeetingsSection: 다음 약속 목록 반환
  MyMeetingsSection-->>User: 전체 목록과 접기 버튼 표시
Loading

Possibly related PRs

  • fc-de/dokdok-client#80 — 동일한 BookCarousel의 가로 스크롤 및 화살표 표시 로직과 관련됩니다.

Suggested labels: feat

Suggested reviewers: choiyoungae

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check ❓ Inconclusive 책·약속·즐겨찾기 섹션 반응형은 반영됐지만 하단 네비게이션 고정·선택 상태 변경은 요약만으로 확인되지 않습니다. 하단 네비게이션 관련 코드와 모바일 고정/선택 상태 동작을 추가 확인해 주세요.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 홈 화면 모바일 반응형 적용이라는 핵심 변경을 간결하게 잘 요약합니다.
Out of Scope Changes check ✅ Passed 요약된 변경은 모두 홈 화면 모바일 반응형과 간격·접근성 조정 범위에 머물며 별도 기능 추가는 보이지 않습니다.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/home-responsive-184

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

Comment @coderabbitai help to get the list of available commands.

@mgYang53 mgYang53 self-assigned this Jul 22, 2026
@mgYang53 mgYang53 added the design UI 디자인 변경 label Jul 22, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 `@src/features/gatherings/components/GatheringCard.tsx`:
- Around line 69-73: Update the favorite button’s keyboard handling around
handleFavoriteClick so Enter and Space events are not propagated to the
GatheringCard root onKeyDown. Preserve the button’s native keyboard activation
and ensure card navigation does not trigger when the favorite button is focused.

In `@src/pages/Home/components/MyMeetingsSection.tsx`:
- Line 85: Update the my-meetings list container identified by id
"my-meetings-list" to preserve the existing max-h-98 height limit and
overflow-y-auto scrolling on desktop, while keeping those restrictions disabled
on mobile.
- Around line 32-37: Update handleExpand so expanding continues fetching pages
until hasNextPage is false, rather than invoking fetchNextPage only once.
Preserve setting isExpanded to true, and use the existing pagination state and
fetchNextPage flow without requiring the user to collapse and expand again.
🪄 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: 40ec3efb-c8a5-4fe1-81e5-a67c79259ad6

📥 Commits

Reviewing files that changed from the base of the PR and between 52403d7 and cea80f3.

📒 Files selected for processing (10)
  • src/features/book/components/BookCarousel.tsx
  • src/features/gatherings/components/GatheringCard.tsx
  • src/pages/Home/HomePage.tsx
  • src/pages/Home/components/FavoriteGatheringsSection.tsx
  • src/pages/Home/components/HomeBookCard.tsx
  • src/pages/Home/components/HomeMeetingCard.tsx
  • src/pages/Home/components/HomeSectionHeader.tsx
  • src/pages/Home/components/MyMeetingsSection.tsx
  • src/pages/Home/components/ReadingBooksSection.tsx
  • src/shared/ui/Tabs.tsx

Comment thread src/features/gatherings/components/GatheringCard.tsx
Comment thread src/pages/Home/components/MyMeetingsSection.tsx Outdated
Comment thread src/pages/Home/components/MyMeetingsSection.tsx Outdated
@mgYang53
mgYang53 merged commit f86257a into develop Jul 26, 2026
2 checks passed
@mgYang53
mgYang53 deleted the feat/home-responsive-184 branch July 26, 2026 09:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design UI 디자인 변경

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat] 홈 화면 모바일 반응형 구현

2 participants