Skip to content

feat: 방 생성 전 썸네일 업로드 적용#27

Merged
aryu1217 merged 5 commits into
mainfrom
feat/preupload-room-thumbnail
Jul 25, 2026
Merged

feat: 방 생성 전 썸네일 업로드 적용#27
aryu1217 merged 5 commits into
mainfrom
feat/preupload-room-thumbnail

Conversation

@aryu1217

@aryu1217 aryu1217 commented Jul 25, 2026

Copy link
Copy Markdown
Member

변경 내용

  • 방 생성 모달에서 파일 선택 즉시 POST /api/v2/rooms/thumbnail로 임시 썸네일을 업로드합니다.
  • 업로드 중·완료·실패 상태를 썸네일 입력 근처에 즉시 표시하고, 성공한 uploadToken만 방 생성 요청의 thumbnailUploadToken으로 전달합니다.
  • 기존의 방 생성 후 썸네일 PUT 및 업로드 실패 시 생성된 방 DELETE 롤백 흐름을 제거합니다.
  • 기존 방 수정용 썸네일 PUT 흐름은 유지합니다.
  • 생성·수정 폼의 태그 선택을 공통 제약으로 최대 3개까지 제한합니다.
  • 태그 3개 선택 시 3/3 카운터와 미선택 태그 칩 disabled 상태를 적용합니다.

변경 이유

기존 흐름은 방을 먼저 생성한 뒤 썸네일을 업로드해, 업로드 실패가 최종 제출 시점에만 드러나고 생성된 방을 다시 삭제하는 롤백이 필요했습니다. 새 임시 업로드 API 계약에 맞춰 파일 선택 시점에 실패를 알려주고, 검증된 업로드 token으로만 방을 생성하도록 변경했습니다.

PR 후속 요청에 따라 생성·수정 화면에서 선택 가능한 태그도 최대 3개로 통일했습니다.

영향 범위

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

검증

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

검증 결과 및 재현 방법:

  • Tag-limit targeted tests: 2 files, 9/9 pass
  • Full tests: 15 files, 47/47 pass
  • Lint: pass
  • Build: pass
  • git diff --check: pass

리뷰 포인트

  • 임시 업로드 mutation data의 최신 uploadToken만 생성 payload에 들어가는지 확인 부탁드립니다.
  • 업로드 pending/error/token 없음 상태에서 기본 정보 단계를 벗어나지 못하게 한 경계를 확인 부탁드립니다.
  • 임시 업로드는 아직 방 서버 상태를 만들지 않으므로 cache invalidation을 하지 않고, 방 생성 성공의 기존 목록 invalidate만 유지했습니다.
  • 기존 edit 흐름은 계속 PUT /api/v1/rooms/{slug}/thumbnail을 사용합니다.
  • 생성·수정 폼이 ROOM_TAG_LIMIT = 3을 공유하고, 조회 화면은 서버 태그를 임의로 자르지 않습니다.

기능별 커밋

  • a3aae36 feat(room): 방 생성 전 썸네일 업로드 적용 — API client, mutation hook, UI 상태, 회귀 테스트와 QA 증거
  • 493730a docs: GitHub 발행 차단 상태 기록 — 인증 차단 당시 handoff와 재개 절차
  • 701a69f docs: 썸네일 업로드 Draft PR 상태 기록 — Draft PR 발행 상태
  • e6fbe61 fix(room): 방 태그 선택을 최대 3개로 제한 — 생성·수정 공통 제한, UI 상태와 회귀 테스트
  • a930a52 docs: 태그 제한 후속 PR 상태 기록 — 후속 QA, CI와 handoff 상태

위험 및 후속 작업

  • 업로드 중 모달을 닫으면 요청을 취소하지 않습니다. 사용되지 않은 임시 업로드는 API의 TTL까지 남을 수 있습니다.
  • 기존 서버 데이터가 태그 4~5개인 방은 수정 폼에서 첫 3개만 편집됩니다. 태그를 직접 바꾸지 않는 수정 요청은 초과 태그를 자동 삭제하지 않습니다.

추적 정보

  • Linked issue: 없음
  • Execution plan: docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/
  • Selected skills: queuing-feature-delivery, queuing-orchestrator, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer, github:yeet
  • QA result: pass

화면 변경

썸네일 입력 하단에 업로드 중·완료 상태와 서버 실패 메시지가 표시됩니다. 생성·수정 장르 단계의 카운터는 최대 3개로 바뀌며, 3개 선택 후 미선택 태그 칩이 비활성화됩니다. 관련 흐름은 컴포넌트와 hook 테스트로 검증했습니다.

Summary by CodeRabbit

  • 새 기능

    • 방 생성 시 썸네일을 파일 선택 즉시 임시 업로드하고, 성공한 썸네일을 생성 요청에 연결합니다.
    • 업로드 진행·완료·실패 상태와 서버 오류 메시지를 입력 영역에 표시합니다.
    • 업로드가 완료되기 전에는 다음 단계로 이동할 수 없습니다.
    • 방 태그 선택 최대 개수를 3개로 통일하고 3/3 진행 상태를 표시합니다.
  • 문서

    • 썸네일 업로드·방 생성 흐름, 오류 처리, 캐시 정책 및 QA 결과를 문서화했습니다.

