Skip to content

feat: 비번방 입장 모달 구현#149

Merged
heeeeyong merged 2 commits intodevelopfrom
chore/minor-updates
Aug 17, 2025
Merged

feat: 비번방 입장 모달 구현#149
heeeeyong merged 2 commits intodevelopfrom
chore/minor-updates

Conversation

@heeeeyong
Copy link
Collaborator

@heeeeyong heeeeyong commented Aug 17, 2025

#️⃣연관된 이슈

없음

📝작업 내용

  1. 방 상세정보 페이지에서 roomId를 받아와 비밀번호를 입력합니다.
  2. 비밀번호가 맞는지 검증하는 postPassword API를 호출합니다.
  3. 응답 결과가 성공이면, 해당 방에 참가를 요청하는 postJoinRoom API를 호출합니다.
  4. 방 참가가 성공적이면 성공 처리 후, 이전 페이지(방 상세정보 페이지로) 이동합니다. (이전 페이지 = 해당 방 상세보기 페이지)
  5. 방 참가가 실패라도 실패 처리 후, 이전 페이지로 이동합니다.
  6. 4/5번에서 모두 navigate와 동시에 스낵바로 방참여 결과를 알려줍니다.

스크린샷 (선택)

💬리뷰 요구사항(선택)

없음

Summary by CodeRabbit

  • New Features
    • 비밀번호가 필요한 그룹 방 입장을 위한 4자리 입력 모달 추가
    • 숫자만 입력, 자동 포커스 이동 및 백스페이스로 이전 칸 이동 지원
    • 비밀번호 일치 시 자동 참여 후 상세 화면으로 이동, 성공 알림 표시
    • 불일치·오류 시 입력 초기화 및 오류 메시지/알림 제공
    • 클릭으로 포커스 이동, 에러 상태 테두리, 일시적 오류 메시지 자동 숨김 지원

@heeeeyong heeeeyong requested a review from ho0010 August 17, 2025 17:15
@heeeeyong heeeeyong self-assigned this Aug 17, 2025
@heeeeyong heeeeyong added ✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링 📬 API 서버 API 통신 labels Aug 17, 2025
@vercel
Copy link

vercel bot commented Aug 17, 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 17, 2025 5:17pm

@coderabbitai
Copy link

coderabbitai bot commented Aug 17, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

방 비밀번호 검증을 위한 API 클라이언트(postPassword)와 4자리 비밀번호 입력/검증/참가 흐름을 처리하는 PasswordModal 컴포넌트를 신규 추가했습니다. 검증 성공 시 방 참가 요청 및 상세 페이지로 이동, 실패·오류 시 메시지 표출과 입력 초기화를 수행합니다.

Changes

Cohort / File(s) Change Summary
Rooms API — Password
src/api/rooms/postPassword.ts
신규 API 래퍼 추가: PostPasswordRequest/Response 인터페이스와 postPassword(roomId, data) 함수. /rooms/{roomId}/password 엔드포인트로 POST 요청 후 response.data 반환.
UI Component — PasswordModal
src/components/group/PasswordModal.tsx
신규 모달 컴포넌트: 4자리 숫자 입력 UI, 포커스 관리, 자동 이동/백스페이스 처리, 비밀번호 검증→참가→네비게이션→스낵바 알림 흐름, 오류/불일치 처리 및 스타일링.

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant Modal as PasswordModal
  participant API as API Client
  participant Router
  participant Snackbar

  User->>Modal: 4자리 비밀번호 입력 완료
  Modal->>API: postPassword(roomId, { password })
  alt 비밀번호 일치
    Modal->>API: postJoinRoom(roomId, 'join')
    alt 참가 성공
      Modal->>Router: navigate(/group/detail/{roomId})
      Modal->>Snackbar: show("참가 완료", success)
    else 참가 실패
      Modal->>Router: navigate(/group/detail/{roomId})
      Modal->>Snackbar: show("참가 실패", error)
    end
  else 비밀번호 불일치
    Modal->>User: 에러 표시 및 입력 리셋
  end
  Note over Modal: API 오류 발생 시 에러 메시지 후 입력 리셋
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

달빛 아래 네 자리 띄엄띄엄, ◻︎◻︎◻︎◻︎
깡충깡충 토끼가 숫자를 콕 찍고,
딱 맞자 문이 사각 열렸네—
맞지 않음? 수염을 살짝 떨구고 다시!
바삭한 성공의 당근, 삐빅 스낵바! 🥕✨


📜 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 fcf2319 and 332d5a3.

📒 Files selected for processing (2)
  • src/api/rooms/postPassword.ts (1 hunks)
  • src/components/group/PasswordModal.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 chore/minor-updates

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

@heeeeyong heeeeyong merged commit a933763 into develop Aug 17, 2025
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📬 API 서버 API 통신 ✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant