Skip to content

[feat] visible footer #49

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] visible footer #49

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
58 changes: 27 additions & 31 deletions src/pages/ShopPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down