Skip to content

feat: 프로필·방 UI와 참가자 내 메뉴 개선 - #59

Merged
aryu1217 merged 7 commits into
mainfrom
dev
Sep 2, 2026
Merged

aryu1217 merged 7 commits into
mainfrom
dev

Conversation

@aryu1217

@aryu1217 aryu1217 commented Sep 1, 2026 •

Copy link
Copy Markdown
Member

변경 내용

  • 최애곡 입력 상한을 20자에서 40자로 늘리고, 방·친구 프로필의 두 줄 표시에서 말줄임을 제거했습니다.
  • 방 편집 모달을 방 본문과 같은 normal 688px / compact 550.4px 너비로 맞췄습니다.
  • 방 편집의 select·참여 제한·삭제·완료 버튼이 density별 하나의 높이 변수를 공유하도록 통일했습니다.
  • 노래 신청의 사연 (선택)과 관련 오류를 노래 선정 이유 문구로 바꾸고 하단 액션에 pill hover/focus 배경을 추가했습니다.
  • YouTube URL input 글자 크기를 normal/mobile/compact의 필드 라벨 크기와 맞췄습니다.
  • 방 참가자 목록에서 현재 사용자를 첫 행으로 정렬하고 닉네임 오른쪽, 방장 왕관 왼쪽에 #3c3c3c의 (나)를 표시합니다.
  • 내 참가자 행의 더보기 메뉴에 Setting, Friends를 제공하고 홈과 같은 SettingsModal, FollowModal을 엽니다.
  • 최초 입장과 reconnect의 ROOM_JOINED.data.participant를 보존해 현재 사용자가 첫 cursor page 밖이어도 자기 행을 유지합니다.

변경 이유

  • 최애곡이 20자 제한과 한 줄 높이 때문에 충분히 보이지 않던 문제를 해결하기 위함입니다.
  • 방 편집창의 폭·하단 버튼 높이와 노래 신청 폼의 문구·타이포·interaction을 주변 UI 기준과 맞추기 위함입니다.
  • 방 안에서 내 참가자 위치와 계정 메뉴 진입을 즉시 찾을 수 있게 하고, 100명 초과 방과 reconnect에서도 현재 참가자 identity가 사라지거나 오래된 값으로 남지 않게 하기 위함입니다.

영향 범위

  • UI / 사용자 흐름
  • API 요청·응답 계약
  • React Query 캐시
  • WebSocket / 실시간 상태
  • 인증 / 보안
  • 문서 / 개발 도구

검증

  • npm run lint
  • npm run test
  • npm run build
  • 관련 수동 시나리오 확인
  • 실패·로딩·빈 상태 확인

검증 결과 및 재현 방법:

  • 기존 UI 후속 targeted Vitest: 6 files / 44 tests passed
  • 참가자 메뉴·join/reconnect targeted Vitest: 6 files / 50 tests passed
  • 전체 테스트: 153 files / 660 tests passed
  • lint, production build, git diff --check passed
  • 참가자 변경 fresh read-only QA: 두 차례 fix 반영 후 최종 pass, blocker 없음
  • 연결 가능한 browser가 없어 실제 화면 캡처 QA는 수행하지 못했습니다.

리뷰 포인트

  • 최애곡 40자 정규화가 기존 statusMessage payload를 유지하고 두 줄 프로필에서 말줄임을 만들지 않는지 확인해주세요.
  • 방 편집 modal normal/compact 너비가 방 본문과 같고 select·참여 제한·footer가 같은 높이 변수를 공유하는지 확인해주세요.
  • 노래 선정 이유의 사용자 문구만 바뀌고 API story key는 유지되며 hover-only 표현에 focus-visible 대응이 있는지 확인해주세요.
  • 현재 참가자 정렬이 나머지 서버 순서와 virtual DOM 24개 상한을 유지하는지 확인해주세요.
  • ROOM_JOINED participant가 최초 입장과 reconnect 모두 화면 state에 반영되고 participantId/userSlug 중복 없이 cursor page에 합쳐지는지 확인해주세요.
  • 모바일 참가자 탭과 데스크톱 draggable widget이 동일한 room-owned Settings/Friends modal 상태를 사용하는지 확인해주세요.

기능별 커밋

  • 61751bb fix(ui): 프로필과 방 편집 치수를 정리
  • 65064a7 fix(playlist): 노래 신청 문구와 입력 스타일 정리
  • 9c2d930 docs(delivery): UI 후속 검증 기록
  • abd9355 feat(room): 참가자 목록에 내 메뉴와 모달 진입 추가
  • c03715d docs(delivery): 참가자 내 메뉴 PR 상태 기록

