refactor: BottomCta 공통 컴포넌트 개선 및 페이지별 개별 구현 통합

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"

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"

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">
             탈퇴하기

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>
   );
 }

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"

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}

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>
   );