style: 토너먼트 담기 화면 가이드 시안 반영 (툴팁·카트 레이아웃·인디케이터)

apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx

@@ -191,10 +191,10 @@ function TournamentCreateClient({ tournamentId }: TournamentCreateClientProps) {
   };
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-bg-layer-basement pt-padding-top pb-bottom-cta">
+    <main className="flex h-full min-h-0 flex-col bg-bg-layer-basement pt-padding-top pb-bottom-cta">
       <div className="px-5">
         <TournamentHeader name={tournamentData.name} hasFriends={hasFriends} />
-        <div className="mt-[3.9dvh]">
+        <div className="mt-7">
           <ParticipantPanel
             participants={participants}
             inviteCode={pending?.inviteCode ?? ''}
@@ -205,7 +205,7 @@ function TournamentCreateClient({ tournamentId }: TournamentCreateClientProps) {
         </div>
       </div>
 
-      <div className="mt-[3dvh] flex min-h-0 flex-1 flex-col">
+      <div className="mt-9 flex min-h-0 flex-1 flex-col">
         <TournamentItemBasketCarousel
           items={pending?.items}
           scrollToLast={scrollToLast}
@@ -279,7 +279,7 @@ function TournamentCreateClient({ tournamentId }: TournamentCreateClientProps) {
           onConfirm={() => setIsWelcomeOpen(false)}
         />
       )}
-    </div>
+    </main>
   );
 }
 

apps/web/src/app/tournament/[id]/create/_components/product-image/productImage.const.ts

@@ -12,6 +12,6 @@ export const SIZE_STYLE: Record<
   sm: {
     dimension: 68,
     radius: 'rounded-[16px]',
-    decoration: 'border-[1.85px] border-white shadow-[0_0_8px_rgba(0,0,0,0.16)]',
+    decoration: 'border-[2px] border-white shadow-[0_0_8px_rgba(0,0,0,0.16)]',
   },
 };

apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx

@@ -23,8 +23,8 @@ function TournamentGuidePopover() {
         <ul className="flex flex-col gap-2">
           {GUIDE_ITEMS.map(({ icon: Icon, text }) => (
             <li key={text} className="flex items-center gap-3">
-              <Icon className="size-6 shrink-0 text-icon-accent" aria-hidden />
-              <p className="body-1-medium text-text-neutral-secondary">{text}</p>
+              <Icon className="size-4.5 shrink-0 text-icon-accent/88" aria-hidden />
+              <p className="body-2-medium text-text-neutral-secondary">{text}</p>
             </li>
           ))}
         </ul>

apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket-status/TournamentItemBasketStatus.tsx

@@ -10,7 +10,7 @@ function TournamentItemBasketStatus({ isProcessing, count }: TournamentItemBaske
     if (isProcessing) return '담는 중...';
     if (count === 0) return '후보를 장바구니에 담아보세요';
     if (count < 2) return '최소 2개 이상 담아주세요';
-    return `${count}/32`;
+    return `${count}/32개`;
   })();
 
   const isBlue = count < 2;
