GOLDMINT 브랜드 — 돈복사 시스템 디자인 변경

- 시스템 이름: JUNGGOMOA → GOLDMINT (돈복사 시스템)
- 새 SVG 로고: 골드 코인 3장 stack (복사 효과) + $ + 상승 화살표 + sparkle
- 파비콘: assets + frontend/app/icon.svg (GOLDMINT 코인)
- 사이드바 / 로그인 / 대시보드 헤더 / metadata 모두 GOLDMINT 로
- 로그인 페이지 다크 + 골드 glow + 골드 그라디언트 버튼
- 사이드바 폭 260 → 280 (mini 72px), 푸터 아바타 골드 그라디언트

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chpark
2026-05-07 01:06:57 +09:00
parent c4e6aab7b2
commit c330647453
6 changed files with 167 additions and 77 deletions
+36 -21
View File
@@ -1,26 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 60" width="220" height="60">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 64" width="280" height="64">
<defs>
<linearGradient id="brand" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#60a5fa"/>
<radialGradient id="coinFace" cx="35%" cy="30%">
<stop offset="0%" stop-color="#fef3c7"/>
<stop offset="45%" stop-color="#fbbf24"/>
<stop offset="100%" stop-color="#b45309"/>
</radialGradient>
<linearGradient id="coinEdge" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fde047"/>
<stop offset="100%" stop-color="#92400e"/>
</linearGradient>
<linearGradient id="brandGold" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#fbbf24"/>
<stop offset="50%" stop-color="#fde68a"/>
<stop offset="100%" stop-color="#f59e0b"/>
</linearGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="1.2" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<!-- 캔들차트 모티프 -->
<g transform="translate(6, 10)">
<!-- 첫 캔들 (양봉) -->
<line x1="4" y1="6" x2="4" y2="40" stroke="#26a69a" stroke-width="1.4"/>
<rect x="1" y="20" width="6" height="14" fill="#26a69a" rx="1"/>
<!-- 둘째 캔들 (음봉) -->
<line x1="14" y1="2" x2="14" y2="34" stroke="#ef5350" stroke-width="1.4"/>
<rect x="11" y="8" width="6" height="18" fill="#ef5350" rx="1"/>
<!-- 셋째 캔들 (양봉) -->
<line x1="24" y1="10" x2="24" y2="42" stroke="#26a69a" stroke-width="1.4"/>
<rect x="21" y="14" width="6" height="22" fill="#26a69a" rx="1"/>
<!-- 추세선 -->
<polyline points="2,28 14,18 24,10" fill="none" stroke="url(#brand)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="24" cy="10" r="2.2" fill="#60a5fa"/>
<!-- 코인 stack (3장 — 복사 효과) -->
<g transform="translate(8, 14)">
<ellipse cx="30" cy="24" rx="14" ry="14" fill="url(#coinFace)" opacity="0.3"/>
<ellipse cx="23" cy="20" rx="14" ry="14" fill="url(#coinFace)" opacity="0.6" stroke="url(#coinEdge)" stroke-width="0.5"/>
<circle cx="16" cy="16" r="15.5" fill="url(#coinFace)" stroke="url(#coinEdge)" stroke-width="1.2"/>
<circle cx="16" cy="16" r="12" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="0.7"/>
<text x="16" y="22.5" text-anchor="middle" font-family="'Arial Black', Impact, sans-serif" font-weight="900" font-size="20" fill="#7c2d12" filter="url(#glow)">$</text>
<!-- 상승 화살표 -->
<path d="M 38 6 L 48 -2 L 42 -2 M 48 -2 L 48 4" stroke="#10b981" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<!-- sparkle -->
<g fill="#fde68a">
<circle cx="40" cy="16" r="0.9"/>
<circle cx="46" cy="11" r="1.1"/>
<circle cx="43" cy="22" r="0.7"/>
</g>
</g>
<!-- 텍스트 -->
<text x="46" y="28" font-family="'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif" font-weight="800" font-size="18" fill="url(#brand)" letter-spacing="1.2">JUNGGOMOA</text>
<text x="46" y="44" font-family="'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif" font-weight="500" font-size="10" fill="#9ca3af" letter-spacing="0.5">트레이딩 시스템</text>
<!-- 브랜드 텍스트 -->
<text x="66" y="30" font-family="'Pretendard', 'Arial Black', sans-serif" font-weight="900" font-size="22" fill="url(#brandGold)" letter-spacing="1.8" filter="url(#glow)">GOLDMINT</text>
<text x="66" y="46" font-family="'Pretendard', sans-serif" font-weight="600" font-size="10" fill="#cbd5e1" letter-spacing="1.5">돈복사 시스템 · AUTO-TRADE</text>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

+13
View File
@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<defs>
<radialGradient id="g" cx="35%" cy="30%">
<stop offset="0%" stop-color="#fef3c7"/>
<stop offset="45%" stop-color="#fbbf24"/>
<stop offset="100%" stop-color="#b45309"/>
</radialGradient>
</defs>
<circle cx="40" cy="38" r="20" fill="url(#g)" opacity="0.35"/>
<circle cx="32" cy="32" r="24" fill="url(#g)" stroke="#92400e" stroke-width="2"/>
<circle cx="32" cy="32" r="18" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="1.2"/>
<text x="32" y="42" text-anchor="middle" font-family="'Arial Black', Impact, sans-serif" font-weight="900" font-size="32" fill="#7c2d12">$</text>
</svg>

After

Width:  |  Height:  |  Size: 716 B

+2 -2
View File
@@ -3,8 +3,8 @@ import './globals.css';
import AuthGate from '@/components/AuthGate';
export const metadata: Metadata = {
title: 'JUNGGOMOA — 트레이딩 시스템',
description: 'BTC/ETH Futures 자동매매 대시보드',
title: 'GOLDMINT — 돈복사 시스템',
description: 'BTC/ETH Futures 자동매매 시스템 · 돈이 복사되는 시스템',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
+53 -23
View File
@@ -19,32 +19,57 @@ export default function LoginPage() {
}
return (
<div className="min-h-screen flex items-center justify-center"
style={{ background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%)' }}>
<div className="w-full max-w-sm mx-4 bg-white rounded-2xl shadow-2xl p-8">
<div className="min-h-screen flex items-center justify-center relative overflow-hidden"
style={{ background: 'radial-gradient(ellipse at top, #1e293b 0%, #0f172a 50%, #020617 100%)' }}>
{/* 배경 골드 glow */}
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full"
style={{ background: 'radial-gradient(circle, rgba(251,191,36,0.15) 0%, transparent 70%)' }} />
<div className="absolute bottom-1/4 right-0 w-[400px] h-[400px] rounded-full"
style={{ background: 'radial-gradient(circle, rgba(245,158,11,0.10) 0%, transparent 70%)' }} />
<div className="relative z-10 w-full max-w-sm mx-4 bg-white rounded-2xl shadow-2xl p-8 border-2 border-amber-300/30">
<div className="flex flex-col items-center mb-6 pb-5 border-b border-slate-200">
<svg viewBox="0 0 220 60" width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 280 64" width="240" height="55" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="b" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stopColor="#3b82f6"/>
<stop offset="100%" stopColor="#60a5fa"/>
<radialGradient id="lcoin" cx="35%" cy="30%">
<stop offset="0%" stopColor="#fef3c7"/>
<stop offset="45%" stopColor="#fbbf24"/>
<stop offset="100%" stopColor="#b45309"/>
</radialGradient>
<linearGradient id="ledge" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#fde047"/>
<stop offset="100%" stopColor="#92400e"/>
</linearGradient>
<linearGradient id="lbrand" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stopColor="#f59e0b"/>
<stop offset="50%" stopColor="#fbbf24"/>
<stop offset="100%" stopColor="#d97706"/>
</linearGradient>
<filter id="lglow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="1.2" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<g transform="translate(6, 10)">
<line x1="4" y1="6" x2="4" y2="40" stroke="#26a69a" strokeWidth="1.4"/>
<rect x="1" y="20" width="6" height="14" fill="#26a69a" rx="1"/>
<line x1="14" y1="2" x2="14" y2="34" stroke="#ef5350" strokeWidth="1.4"/>
<rect x="11" y="8" width="6" height="18" fill="#ef5350" rx="1"/>
<line x1="24" y1="10" x2="24" y2="42" stroke="#26a69a" strokeWidth="1.4"/>
<rect x="21" y="14" width="6" height="22" fill="#26a69a" rx="1"/>
<polyline points="2,28 14,18 24,10" fill="none" stroke="url(#b)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="24" cy="10" r="2.2" fill="#60a5fa"/>
<g transform="translate(8, 14)">
<ellipse cx="30" cy="24" rx="14" ry="14" fill="url(#lcoin)" opacity="0.3"/>
<ellipse cx="23" cy="20" rx="14" ry="14" fill="url(#lcoin)" opacity="0.6" stroke="url(#ledge)" strokeWidth="0.5"/>
<circle cx="16" cy="16" r="15.5" fill="url(#lcoin)" stroke="url(#ledge)" strokeWidth="1.2"/>
<circle cx="16" cy="16" r="12" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="0.7"/>
<text x="16" y="22.5" textAnchor="middle" fontFamily="'Arial Black', Impact, sans-serif" fontWeight="900" fontSize="20" fill="#7c2d12" filter="url(#lglow)">$</text>
<path d="M 38 6 L 48 -2 L 42 -2 M 48 -2 L 48 4" stroke="#10b981" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
<g fill="#fde68a">
<circle cx="40" cy="16" r="0.9"/>
<circle cx="46" cy="11" r="1.1"/>
<circle cx="43" cy="22" r="0.7"/>
</g>
</g>
<text x="46" y="28" fontFamily="Pretendard, sans-serif" fontWeight="800" fontSize="18" fill="url(#b)" letterSpacing="1.2">JUNGGOMOA</text>
<text x="46" y="44" fontFamily="Pretendard, sans-serif" fontWeight="500" fontSize="10" fill="#9ca3af" letterSpacing="0.5"> </text>
<text x="66" y="30" fontFamily="Pretendard, 'Arial Black', sans-serif" fontWeight="900" fontSize="22" fill="url(#lbrand)" letterSpacing="1.8" filter="url(#lglow)">GOLDMINT</text>
<text x="66" y="46" fontFamily="Pretendard, sans-serif" fontWeight="600" fontSize="10" fill="#92400e" letterSpacing="1.5"> · AUTO-TRADE</text>
</svg>
<h1 className="text-base font-bold text-slate-900 mt-3"> </h1>
<p className="text-xs text-slate-500 mt-1"> </p>
<h1 className="text-lg font-bold mt-4 bg-clip-text text-transparent bg-gradient-to-r from-amber-600 via-yellow-500 to-amber-600">
💰
</h1>
<p className="text-xs text-slate-500 mt-1"> </p>
</div>
<form onSubmit={onSubmit} className="space-y-4">
@@ -69,14 +94,19 @@ export default function LoginPage() {
{error && <div className="text-xs text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{error}</div>}
<button
type="submit" disabled={loading}
className="w-full py-2.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm shadow-md transition-colors disabled:opacity-60"
className="w-full py-3 rounded-lg font-bold text-sm shadow-lg transition-all disabled:opacity-60"
style={{
background: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%)',
color: '#7c2d12',
border: '1px solid #92400e',
}}
>
{loading ? '로그인 중…' : '로그인'}
{loading ? '로그인 중…' : '💰 로그인 — 돈 복사 시작'}
</button>
</form>
<div className="mt-6 pt-4 border-t border-slate-100 text-center">
<p className="text-[10px] text-slate-400">© 2026 junggomoa.com · all rights reserved</p>
<p className="text-[10px] text-slate-400">© 2026 GOLDMINT · </p>
</div>
</div>
</div>
+2 -2
View File
@@ -40,8 +40,8 @@ export default function DashboardPage() {
return (
<div>
<PageHeader
title="📊 선물 대시보드"
subtitle={`${symbol} · ${interval} · 마지막 갱신 ${now} KST`}
title="💰 돈복사 대시보드"
subtitle={`${symbol} · ${interval} · 마지막 갱신 ${now} KST · 돈이 복사되는 시스템`}
right={
<button onClick={() => setTick(t => t + 1)} className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-700 text-white rounded-md shadow-sm">
<RefreshCw size={14} />
+61 -29
View File
@@ -17,32 +17,64 @@ const NAV = [
{ href: '/profile', label: '내 정보', icon: User },
];
const Logo = ({ mini = false }: { mini?: boolean }) => (
<svg viewBox="0 0 220 60" width={mini ? 36 : 200} height={mini ? 36 : 50} xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="brand" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stopColor="#3b82f6"/>
<stop offset="100%" stopColor="#60a5fa"/>
</linearGradient>
</defs>
<g transform="translate(6, 10)">
<line x1="4" y1="6" x2="4" y2="40" stroke="#26a69a" strokeWidth="1.4"/>
<rect x="1" y="20" width="6" height="14" fill="#26a69a" rx="1"/>
<line x1="14" y1="2" x2="14" y2="34" stroke="#ef5350" strokeWidth="1.4"/>
<rect x="11" y="8" width="6" height="18" fill="#ef5350" rx="1"/>
<line x1="24" y1="10" x2="24" y2="42" stroke="#26a69a" strokeWidth="1.4"/>
<rect x="21" y="14" width="6" height="22" fill="#26a69a" rx="1"/>
<polyline points="2,28 14,18 24,10" fill="none" stroke="url(#brand)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="24" cy="10" r="2.2" fill="#60a5fa"/>
</g>
{!mini && (
<>
<text x="46" y="28" fontFamily="Pretendard, sans-serif" fontWeight="800" fontSize="18" fill="url(#brand)" letterSpacing="1.2">JUNGGOMOA</text>
<text x="46" y="44" fontFamily="Pretendard, sans-serif" fontWeight="500" fontSize="10" fill="#9ca3af" letterSpacing="0.5"> </text>
</>
)}
</svg>
);
const Logo = ({ mini = false }: { mini?: boolean }) => {
if (mini) {
return (
<svg viewBox="0 0 64 64" width={40} height={40} xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="mLogoMini" cx="35%" cy="30%">
<stop offset="0%" stopColor="#fef3c7"/>
<stop offset="45%" stopColor="#fbbf24"/>
<stop offset="100%" stopColor="#b45309"/>
</radialGradient>
</defs>
<circle cx="40" cy="38" r="20" fill="url(#mLogoMini)" opacity="0.35"/>
<circle cx="32" cy="32" r="24" fill="url(#mLogoMini)" stroke="#92400e" strokeWidth="2"/>
<circle cx="32" cy="32" r="18" fill="none" stroke="rgba(255,255,255,0.45)" strokeWidth="1.2"/>
<text x="32" y="42" textAnchor="middle" fontFamily="'Arial Black', Impact, sans-serif" fontWeight="900" fontSize="32" fill="#7c2d12">$</text>
</svg>
);
}
return (
<svg viewBox="0 0 280 64" width={220} height={50} xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="coinFace" cx="35%" cy="30%">
<stop offset="0%" stopColor="#fef3c7"/>
<stop offset="45%" stopColor="#fbbf24"/>
<stop offset="100%" stopColor="#b45309"/>
</radialGradient>
<linearGradient id="coinEdge" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#fde047"/>
<stop offset="100%" stopColor="#92400e"/>
</linearGradient>
<linearGradient id="brandGold" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stopColor="#fbbf24"/>
<stop offset="50%" stopColor="#fde68a"/>
<stop offset="100%" stopColor="#f59e0b"/>
</linearGradient>
<filter id="logoGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="1.2" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<g transform="translate(8, 14)">
<ellipse cx="30" cy="24" rx="14" ry="14" fill="url(#coinFace)" opacity="0.3"/>
<ellipse cx="23" cy="20" rx="14" ry="14" fill="url(#coinFace)" opacity="0.6" stroke="url(#coinEdge)" strokeWidth="0.5"/>
<circle cx="16" cy="16" r="15.5" fill="url(#coinFace)" stroke="url(#coinEdge)" strokeWidth="1.2"/>
<circle cx="16" cy="16" r="12" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="0.7"/>
<text x="16" y="22.5" textAnchor="middle" fontFamily="'Arial Black', Impact, sans-serif" fontWeight="900" fontSize="20" fill="#7c2d12" filter="url(#logoGlow)">$</text>
<path d="M 38 6 L 48 -2 L 42 -2 M 48 -2 L 48 4" stroke="#10b981" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
<g fill="#fde68a">
<circle cx="40" cy="16" r="0.9"/>
<circle cx="46" cy="11" r="1.1"/>
<circle cx="43" cy="22" r="0.7"/>
</g>
</g>
<text x="66" y="30" fontFamily="Pretendard, 'Arial Black', sans-serif" fontWeight="900" fontSize="22" fill="url(#brandGold)" letterSpacing="1.8" filter="url(#logoGlow)">GOLDMINT</text>
<text x="66" y="46" fontFamily="Pretendard, sans-serif" fontWeight="600" fontSize="10" fill="#cbd5e1" letterSpacing="1.5"> · AUTO</text>
</svg>
);
};
export default function Sidebar() {
const pathname = usePathname();
@@ -53,7 +85,7 @@ export default function Sidebar() {
useEffect(() => { setMobileOpen(false); }, [pathname]);
const initial = (user?.username?.[0] || '?').toUpperCase();
const w = mini ? 'w-[68px]' : 'w-[260px]';
const w = mini ? 'w-[72px]' : 'w-[280px]';
return (
<>
@@ -141,8 +173,8 @@ function SidebarInner({ mini, setMini, pathname, initial, username, role, logout
{!mini ? (
<>
<div className="flex items-center gap-3 mb-2">
<div className="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm shrink-0"
style={{ background: 'linear-gradient(135deg,#3b82f6,#60a5fa)' }}>
<div className="w-9 h-9 rounded-full flex items-center justify-center font-extrabold text-sm shrink-0"
style={{ background: 'radial-gradient(circle at 30% 30%, #fef3c7 0%, #fbbf24 45%, #b45309 100%)', color: '#7c2d12', border: '1px solid #92400e' }}>
{initial}
</div>
<div className="flex-1 min-w-0">