chpark/tradeing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 시스템 이름: 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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/sidebar.tsx
+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">