From 38d072572958e8dc012a6197abebd9a13803d24e Mon Sep 17 00:00:00 2001
From: suhyun <seraphina0911@snu.ac.kr>
Date: Sat, 20 Dec 2025 01:53:19 +0900
Subject: [PATCH] [feat] fix mainpage example

---
 src/App.tsx                                   |   3 +-
 .../TankRenderer/FishTankPreview.tsx          |   4 +-
 src/pages/MainPage.tsx                        | 113 ++++++++++++++--
 src/pages/TestPage.tsx                        | 123 ------------------
 4 files changed, 106 insertions(+), 137 deletions(-)
 delete mode 100644 src/pages/TestPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 647a523..b8b13a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { MainPage, MyPage, ShopPage, TestPage, GitHubCallbackPage } from "./pages";
+import { MainPage, MyPage, ShopPage, GitHubCallbackPage } from "./pages";
 import CollectionPage from "./pages/CollectionPage";
 import { AuthProvider } from "@/auth/AuthContext";
 import { ViewportProvider } from "@/contexts/ViewportContext";
@@ -13,7 +13,6 @@ function App() {
             <Route path="/" element={<MainPage />} />
             <Route path="/my" element={<MyPage />} />
             <Route path="/shop" element={<ShopPage />} />
-            <Route path="/test" element={<TestPage />} />
             <Route path="/auth/github/callback" element={<GitHubCallbackPage />} />
             <Route path="/collection" element={<CollectionPage />} />
           </Routes>
diff --git a/src/components/TankRenderer/FishTankPreview.tsx b/src/components/TankRenderer/FishTankPreview.tsx
index af6173a..16a104e 100644
--- a/src/components/TankRenderer/FishTankPreview.tsx
+++ b/src/components/TankRenderer/FishTankPreview.tsx
@@ -39,10 +39,10 @@ export default function FishTank({
       )}
 
       {/* 배경 이미지가 없을 때 → 기본 하늘색 배경 */}
-      {!bgImage && <div className="pointer-events-none absolute inset-0 z-0 bg-sky-200" />}
+      {!bgImage && <div className="pointer-events-none absolute inset-0 z-0" />}
 
       {/* 좌상단 Repository 이름 */}
-      <div className="pointer-events-none absolute top-2 left-2 z-20 rounded px-1 py-1 text-xl font-medium">
+      <div className="pointer-events-none absolute top-2 left-2 z-20 rounded px-3 text-4xl font-medium text-black">
         {repositoryName}
       </div>
 
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 1c5576b..3702e49 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,7 +1,72 @@
-import { Footer, Header } from "@/components";
+import { Footer, Header, FishTankPreview } from "@/components"; // FishTankPreview 추가
 import LogoText from "@/components/LogoText";
 import { useNavigate } from "react-router-dom";
 import { useState, useEffect } from "react";
+import type { Fish } from "@/types/fish"; // Fish 타입 추가
+
+// 1. Mock 데이터 추가 (FishTank에 표시될 데이터)
+const mockFishList: Fish[] = [
+  {
+    id: 101,
+    name: "SpaceOcto_4",
+    github_username: "Jongpippan",
+    group_code: "SpaceOcto",
+    maturity: 4,
+    repository_name: "octo-space/frontend",
+    commit_count: 132,
+    unlocked_at: "2024-11-20T12:00:00Z",
+    is_visible_in_aquarium: true,
+    is_visible_in_fishtank: true,
+  },
+  {
+    id: 101,
+    name: "RBFishbun_3",
+    github_username: "Imggaggu",
+    group_code: "RBFishbun",
+    maturity: 3,
+    repository_name: "octo-space/frontend",
+    commit_count: 142,
+    unlocked_at: "2024-11-20T12:00:00Z",
+    is_visible_in_aquarium: true,
+    is_visible_in_fishtank: true,
+  },
+  {
+    id: 101,
+    name: "ShrimpWich_5",
+    github_username: "SuhyunBan",
+    group_code: "ShrimpWich",
+    maturity: 5,
+    repository_name: "octo-space/frontend",
+    commit_count: 124,
+    unlocked_at: "2024-11-20T12:00:00Z",
+    is_visible_in_aquarium: true,
+    is_visible_in_fishtank: true,
+  },
+  {
+    id: 102,
+    name: "ShrimpWich_2",
+    github_username: "eileen914",
+    group_code: "ShrimpWich",
+    maturity: 2,
+    repository_name: "shrimpwich/engine",
+    commit_count: 117,
+    unlocked_at: "2024-10-03T09:30:00Z",
+    is_visible_in_aquarium: true,
+    is_visible_in_fishtank: true,
+  },
+  {
+    id: 104,
+    name: "LaptopSunfish",
+    github_username: "jay20012024",
+    group_code: "LaptopSunfish",
+    maturity: 4,
+    repository_name: "suntech/laptop-ui",
+    commit_count: 155,
+    unlocked_at: "2024-07-12T11:20:00Z",
+    is_visible_in_aquarium: true,
+    is_visible_in_fishtank: true,
+  },
+];
 
 export default function MainPage() {
   const navigate = useNavigate();
@@ -19,12 +84,10 @@ export default function MainPage() {
     };
   }, []);
 
