Skip to content

feat: 가져올 위시가 없을 때 안내 모달·빈 상태 노출 - #421

Draft
kanghaeun wants to merge 6 commits into
devfrom
feat/396-wishlist-empty-state
Draft

feat: 가져올 위시가 없을 때 안내 모달·빈 상태 노출#421
kanghaeun wants to merge 6 commits into
devfrom
feat/396-wishlist-empty-state

Conversation

@kanghaeun

@kanghaeun kanghaeun commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

작업 요약

  • 위시가 하나도 없으면 페이지 이동 없이 안내 모달을 띄움
  • 위시는 있지만 전부 후보에 담긴 경우에는 by-wish 화면에 빈 상태를 노출
  • 작업 중 위시 목록 쿼리 설정이 세 곳으로 늘어나, 옵션을 한곳으로 모아 캐시 불일치 가능성 정리

작업 세부 내용

1. 위시가 없으면 이동 대신 안내 모달

위시템 담기 다이얼로그의 "위시에서 가져오기"는 <Link> 로 즉시 이동해서, 위시가 0개여도 by-wish 페이지의 빈 목록을 보게 됐습니다. 페이지 이동을 막고 모달로 안내합니다.

  • hrefonClick 분기로 변경 (OptionButton 이 두 방식을 이미 지원해 컴포넌트 수정은 없음)
  • 기존 TournamentErrorDialogNO_WISH_EXISTS 타입 재사용 — 아직 어디서도 쓰이지 않던 타입이라 아이콘·문구를 시안에 맞춰 조정했고 다른 화면 영향은 없습니다
  • isSubDialogOpen 유니온에 'no-wish' 를 추가해 ByLinkDialog·ByImageDialog 와 같은 방식으로 렌더 (별도 state 없음)

판단 기준은 위시리스트 전체 0개입니다. 시안 문구가 "위시를 먼저 추가해주세요" 라서, 위시는 있지만 전부 담긴 상황과는 안내가 달라야 한다고 봤습니다. 그 케이스는 아래 2번에서 다룹니다.

2. 담을 수 있는 위시가 없을 때 빈 상태

위시는 있지만 전부 후보에 담겼거나 파싱 실패·처리중이면 by-wish 화면이 아무 안내 없이 텅 빈 채로 보였습니다. 이를 해결하기 위해 빈 상태를 추가했습니다.

담을 수 있는 위시가 없어요
위시가 모두 후보에 담겨 있어요.

이 화면은 마운트 후 나머지 페이지를 이어서 불러오기 때문에, !hasNextPage && !isFetchingNextPage && items.length === 0 처럼 전체 로드가 끝난 뒤에만 판정합니다. 가드가 없으면 1페이지가 전부 필터에 걸리고 2페이지에 남아 있는 경우 빈 상태가 깜빡입니다.

3. 위시 목록 쿼리 옵션 정리

담기 다이얼로그가 위시 목록을 구독하게 되면서 queryKey·queryFn·getNextPageParam 설정이 세 곳(서버 prefetch, suspense 훅, 다이얼로그)으로 늘어났습니다. 한쪽만 바뀌면 캐시가 어긋나므로 wishlistInfiniteQueryOptions 로 묶었습니다.

hooks/ 가 아니라 apis/getWishlist.ts 에 둔 이유는, 서버 컴포넌트인 WishContent 가 클라이언트 훅 모듈을 import 하지 않게 하기 위해서입니다.

구현 노트 — 왜 useGetWishlist 를 그대로 쓰지 않았나

useGetWishlistuseSuspenseInfiniteQuery 라서 다이얼로그에서 호출하면 응답이 올 때까지 서스펜드됩니다. 담기 화면은 create/layout.tsx 가 풀페이지 스켈레톤을 폴백으로 쓰기 때문에, 위시 조회 때문에 토너먼트 화면 전체가 스켈레톤으로 막힙니다.

그래서 같은 쿼리 키를 non-suspense useInfiniteQuery 로 구독합니다. 캐시는 공유되므로 by-wish 페이지 진입도 함께 빨라집니다. enabled 로 "위시에서 가져오기" 노출 조건과 동일하게 게이팅해, 게스트나 위시 화면에서는 요청이 나가지 않습니다.

스크린샷

위시가 없으면 이동 대신 안내 모달 위시는 있지만 전부 후보에 담겼거나 파싱 실패·처리중인 빈 상태
before after

연관 이슈

closes #396

Summary by CodeRabbit

  • 새로운 기능

    • 위시리스트 상품을 선택해 추가하는 과정에서 등록된 상품이 없을 경우 안내 메시지를 표시합니다.
    • 위시리스트가 비어 있으면 적절한 안내 다이얼로그를 제공하고, 바로 상품을 담을 수 있습니다.
    • 위시리스트 목록의 무한 스크롤 및 페이지 이동 처리를 개선했습니다.
  • 개선 사항

    • 위시리스트 관련 안내 아이콘과 버튼 문구를 더 명확하게 변경했습니다.

