diff --git a/.gitignore b/.gitignore index 438657a..080f965 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ dist-ssr *.njsproj *.sln *.sw? +.superpowers/ diff --git a/public/images/bg_loading.webp b/public/images/bg_loading.webp new file mode 100644 index 0000000..a7e16dc Binary files /dev/null and b/public/images/bg_loading.webp differ diff --git a/public/images/bg_login.webp b/public/images/bg_login.webp new file mode 100644 index 0000000..6b02763 Binary files /dev/null and b/public/images/bg_login.webp differ diff --git a/public/images/bg_main.webp b/public/images/bg_main.webp new file mode 100644 index 0000000..9112764 Binary files /dev/null and b/public/images/bg_main.webp differ diff --git a/public/images/btn_normal.webp b/public/images/btn_normal.webp new file mode 100644 index 0000000..2fed3b9 Binary files /dev/null and b/public/images/btn_normal.webp differ diff --git a/public/images/btn_pressed.webp b/public/images/btn_pressed.webp new file mode 100644 index 0000000..3fb81c3 Binary files /dev/null and b/public/images/btn_pressed.webp differ diff --git a/public/images/card_frame.webp b/public/images/card_frame.webp new file mode 100644 index 0000000..f37ff14 Binary files /dev/null and b/public/images/card_frame.webp differ diff --git a/public/images/divider.webp b/public/images/divider.webp new file mode 100644 index 0000000..9744f32 Binary files /dev/null and b/public/images/divider.webp differ diff --git a/public/images/logo.webp b/public/images/logo.webp new file mode 100644 index 0000000..19d211d Binary files /dev/null and b/public/images/logo.webp differ diff --git a/src/components/AnnouncementBoard.css b/src/components/AnnouncementBoard.css index 77a56f8..caa045f 100644 --- a/src/components/AnnouncementBoard.css +++ b/src/components/AnnouncementBoard.css @@ -1,5 +1,6 @@ .announcement-board { margin-top: 32px; + padding: 24px; } .announcement-heading { @@ -7,8 +8,9 @@ font-weight: 700; color: rgba(255, 255, 255, 0.9); margin: 0 0 16px; - padding-bottom: 12px; - border-bottom: 1px solid rgba(186, 205, 176, 0.15); + padding-bottom: 0; + border-bottom: none; + text-align: center; } .announcement-list { diff --git a/src/components/DownloadSection.css b/src/components/DownloadSection.css index c7713ea..0d6ce4c 100644 --- a/src/components/DownloadSection.css +++ b/src/components/DownloadSection.css @@ -1,9 +1,12 @@ .download-section { - background: rgba(186, 205, 176, 0.06); - border: 1px solid rgba(186, 205, 176, 0.12); + position: relative; + background: + linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.6)), + url('/images/bg_main.webp') center/cover no-repeat; border-radius: 12px; - padding: 48px 40px; + padding: 60px 40px; text-align: center; + overflow: hidden; } .download-title { diff --git a/src/index.css b/src/index.css index 1bc8a3a..2b53f68 100644 --- a/src/index.css +++ b/src/index.css @@ -30,4 +30,52 @@ a { a:hover { opacity: 0.85; +} + +/* ── Game asset common classes ───────────────────── */ + +.btn-game { + position: relative; + border: none; + color: #fff; + padding: 14px 40px; + font-size: 1.1rem; + font-weight: 700; + cursor: pointer; + background: url('/images/btn_normal.webp') center/100% 100% no-repeat; + letter-spacing: 0.05em; + overflow: hidden; + transition: transform 0.15s, brightness 0.15s; +} +.btn-game:hover { transform: translateY(-1px); filter: brightness(1.2); } +.btn-game:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } +.btn-game > * { position: relative; z-index: 1; } + +.card-game { + position: relative; + background: rgba(0, 0, 0, 0.6); + border-radius: 12px; + overflow: hidden; +} +.card-game::before { + content: ''; + position: absolute; + inset: -8px; + background: url('/images/card_frame.webp') center/100% 100% no-repeat; + pointer-events: none; + z-index: 0; +} +.card-game > * { position: relative; z-index: 1; } + +.divider-game { + width: 100%; + max-width: 400px; + height: 20px; + background: url('/images/divider.webp') center/contain no-repeat; + margin: 2rem auto; +} + +@media (max-width: 768px) { + .card-game::before { display: none; } + .card-game { border: 1px solid rgba(186, 205, 176, 0.3); } } \ No newline at end of file diff --git a/src/pages/AdminPage.css b/src/pages/AdminPage.css index c8c060d..2e6ef46 100644 --- a/src/pages/AdminPage.css +++ b/src/pages/AdminPage.css @@ -96,6 +96,19 @@ padding: 32px 24px 80px; } +.admin-logo { + height: 32px; + width: auto; +} + +.admin-tabs-divider { + width: 100%; + max-width: 300px; + height: 16px; + background: url('/images/divider.webp') center/contain no-repeat; + margin: 0 auto; +} + /* Mobile responsive */ @media (max-width: 768px) { .admin-header { diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx index cfbc3f7..62f0767 100644 --- a/src/pages/AdminPage.jsx +++ b/src/pages/AdminPage.jsx @@ -21,6 +21,7 @@ export default function AdminPage() {
← 메인으로 +

관리자 페이지

@@ -44,6 +45,7 @@ export default function AdminPage() { ))}
+
{/* Tabs are conditionally rendered (not hidden) to avoid stale data. Each panel re-fetches on mount. */}
diff --git a/src/pages/AuthPage.css b/src/pages/AuthPage.css index a16860b..8b2a54f 100644 --- a/src/pages/AuthPage.css +++ b/src/pages/AuthPage.css @@ -3,20 +3,36 @@ display: flex; align-items: center; justify-content: center; - background-color: #2E2C2F; - background-image: - radial-gradient(ellipse at 20% 50%, rgba(186, 205, 176, 0.08) 0%, transparent 50%), - radial-gradient(ellipse at 80% 50%, rgba(186, 205, 176, 0.05) 0%, transparent 50%); + background: + radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%), + url('/images/bg_login.webp') center/cover no-repeat; + background-color: #1a1a1a; } .login-panel { + position: relative; width: 100%; - max-width: 400px; + max-width: 420px; padding: 48px 40px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(186, 205, 176, 0.15); + background: rgba(0, 0, 0, 0.6); border-radius: 12px; - backdrop-filter: blur(10px); + backdrop-filter: blur(12px); + overflow: hidden; + border: none; +} + +.login-panel::before { + content: ''; + position: absolute; + inset: -8px; + background: url('/images/card_frame.webp') center/100% 100% no-repeat; + pointer-events: none; + z-index: 0; +} + +.login-panel > * { + position: relative; + z-index: 1; } .login-header { @@ -116,21 +132,15 @@ .login-divider { display: flex; align-items: center; - gap: 16px; + justify-content: center; margin: 24px 0; } -.login-divider::before, -.login-divider::after { - content: ''; - flex: 1; - height: 1px; - background: rgba(255, 255, 255, 0.1); -} - -.login-divider span { - font-size: 0.8rem; - color: rgba(255, 255, 255, 0.35); +.login-divider-img { + width: 100%; + max-width: 250px; + height: 16px; + background: url('/images/divider.webp') center/contain no-repeat; } .btn-ssafy { @@ -212,6 +222,11 @@ padding: 32px 20px; margin: 0 12px; border-radius: 8px; + border: 1px solid rgba(186, 205, 176, 0.3); + } + + .login-panel::before { + display: none; } .game-title { diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css index efd630e..6b07ed4 100644 --- a/src/pages/HomePage.css +++ b/src/pages/HomePage.css @@ -3,21 +3,44 @@ background-color: #2E2C2F; } -/* Header */ +/* Header - fixed with scroll effect */ .home-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; + background: transparent; + transition: background 0.3s; +} + +.home-header.scrolled { + background: rgba(46, 44, 47, 0.85); + backdrop-filter: blur(10px); border-bottom: 1px solid rgba(186, 205, 176, 0.1); } .home-logo { - font-size: 1.5rem; + display: flex; + align-items: center; + gap: 12px; + text-decoration: none; +} + +.home-logo img { + height: 40px; + width: auto; +} + +.home-logo-text { + font-size: 1.2rem; font-weight: 800; color: #BACDB0; letter-spacing: 0.1em; - margin: 0; } .home-user { @@ -77,13 +100,11 @@ opacity: 0.9; } -/* Hero banner */ +/* Hero banner - fullscreen with game background */ .hero-banner { position: relative; - height: 280px; - background: - linear-gradient(135deg, rgba(46, 44, 47, 0.85), rgba(46, 44, 47, 0.6)), - linear-gradient(135deg, #2E2C2F 0%, #3a3a3a 50%, #2E2C2F 100%); + min-height: 100vh; + background: url('/images/bg_loading.webp') center/cover no-repeat; display: flex; align-items: center; justify-content: center; @@ -94,28 +115,62 @@ content: ''; position: absolute; inset: 0; - background: - radial-gradient(ellipse at 30% 40%, rgba(186, 205, 176, 0.12) 0%, transparent 60%), - radial-gradient(ellipse at 70% 60%, rgba(186, 205, 176, 0.06) 0%, transparent 50%); + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.7) 0%, + rgba(0, 0, 0, 0.3) 50%, + rgba(0, 0, 0, 0.8) 100% + ); } .hero-overlay { position: relative; text-align: center; + display: flex; + flex-direction: column; + align-items: center; +} + +.hero-logo { + width: 200px; + height: auto; + margin-bottom: 24px; } .hero-title { - font-size: 2.8rem; + font-size: 3rem; font-weight: 800; color: #BACDB0; - letter-spacing: 0.12em; + letter-spacing: 0.15em; + text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); margin: 0; } .hero-desc { - font-size: 1rem; - color: rgba(255, 255, 255, 0.5); + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.6); + letter-spacing: 0.3em; margin: 12px 0 0; + text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); +} + +.hero-cta { + margin-top: 40px; +} + +.hero-scroll-hint { + position: absolute; + bottom: 32px; + left: 50%; + transform: translateX(-50%); + color: rgba(255, 255, 255, 0.4); + font-size: 0.8rem; + animation: bounce 2s infinite; +} + +@keyframes bounce { + 0%, 100% { transform: translateX(-50%) translateY(0); } + 50% { transform: translateX(-50%) translateY(-8px); } } /* Main content */ @@ -128,19 +183,23 @@ /* Mobile responsive */ @media (max-width: 768px) { .home-header { - flex-direction: column; - gap: 12px; padding: 12px 16px; - text-align: center; + } + + .home-header.scrolled { + padding: 8px 16px; } .home-user { - width: 100%; - justify-content: center; + gap: 8px; } .hero-banner { - height: 180px; + min-height: 80vh; + } + + .hero-logo { + width: 120px; } .hero-title { @@ -149,6 +208,7 @@ .hero-desc { font-size: 0.85rem; + letter-spacing: 0.15em; } .home-main { diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 63047f4..fa61b8b 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,3 +1,4 @@ +import { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { useAuth } from '../context/useAuth'; import DownloadSection from '../components/DownloadSection'; @@ -7,11 +8,21 @@ import './HomePage.css'; export default function HomePage() { const { user, logout } = useAuth(); + const [scrolled, setScrolled] = useState(false); + + useEffect(() => { + const onScroll = () => setScrolled(window.scrollY > 50); + window.addEventListener('scroll', onScroll); + return () => window.removeEventListener('scroll', onScroll); + }, []); return (
-
-

One of the plans

+
+ + One of the Plans + One of the Plans +
{user ? ( <> @@ -30,14 +41,29 @@ export default function HomePage() {
-

One of the plans

-

Unity 3D 멀티플레이어 테스트에 참여하세요

+ +

One of the Plans

+

MULTIPLAYER BOSS RAID

+
+ {user ? ( + + 게임 시작 + + ) : ( + + 로그인 + + )} +
+
▼ 스크롤
-
+
+
{user && } +
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx index 8d4316a..dc54a07 100644 --- a/src/pages/LoginPage.jsx +++ b/src/pages/LoginPage.jsx @@ -36,6 +36,7 @@ export default function LoginPage() {
+ One of the Plans

One of the plans

MULTIPLAYER

@@ -72,13 +73,13 @@ export default function LoginPage() { {justRegistered &&

회원가입이 완료되었습니다. 로그인해주세요.

} {error && } -
- 또는 +
diff --git a/src/pages/WalletPage.css b/src/pages/WalletPage.css index 1132910..22c06bd 100644 --- a/src/pages/WalletPage.css +++ b/src/pages/WalletPage.css @@ -413,6 +413,19 @@ color: rgba(255, 255, 255, 0.8); } +.wallet-logo { + height: 32px; + width: auto; +} + +.wallet-tabs-divider { + width: 100%; + max-width: 300px; + height: 16px; + background: url('/images/divider.webp') center/contain no-repeat; + margin: 0 auto; +} + /* Mobile responsive */ @media (max-width: 768px) { .wallet-header {