From 03b856c5b31ab83c723db62cec96b124edef122e Mon Sep 17 00:00:00 2001
From: kanghaeun <145974230+kanghaeun@users.noreply.github.com>
Date: Sun, 23 Aug 2026 20:51:15 +0900
Subject: [PATCH 1/6] =?UTF-8?q?style:=20=EC=9D=B8=ED=8F=AC=20=ED=88=B4?=
 =?UTF-8?q?=ED=8C=81=20=EB=B3=B8=EB=AC=B8=20=ED=8F=B0=ED=8A=B8=20=EC=B6=95?=
 =?UTF-8?q?=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/tournament-header/TournamentGuidePopover.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx b/apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx
index b055ef1f..2d2f2105 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx
+++ b/apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx
@@ -24,7 +24,7 @@ function TournamentGuidePopover() {
           {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>
+              <p className="body-2-medium text-text-neutral-secondary">{text}</p>
             </li>
           ))}
         </ul>

From 2b6b6297ab2e02d357375600b782982c42ade722 Mon Sep 17 00:00:00 2001
From: kanghaeun <145974230+kanghaeun@users.noreply.github.com>
Date: Sun, 23 Aug 2026 20:55:05 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EC=B9=B4=ED=8A=B8=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20page=20indicator(dot)=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CarouselIndicator.tsx                     | 28 -------------------
 .../TournamentItemBasketCarousel.tsx          | 22 +--------------
 .../src/app/tournament/[id]/create/layout.tsx |  5 ----
 3 files changed, 1 insertion(+), 54 deletions(-)
 delete mode 100644 apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/CarouselIndicator.tsx

diff --git a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/CarouselIndicator.tsx b/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/CarouselIndicator.tsx
deleted file mode 100644
index 091d20ce..00000000
--- a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/CarouselIndicator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { cn } from '@/utils/cn';
-
-type CarouselIndicatorProps = {
-  totalCount: number;
-  currentIndex: number;
-  onSelect: (index: number) => void;
-};
-
-function CarouselIndicator({ totalCount, currentIndex, onSelect }: CarouselIndicatorProps) {
-  return (
-    <div className="flex gap-2">
-      {Array.from({ length: totalCount }, (_, i) => (
-        <button
-          key={i}
-          type="button"
-          aria-label={`${i + 1}번째 장바구니`}
-          onClick={() => onSelect(i)}
-          className={cn(
-            'h-2 rounded-full transition-all duration-300',
-            i === currentIndex ? 'w-6 bg-gray-900' : 'w-2 bg-gray-300'
-          )}
-        />
-      ))}
-    </div>
-  );
-}
-
-export default CarouselIndicator;
diff --git a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx b/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx
index 930d08d6..06d5632c 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx
+++ b/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx
@@ -13,7 +13,6 @@ import {
   ITEMS_PER_BASKET,
 } from '../../_consts/tournamentItemBasket';
 import { getActiveBasketCount, getBasketIndexForLastItem } from '../../_utils/tournamentItemBasket';
