From 152b8b60d8c1663495effb7fce56e13f9997539a Mon Sep 17 00:00:00 2001
From: kanghaeun <xgkg0330@jnu.ac.kr>
Date: Wed, 15 Jul 2026 17:44:50 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=B0=94=ED=85=80=20CTA=20?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=8C=A8=EB=94=A9=20=EC=8A=A4=ED=8E=99=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/bottom-cta/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/bottom-cta/index.tsx b/apps/web/src/components/bottom-cta/index.tsx
index 8a92b173..0ec20a06 100644
--- a/apps/web/src/components/bottom-cta/index.tsx
+++ b/apps/web/src/components/bottom-cta/index.tsx
@@ -3,18 +3,29 @@ import { cn } from '@/utils/cn';
 
 type BottomCtaProps = {
   className?: string;
+  hasGradient?: boolean;
   children: React.ReactNode;
 };
 
-function BottomCta({ className, children }: BottomCtaProps) {
+function BottomCta({ className, hasGradient = false, children }: BottomCtaProps) {
   return (
     <div
       className={cn(
-        'fixed right-0 bottom-0 left-0 mx-auto flex w-full max-w-120 items-center gap-2.5 px-5 pt-3 pb-5',
+        'fixed right-0 bottom-0 left-0 mx-auto flex w-full max-w-120 items-center gap-2.5 bg-bg-layer-basement px-5 pt-3 pb-8',
         className
       )}
       style={{ zIndex: Z_INDEX.BOTTOM_CTA }}
     >
+      {hasGradient && (
+        <div
+          className="pointer-events-none absolute left-0 h-9 w-full"
+          style={{
+            bottom: 'calc(100% - 1px)',
+            background:
+              'linear-gradient(180deg, rgba(244, 244, 246, 0) 0%, var(--color-bg-layer-basement) 100%)',
+          }}
+        />
+      )}
       {children}
     </div>
   );

From 660d3ca299792efa88b31901863a09b2f087bcfc Mon Sep 17 00:00:00 2001
From: kanghaeun <xgkg0330@jnu.ac.kr>
Date: Wed, 15 Jul 2026 20:12:43 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=B3=84=20=EB=B0=94=ED=85=80=20CTA=EB=A5=BC=20BottomCta=20?=
 =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wish/[id]/_components/ItemEditForm.tsx    |  4 +-
 .../app/mypage/edit/_components/EditForm.tsx  |  2 +-
 .../_components/WithdrawConfirmDialog.tsx     |  2 +-
 .../by-wish/_components/ByWishContent.tsx     | 38 ++++++++-----------
 .../[itemId]/_components/ItemEditForm.tsx     |  2 +-
 .../[id]/result/_components/ResultClient.tsx  |  5 ++-
 6 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/app/archive/wish/[id]/_components/ItemEditForm.tsx b/apps/web/src/app/archive/wish/[id]/_components/ItemEditForm.tsx
index 565ec14b..f911069c 100644
--- a/apps/web/src/app/archive/wish/[id]/_components/ItemEditForm.tsx
+++ b/apps/web/src/app/archive/wish/[id]/_components/ItemEditForm.tsx
@@ -111,7 +111,7 @@ function ItemEditForm({
       </div>
 
       {itemStatus === 'READY' && (
-        <BottomCta className="bg-bg-layer-basement py-3">
+        <BottomCta>
           <Button
             variant="secondary"
             size="lg"
@@ -137,7 +137,7 @@ function ItemEditForm({
       )}
 
       {itemStatus === 'FAILED' && (
-        <BottomCta className="bg-bg-layer-basement py-3">
+        <BottomCta>
           <Button
             variant="secondary"
             size="lg"
diff --git a/apps/web/src/app/mypage/edit/_components/EditForm.tsx b/apps/web/src/app/mypage/edit/_components/EditForm.tsx
index d0f045c1..a5cf58ec 100644
--- a/apps/web/src/app/mypage/edit/_components/EditForm.tsx
+++ b/apps/web/src/app/mypage/edit/_components/EditForm.tsx
@@ -74,7 +74,7 @@ function EditForm() {
         />
       </div>
 
-      <BottomCta className="border-t border-gray-50 bg-bg-layer-basement pb-8">
+      <BottomCta>
         <Button
           type="submit"
           variant="primary"
diff --git a/apps/web/src/app/mypage/withdraw/_components/WithdrawConfirmDialog.tsx b/apps/web/src/app/mypage/withdraw/_components/WithdrawConfirmDialog.tsx
index 1a35b39b..ecbdcadc 100644
--- a/apps/web/src/app/mypage/withdraw/_components/WithdrawConfirmDialog.tsx
+++ b/apps/web/src/app/mypage/withdraw/_components/WithdrawConfirmDialog.tsx
@@ -32,7 +32,7 @@ function WithdrawConfirmDialog() {
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <BottomCta className="bg-bg-layer-basement pb-8">
+      <BottomCta>
         <DialogTrigger asChild>
           <Button variant="secondary" size="lg" className="w-full">
             탈퇴하기
diff --git a/apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx b/apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx
index e671caec..a44543e8 100644
--- a/apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx
+++ b/apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx
@@ -3,6 +3,7 @@
 import { useEffect } from 'react';
 import { toast } from 'sonner';
 
+import BottomCta from '@/components/bottom-cta';
 import Button from '@/components/button';
 import { useGetWishlist } from '@/hooks/useGetWishlist';
 
@@ -77,29 +78,20 @@ function ByWishContent({ tournamentId }: ByWishContentProps) {
         </div>
       </main>
 
-      <div className="fixed bottom-0 left-1/2 z-10 w-full max-w-120 -translate-x-1/2">
-        <div
-          className="pointer-events-none w-full"
-          style={{
-            height: '66.878px',
-            background: 'linear-gradient(180deg, rgba(244, 244, 246, 0.00) 0%, #F4F4F6 100%)',
-          }}
-        />
-        <div className="flex gap-[10px] bg-[#F4F4F6] px-5 py-3">
-          <Button variant="secondary" size="lg" onClick={() => history.back()}>
-            뒤로
-          </Button>
-          <Button
-            variant="primary"
-            size="lg"
-            disabled={selectedIds.length === 0}
-            isLoading={isPostTournamentItemsByWishPending}
-            onClick={handleNext}
-          >
-            다음
-          </Button>
-        </div>
-      </div>
+      <BottomCta hasGradient>
+        <Button variant="secondary" size="lg" onClick={() => history.back()}>
+          뒤로
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          disabled={selectedIds.length === 0}
+          isLoading={isPostTournamentItemsByWishPending}
+          onClick={handleNext}
+        >
+          다음
+        </Button>
+      </BottomCta>
     </div>
   );
 }
diff --git a/apps/web/src/app/tournament/[id]/item/[itemId]/_components/ItemEditForm.tsx b/apps/web/src/app/tournament/[id]/item/[itemId]/_components/ItemEditForm.tsx
index b4d4acf6..d0e5b747 100644
--- a/apps/web/src/app/tournament/[id]/item/[itemId]/_components/ItemEditForm.tsx
+++ b/apps/web/src/app/tournament/[id]/item/[itemId]/_components/ItemEditForm.tsx
@@ -109,7 +109,7 @@ function ItemEditForm({
       </div>
 
       {itemStatus === 'FAILED' && (
-        <BottomCta className="bg-bg-layer-basement py-3">
+        <BottomCta>
           <Button
             variant="secondary"
             size="lg"
diff --git a/apps/web/src/app/tournament/[id]/result/_components/ResultClient.tsx b/apps/web/src/app/tournament/[id]/result/_components/ResultClient.tsx
index c0435d51..c642f0b9 100644
--- a/apps/web/src/app/tournament/[id]/result/_components/ResultClient.tsx
+++ b/apps/web/src/app/tournament/[id]/result/_components/ResultClient.tsx
@@ -6,6 +6,7 @@ import { toast } from 'sonner';
 
 import ReceiptIcon from '@/assets/images/tournament/result/receipt-icon.svg';
 import SmileIcon from '@/assets/images/tournament/result/smile-icon.svg';
+import BottomCta from '@/components/bottom-cta';
 import Button from '@/components/button';
 import { Header, HeaderIcon } from '@/components/header';
 import { ANALYTICS_EVENT } from '@/consts/analytics';
@@ -154,11 +155,11 @@ function ResultClient({ tournamentId }: ResultClientProps) {
       </div>
 
       {/* 하단 버튼 — 시안상 단일 CTA */}
-      <div className="fixed right-0 bottom-0 left-0 z-30 mx-auto flex w-full max-w-120 items-center bg-bg-layer-basement px-5 pt-3 pb-5">
+      <BottomCta hasGradient>
         <Button variant="primary" size="lg" onClick={handleGoHome}>
           홈으로 가기
         </Button>
-      </div>
+      </BottomCta>
 
       <PlateShareDialog
         open={isShareDialogOpen}