위험 및 후속 작업

  • 배포 API의 공개 OpenAPI 경로가 404라 statusMessage의 실제 서버 상한은 통합 확인이 남아 있습니다. 과거 프런트 계약은 255자였고 이번 제한은 40자입니다.
  • 인증된 실제 방의 desktop/compact/mobile 레이아웃, 참가자 hover, 작은 모바일 메뉴 위치와 modal layer는 연결 가능한 브라우저에서 수동 확인이 필요합니다.
  • modal close 후 원래 참가자 trigger focus 복원은 기존 home modal에도 없는 접근성 부채입니다.

추적 정보

  • Linked issue: 없음
  • Execution plans: docs/exec-plans/active/2026-09-01-profile-room-request-polish/, docs/exec-plans/active/2026-09-01-room-self-participant-menu/
  • Selected skills: queuing-feature-delivery, queuing-orchestrator, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer, browser:control-in-app-browser
  • QA result: pass

화면 변경

  • 프로필 최애곡, 방 편집 modal, 노래 신청 form, 참가자 목록의 내 행과 계정 메뉴가 변경됩니다.
  • 수동 스크린샷은 browser 미연결로 첨부하지 못했습니다.

Summary by CodeRabbit

  • 새로운 기능

    • 방 참가자 목록에서 본인이 항상 첫 번째로 표시되고 (나) 라벨이 나타납니다.
    • 본인 메뉴에서 설정 및 친구 기능을 바로 열 수 있습니다.
    • 최애곡 입력 한도가 20자에서 40자로 늘어났습니다.
  • 개선 사항

    • 공개 프로필의 최애곡이 여러 줄로 자연스럽게 표시됩니다.
    • 방 편집 화면의 크기와 버튼 높이가 화면 환경에 맞게 정렬되었습니다.
    • 노래 신청 문구와 오류 메시지가 더 명확해졌습니다.
    • 입력 필드와 버튼의 포커스·호버 표시가 개선되었습니다.

@vercel

vercel Bot commented Sep 1, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
queuing Ready Ready Preview Sep 1, 2026 5:44am UTC

@coderabbitai

coderabbitai Bot commented Sep 1, 2026 •

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: edfe159a-4c31-4512-a8bb-a0cc4cf3e668

📥 Commits

Reviewing files that changed from the base of the PR and between 2927fff and c03715d.

📒 Files selected for processing (45)
  • docs/exec-plans/active/2026-09-01-profile-room-request-polish/api-contract.md
  • docs/exec-plans/active/2026-09-01-profile-room-request-polish/change-summary.md
  • docs/exec-plans/active/2026-09-01-profile-room-request-polish/delivery-state.md
  • docs/exec-plans/active/2026-09-01-profile-room-request-polish/handoff.md
  • docs/exec-plans/active/2026-09-01-profile-room-request-polish/plan.md
  • docs/exec-plans/active/2026-09-01-profile-room-request-polish/qa-report.md
  • docs/exec-plans/active/2026-09-01-profile-room-request-polish/request-summary.md
  • docs/exec-plans/active/2026-09-01-profile-room-request-polish/ui-flow.md
  • docs/exec-plans/active/2026-09-01-room-self-participant-menu/api-contract.md
  • docs/exec-plans/active/2026-09-01-room-self-participant-menu/change-summary.md
  • docs/exec-plans/active/2026-09-01-room-self-participant-menu/delivery-state.md
  • docs/exec-plans/active/2026-09-01-room-self-participant-menu/handoff.md
  • docs/exec-plans/active/2026-09-01-room-self-participant-menu/plan.md
  • docs/exec-plans/active/2026-09-01-room-self-participant-menu/qa-report.md
  • docs/exec-plans/active/2026-09-01-room-self-participant-menu/ui-flow.md
  • docs/exec-plans/active/README.md
  • src/features/playlist/add-track/hooks/useAddTrackAction.test.tsx
  • src/features/playlist/add-track/hooks/useAddTrackAction.ts
  • src/features/playlist/add-track/ui/AddTrackFormFields.test.tsx
  • src/features/playlist/add-track/ui/AddTrackFormFields.tsx
  • src/features/playlist/add-track/ui/AddTrackModal.module.css
  • src/features/room/create/ui/EditRoomFormModal.module.css
  • src/features/room/floating/ui/RoomFloatingWidgets.tsx
  • src/features/room/page/hooks/useRoomRealtimeEvents.test.tsx
  • src/features/room/page/hooks/useRoomRealtimeEvents.ts
  • src/features/room/page/ui/RoomPlaybackJoinedContent.test.tsx
  • src/features/room/page/ui/RoomPlaybackJoinedContent.tsx
  • src/features/room/page/ui/RoomPlaybackScreen.test.tsx
  • src/features/room/page/ui/RoomPlaybackScreen.tsx
  • src/features/room/participants/model/participantIdentity.test.ts
  • src/features/room/participants/model/participantIdentity.ts
  • src/features/room/participants/ui/RoomParticipantCard.tsx
  • src/features/room/participants/ui/RoomParticipantList.test.tsx
  • src/features/room/participants/ui/RoomParticipantList.tsx
  • src/features/room/participants/ui/RoomParticipantsPanel.module.css
  • src/features/room/participants/ui/RoomParticipantsPanel.test.tsx
  • src/features/room/participants/ui/RoomParticipantsPanel.tsx
  • src/features/room/participants/ui/RoomSelfManagementMenu.tsx
  • src/features/settings/hooks/useProfileSettingsForm.test.tsx
  • src/features/settings/model/profileSettingsLimits.ts
  • src/features/settings/ui/ProfileSettingsTab.test.tsx
  • src/features/settings/ui/components/ProfileSettingsForm.tsx
  • src/features/user/profile/ui/UserProfileContent.module.css
  • src/features/user/profile/ui/UserProfileContent.test.tsx
  • src/features/user/profile/ui/UserProfileContent.tsx