-import CarouselIndicator from './CarouselIndicator';
 import TournamentItemBasket from './TournamentItemBasket';
 
 type TournamentItemBasketCarouselProps = {
@@ -35,7 +34,6 @@ function TournamentItemBasketCarousel({
   bottomSlot,
 }: TournamentItemBasketCarouselProps) {
   const [carouselApi, setCarouselApi] = useState<CarouselApi>();
-  const [currentIndex, setCurrentIndex] = useState(0);
 
   const activeBasketCount = useMemo(() => getActiveBasketCount(items.length), [items.length]);
 
@@ -81,26 +79,18 @@ 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;
 
@@ -108,9 +98,7 @@ function TournamentItemBasketCarousel({
 
   let basketMaxHeight: number | undefined;
   if (containerHeight) {
-    basketMaxHeight = isCarouselEnabled
-      ? containerHeight - (indicatorHeight ?? 0) - gap - bottomSlotBlockHeight
-      : containerHeight - bottomSlotBlockHeight;
+    basketMaxHeight = containerHeight - bottomSlotBlockHeight;
   }
 
   if (!isCarouselEnabled) {
@@ -166,14 +154,6 @@ function TournamentItemBasketCarousel({
         </CarouselContent>
       </Carousel>
 
-      <div ref={indicatorRef}>
-        <CarouselIndicator
-          totalCount={activeBasketCount}
-          currentIndex={currentIndex}
-          onSelect={handleIndicatorSelect}
-        />
-      </div>
-
       {bottomSlot && (
         <div ref={bottomSlotRef} className="my-auto">
           {bottomSlot}
diff --git a/apps/web/src/app/tournament/[id]/create/layout.tsx b/apps/web/src/app/tournament/[id]/create/layout.tsx
index 66e3ce11..58ad76d2 100644
--- a/apps/web/src/app/tournament/[id]/create/layout.tsx
+++ b/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>
 

From 32226622ec18314c9cb6779d6e4117f18978165e Mon Sep 17 00:00:00 2001
From: kanghaeun <145974230+kanghaeun@users.noreply.github.com>
Date: Sun, 23 Aug 2026 21:26:45 +0900
Subject: [PATCH 3/6] =?UTF-8?q?style:=20=ED=86=A0=EB=84=88=EB=A8=BC?=
 =?UTF-8?q?=ED=8A=B8=20=EB=8B=B4=EA=B8=B0=20=ED=99=94=EB=A9=B4=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=97=AC=EB=B0=B1=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/TournamentCreateClient.tsx    |  8 ++--
 .../TournamentItemBasketCarousel.tsx          | 37 ++++++++-----------
 .../create/_consts/tournamentItemBasket.ts    |  5 ++-
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx b/apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
index e7647a24..7d850b34 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
+++ b/apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
@@ -178,10 +178,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 ?? ''}
@@ -192,7 +192,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}
@@ -255,7 +255,7 @@ function TournamentCreateClient({ tournamentId }: TournamentCreateClientProps) {
           onConfirm={() => setIsWelcomeOpen(false)}
         />
       )}
-    </div>
+    </main>
   );
 }
 
diff --git a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx b/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx
index 06d5632c..1da3f44c 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx
+++ b/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx
@@ -10,6 +10,7 @@ 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';
@@ -92,9 +93,7 @@ function TournamentItemBasketCarousel({
 
   const { ref: containerRef, height: containerHeight } = 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) {
@@ -105,21 +104,19 @@ function TournamentItemBasketCarousel({
     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>
     );
   }
@@ -154,11 +151,7 @@ function TournamentItemBasketCarousel({
         </CarouselContent>
       </Carousel>
 
-      {bottomSlot && (
-        <div ref={bottomSlotRef} className="my-auto">
-          {bottomSlot}
-        </div>
-      )}
+      {bottomSlot && <div ref={bottomSlotRef}>{bottomSlot}</div>}
     </div>
   );
 }
diff --git a/apps/web/src/app/tournament/[id]/create/_consts/tournamentItemBasket.ts b/apps/web/src/app/tournament/[id]/create/_consts/tournamentItemBasket.ts
index 7f602533..fac7b4ac 100644
--- a/apps/web/src/app/tournament/[id]/create/_consts/tournamentItemBasket.ts
+++ b/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;

From 0dd321fc519978ffdfaca986152601d7b0e2f857 Mon Sep 17 00:00:00 2001
From: kanghaeun <145974230+kanghaeun@users.noreply.github.com>
Date: Sun, 23 Aug 2026 21:33:29 +0900
Subject: [PATCH 4/6] =?UTF-8?q?style:=20=ED=86=A0=EB=84=88=EB=A8=BC?=
 =?UTF-8?q?=ED=8A=B8=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=9E=A5=EB=B0=94?=
 =?UTF-8?q?=EA=B5=AC=EB=8B=88=20=EC=83=81=ED=83=9C=20=EB=A9=94=EC=8B=9C?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TournamentItemBasketStatus.tsx                            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket-status/TournamentItemBasketStatus.tsx b/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket-status/TournamentItemBasketStatus.tsx
index f27e7007..cf32545c 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket-status/TournamentItemBasketStatus.tsx
+++ b/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'
         )}

From 1bb1723226c355f78bdb39452854fc4c234dc57c Mon Sep 17 00:00:00 2001
From: kanghaeun <145974230+kanghaeun@users.noreply.github.com>
Date: Sun, 23 Aug 2026 21:52:44 +0900
Subject: [PATCH 5/6] =?UTF-8?q?style:=20=ED=86=A0=EB=84=88=EB=A8=BC?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B0=80=EC=9D=B4=EB=93=9C=20=ED=8C=9D=EC=98=A4?=
 =?UTF-8?q?=EB=B2=84=20=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/tournament-header/TournamentGuidePopover.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx b/apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx
index 2d2f2105..0bc81bbb 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx
+++ b/apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx
@@ -23,7 +23,7 @@ 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 />
+              <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>
           ))}

From 9cecda83819726531ecaab337ca0a1843ed01be2 Mon Sep 17 00:00:00 2001
From: kanghaeun <145974230+kanghaeun@users.noreply.github.com>
Date: Sun, 23 Aug 2026 22:13:35 +0900
Subject: [PATCH 6/6] =?UTF-8?q?style:=20=EC=83=81=ED=92=88=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=B0=8F=20=EC=9E=A5=EB=B0=94=EA=B5=AC?=
 =?UTF-8?q?=EB=8B=88=20=EB=B2=84=ED=8A=BC=20=ED=85=8C=EB=91=90=EB=A6=AC=20?=
 =?UTF-8?q?=EB=91=90=EA=BB=98=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/_components/product-image/productImage.const.ts    | 2 +-
 .../tournament-item-basket/TournamentItemBasket.tsx           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/tournament/[id]/create/_components/product-image/productImage.const.ts b/apps/web/src/app/tournament/[id]/create/_components/product-image/productImage.const.ts
index 95edd978..350431ce 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/product-image/productImage.const.ts
+++ b/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)]',
   },
 };
diff --git a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsx b/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsx
index c4690aa8..372d264b 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsx
+++ b/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 아이템은 누구나 진입 가능 — 주최자·본인이 아니면 조회 전용으로 열림 */