Skip to content

feat: API 연동에 따른 page별 이동 이벤트 구현#126

Merged
ho0010 merged 11 commits intodevelopfrom
feat/userflow
Aug 16, 2025
Merged

feat: API 연동에 따른 page별 이동 이벤트 구현#126
ho0010 merged 11 commits intodevelopfrom
feat/userflow

Conversation

@ho0010
Copy link
Collaborator

@ho0010 ho0010 commented Aug 16, 2025

📝작업 내용

구현된 API를 활용해 group page와 book page에서 각 버튼 클릭 시 적절한 event가 일어나도록 구현했습니다.

Summary by CodeRabbit

  • 신규 기능

    • 그룹 카드·추천 그룹 카드 클릭 시 상세 페이지로 이동
    • 도서 섹션 클릭 시 해당 도서 검색 페이지로 이동
    • 글쓰기/모임 만들기 시 선택한 도서 정보를 전달해 폼을 사전 채움
    • 검색 도서 화면에서 저장(북마크) 토글 기능 구현
  • 개선

    • 저장 동작에 로딩·오류 처리를 추가해 안정성 향상
  • UX/UI

    • 그룹 상세·도서 검색 헤더의 ‘더보기’ 버튼 제거로 UI 간소화
    • 검색 도서 배너 상단 여백을 픽셀에서 퍼센트로 변경해 반응형 간격 적용

@ho0010 ho0010 requested review from heeeeyong and ljh130334 August 16, 2025 08:04
@ho0010 ho0010 self-assigned this Aug 16, 2025
@ho0010 ho0010 added the 📬 API 서버 API 통신 label Aug 16, 2025
@coderabbitai
Copy link

coderabbitai bot commented Aug 16, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

라우팅 상태를 활용한 초기값 주입과 클릭 내비게이션을 도입했다. 그룹 카드/박스 클릭 시 상세로 이동을 연결하고, 검색/디테일 화면에서 도서·그룹 클릭 이동을 추가했다. 글쓰기/그룹 만들기 이동 시 선택 도서를 state로 전달한다. 검색 화면의 저장 버튼은 API 호출로 토글하며 스타일 마진을 조정했다.

Changes

Cohort / File(s) Summary
그룹 카드 내비게이션 연결
src/components/group/MyGroupBox.tsx, src/components/group/MyGroupCard.tsx
카드 클릭 핸들러(onClick) 도입 및 전달. MyGroupBox에서 useNavigate로 detail/joined/{roomId}로 이동. Card 컴포넌트에 onClick prop 추가 및 전달 방식 내부 구조 변경.
그룹 디테일 화면 클릭 이동 정리
src/pages/groupDetail/GroupDetail.tsx
헤더 more 버튼 제거. 도서 섹션 클릭 시 /search/book/{isbn} 이동. 추천 그룹 카드 클릭 시 /group/detail/{roomId} 이동.
라우팅 state로 초기 도서 설정
src/pages/group/CreateGroup.tsx, src/pages/post/CreatePost.tsx, src/pages/searchBook/SearchBookGroup.tsx
useLocation 사용. CreateGroup/CreatePost에서 location.state의 도서를 내부 Book으로 매핑하여 초기 선택값 설정. SearchBookGroup에서 ‘그룹 만들기’ 클릭 시 선택 도서를 state로 담아 /group/create로 이동. CreatePost의 Book.id를 선택적(optional)로 변경.
검색 화면 상호작용 개선 및 스타일
src/pages/searchBook/SearchBook.tsx, src/pages/searchBook/SearchBook.styled.ts
헤더 more 제거. ‘글쓰기’ 클릭 시 선택 도서를 state로 /post/create 이동. 저장 버튼이 postSaveBook 호출로 토글 및 로딩/에러 처리 추가. BannerSection margin-top을 66px→24%로 변경.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant SearchBook
  participant Router
  participant CreatePost

  User->>SearchBook: 클릭 "글쓰기"
  alt bookDetail 존재
    SearchBook->>Router: navigate('/post/create', {state: {selectedBook}})
  else 없음
    SearchBook->>Router: navigate('/post/create')
  end
  Router->>CreatePost: mount with location.state
  CreatePost->>CreatePost: selectedBook 초기화(매핑)
Loading
sequenceDiagram
  participant User
  participant SearchBookGroup
  participant Router
  participant CreateGroup

  User->>SearchBookGroup: 클릭 "그룹 만들기"
  SearchBookGroup->>Router: navigate('/group/create', {state: {selectedBook}})
  Router->>CreateGroup: mount with location.state
  CreateGroup->>CreateGroup: selectedBook 초기화(매핑)
Loading
sequenceDiagram
  participant User
  participant MyGroupBox
  participant MyGroupCard
  participant Router
  participant GroupDetail

  User->>MyGroupCard: 카드 클릭
  MyGroupCard-->>MyGroupBox: onClick 호출(roomId)
  MyGroupBox->>Router: navigate('/group/detail/joined/{roomId}')
  Router->>GroupDetail: mount

  User->>GroupDetail: 도서 섹션 클릭
  GroupDetail->>Router: navigate('/search/book/{isbn}')

  User->>GroupDetail: 추천 그룹 카드 클릭
  GroupDetail->>Router: navigate('/group/detail/{roomId}')
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

✨ Feature

Suggested reviewers

  • heeeeyong
  • ljh130334

Poem

새 길을 톡, 톡—카드를 톡!
책등 따라 포스트로 폴짝 점프🐇
주머니엔 선택 도서 한 권 넣고,
저장은 깜빡? 아니, API로 착!
퍼센트 마진만큼 구름도 뜀—
오늘도 라우터 길 위에 귀를 쫑긋.

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 534c0c0 and 8f9a1f9.

📒 Files selected for processing (8)
  • src/components/group/MyGroupBox.tsx (4 hunks)
  • src/components/group/MyGroupCard.tsx (1 hunks)
  • src/pages/group/CreateGroup.tsx (2 hunks)
  • src/pages/groupDetail/GroupDetail.tsx (3 hunks)
  • src/pages/post/CreatePost.tsx (3 hunks)
  • src/pages/searchBook/SearchBook.styled.ts (1 hunks)
  • src/pages/searchBook/SearchBook.tsx (1 hunks)
  • src/pages/searchBook/SearchBookGroup.tsx (1 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/userflow

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

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

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@vercel
Copy link

vercel bot commented Aug 16, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
thip Ready Ready Preview Comment Aug 16, 2025 8:05am

@ho0010 ho0010 changed the title feat: API 연동에 따른 page별 이동 feat: API 연동에 따른 page별 이동 이벤트 구현 Aug 16, 2025
@ho0010 ho0010 merged commit 4817cf3 into develop Aug 16, 2025
2 checks passed
@ho0010 ho0010 deleted the feat/userflow branch September 1, 2025 09:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📬 API 서버 API 통신

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant