From 31551a828b23258a7353c97c177a96ae51389f82 Mon Sep 17 00:00:00 2001
From: suhyun <seraphina0911@snu.ac.kr>
Date: Sat, 20 Dec 2025 00:47:52 +0900
Subject: [PATCH] [feat] visible footer

---
 src/pages/ShopPage.tsx | 58 ++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/pages/ShopPage.tsx b/src/pages/ShopPage.tsx
index 16c1b76..b522dd5 100644
--- a/src/pages/ShopPage.tsx
+++ b/src/pages/ShopPage.tsx
@@ -8,62 +8,58 @@ const ShopPage: React.FC = () => {
   const [showReroll, setShowReroll] = useState(false);
 
   return (
-    <div className="relative min-h-screen overflow-x-hidden bg-[#E3F6FF]">
-      {/* 헤더 고정 */}
-      <div className="fixed top-0 left-0 z-50 w-full">
-        <Header />
-      </div>
-      {/* 배경 이미지 */}
+    <div className="relative flex min-h-screen flex-col">
       <img
         src="/images/shop/background3.png"
         alt="background"
-        className="absolute top-0 left-0 z-0 h-full w-full object-cover"
+        className="fixed top-0 left-0 -z-10 h-full w-full object-cover"
       />
-      {/* 메인 컨텐츠 */}
-      <main className="relative z-10 mx-auto mt-20 max-w-7xl px-8 pt-18 pb-20">
-        <div className="flex w-full flex-col items-center justify-center gap-40 md:flex-row">
-          {/* 왼쪽: 타이틀 + 유저 정보 */}
+
+      {/* 헤더 */}
+      <div className="fixed top-0 left-0 z-50 w-full">
+        <Header />
+      </div>
+      <main className="relative z-10 mx-auto mt-32 w-full max-w-7xl flex-1 px-8 pb-20">
+        <div className="flex w-full flex-col items-center justify-center gap-12 md:flex-row md:gap-40">
+          {/* 왼쪽 영역 */}
           <div className="flex flex-col items-center justify-center md:w-1/3">
             <LogoText
               text="Shop"
               className="font-sixtyfour text-shadow mb-10 text-center text-6xl text-[#C18A8A] drop-shadow-[0_3px_0_rgba(0,0,0,0.25)] md:mb-0"
             />
-            <div className="mt-6 flex h-13 items-center justify-center rounded-xl bg-white px-2 py-2 shadow hover:bg-gray-100">
+            <div className="mt-6 flex h-13 items-center justify-center rounded-xl bg-white px-4 py-2 shadow transition-colors hover:bg-gray-100">
               <img src="/images/shop/starfish.png" alt="star" className="mr-2 h-10 w-10" />
               <span className="font-vt323 text-3xl text-gray-800">1000</span>
             </div>
-            <img src="/images/shop/tankwithfish.png" alt="character" className="mt-16 w-80" />
+            <img
+              src="/images/shop/tankwithfish.png"
+              alt="character"
+              className="mt-16 w-80 object-contain"
+            />
           </div>
-          {/* 오른쪽: 상점 아이템 */}
+
+          {/* 오른쪽 영역 */}
           <div className="flex flex-col items-center justify-center md:w-[50%]">
-            {/* 상단 버튼 */}
-            <div className="mb-3 flex w-full justify-start gap-4">
+            <div className="mb-6 flex w-full justify-start gap-4">
               <button
                 onClick={() => setShowReroll(false)}
-                className={
-                  showReroll
-                    ? "font-vt323 rounded-full bg-[#CDE6EF] px-6 py-3 text-xl text-black shadow transition-all duration-300 hover:bg-[#E3CFCF]"
-                    : "font-vt323 rounded-full bg-white px-6 py-3 text-xl text-black shadow"
-                }
+                className={`font-vt323 rounded-full px-6 py-3 text-xl text-black shadow transition-all duration-300 ${
+                  !showReroll ? "bg-white" : "bg-[#CDE6EF] hover:bg-[#E3CFCF]"
+                }`}
               >
                 Background
               </button>
-              {/* <button className="font-vt323 rounded-full bg-[#CDE6EF] px-6 py-3 text-xl text-black shadow hover:bg-[#E3CFCF]">
-                Items
-              </button> */}
               <button
                 onClick={() => setShowReroll(true)}
-                className={
-                  showReroll
-                    ? "font-vt323 rounded-full bg-white px-6 py-3 text-xl text-black shadow"
-                    : "font-vt323 rounded-full bg-[#CDE6EF] px-6 py-3 text-xl text-black shadow transition-all duration-300 hover:bg-[#E3CFCF]"
-                }
+                className={`font-vt323 rounded-full px-6 py-3 text-xl text-black shadow transition-all duration-300 ${
+                  showReroll ? "bg-white" : "bg-[#CDE6EF] hover:bg-[#E3CFCF]"
+                }`}
               >
                 Re-roll
               </button>
             </div>
-            {/* 아이템 리스트 */}
-            <div className="flex w-full justify-center gap-8">
+
+            <div className="flex w-full justify-center">
               {showReroll ? <RerollItem /> : <BackgroundItem />}
             </div>
           </div>