📝 Walkthrough

Walkthrough

프로필 최애곡 제한과 표시 방식, 방 편집 모달 치수, 노래 신청 문구와 스타일을 수정했습니다. 방 참가자 목록에는 현재 사용자를 우선 표시하고, 자기 메뉴를 기존 설정·친구 모달에 연결했습니다.

Changes

프로필·방 요청 UI 정리

Layer / File(s) Summary
최애곡 입력 및 프로필 표시
src/features/settings/..., src/features/user/profile/..., docs/exec-plans/active/2026-09-01-profile-room-request-polish/...
최애곡 최대 길이를 20자에서 40자로 변경했습니다. 힌트와 카운터를 상수 기준으로 통일했습니다. 공개 프로필은 최애곡을 두 줄까지 일반 줄바꿈으로 표시합니다.
방 편집 모달 치수
src/features/room/create/ui/EditRoomFormModal.module.css
모달 너비를 조정했습니다. 입력, 토글, footer 버튼 높이를 density별 CSS 변수로 통합했습니다.
노래 신청 문구 및 액션 스타일
src/features/playlist/add-track/...
필드 문구와 검증 오류를 노래 선정 이유 기준으로 변경했습니다. 입력 글자 크기와 액션 버튼의 pill hover/focus 스타일을 조정했습니다.

방 참가자 자기 메뉴

Layer / File(s) Summary
현재 참가자 식별 및 세션 상태
src/features/room/participants/model/..., src/features/room/page/..., docs/exec-plans/active/2026-09-01-room-self-participant-menu/...
입장과 재연결의 ROOM_JOINED.data.participant를 현재 참가자 상태로 보존합니다. 서버 페이지에 없는 현재 참가자를 중복 없이 목록에 추가합니다.
참가자 목록 및 자기 메뉴
src/features/room/participants/...
현재 참가자를 첫 행으로 정렬하고 (나) 라벨을 표시합니다. 자기 메뉴에 Setting과 Friends를 추가했습니다.
모바일·데스크톱 모달 연결
src/features/room/page/ui/RoomPlaybackJoinedContent.tsx, src/features/room/floating/ui/RoomFloatingWidgets.tsx, 관련 테스트
모바일 참가자 패널과 데스크톱 위젯의 메뉴 동작을 방 화면의 SettingsModal과 FollowModal에 연결했습니다. 관련 회귀 테스트를 추가했습니다.

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

Sequence Diagram(s)

sequenceDiagram
  participant RoomParticipantCard
  participant RoomSelfManagementMenu
  participant RoomPlaybackJoinedContent
  participant SettingsModal
  participant FollowModal
  RoomParticipantCard->>RoomSelfManagementMenu: 자기 메뉴 열기
  RoomSelfManagementMenu->>RoomPlaybackJoinedContent: Setting 또는 Friends 선택 전달
  RoomPlaybackJoinedContent->>SettingsModal: Setting 모달 렌더링
  RoomPlaybackJoinedContent->>FollowModal: Friends 모달 렌더링
  SettingsModal->>RoomPlaybackJoinedContent: onClose 호출
  FollowModal->>RoomPlaybackJoinedContent: onClose 호출
Loading
✨ 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 dev

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.

@aryu1217 aryu1217 changed the title fix: 프로필·방 편집·노래 신청 UI 정리 feat: 프로필·방 UI와 참가자 내 메뉴 개선 Sep 1, 2026
@aryu1217
aryu1217 marked this pull request as ready for review September 2, 2026 10:26
@aryu1217
aryu1217 merged commit c663694 into main Sep 2, 2026
3 of 4 checks passed
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Sep 2, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-09-02T10:28:32.275076Z c03715d Draft marked ready
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

This branch was successfully deployed

1 active deployment
Preview — c03715db Deployed Sep 1, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant