feat: 토너먼트 위시에서 가져오기에 폴더 칩 추가

apps/web/src/app/tournament/[id]/create/by-wish-v2/_components/ByWishV2Content.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { MOCK_FOLDERS, MOCK_WISHES } from '@/app/wish/_common/_consts/wishMock';
+import BottomCta from '@/components/bottom-cta';
+import Button from '@/components/button';
+import WishGrid from '@/components/common/wish-grid';
+import { ROUTES } from '@/consts/route';
+import { useBackWithFallback } from '@/hooks/useBackWithFallback';
+
+import { useGetTournament } from '../../../_common/_hooks/useGetTournament';
+import { MAX_SELECT } from '../../by-wish/_consts/selectLimits';
+import FolderChipFilter from './FolderChipFilter';
+import NoWishDialog from './NoWishDialog';
+
+type ByWishV2ContentProps = {
+  tournamentId: number;
+};
+
+function ByWishV2Content({ tournamentId }: ByWishV2ContentProps) {
+  const backWithFallback = useBackWithFallback();
+  const [activeFolderId, setActiveFolderId] = useState<number | null>(null);
+  const [selectedWishIds, setSelectedWishIds] = useState<Set<number>>(new Set());
+  const { tournamentData } = useGetTournament(tournamentId);
+
+  const pending = 'pending' in tournamentData ? tournamentData.pending : null;
+  const addableCount = Math.max(MAX_SELECT - (pending?.items.length ?? 0), 0);
+  const isOverSelectionLimit = selectedWishIds.size > addableCount;
+
+  /** TEMP: 위시·폴더 API 연동 전까지 목 데이터 사용함 */
+  const items = MOCK_WISHES;
+  const folders = MOCK_FOLDERS;
+  const activeFolder = folders.find(({ id }) => id === activeFolderId);
+  const visibleItems = activeFolder
+    ? items.filter(({ wish }) => activeFolder.wishIds.includes(wish.id))
+    : items;
+
+  const hasNoWish = items.length === 0;
+
+  const handleToggleSelect = (wishId: number) => {
+    const isSelected = selectedWishIds.has(wishId);
+    if (!isSelected && selectedWishIds.size >= addableCount) {
+      toast.warning(`최대 ${addableCount}개까지 상품을 담을 수 있어요.`, { id: 'max-select' });
+      return;
+    }
+
+    setSelectedWishIds(prev => {
+      const next = new Set(prev);
+      if (isSelected) next.delete(wishId);
+      else next.add(wishId);
+      return next;
+    });
+  };
+
+  const handleBackToCreate = () => backWithFallback(ROUTES.TOURNAMENT_CREATE(tournamentId));
+
+  if (hasNoWish) return <NoWishDialog onBack={handleBackToCreate} />;
+
+  return (
+    <>
+      <div className="flex flex-col gap-6 bg-bg-layer-default py-6">
+        {folders.length > 0 && (
+          <FolderChipFilter
+            folders={folders}
+            activeFolderId={activeFolderId}
+            onFolderChange={setActiveFolderId}
+          />
+        )}
+        <p className="px-5 body-2-medium text-[#737373]">
+          <span className="text-text-accent">{selectedWishIds.size}</span>/{addableCount}개 선택
+        </p>
+      </div>
+
+      <main className="hide-scrollbar flex flex-1 flex-col overflow-y-auto bg-bg-layer-basement pb-32">
+        <WishGrid
+          wishes={visibleItems}
+          selectedWishIds={selectedWishIds}
+          onToggleSelect={handleToggleSelect}
+        />
+      </main>
+
+      <BottomCta hasGradient>
+        <Button
+          variant="primary"
+          size="lg"
+          disabled={selectedWishIds.size === 0 || isOverSelectionLimit}
+          /** TODO: 위시에서 토너먼트 후보 담기 API 연결 */
+          onClick={handleBackToCreate}
+        >
+          다음
+        </Button>
+      </BottomCta>
+    </>
+  );
+}
+
+export default ByWishV2Content;

apps/web/src/app/tournament/[id]/create/by-wish-v2/_components/FolderChipFilter.tsx

