design: AI 템플릿 패턴 전면 제거 — 사이드바 + 서비스 페이지 hero 리뉴얼
- Sidebar: 그래디언트 active 상태 → border-l 얇은 선, desc 서브라벨 제거, "Premium Dev Services" 제거 → font-mono 개인 태그라인, 로그인 버튼 단색 - website: hero 오브·애니메이션 그리드 제거, 마퀴 → 정적 태그 행, 그래디언트 텍스트 → 흰색, trust badge 이모지 → SVG 아이콘, step 이모지 → 번호 - automation: 배경 그래디언트·회로 SVG 제거, 그래디언트 텍스트 단색화 - prompt: 우측 장식용 코드 블록 제거, 그래디언트 텍스트 단색화 - ai-kit: 배경 그리드·오브 제거, 그래디언트 텍스트·버튼 단색화 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -8,66 +8,60 @@ import { createClient } from '@/lib/supabase/client';
|
||||
const navItems = [
|
||||
{
|
||||
href: '/',
|
||||
label: '홈',
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
),
|
||||
label: '홈',
|
||||
desc: '대시보드 홈',
|
||||
},
|
||||
{
|
||||
href: '/services/website',
|
||||
label: '홈페이지 제작',
|
||||
badge: 'NEW',
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
),
|
||||
label: '홈페이지 제작',
|
||||
desc: '외주 웹 개발',
|
||||
badge: 'NEW',
|
||||
},
|
||||
{
|
||||
href: '/services/automation',
|
||||
label: '업무 자동화',
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
),
|
||||
label: '업무 자동화',
|
||||
desc: 'RPA 개발',
|
||||
},
|
||||
{
|
||||
href: '/services/prompt',
|
||||
label: '프롬프트 엔지니어링',
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
),
|
||||
label: '프롬프트 엔지니어링',
|
||||
desc: 'AI 최적화',
|
||||
},
|
||||
{
|
||||
href: '/services/ai-kit',
|
||||
label: 'AI 자동화 키트',
|
||||
badge: 'NEW',
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
),
|
||||
label: 'AI 자동화 키트',
|
||||
desc: '월 구독 자동화 도구',
|
||||
badge: 'NEW',
|
||||
},
|
||||
{
|
||||
href: '/saju',
|
||||
label: 'AI 사주 분석',
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
||||
</svg>
|
||||
),
|
||||
label: 'AI 사주 분석',
|
||||
desc: '사주팔자 + AI 해석',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -114,31 +108,29 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`
|
||||
fixed top-0 left-0 h-full w-64 z-30 flex flex-col
|
||||
bg-[#04102b] border-r border-[#1a3a7a]/50
|
||||
fixed top-0 left-0 h-full w-60 z-30 flex flex-col
|
||||
bg-[#04102b]
|
||||
transition-transform duration-300 ease-in-out
|
||||
lg:translate-x-0 lg:static lg:flex
|
||||
${isOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
`}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className="p-5 border-b border-[#1a3a7a]/50 flex-shrink-0">
|
||||
<Link href="/" onClick={onClose} className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-base shadow-lg shadow-blue-500/25 flex-shrink-0">
|
||||
쟁
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-bold text-base leading-tight">쟁승메이드</div>
|
||||
<div className="text-blue-400 text-xs font-medium">Premium Dev Services</div>
|
||||
{/* Brand */}
|
||||
<div className="px-5 pt-6 pb-5 flex-shrink-0">
|
||||
<Link href="/" onClick={onClose} className="block group">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-white font-bold text-lg tracking-tight leading-none">쟁승메이드</span>
|
||||
<span className="text-slate-600 text-xs font-mono">v2</span>
|
||||
</div>
|
||||
<p className="text-slate-500 text-xs mt-1 font-mono tracking-tight">박재오 · 백엔드 7년</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="mx-5 h-px bg-white/5 flex-shrink-0" />
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
|
||||
<div className="px-3 pt-2 pb-1">
|
||||
<span className="text-slate-500 text-xs font-semibold uppercase tracking-wider">메뉴</span>
|
||||
</div>
|
||||
<nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
|
||||
return (
|
||||
@@ -147,103 +139,82 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
className={`
|
||||
flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 group relative
|
||||
flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 group relative
|
||||
${isActive
|
||||
? 'bg-gradient-to-r from-blue-600 to-violet-600 text-white shadow-lg shadow-blue-600/20'
|
||||
: 'text-slate-400 hover:bg-[#0a1f5c] hover:text-slate-100'
|
||||
? 'bg-white/8 text-white border-l-2 border-blue-500 pl-[10px]'
|
||||
: 'text-slate-500 hover:text-slate-200 hover:bg-white/5 border-l-2 border-transparent pl-[10px]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<span className={`flex-shrink-0 ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-slate-300'}`}>
|
||||
<span className={`flex-shrink-0 transition-colors ${isActive ? 'text-blue-400' : 'text-slate-600 group-hover:text-slate-400'}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-sm font-semibold truncate ${isActive ? 'text-white' : ''}`}>
|
||||
{item.label}
|
||||
</div>
|
||||
<div className={`text-xs truncate ${isActive ? 'text-blue-200' : 'text-slate-600 group-hover:text-slate-500'}`}>
|
||||
{item.desc}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`text-sm font-medium flex-1 truncate ${isActive ? 'text-white' : ''}`}>
|
||||
{item.label}
|
||||
</span>
|
||||
{item.badge && (
|
||||
<span className={`
|
||||
text-xs font-bold px-1.5 py-0.5 rounded-md flex-shrink-0
|
||||
${item.badge === 'HOT' ? 'bg-red-500/20 text-red-400' : 'bg-emerald-500/20 text-emerald-400'}
|
||||
`}>
|
||||
<span className="text-[10px] font-bold px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-400 flex-shrink-0">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
{isActive && (
|
||||
<div className="absolute right-2 w-1 h-5 bg-white/40 rounded-full" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* 상호명 / 사업자 정보 — 토스페이먼츠 심사 필수 표기 */}
|
||||
<div className="px-4 pt-3 pb-1 border-t border-[#1a3a7a]/30 flex-shrink-0">
|
||||
<p className="text-slate-600 text-[10px] leading-relaxed">
|
||||
<span className="block font-semibold text-slate-500 mb-0.5">상호명 : 쟁승메이드</span>
|
||||
<span className="block">대표 : 박재오</span>
|
||||
<span className="block">이메일 : bgg8988@gmail.com</span>
|
||||
<span className="block">문의 : 010-3907-1392</span>
|
||||
<span className="block mt-1 text-slate-700">© 2025 쟁승메이드</span>
|
||||
</p>
|
||||
{/* Business info */}
|
||||
<div className="mx-5 h-px bg-white/5 flex-shrink-0" />
|
||||
<div className="px-5 py-4 flex-shrink-0">
|
||||
<dl className="space-y-0.5">
|
||||
<dd className="text-slate-600 text-[10px] font-mono">상호 쟁승메이드 · 대표 박재오</dd>
|
||||
<dd className="text-slate-600 text-[10px] font-mono">010-3907-1392 · bgg8988@gmail.com</dd>
|
||||
<dd className="text-slate-700 text-[10px] font-mono mt-1">© 2025 쟁승메이드</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* Bottom: 로그인 상태 */}
|
||||
<div className="p-4 border-t border-[#1a3a7a]/50 flex-shrink-0">
|
||||
{/* Divider */}
|
||||
<div className="mx-5 h-px bg-white/5 flex-shrink-0" />
|
||||
|
||||
{/* Login section */}
|
||||
<div className="px-4 py-4 flex-shrink-0">
|
||||
{userEmail ? (
|
||||
/* 로그인 상태 */
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1">
|
||||
<Link
|
||||
href="/mypage"
|
||||
onClick={onClose}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-xl transition-all ${
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-all group ${
|
||||
pathname.startsWith('/mypage')
|
||||
? 'bg-gradient-to-r from-blue-600 to-violet-600'
|
||||
: 'hover:bg-[#0a1f5c]'
|
||||
? 'bg-white/8 text-white border-l-2 border-blue-500 pl-[10px]'
|
||||
: 'text-slate-500 hover:text-slate-200 hover:bg-white/5 border-l-2 border-transparent pl-[10px]'
|
||||
}`}
|
||||
>
|
||||
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-violet-500 flex items-center justify-center text-white text-sm font-bold flex-shrink-0 shadow">
|
||||
<div className="w-7 h-7 rounded-full bg-slate-700 border border-slate-600 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
|
||||
{userEmail[0].toUpperCase()}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-white text-sm font-semibold truncate">{userEmail}</div>
|
||||
<div className="text-blue-400 text-xs">마이페이지</div>
|
||||
<div className="text-xs font-medium truncate text-slate-300">{userEmail}</div>
|
||||
<div className="text-slate-600 text-[10px]">마이페이지</div>
|
||||
</div>
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0" />
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full text-left px-3 py-1.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-[#0a1f5c] text-xs transition-all"
|
||||
className="w-full text-left px-3 py-1.5 text-slate-600 hover:text-slate-400 text-xs transition-colors font-mono"
|
||||
>
|
||||
로그아웃
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
/* 비로그인 상태 */
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-3 px-1 mb-2">
|
||||
<div className="w-9 h-9 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-slate-500 flex-shrink-0">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-slate-400 text-sm font-medium">비로그인</div>
|
||||
<div className="text-slate-600 text-xs">로그인하면 더 많은 기능</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href="/login"
|
||||
onClick={onClose}
|
||||
className="block w-full text-center bg-gradient-to-r from-blue-600 to-violet-600 text-white text-sm font-semibold px-3 py-2 rounded-xl hover:opacity-90 transition-all"
|
||||
>
|
||||
로그인 / 회원가입
|
||||
</Link>
|
||||
</div>
|
||||
<Link
|
||||
href="/login"
|
||||
onClick={onClose}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-all text-sm group"
|
||||
>
|
||||
<svg className="w-4 h-4 text-slate-600 group-hover:text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
<span className="font-medium">로그인 / 회원가입</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
Reference in New Issue
Block a user