@gemini-code-assist

Copy link
Copy Markdown

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

@coderabbitai

coderabbitai Bot commented Jul 25, 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: Pro Plus

Run ID: 78f9e528-9165-483f-812f-860614629da9

📥 Commits

Reviewing files that changed from the base of the PR and between 3ff25c1 and a930a52.

📒 Files selected for processing (24)
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/api-contract.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/change-summary.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/delivery-state.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/handoff.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/implementation-notes.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/plan.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/qa-report.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/request-summary.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/review-findings.md
  • docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/ui-flow.md
  • docs/exec-plans/active/README.md
  • src/features/room/api/types.ts
  • src/features/room/api/uploadTemporaryRoomThumbnail.test.ts
  • src/features/room/api/uploadTemporaryRoomThumbnail.ts
  • src/features/room/create/model/useUploadTemporaryRoomThumbnail.ts
  • src/features/room/create/ui/CreateBasicInfoStep.tsx
  • src/features/room/create/ui/RoomFormModal.test.tsx
  • src/features/room/create/ui/RoomFormModal.tsx
  • src/features/room/create/ui/RoomThumbnailUploadField.module.css
  • src/features/room/create/ui/RoomThumbnailUploadField.tsx
  • src/features/room/hooks/useRoomThumbnailSelection.ts
  • src/features/room/model/roomFormLimits.ts
  • src/features/room/update/hooks/useEditRoomForm.test.tsx
  • src/features/room/update/hooks/useEditRoomForm.ts

📝 Walkthrough

Walkthrough

파일 선택 즉시 임시 썸네일을 업로드하고, 성공한 uploadToken을 방 생성 요청에 전달하도록 생성 모달과 API가 변경되었습니다. 생성·수정 폼의 태그 선택 제한은 공유 상수 기준 최대 3개로 통일되었으며, 관련 테스트와 실행 문서가 추가되었습니다.

Changes

방 생성 전 임시 썸네일 업로드

Layer / File(s) Summary
임시 업로드 API 계약과 mutation
src/features/room/api/*, src/features/room/create/model/*, docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/{api-contract,request-summary,implementation-notes,plan}.md
POST /api/v2/rooms/thumbnail 호출, FormData 파일 전송, uploadToken 검증, 응답 타입과 mutation 훅 및 테스트를 추가했습니다.
생성 모달의 토큰 연동
src/features/room/create/ui/RoomFormModal.tsx, src/features/room/create/ui/RoomFormModal.test.tsx, docs/exec-plans/active/2026-07-25-preupload-room-thumbnail/{ui-flow,change-summary}.md
업로드 상태에 따라 단계 이동과 제출을 제어하고, 성공한 thumbnailUploadToken을 생성 payload에 포함하며 기존 생성 후 PUT·DELETE 롤백 흐름을 제거했습니다.
썸네일 상태 표시와 선택 결과
src/features/room/create/ui/{CreateBasicInfoStep,RoomThumbnailUploadField}.*, src/features/room/hooks/useRoomThumbnailSelection.ts
썸네일 입력의 상태 메시지·오류 표시를 확장하고, 파일 선택 성공·실패 결과를 반환하도록 변경했습니다.
공통 태그 제한과 검증 기록
src/features/room/model/roomFormLimits.ts, src/features/room/update/hooks/*, src/features/room/create/ui/RoomFormModal.tsx, docs/exec-plans/active/*
생성·수정 폼의 태그 제한을 ROOM_TAG_LIMIT = 3으로 통일하고 초기값, 토글, 저장 상태 및 UI 카운터를 갱신했으며 테스트·QA·핸드오프 문서를 추가했습니다.

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

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant RoomFormModal
  participant TemporaryUploadMutation
  participant RoomThumbnailAPI
  participant RoomCreationAPI
  User->>RoomFormModal: 썸네일 파일 선택
  RoomFormModal->>TemporaryUploadMutation: 파일 업로드 실행
  TemporaryUploadMutation->>RoomThumbnailAPI: POST /api/v2/rooms/thumbnail
  RoomThumbnailAPI-->>TemporaryUploadMutation: uploadToken 반환
  TemporaryUploadMutation-->>RoomFormModal: 업로드 성공 상태 전달
  RoomFormModal->>RoomCreationAPI: thumbnailUploadToken 포함 방 생성
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 feat/preupload-room-thumbnail

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.

@vercel

vercel Bot commented Jul 25, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
queuing Ready Ready Preview, Comment Jul 25, 2026 7:47am

@aryu1217
aryu1217 marked this pull request as ready for review July 25, 2026 08:02
@gemini-code-assist

Copy link
Copy Markdown

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

@aryu1217
aryu1217 merged commit 2619fb0 into main Jul 25, 2026
4 checks passed
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