gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): 외주·소프트웨어 2축 네비게이션 + 푸터 리뉴얼

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-06-11 01:42:37 +09:00
parent b13ddd3841
commit 6d6d6f353a
2 changed files with 303 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
app/components/PublicShell.tsx
View File

@@ -7,111 +7,147 @@ export default function PublicShell({ children }: { children: React.ReactNode })
<> <>
<TopNav /> <TopNav />
<main <main
className="min-h-screen pt-20" className="min-h-screen pt-16"
style={{ style={{
background: 'var(--kx-surface)', background: 'var(--jsm-bg)',
color: 'var(--kx-on-surface)', color: 'var(--jsm-ink)',
}} }}
> >
{children} {children}
<footer className="bg-black text-white/70 px-6 lg:px-12 py-14 text-sm border-t border-white/10"> <footer
className="text-white/70 px-6 lg:px-12 py-14 text-sm"
style={{ background: 'var(--jsm-navy)' }}
>
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-12 md:gap-8"> <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-12 md:gap-8">
{/* 좌 — JSM + social */} {/* 좌 — JSM + 연락처 */}
<div> <div>
<p <div className="flex items-baseline gap-2 mb-4">
className="kx-display font-bold text-2xl mb-5 text-white tracking-tight" <span
style={{ letterSpacing: '0.02em' }} className="font-black text-2xl text-white"
style={{ letterSpacing: '-0.02em' }}
> >
JSM JSM
</p> </span>
<div className="flex items-center gap-3"> <span className="text-sm text-white/50" style={{ letterSpacing: '-0.01em' }}>
<a 쟁승메이드
href="https://www.youtube.com/" </span>
target="_blank" </div>
rel="noopener noreferrer"
aria-label="YouTube"
className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
<path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z" />
</svg>
</a>
<a
href="https://x.com/"
target="_blank"
rel="noopener noreferrer"
aria-label="X (Twitter)"
className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
>
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
<a
href="https://www.instagram.com/"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram"
className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
<rect x="3" y="3" width="18" height="18" rx="5" />
<circle cx="12" cy="12" r="4" />
<circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
</svg>
</a>
<a <a
href="mailto:bgg8988@gmail.com" href="mailto:bgg8988@gmail.com"
aria-label="Email" className="flex items-center gap-2 text-white/50 hover:text-white transition-colors duration-150 text-sm"
className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition" style={{ letterSpacing: '-0.01em' }}
> >
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
<rect x="3" y="5" width="18" height="14" rx="2" /> <rect x="3" y="5" width="18" height="14" rx="2" />
<path d="m3 7 9 6 9-6" /> <path d="m3 7 9 6 9-6" />
</svg> </svg>
bgg8988@gmail.com
</a> </a>
</div> </div>
</div>
{/* 우 — Link groups */} {/* 우 — Link groups */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-10"> <div className="grid grid-cols-2 sm:grid-cols-3 gap-10">
<div> <div>
<p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">SaaS 제품</p> <p
className="text-[11px] tracking-widest uppercase text-white/40 mb-4 font-medium"
style={{ fontFamily: 'monospace' }}
>
서비스
</p>
<ul className="space-y-2.5"> <ul className="space-y-2.5">
<li><Link href="/packages" className="hover:text-white transition">제품 카탈로그</Link></li> <li>
<li><Link href="/packages" className="hover:text-white transition">출시 알림 신청</Link></li> <Link
href="/outsourcing"
className="hover:text-white transition-colors duration-150"
style={{ letterSpacing: '-0.01em' }}
>
외주 개발
</Link>
</li>
<li>
<Link
href="/products"
className="hover:text-white transition-colors duration-150"
style={{ letterSpacing: '-0.01em' }}
>
소프트웨어
</Link>
</li>
</ul> </ul>
</div> </div>
<div> <div>
<p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">AI 음악</p> <p
className="text-[11px] tracking-widest uppercase text-white/40 mb-4 font-medium"
style={{ fontFamily: 'monospace' }}
>
회사
</p>
<ul className="space-y-2.5"> <ul className="space-y-2.5">
<li><Link href="/music/packs" className="hover:text-white transition">음악 가이드 패키지</Link></li> <li>
<li><Link href="/music/samples" className="hover:text-white transition">샘플 갤러리</Link></li> <a
<li><Link href="/music/packs#pricing" className="hover:text-white transition">가격</Link></li> href="mailto:bgg8988@gmail.com"
className="hover:text-white transition-colors duration-150"
style={{ letterSpacing: '-0.01em' }}
>
문의하기
</a>
</li>
<li>
<Link
href="/outsourcing#process"
className="hover:text-white transition-colors duration-150"
style={{ letterSpacing: '-0.01em' }}
>
진행 프로세스
</Link>
</li>
</ul> </ul>
</div> </div>
<div> <div>
<p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">커스텀 외주</p> <p
className="text-[11px] tracking-widest uppercase text-white/40 mb-4 font-medium"
style={{ fontFamily: 'monospace' }}
>
Legal
</p>
<ul className="space-y-2.5"> <ul className="space-y-2.5">
<li><Link href="/work/freelance" className="hover:text-white transition">외주 개발</Link></li> <li>
<li><Link href="/work/website" className="hover:text-white transition">웹사이트 제작</Link></li> <Link
<li><Link href="/work/saju" className="hover:text-white transition">AI 사주</Link></li> href="/legal/terms"
<li><a href="mailto:bgg8988@gmail.com" className="hover:text-white transition">문의하기</a></li> className="hover:text-white transition-colors duration-150"
</ul> style={{ letterSpacing: '-0.01em' }}
</div> >
<div> 이용약관
<p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">Legal</p> </Link>
<ul className="space-y-2.5"> </li>
<li><Link href="/legal/terms" className="hover:text-white transition">이용약관</Link></li> <li>
<li><Link href="/legal/privacy" className="hover:text-white transition">개인정보처리방침</Link></li> <Link
<li><Link href="/legal/refund" className="hover:text-white transition">환불 정책</Link></li> href="/legal/privacy"
className="hover:text-white transition-colors duration-150"
style={{ letterSpacing: '-0.01em' }}
>
개인정보처리방침
</Link>
</li>
<li>
<Link
href="/legal/refund"
className="hover:text-white transition-colors duration-150"
style={{ letterSpacing: '-0.01em' }}
>
환불 정책
</Link>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div className="mt-12 pt-6 border-t border-white/10 flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/40 leading-relaxed"> <div
className="mt-12 pt-6 border-t flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/40 leading-relaxed"
style={{ borderColor: 'rgba(255,255,255,0.08)' }}
>
<span>대표자: 박재오</span> <span>대표자: 박재오</span>
<span>사업자등록번호: 267-53-00822</span> <span>사업자등록번호: 267-53-00822</span>
<span>서울시 동작구 여의대방로22아길 22, 1동 109호</span> <span>서울시 동작구 여의대방로22아길 22, 1동 109호</span>

208
app/components/TopNav.tsx
View File

@@ -7,9 +7,8 @@ import { createClient } from '@/lib/supabase/client';
import type { User } from '@supabase/supabase-js'; import type { User } from '@supabase/supabase-js';
const LINKS = [ const LINKS = [
{ href: '/packages', label: 'SaaS 제품' }, { href: '/outsourcing', label: '외주 개발' },
{ href: '/music', label: 'AI 음악' }, { href: '/products', label: '소프트웨어' },
{ href: '/work', label: '커스텀 외주' },
]; ];
export default function TopNav() { export default function TopNav() {
@@ -67,44 +66,46 @@ export default function TopNav() {
return ( return (
<> <>
<header <header
className={[ className="fixed top-0 left-0 right-0 z-50 w-full transition-all duration-300"
'fixed left-1/2 -translate-x-1/2 z-50 w-full border-b border-transparent',
'md:rounded-full md:border transition-all duration-300 ease-out',
scrolled
? 'top-4 max-w-3xl md:shadow-[0_10px_40px_rgba(0,0,0,0.35)] md:border-white/10'
: 'top-0 max-w-none',
].join(' ')}
style={{ style={{
background: scrolled ? 'rgba(10,10,12,0.6)' : 'transparent', background: scrolled ? 'var(--jsm-surface)' : 'transparent',
backdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none', borderBottom: scrolled ? '1px solid var(--jsm-line)' : '1px solid transparent',
WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none', boxShadow: scrolled ? '0 1px 8px rgba(15,23,42,0.06)' : 'none',
}} }}
> >
<nav <nav className="max-w-7xl mx-auto flex w-full items-center justify-between h-16 px-6 lg:px-8">
className={[ {/* 로고 */}
'flex w-full items-center justify-between transition-all duration-300 ease-out',
scrolled ? 'h-14 px-4 md:px-3' : 'h-20 px-6 lg:px-12',
].join(' ')}
>
<Link <Link
href="/" href="/"
className="kx-display text-2xl font-black tracking-tight kx-gradient-text" className="flex items-baseline gap-2"
style={{ textDecoration: 'none', letterSpacing: '0.02em' }} style={{ textDecoration: 'none' }}
>
<span
className="text-xl font-black tracking-tight"
style={{ color: 'var(--jsm-ink)', letterSpacing: '-0.02em' }}
> >
JSM JSM
</span>
<span
className="hidden sm:inline text-sm font-medium"
style={{ color: 'var(--jsm-ink-soft)', letterSpacing: '-0.01em' }}
>
쟁승메이드
</span>
</Link> </Link>
<div className="hidden md:flex items-center gap-8"> {/* 데스크탑 링크 */}
<div className="hidden md:flex items-center gap-1">
{LINKS.map((l) => ( {LINKS.map((l) => (
<Link <Link
key={l.href} key={l.href}
href={l.href} href={l.href}
className="text-sm font-medium transition-colors" className="text-sm font-medium px-4 py-2 rounded-md transition-colors duration-150"
style={{ style={{
color: isActive(l.href) ? '#fff' : 'var(--kx-on-variant)', color: isActive(l.href) ? 'var(--jsm-accent)' : 'var(--jsm-ink-soft)',
borderBottom: isActive(l.href) ? '2px solid var(--kx-primary)' : '2px solid transparent', background: isActive(l.href) ? 'var(--jsm-accent-soft)' : 'transparent',
paddingBottom: 4,
textDecoration: 'none', textDecoration: 'none',
letterSpacing: '-0.01em',
}} }}
> >
{l.label} {l.label}
@@ -112,56 +113,57 @@ export default function TopNav() {
))} ))}
</div> </div>
<div className="flex items-center gap-3"> {/* 데스크탑 CTA + auth */}
<div className="flex items-center gap-2">
{user ? ( {user ? (
<> <>
<Link <Link
href="/mypage" href="/mypage"
className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors" className="hidden sm:inline-block text-sm font-medium px-3 py-2 rounded-md transition-colors duration-150"
style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }} style={{ color: 'var(--jsm-ink-soft)', textDecoration: 'none', letterSpacing: '-0.01em' }}
> >
마이페이지 마이페이지
</Link> </Link>
<Link
href="/music"
className="kx-btn-primary hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm"
style={{ textDecoration: 'none' }}
>
Try now
</Link>
<button <button
onClick={handleLogout} onClick={handleLogout}
className="hidden sm:inline-flex items-center px-3 py-2 text-sm font-medium transition-colors" className="hidden sm:inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150"
style={{ color: 'var(--kx-on-variant)', background: 'transparent' }} style={{ color: 'var(--jsm-ink-soft)', background: 'transparent', letterSpacing: '-0.01em' }}
> >
로그아웃 로그아웃
</button> </button>
</> </>
) : ( ) : (
<>
<Link <Link
href="/login" href="/login"
className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors" className="hidden sm:inline-block text-sm font-medium px-3 py-2 rounded-md transition-colors duration-150"
style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }} style={{ color: 'var(--jsm-ink-soft)', textDecoration: 'none', letterSpacing: '-0.01em' }}
> >
로그인 로그인
</Link> </Link>
<Link
href="/music"
className="kx-btn-primary hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm"
style={{ textDecoration: 'none' }}
>
Try now
</Link>
</>
)} )}
<Link
href="/outsourcing#contact"
className="hidden sm:inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold transition-colors duration-150"
style={{
background: 'var(--jsm-accent)',
color: '#ffffff',
textDecoration: 'none',
letterSpacing: '-0.01em',
}}
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--jsm-accent-hover)'; }}
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--jsm-accent)'; }}
>
프로젝트 문의
</Link>
{/* 모바일 햄버거 */}
<button <button
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
aria-label="메뉴 열기" aria-label="메뉴 열기"
className="md:hidden p-2 rounded-lg" className="md:hidden p-2 rounded-lg transition-colors duration-150"
style={{ color: 'var(--kx-on-surface)' }} style={{ color: 'var(--jsm-ink)' }}
> >
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg> </svg>
</button> </button>
@@ -169,85 +171,115 @@ export default function TopNav() {
</nav> </nav>
</header> </header>
{/* 모바일 오버레이 */} {/* 모바일 드로어 */}
{open && ( {open && (
<div <div
className="fixed inset-0 z-[60] md:hidden flex flex-col" className="fixed inset-0 z-[60] md:hidden"
style={{ background: 'rgba(6,14,32,0.98)', backdropFilter: 'blur(16px)' }} style={{ background: 'rgba(15,23,42,0.4)' }}
onClick={() => setOpen(false)}
> >
<div className="flex items-center justify-between px-6 h-20"> <div
<span className="kx-display text-2xl font-black kx-gradient-text" style={{ letterSpacing: '0.02em' }}>JSM</span> className="absolute top-0 right-0 h-full w-72 flex flex-col shadow-xl"
style={{ background: 'var(--jsm-surface)' }}
onClick={(e) => e.stopPropagation()}
>
{/* 드로어 헤더 */}
<div
className="flex items-center justify-between px-6 h-16 border-b"
style={{ borderColor: 'var(--jsm-line)' }}
>
<div className="flex items-baseline gap-2">
<span
className="text-lg font-black tracking-tight"
style={{ color: 'var(--jsm-ink)', letterSpacing: '-0.02em' }}
>
JSM
</span>
<span
className="text-xs font-medium"
style={{ color: 'var(--jsm-ink-soft)' }}
>
쟁승메이드
</span>
</div>
<button <button
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
aria-label="메뉴 닫기" aria-label="메뉴 닫기"
className="p-2" className="p-2 rounded-lg transition-colors duration-150"
style={{ color: 'var(--kx-on-surface)' }} style={{ color: 'var(--jsm-ink-soft)' }}
> >
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
<div className="flex-1 flex flex-col gap-2 px-6 pt-6">
{/* 드로어 링크 */}
<div className="flex-1 flex flex-col px-4 pt-4 gap-1">
{LINKS.map((l) => ( {LINKS.map((l) => (
<Link <Link
key={l.href} key={l.href}
href={l.href} href={l.href}
className="kx-display text-2xl font-bold py-3" className="text-base font-semibold px-3 py-3 rounded-lg transition-colors duration-150"
style={{ style={{
color: isActive(l.href) ? 'var(--kx-primary)' : 'var(--kx-on-surface)', color: isActive(l.href) ? 'var(--jsm-accent)' : 'var(--jsm-ink)',
background: isActive(l.href) ? 'var(--jsm-accent-soft)' : 'transparent',
textDecoration: 'none', textDecoration: 'none',
letterSpacing: '-0.01em',
}} }}
> >
{l.label} {l.label}
</Link> </Link>
))} ))}
<div className="mt-6 flex flex-col gap-2">
<div
className="my-4 border-t"
style={{ borderColor: 'var(--jsm-line)' }}
/>
{user ? ( {user ? (
<> <>
<div className="flex gap-3">
<Link <Link
href="/mypage" href="/mypage"
className="flex-1 py-3 text-center rounded-full text-sm font-bold" className="text-sm font-medium px-3 py-3 rounded-lg transition-colors duration-150"
style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }} style={{ color: 'var(--jsm-ink-soft)', textDecoration: 'none', letterSpacing: '-0.01em' }}
> >
마이페이지 마이페이지
</Link> </Link>
<Link
href="/music"
className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
style={{ textDecoration: 'none' }}
>
Try now
</Link>
</div>
<button <button
onClick={handleLogout} onClick={handleLogout}
className="w-full py-3 text-center text-sm font-medium transition-colors" className="text-left text-sm font-medium px-3 py-3 rounded-lg transition-colors duration-150"
style={{ color: 'var(--kx-on-variant)', background: 'transparent' }} style={{ color: 'var(--jsm-ink-soft)', background: 'transparent', letterSpacing: '-0.01em' }}
> >
로그아웃 로그아웃
</button> </button>
</> </>
) : ( ) : (
<div className="flex gap-3">
<Link <Link
href="/login" href="/login"
className="flex-1 py-3 text-center rounded-full text-sm font-bold" className="text-sm font-medium px-3 py-3 rounded-lg transition-colors duration-150"
style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }} style={{ color: 'var(--jsm-ink-soft)', textDecoration: 'none', letterSpacing: '-0.01em' }}
> >
로그인 로그인
</Link> </Link>
<Link
href="/music"
className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
style={{ textDecoration: 'none' }}
>
Try now
</Link>
</div>
)} )}
</div> </div>
{/* 드로어 하단 CTA */}
<div className="px-4 pb-6">
<Link
href="/outsourcing#contact"
className="flex items-center justify-center w-full py-3 rounded-lg text-sm font-semibold transition-colors duration-150"
style={{
background: 'var(--jsm-accent)',
color: '#ffffff',
textDecoration: 'none',
letterSpacing: '-0.01em',
}}
>
프로젝트 문의
</Link>
</div>
</div> </div>
</div> </div>
)} )}