Skip to content

[feat] fix mainpage example #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ssoohy91 merged 1 commit into from
Dec 19, 2025
Merged

[feat] fix mainpage example #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/TankRenderer/FishTankPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
113 changes: 103 additions & 10 deletions src/pages/MainPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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))
Expand All @@ -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={{
Expand All @@ -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`}
Expand All @@ -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`}
Expand All @@ -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"
Expand Down Expand Up @@ -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%",
Expand All @@ -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%",
Expand All @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -182,6 +274,7 @@ export default function MainPage() {
/>
</div>
</div>

<Footer />
</div>
);
Expand Down
123 changes: 0 additions & 123 deletions src/pages/TestPage.tsx
View file
Open in desktop

This file was deleted.