-  // 화면 너비가 768px 이하면 더 빨리 나타나도록 임계값 감소
   const baseWidth = 768;
   const baseThreshold1 = 900;
   const baseThreshold2 = 1600;
 
-  // 768px 이하에서는 0.7배를 곱해서 더 빨리 나타나도록 함
   const scrollThreshold1 =
     windowWidth <= baseWidth
       ? Math.max(300, Math.floor((baseThreshold1 * windowWidth * 0.7) / baseWidth))
@@ -36,6 +99,7 @@ export default function MainPage() {
 
   return (
     <div className="relative flex min-h-screen flex-col justify-between overflow-x-hidden">
+      {/* 배경 설정 */}
       <div
         className="fixed inset-0 -z-10"
         style={{
@@ -44,12 +108,15 @@ export default function MainPage() {
           animation: "waterMove 2s ease-in-out infinite",
         }}
       />
+
       <div className="fixed top-0 left-0 z-50 w-full">
         <Header />
       </div>
+
+      {/* Hero 섹션 */}
       <section
         id="home"
-        className="mx-auto mb-16 flex min-h-[60vh] w-full max-w-6xl flex-col justify-center px-4 pt-32 pt-64 md:mb-32 md:pt-64"
+        className="mx-auto mb-16 flex min-h-[60vh] w-full max-w-6xl flex-col justify-center px-4 pt-64 md:mb-32 md:pt-64"
       >
         <LogoText
           text={`GITHUB\nAQUARIUM`}
@@ -66,12 +133,30 @@ export default function MainPage() {
           />
         </div>
       </section>
+
+      {/* 2. FishTank Preview 섹션: example.png를 컴포넌트로 교체 */}
       <section className="mt-6 flex w-full justify-center px-12 md:mt-10">
-        <div className="relative w-full max-w-4xl rounded-[1.5rem] border border-white/60 bg-white/70 p-6 shadow-2xl backdrop-blur md:rounded-[3.5rem] md:p-12">
-          <img src="/images/main/example.png" className="h-full w-full object-cover" />
+        <div className="relative w-full max-w-4xl rounded-[1.5rem] border border-white/60 bg-white/70 p-3 shadow-2xl backdrop-blur md:rounded-[3.5rem] md:p-6">
+          {/* 1. aspect-[16/9]로 비율 고정 
+            2. overflow-hidden으로 내부 물고기 이탈 방지
+          */}
+          <div className="relative aspect-video w-full overflow-hidden rounded-[1rem] bg-sky-100/30 md:rounded-[2.5rem]">
+            <FishTankPreview
+              // 부모 div의 실제 렌더링 크기를 100% 채우도록 설정
+              width={windowWidth > 896 ? 896 : windowWidth - 96} // max-w-4xl(896px) 기준
+              height={(windowWidth > 896 ? 896 : windowWidth - 96) * 0.5625} // 16:9 비율 유지
+              className="h-full w-full"
+              repositoryName="GitHub Aquarium"
+              fishList={mockFishList}
+            />
+          </div>
+
+          {/* 하단 그림자 효과 */}
           <div className="absolute -right-4 -bottom-4 -left-4 h-8 rounded-3xl bg-black/10 blur" />
         </div>
       </section>
+
+      {/* Explore 섹션 */}
       <div className="relative mt-40 flex min-h-[37vh] w-full flex-col items-center justify-between md:mt-50 xl:mt-70">
         <LogoText
           text={`Explore`}
@@ -80,9 +165,11 @@ export default function MainPage() {
         <img
           src="/images/main/explore.png"
           alt="explore"
-          className="lg: xs:mt-5 z-10 mx-auto rounded-[1.5rem] object-cover sm:mt-8 md:mt-12 md:rounded-[3rem] xl:mt-18"
+          className="xs:mt-5 z-10 mx-auto rounded-[1.5rem] object-cover sm:mt-8 md:mt-12 md:rounded-[3rem] xl:mt-18"
           style={{ width: `${windowWidth * 0.8}px` }}
         />
+
+        {/* 장식용 미역들 */}
         <img
           src="/images/main/seaweed-green.png"
           alt="seaweed"
@@ -113,10 +200,12 @@ export default function MainPage() {
             zIndex: 20,
           }}
         />
+
+        {/* 메뉴 이동 버튼 (말풍선) */}
         <img
           src="/images/main/myaquariumtextbox.png"
           alt="my aquarium"
-          className="absolute z-30 cursor-pointer transition-all duration-300 hover:scale-x-105 hover:scale-y-105"
+          className="absolute z-30 cursor-pointer transition-all duration-300 hover:scale-110"
           style={{
             width: `${windowWidth * 0.2}px`,
             bottom: "24%",
@@ -127,7 +216,7 @@ export default function MainPage() {
         <img
           src="/images/main/shoptextbox.png"
           alt="shop"
-          className="absolute z-30 cursor-pointer object-cover transition-all duration-300 hover:scale-x-105 hover:scale-y-105"
+          className="absolute z-30 cursor-pointer object-cover transition-all duration-300 hover:scale-110"
           style={{
             width: `${windowWidth * 0.2}px`,
             bottom: "-20%",
@@ -137,6 +226,7 @@ export default function MainPage() {
         />
       </div>
 
+      {/* 하단 설명 섹션 */}
       <section className="mx-auto mt-40 w-full max-w-3xl px-6 text-center text-[#561B51] md:mt-68">
         <div className="font-vt323 space-y-2 text-sm leading-3 sm:text-lg sm:leading-5 md:text-2xl md:leading-7 lg:text-3xl">
           <p>🐟 Ready to raise your own fish?</p>
@@ -146,12 +236,14 @@ export default function MainPage() {
           <p>Show off your contributions at a glance</p>
         </div>
         <button
-          className="font-vt323 mt-8 inline-flex items-center justify-center rounded-full bg-[#3F3F3F] px-4 py-2 text-sm text-[#D7B9B9] shadow-lg transition-all duration-300 hover:scale-x-105 hover:scale-y-105 hover:bg-[#7A7A7A] sm:mt-12 sm:text-xl md:mt-18 md:px-6 md:py-3 md:text-2xl"
+          className="font-vt323 mt-8 inline-flex items-center justify-center rounded-full bg-[#3F3F3F] px-4 py-2 text-sm text-[#D7B9B9] shadow-lg transition-all duration-300 hover:scale-105 hover:bg-[#7A7A7A] sm:mt-12 sm:text-xl md:mt-18 md:px-6 md:py-3 md:text-2xl"
           onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
         >
           raise your own fish now!
         </button>
       </section>
+
+      {/* 하단 장식 요소 */}
       <div className="relative h-[28rem] w-full md:h-[56rem]">
         <div className="absolute bottom-0 flex w-full items-end justify-between">
           <img
@@ -182,6 +274,7 @@ export default function MainPage() {
           />
         </div>
       </div>
+
       <Footer />
     </div>
   );
diff --git a/src/pages/TestPage.tsx b/src/pages/TestPage.tsx
deleted file mode 100644
index 7dc2f96..0000000
--- a/src/pages/TestPage.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-// src/pages/TestPage.tsx
-import React, { useEffect, useState } from "react";
-import { Footer, Header, FishTankPreview, AquariumPreview } from "@/components";
-import type { Fish } from "@/types/fish";
-import type { AquariumDetail } from "@/types/aquarium";
-import { getAquariumDetail } from "@/apis/aquarium";
-
-const mockFishList: Fish[] = [
-  {
-    id: 101,
-    name: "SpaceOcto_6", // species
-    github_username: "alice", // 소유자
-    group_code: "SpaceOcto",
-    maturity: 3,
-    repository_name: "octo-space/frontend",
-    commit_count: 42,
-    unlocked_at: "2024-11-20T12:00:00Z",
-    is_visible_in_aquarium: true,
-    is_visible_in_fishtank: true,
-  },
-  {
-    id: 102,
-    name: "ShrimpWich_6",
-    github_username: "bob",
-    group_code: "ShrimpWich",
-    maturity: 2,
-    repository_name: "shrimpwich/engine",
-    commit_count: 17,
-    unlocked_at: "2024-10-03T09:30:00Z",
-    is_visible_in_aquarium: true,
-    is_visible_in_fishtank: true,
-  },
-  {
-    id: 103,
-    name: "SPFishbun_3",
-    github_username: "charlie",
-    group_code: "Fishbun",
-    maturity: 1,
-    repository_name: "bakery/fishbun-core",
-    commit_count: 8,
-    unlocked_at: "2024-08-15T15:00:00Z",
-    is_visible_in_aquarium: true,
-    is_visible_in_fishtank: false, // 피시탱크에서는 안 보임
-  },
-  {
-    id: 104,
-    name: "LaptopSunfish",
-    github_username: "diana",
-    group_code: "LaptopSunfish",
-    maturity: 4,
-    repository_name: "suntech/laptop-ui",
-    commit_count: 105,
-    unlocked_at: "2024-07-12T11:20:00Z",
-    is_visible_in_aquarium: true,
-    is_visible_in_fishtank: true,
-  },
-];
-
-export default function TestPage() {
-  const [aquarium, setAquarium] = useState<AquariumDetail | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let mounted = true;
-
-    (async () => {
-      try {
-        const data = await getAquariumDetail();
-        if (!mounted) return;
-        setAquarium(data);
-        console.log("Fetched aquarium data:", data);
-      } catch (e) {
-        if (!mounted) return;
-        setError(e instanceof Error ? e.message : "아쿠아리움 정보를 불러오지 못했습니다.");
-      } finally {
-        if (mounted) setLoading(false);
-      }
-    })();
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  return (
-    <div className="flex min-h-screen flex-col justify-between bg-sky-300">
-      <Header />
-      <main className="flex flex-col items-center justify-center gap-6 py-8 text-black">
-        <p className="text-h1 font-logo">Test Page</p>
-        <p className="text-h1 font-vt">Test Page</p>
-        <p className="text-h1 font-turret">Test Page</p>
-        <p className="text-h1 font-kor">테스트 페이지</p>
-
-        {/* 레포 피시탱크: mock 데이터 사용 */}
-        <FishTankPreview
-          width={480}
-          height={300}
-          className="relative overflow-hidden rounded-2xl bg-transparent shadow-lg"
-          repositoryName="Jongpippan Repo"
-          fishList={mockFishList}
-          backgroundName="Bg Ocean"
-        />
-
-        {/* 아쿠아리움: 실제 API 데이터 사용 */}
-        {loading && <div className="mt-4 text-sm text-slate-600">아쿠아리움 로딩 중...</div>}
-
-        {error && !loading && <div className="mt-4 text-sm text-red-500">{error}</div>}
-
-        {aquarium && !loading && !error && (
-          <AquariumPreview
-            width={480}
-            height={300}
-            className="relative overflow-hidden rounded-2xl bg-transparent shadow-lg"
-            fishList={aquarium.fish_list}
-            backgroundName={aquarium.background_name}
-          />
-        )}
-      </main>
-      <Footer />
-    </div>
-  );
-}