@@ -19,7 +19,7 @@ function TournamentItemBasketStatus({ isProcessing, count }: TournamentItemBaske
     <div className="flex items-center justify-center">
       <span
         className={cn(
-          'inline-flex h-10 items-center rounded-3xl border px-3 body-2-regular',
+          'inline-flex items-center rounded-3xl border px-3 py-2 body-2-regular',
           isBlue && 'border-sky-blue-100 bg-sky-blue-50 text-text-accent',
           !isBlue && 'border-gray-100 bg-gray-75 text-gray-600'
         )}

apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsx

@@ -52,7 +52,7 @@ function TournamentItemBasket({
     <Dialog>
       <DialogTrigger asChild>
         <button
-          className="relative flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-2xl border-[1.85px] border-white bg-white/1 shadow-[0_0_8px_rgba(0,0,0,0.16)] backdrop-blur-sm"
+          className="relative flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-2xl border-[2.5px] border-white bg-white/1 shadow-[0_0_8px_rgba(0,0,0,0.16)] backdrop-blur-sm"
           aria-label="위시 아이템 추가"
         >
           <AddIcon width={28} height={28} className="text-base-50" aria-hidden />
@@ -78,7 +78,7 @@ function TournamentItemBasket({
         {items.length === 0 && showAddButton ? (
           <div className="flex h-full w-[20%] items-center justify-start">{addSlot}</div>
         ) : (
-          <div className="grid w-[45%] grid-cols-2 gap-x-6 gap-y-5 pt-[20%]">
+          <div className="grid w-[46.5%] grid-cols-2 gap-3.5 pt-[17%]">
             {addSlot}
             {items.map((item, index) => {
               /** READY 아이템은 누구나 진입 가능 — 주최자·본인이 아니면 조회 전용으로 열림 */

apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx

@@ -10,10 +10,10 @@ import { cn } from '@/utils/cn';
 import type { TournamentPendingItemT } from '../../../_common/_types/tournamentResponse';
 import {
   BASKET_CAROUSEL_SLIDE_SIZE_PERCENT,
+  BASKET_STACK_GAP,
   ITEMS_PER_BASKET,
 } from '../../_consts/tournamentItemBasket';
 import { getActiveBasketCount, getBasketIndexForLastItem } from '../../_utils/tournamentItemBasket';
-import CarouselIndicator from './CarouselIndicator';
 import TournamentItemBasket from './TournamentItemBasket';
 
 type TournamentItemBasketCarouselProps = {
@@ -35,7 +35,6 @@ function TournamentItemBasketCarousel({
   bottomSlot,
 }: TournamentItemBasketCarouselProps) {
   const [carouselApi, setCarouselApi] = useState<CarouselApi>();
-  const [currentIndex, setCurrentIndex] = useState(0);
 
   const activeBasketCount = useMemo(() => getActiveBasketCount(items.length), [items.length]);
 
@@ -81,57 +80,43 @@ function TournamentItemBasketCarousel({
   useEffect(() => {
     if (!carouselApi) return;
 
-    const handleSelect = () => setCurrentIndex(carouselApi.selectedScrollSnap());
-
     const handleReInit = () => {
       carouselApi.scrollTo(carouselApi.selectedScrollSnap(), true);
     };
 
-    handleSelect();
-    carouselApi.on('select', handleSelect);
     carouselApi.on('reInit', handleReInit);
 
     return () => {
-      carouselApi.off('select', handleSelect);
       carouselApi.off('reInit', handleReInit);
     };
   }, [carouselApi]);
 
-  const handleIndicatorSelect = (index: number) => carouselApi?.scrollTo(index);
-
   const { ref: containerRef, height: containerHeight } = useContainerHeight();
-  const { ref: indicatorRef, height: indicatorHeight } = useContainerHeight();
   const { ref: bottomSlotRef, height: bottomSlotHeight } = useContainerHeight();
-  const gap = isCarouselEnabled ? 16 : 0;
-
-  const bottomSlotBlockHeight = bottomSlot ? (bottomSlotHeight ?? 0) + gap : 0;
+  const bottomSlotBlockHeight = bottomSlot ? (bottomSlotHeight ?? 0) + BASKET_STACK_GAP : 0;
 
   let basketMaxHeight: number | undefined;
   if (containerHeight) {
-    basketMaxHeight = isCarouselEnabled
-      ? containerHeight - (indicatorHeight ?? 0) - gap - bottomSlotBlockHeight
-      : containerHeight - bottomSlotBlockHeight;
+    basketMaxHeight = containerHeight - bottomSlotBlockHeight;
   }
 
   if (!isCarouselEnabled) {
     return (
       <div
         ref={containerRef}
-        className="flex min-h-0 w-full flex-1 flex-col items-center justify-start px-5"
+        className="flex min-h-0 w-full flex-1 flex-col items-center justify-start gap-4"
       >
-        <TournamentItemBasket
-          basketIndex={0}
-          items={items}
-          isAddItemBlocked={isAddItemBlocked}
-          maxHeight={basketMaxHeight}
-          participantImageMap={participantImageMap}
-        />
-
-        {bottomSlot && (
-          <div ref={bottomSlotRef} className="my-auto">
-            {bottomSlot}
-          </div>
-        )}
+        <div style={{ width: `${BASKET_CAROUSEL_SLIDE_SIZE_PERCENT}%` }}>
+          <TournamentItemBasket
+            basketIndex={0}
+            items={items}
+            isAddItemBlocked={isAddItemBlocked}
+            maxHeight={basketMaxHeight}
+            participantImageMap={participantImageMap}
+          />
+        </div>
+
+        {bottomSlot && <div ref={bottomSlotRef}>{bottomSlot}</div>}
       </div>
     );
   }
@@ -166,19 +151,7 @@ function TournamentItemBasketCarousel({
         </CarouselContent>
       </Carousel>
 
-      <div ref={indicatorRef}>
-        <CarouselIndicator
-          totalCount={activeBasketCount}
-          currentIndex={currentIndex}
-          onSelect={handleIndicatorSelect}
-        />
-      </div>
-
-      {bottomSlot && (
-        <div ref={bottomSlotRef} className="my-auto">
-          {bottomSlot}
-        </div>
-      )}
+      {bottomSlot && <div ref={bottomSlotRef}>{bottomSlot}</div>}
     </div>
   );
 }

apps/web/src/app/tournament/[id]/create/_consts/tournamentItemBasket.ts

@@ -8,4 +8,7 @@ export const BASKET_COUNT = 4;
 export const PREV_ITEM_COUNT_KEY = 'prevItemCount';
 
 /** 매인 캐러셀 너비가 화면에서 차지하는 퍼센트 (인접 바구니는 100% - 이 값만큼 뺀 나머지 너비를 인접 바구니가 차지) */
-export const BASKET_CAROUSEL_SLIDE_SIZE_PERCENT = 90;
+export const BASKET_CAROUSEL_SLIDE_SIZE_PERCENT = 80;
+
+/** 카트와 그 아래 개수 라벨 사이 간격(px) */
+export const BASKET_STACK_GAP = 16;

apps/web/src/app/tournament/[id]/create/layout.tsx

@@ -18,11 +18,6 @@ function LoadingFallback() {
 
         <div className="flex flex-col items-center gap-4">
           <Skeleton className="aspect-356/464 w-full rounded-xl" />
-          <div className="flex gap-1.5">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <Skeleton key={i} shape="circle" className="h-2 w-2" />
-            ))}
-          </div>
         </div>
       </div>