From 45d325dfbedee17f3c00610498cbb1f0b1e894e0 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 19 Apr 2026 11:12:19 +0900
Subject: [PATCH] =?UTF-8?q?=ED=91=B8=ED=84=B0=20=EC=A1=B0=EA=B1=B4=20?=
 =?UTF-8?q?=EB=8B=A8=EC=88=9C=ED=99=94=20+=20=EC=8B=AC=EB=B3=BC=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B0=B0=EC=A7=80=20=ED=85=8C=EB=A7=88=20?=
 =?UTF-8?q?=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 푸터를 홈 경로에서만 렌더링 (!fullscreen → isHome)
  이동 시 푸터가 잠깐 보였다 사라지는 플래시 제거
- 심볼 관리 타입 배지(아케인/어센틱/그랜드 어센틱) 테마별 토큰화
  라이트 모드에서 violet/sky/amber-300이 흰 배경에 안 보이던 문제 해결
- 계산기 페이지의 fullscreen 훅을 useLayoutEffect로 변경

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/Layout.jsx            |  5 +++-
 .../src/features/boss-crystal/BossCrystal.jsx |  4 +--
 .../src/features/liberation/Liberation.jsx    |  4 +--
 frontend/src/features/symbol/Symbol.jsx       |  4 +--
 .../src/features/symbol/admin/SymbolList.jsx  | 27 ++++++++++++++-----
 frontend/src/index.css                        | 20 ++++++++++++++
 6 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 34d668a..7fb7c2e 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -206,12 +206,15 @@ function HomeLinkButton() {
 }
 
 export default function Layout() {
+  const location = useLocation()
   const [fullscreen, setFullscreen] = useState(false)
   const [loginOpen, setLoginOpen] = useState(false)
   const isAdmin = !!useMatch('/admin/*')
   const homeTo = isAdmin ? '/admin' : '/'
   const theme = useThemeStore((s) => s.theme)
 
+  const isHome = location.pathname === '/'
+
   useEffect(() => {
     const root = document.documentElement
     if (theme === 'light') root.setAttribute('data-theme', 'light')
@@ -256,7 +259,7 @@ export default function Layout() {
         }`}>
           <Outlet />
         </main>
-        {!fullscreen && <Footer />}
+        {isHome && <Footer />}
       </div>
     </LayoutContext.Provider>
   )
diff --git a/frontend/src/features/boss-crystal/BossCrystal.jsx b/frontend/src/features/boss-crystal/BossCrystal.jsx
index ebe57c9..94016e9 100644
--- a/frontend/src/features/boss-crystal/BossCrystal.jsx
+++ b/frontend/src/features/boss-crystal/BossCrystal.jsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import { useQuery, useQueries } from '@tanstack/react-query'
 import { api } from '../../api/client'
 import { useLayout } from '../../components/Layout'
@@ -21,7 +21,7 @@ export default function BossCrystal() {
 
   // 풀스크린 모드 (푸터 숨김 + 내부 스크롤)
   const { setFullscreen } = useLayout()
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFullscreen(true)
     return () => setFullscreen(false)
   }, [setFullscreen])
diff --git a/frontend/src/features/liberation/Liberation.jsx b/frontend/src/features/liberation/Liberation.jsx
index 9ac1d46..d0898ba 100644
--- a/frontend/src/features/liberation/Liberation.jsx
+++ b/frontend/src/features/liberation/Liberation.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useLayoutEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import { api } from '../../api/client'
@@ -62,7 +62,7 @@ function calcMonthlyEarn(weekData) {
 
 export default function Liberation() {
   const { setFullscreen } = useLayout()
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFullscreen(true)
     return () => setFullscreen(false)
   }, [setFullscreen])
diff --git a/frontend/src/features/symbol/Symbol.jsx b/frontend/src/features/symbol/Symbol.jsx
index 15143df..d7368a8 100644
--- a/frontend/src/features/symbol/Symbol.jsx
+++ b/frontend/src/features/symbol/Symbol.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useLayoutEffect, useMemo } from 'react'
 import { useQuery, useQueries, useMutation } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
@@ -371,7 +371,7 @@ function SymbolCard({ symbol, equipped, charId }) {
 
 export default function Symbol() {
   const { setFullscreen } = useLayout()
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFullscreen(true)
     return () => setFullscreen(false)
   }, [setFullscreen])
diff --git a/frontend/src/features/symbol/admin/SymbolList.jsx b/frontend/src/features/symbol/admin/SymbolList.jsx
index 6193909..d2e8dd8 100644
--- a/frontend/src/features/symbol/admin/SymbolList.jsx
+++ b/frontend/src/features/symbol/admin/SymbolList.jsx
@@ -12,14 +12,26 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import { api } from '../../../api/client'
 
-const TYPE_COLOR = {
-  '아케인': { text: 'text-violet-300', bg: 'bg-violet-500/15', border: 'border-violet-500/30' },
-  '어센틱': { text: 'text-sky-300', bg: 'bg-sky-500/15', border: 'border-sky-500/30' },
-  '그랜드 어센틱': { text: 'text-amber-300', bg: 'bg-amber-500/15', border: 'border-amber-500/30' },
+const TYPE_STYLE = {
+  '아케인': {
+    color: 'var(--symbol-arcane-text)',
+    background: 'var(--symbol-arcane-bg)',
+    borderColor: 'var(--symbol-arcane-border)',
+  },
+  '어센틱': {
+    color: 'var(--symbol-authentic-text)',
+    background: 'var(--symbol-authentic-bg)',
+    borderColor: 'var(--symbol-authentic-border)',
+  },
+  '그랜드 어센틱': {
+    color: 'var(--symbol-grand-text)',
+    background: 'var(--symbol-grand-bg)',
+    borderColor: 'var(--symbol-grand-border)',
+  },
 }
 
 function SymbolCardContent({ symbol, dragging = false }) {
-  const color = TYPE_COLOR[symbol.type] || TYPE_COLOR['아케인']
+  const badgeStyle = TYPE_STYLE[symbol.type] || TYPE_STYLE['아케인']
   return (
     <div
       className="flex items-stretch rounded-2xl border"
@@ -53,7 +65,10 @@ function SymbolCardContent({ symbol, dragging = false }) {
         <div className="flex-1 min-w-0">
           <div className="flex items-baseline gap-2 flex-wrap">
             <h3 className="font-medium truncate">{symbol.region}</h3>
-            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded border ${color.text} ${color.bg} ${color.border}`}>
+            <span
+              className="text-[10px] font-medium px-1.5 py-0.5 rounded border"
+              style={badgeStyle}
+            >
               {symbol.type}
             </span>
           </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5e2c5ea..01a43e7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -145,6 +145,16 @@
   --liberation-primary-bar: rgba(167, 139, 250, 0.5);
   --liberation-secondary: #fda4af;
   --liberation-secondary-bar: rgba(253, 164, 175, 0.5);
+
+  --symbol-arcane-text: #c4b5fd;
+  --symbol-arcane-bg: rgba(139, 92, 246, 0.15);
+  --symbol-arcane-border: rgba(139, 92, 246, 0.3);
+  --symbol-authentic-text: #7dd3fc;
+  --symbol-authentic-bg: rgba(14, 165, 233, 0.15);
+  --symbol-authentic-border: rgba(14, 165, 233, 0.3);
+  --symbol-grand-text: #fcd34d;
+  --symbol-grand-bg: rgba(245, 158, 11, 0.15);
+  --symbol-grand-border: rgba(245, 158, 11, 0.3);
 }
 
 /* 테마 토큰 - light */
@@ -286,6 +296,16 @@
   --liberation-primary-bar: rgba(124, 58, 237, 0.5);
   --liberation-secondary: #e11d48;
   --liberation-secondary-bar: rgba(225, 29, 72, 0.5);
+
+  --symbol-arcane-text: #6d28d9;
+  --symbol-arcane-bg: rgba(139, 92, 246, 0.12);
+  --symbol-arcane-border: rgba(109, 40, 217, 0.4);
+  --symbol-authentic-text: #0369a1;
+  --symbol-authentic-bg: rgba(14, 165, 233, 0.12);
+  --symbol-authentic-border: rgba(3, 105, 161, 0.4);
+  --symbol-grand-text: #b45309;
+  --symbol-grand-bg: rgba(245, 158, 11, 0.15);
+  --symbol-grand-border: rgba(180, 83, 9, 0.4);
 }
 
 html, body, #root {