@@ -0,0 +1,42 @@
+import { cn } from '@/utils/cn';
+
+type FolderChipFilterProps = {
+  folders: { id: number; name: string }[];
+  activeFolderId: number | null;
+  onFolderChange: (folderId: number | null) => void;
+};
+
+function FolderChipFilter({ folders, activeFolderId, onFolderChange }: FolderChipFilterProps) {
+  const chips = [{ id: null, name: '전체' }, ...folders];
+
+  return (
+    <div
+      role="group"
+      aria-label="폴더 필터"
+      className="hide-scrollbar flex gap-2 overflow-x-auto px-5"
+    >
+      {chips.map(({ id, name }) => {
+        const isActive = activeFolderId === id;
+
+        return (
+          <button
+            key={id ?? 'all'}
+            type="button"
+            aria-pressed={isActive}
+            onClick={() => onFolderChange(id)}
+            className={cn(
+              'flex h-9 shrink-0 cursor-pointer items-center rounded-full border px-3 body-2-semibold transition-colors',
+              isActive
+                ? 'border-border-neutral-primary bg-bg-neutral-secondary text-text-neutral-inverse'
+                : 'border-gray-75 bg-bg-layer-default text-text-neutral-secondary'
+            )}
+          >
+            {name}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export default FolderChipFilter;

apps/web/src/app/tournament/[id]/create/by-wish-v2/_components/NoWishDialog.tsx

@@ -0,0 +1,52 @@
+import { InboxIconFill } from '@/assets/icons';
+import Button from '@/components/button';
+import ButtonLink from '@/components/button/ButtonLink';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/dialog';
+import { ROUTES } from '@/consts/route';
+
+type NoWishDialogProps = {
+  onBack: () => void;
+};
+
+function NoWishDialog({ onBack }: NoWishDialogProps) {
+  return (
+    <Dialog open>
+      <DialogContent
+        showCloseButton={false}
+        closeOnDimClick={false}
+        className="flex flex-col items-center gap-5"
+      >
+        <div className="flex flex-col items-center gap-3">
+          <InboxIconFill className="size-10 text-icon-neutral-secondary" />
+          <div className="flex flex-col items-center gap-1 text-center">
+            <DialogTitle className="heading-2-semibold break-keep text-text-neutral-primary">
+              가져올 위시가 없어요.
+            </DialogTitle>
+            <DialogDescription className="body-2-medium break-keep text-text-neutral-tertiary">
+              위시를 먼저 추가해 주세요.
+            </DialogDescription>
+          </div>
+        </div>
+        <DialogFooter className="flex w-full gap-2.5">
+          <Button variant="secondary" size="lg" onClick={onBack}>
+            돌아가기
+          </Button>
+          <DialogClose asChild>
+            <ButtonLink size="lg" href={ROUTES.WISHLIST}>
+              위시 담기
+            </ButtonLink>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default NoWishDialog;

apps/web/src/app/tournament/[id]/create/by-wish-v2/page.tsx

@@ -0,0 +1,33 @@
+import { notFound } from 'next/navigation';
+
+import { Header, HeaderIcon } from '@/components/header';
+
+import ByWishV2Content from './_components/ByWishV2Content';
+
+type ByWishV2PageProps = {
+  params: Promise<{ id: string }>;
+};
+
+/** TEMP: 폴더 칩 작업용 임시 경로. 완료 후 by-wish 로 합치고 삭제함 */
+async function ByWishV2Page({ params }: ByWishV2PageProps) {
+  if (process.env.NEXT_PUBLIC_STAGE === 'production') notFound();
+
+  const { id } = await params;
+  const tournamentId = Number(id);
+
+  return (
+    <div className="flex h-full flex-col bg-bg-layer-default">
+      <div className="px-5 pt-padding-top">
+        <Header
+          left={<HeaderIcon name="BACK" />}
+          center={
+            <h1 className="heading-1-bold text-text-neutral-primary">내 위시에서 가져오기</h1>
+          }
+        />
+      </div>
+      <ByWishV2Content tournamentId={tournamentId} />
+    </div>
+  );
+}
+
+export default ByWishV2Page;

apps/web/src/app/wish/_common/_consts/wishMock.ts

@@ -1,6 +1,7 @@
 import { ITEM_STATUS } from '@/consts/item';
+import type { WishListItemT } from '@/types/wish';
 
-import type { WishFolderT, WishListItemT } from '../_types/wish';
+import type { WishFolderT } from '../_types/wish';
 
 // TEMP: API 연동 시 public/mock/wish 이미지와 함께 제거
 const MOCK_IMAGE_URLS = [1, 2, 3, 4, 5, 6].map(index => `/mock/wish/wish-${index}.jpg`);

apps/web/src/app/wish/_common/_types/wish.ts

@@ -1,14 +1,3 @@
-import type { ItemT } from '@/types/item';
-import type { GetWishlistResponseT } from '@/types/wish';
-
-// TODO: API 연동 시 GetWishlistResponseT 로 교체 — discountRate 는 아직 API 에 없음
-export type WishListItemT = Omit<GetWishlistResponseT, 'item'> & {
-  item: ItemT & {
-    /** 할인율(%) — 할인이 없으면 null */
-    discountRate: number | null;
-  };
-};
-
 // TEMP: API 연동 시 응답 타입으로 교체
 export type WishFolderT = {
   id: number;

apps/web/src/app/wish/_components/AllWishTabContent.tsx

@@ -1,4 +1,5 @@
-import WishGrid from '../_common/_components/WishGrid';
+import WishGrid from '@/components/common/wish-grid';
+
 import type { AllWishTabContentProps } from '../_types/wishTab';
 import WishAddCard from './WishAddCard';
 

apps/web/src/app/wish/_components/WishSearch.tsx

@@ -4,14 +4,13 @@ import { type FormEvent, useRef, useState } from 'react';
 
 import { ChevronBackwardIconFill, CloseCircularIconFill } from '@/assets/icons';
 import BasketGuestIcon from '@/assets/images/basket-guest.svg';
+import WishGrid from '@/components/common/wish-grid';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/dialog';
 import { Header } from '@/components/header';
 import Input from '@/components/input';
+import type { WishListItemT } from '@/types/wish';
 import { cn } from '@/utils/cn';
 
-import WishGrid from '../_common/_components/WishGrid';
-import type { WishListItemT } from '../_common/_types/wish';
-
 type WishSearchProps = {
   wishes: WishListItemT[];
   onClose: () => void;

apps/web/src/app/wish/_types/wishTab.ts

@@ -1,4 +1,6 @@
-import type { WishFolderT, WishListItemT } from '../_common/_types/wish';
+import type { WishListItemT } from '@/types/wish';
+
+import type { WishFolderT } from '../_common/_types/wish';
 import type { WISH_TAB } from '../_consts/wishTab';
 
 export type WishTabT = (typeof WISH_TAB)[keyof typeof WISH_TAB];

apps/web/src/app/wish/folder/[folderId]/_components/FolderDetailContent.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
 import { ChevronBackwardIconFill } from '@/assets/icons';
+import WishGrid from '@/components/common/wish-grid';
 import { Header } from '@/components/header';
 import Spacing from '@/components/spacing';
 import { ROUTES } from '@/consts/route';
@@ -13,7 +14,6 @@ import { useBackWithFallback } from '@/hooks/useBackWithFallback';
 
 import WishEditActionBar from '../../../_common/_components/WishEditActionBar';
 import WishEditHeader from '../../../_common/_components/WishEditHeader';
-import WishGrid from '../../../_common/_components/WishGrid';
 import { MOCK_FOLDERS, MOCK_WISHES } from '../../../_common/_consts/wishMock';
 import { WISH_MODE } from '../../../_common/_consts/wishMode';
 import { useWishEditMode } from '../../../_common/_hooks/useWishEditMode';

apps/web/src/app/wish/folder/[folderId]/add/_components/FolderWishSelectContent.tsx

@@ -7,12 +7,12 @@ import { toast } from 'sonner';
 import { CloseIconFill } from '@/assets/icons';
 import BottomCta from '@/components/bottom-cta';
 import Button from '@/components/button';
+import WishGrid from '@/components/common/wish-grid';
 import { Header } from '@/components/header';
 import { ROUTES } from '@/consts/route';
 import { Z_INDEX } from '@/consts/zIndex';
 import { useBackWithFallback } from '@/hooks/useBackWithFallback';
 
-import WishGrid from '../../../../_common/_components/WishGrid';
 import { MOCK_FOLDERS, MOCK_WISHES } from '../../../../_common/_consts/wishMock';
 import { useWishEditMode } from '../../../../_common/_hooks/useWishEditMode';
 

apps/web/src/app/wish/_common/_components/WishGrid.tsx → apps/web/src/components/common/wish-grid/index.tsx

@@ -2,8 +2,8 @@ import type { ReactNode } from 'react';
 
 import { CheckboxEmptyIconFill, CheckboxSelectedIconFill } from '@/assets/icons';
 import { Z_INDEX } from '@/consts/zIndex';
+import type { WishListItemT } from '@/types/wish';
 
-import type { WishListItemT } from '../_types/wish';
 import WishCard from './WishCard';
 
 type WishGridProps = {

apps/web/src/consts/route.ts

@@ -38,6 +38,9 @@ export const ROUTES = {
       : `/tournament/${tournamentId}/create`,
   TOURNAMENT_ADD_ITEM_BY_WISH: (tournamentId: number) =>
     `/tournament/${tournamentId}/create/by-wish`,
+  /** TEMP: 폴더 칩 작업 완료 후 TOURNAMENT_ADD_ITEM_BY_WISH 로 합침 */
+  TOURNAMENT_ADD_ITEM_BY_WISH_V2: (tournamentId: number) =>
+    `/tournament/${tournamentId}/create/by-wish-v2`,
   TOURNAMENT_ITEM_EDIT: (tournamentId: number, itemId: number) =>
     `/tournament/${tournamentId}/item/${itemId}`,
   TOURNAMENT_LOADING: (tournamentId: number) => `/tournament/${tournamentId}/loading`,

apps/web/src/types/wish.ts

@@ -27,6 +27,14 @@ export type GetWishlistResponseT = {
   winnerTournamentIds: number[];
 };
 
+// TODO: API 연동 시 GetWishlistResponseT 로 교체 — discountRate 는 아직 API 에 없음
+export type WishListItemT = Omit<GetWishlistResponseT, 'item'> & {
+  item: ItemT & {
+    /** 할인율(%) — 할인이 없으면 null */
+    discountRate: number | null;
+  };
+};
+
 export type PostWishLinkResponseT = {
   wish: WishT;
   item: ItemT;

apps/web/src/utils/getRouteType.test.ts

@@ -40,6 +40,7 @@ describe('getRouteType', () => {
   it('선택 하위 세그먼트는 정해진 것만 붙는다', () => {
     expect(getRouteType('/tournament/1/create')).toBe('AUTHORIZED');
     expect(getRouteType('/tournament/1/create/by-wish')).toBe('AUTHORIZED');
+    expect(getRouteType('/tournament/1/create/by-wish-v2')).toBe('AUTHORIZED');
     expect(getRouteType('/tournament/1/create/other')).toBeNull();
 
     expect(getRouteType('/tournament/1/result')).toBe('AUTHORIZED');

apps/web/src/utils/getRouteType.ts

@@ -3,7 +3,8 @@ import type { RouteTypeT } from '@/types/route';
 
 /** 토너먼트 참여 권한이 필요한 동적 라우트 패턴 */
 const AUTHORIZED_ROUTE_PATTERNS = [
-  /^\/tournament\/[^/]+\/create(?:\/by-wish)?$/,
+  /** TEMP: by-wish-v2 는 폴더 칩 작업용 */
+  /^\/tournament\/[^/]+\/create(?:\/by-wish(?:-v2)?)?$/,
   /^\/tournament\/[^/]+\/item\/[^/]+$/,
   /^\/tournament\/[^/]+\/loading$/,
   /^\/tournament\/[^/]+\/match$/,