@vercel

vercel Bot commented Aug 2, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
piki Ready Ready Preview Aug 3, 2026 2:57pm

@github-actions github-actions Bot added feature New feature or request WEB labels Aug 2, 2026
@github-actions

github-actions Bot commented Aug 2, 2026

Copy link
Copy Markdown

Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다.

@coderabbitai

coderabbitai Bot commented Aug 2, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@kanghaeun, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 29 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 23e32fff-003e-49c9-a60f-78b873116a19

📥 Commits

Reviewing files that changed from the base of the PR and between 7b392a9 and 1e23813.

📒 Files selected for processing (2)
  • apps/web/e2e/fixtures/mockApiFixture.ts
  • apps/web/e2e/specs/tournament/tournamentItemAdd.spec.ts
📝 Walkthrough

Walkthrough

위시리스트 무한 쿼리 설정을 공유 옵션으로 통합했습니다. 위시 항목이 없으면 이동 대신 오류 다이얼로그를 표시합니다. 위시 선택 화면에는 선택 가능한 상품이 없을 때 빈 상태를 표시합니다.

Changes

위시리스트 가져오기 흐름

Layer / File(s) Summary
공유 무한 쿼리 설정
apps/web/src/apis/getWishlist.ts, apps/web/src/hooks/useGetWishlist.ts, apps/web/src/app/archive/wish/_components/WishContent.tsx
커서 기반 wishlistInfiniteQueryOptions를 추가하고, 훅과 프리페치에서 재사용합니다.
위시 가져오기 분기
apps/web/src/components/get-item-dialog/index.tsx, apps/web/src/components/tournament-error-dialog/index.tsx
위시 항목이 없으면 no-wish 오류 다이얼로그를 열고, 항목이 있으면 기존 경로로 이동합니다. 다이얼로그 아이콘과 버튼 문구를 변경합니다.
위시 선택 빈 상태
apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx
선택 가능한 위시 상품이 없고 추가 로딩이 끝나면 빈 상태 안내를 표시합니다.

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

Possibly related PRs

  • TeamPiKi/client#347: getWishlist.ts와 위시리스트 페이지네이션 흐름을 함께 수정합니다.
  • TeamPiKi/client#364: ByWishContent와 위시리스트 선택 흐름을 함께 수정합니다.
  • TeamPiKi/client#409: 토너먼트의 위시 상품 추가 흐름과 ByWishContent를 함께 다룹니다.

Suggested labels: refactor

Suggested reviewers: iodio89

Sequence Diagram(s)

sequenceDiagram
  participant ItemDialog as GetItemDialog
  participant WishlistAPI as wishlistInfiniteQueryOptions
  participant ErrorDialog as TournamentErrorDialog
  participant Router
  ItemDialog->>WishlistAPI: 위시리스트 페이지 조회
  ItemDialog->>ItemDialog: 전체 위시 항목 확인
  alt 위시 항목 없음
    ItemDialog->>ErrorDialog: no-wish 오류 다이얼로그 표시
  else 위시 항목 있음
    ItemDialog->>Router: 위시 상품 추가 화면 이동
  end
Loading
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning 무한 쿼리 옵션 공통화와 후보에 담을 위시가 없을 때의 빈 상태는 연결 이슈 #396의 직접 요구사항을 벗어납니다. 쿼리 옵션 공통화와 by-wish 빈 상태 변경을 별도 이슈 또는 별도 PR로 분리하거나, #396에 해당 요구사항을 추가하세요.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 위시가 없을 때 안내 모달과 빈 상태를 노출하는 주요 변경을 명확하게 설명합니다.
Linked Issues check ✅ Passed 위시 개수 확인, 빈 위시 안내 모달, CTA 변경, 위시가 있을 때의 기존 경로 이동 요구를 충족합니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ 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/396-wishlist-empty-state

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.

@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: 1

🤖 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 `@apps/web/src/components/get-item-dialog/index.tsx`:
- Around line 34-50: Update handleWishClick and the wishlist option’s
OptionButton so it cannot be activated while wishlistData is still loading or
unavailable. Treat missing data, including failed requests, as no available
wishes and open the no-wish dialog instead of calling router.push; only navigate
after a completed query confirms at least one wish.
🪄 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: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7c918394-06b0-464c-8c3f-4fa4dbe2ad86

📥 Commits

Reviewing files that changed from the base of the PR and between 3ed7c59 and 7b392a9.

📒 Files selected for processing (6)
  • apps/web/src/apis/getWishlist.ts
  • apps/web/src/app/archive/wish/_components/WishContent.tsx
  • apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx
  • apps/web/src/components/get-item-dialog/index.tsx
  • apps/web/src/components/tournament-error-dialog/index.tsx
  • apps/web/src/hooks/useGetWishlist.ts

Comment thread apps/web/src/components/get-item-dialog/index.tsx
@iOdiO89

iOdiO89 commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request WEB

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: 위시리스트가 비어있을 때 위시에서 가져오기 모달로 안내

2 participants