필터 UI 수정
This commit is contained in:
2906
frontend/src/app/demo/global-filter/page.tsx
Normal file
2906
frontend/src/app/demo/global-filter/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
256
frontend/src/app/demo/sidebar-colors/page.tsx
Normal file
256
frontend/src/app/demo/sidebar-colors/page.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
'use client';
|
||||
|
||||
import { LayoutDashboard, Database, ChevronRight } from 'lucide-react';
|
||||
|
||||
// 사이드바 색상 조합 데모
|
||||
export default function SidebarColorsDemo() {
|
||||
const colorSchemes = [
|
||||
{
|
||||
name: '현재 스타일 (진한 파란색)',
|
||||
sidebar: 'bg-[#1f3a8f]',
|
||||
header: 'bg-white',
|
||||
activeMenu: 'bg-white text-slate-800',
|
||||
inactiveMenu: 'text-white hover:bg-white/20',
|
||||
description: '강한 대비, 전문적인 느낌'
|
||||
},
|
||||
{
|
||||
name: '밝은 회색 (Notion 스타일)',
|
||||
sidebar: 'bg-slate-100',
|
||||
header: 'bg-white',
|
||||
activeMenu: 'bg-white text-slate-800 shadow-sm',
|
||||
inactiveMenu: 'text-slate-600 hover:bg-slate-200',
|
||||
description: '깔끔하고 모던한 느낌'
|
||||
},
|
||||
{
|
||||
name: '진한 네이비',
|
||||
sidebar: 'bg-slate-900',
|
||||
header: 'bg-white',
|
||||
activeMenu: 'bg-white text-slate-800',
|
||||
inactiveMenu: 'text-slate-300 hover:bg-slate-800',
|
||||
description: '고급스럽고 세련된 느낌'
|
||||
},
|
||||
{
|
||||
name: '연한 파란색',
|
||||
sidebar: 'bg-blue-50',
|
||||
header: 'bg-white',
|
||||
activeMenu: 'bg-white text-blue-900 shadow-sm',
|
||||
inactiveMenu: 'text-blue-800 hover:bg-blue-100',
|
||||
description: '부드럽고 친근한 느낌'
|
||||
},
|
||||
{
|
||||
name: '흰색 + 파란 강조',
|
||||
sidebar: 'bg-white border-r border-slate-200',
|
||||
header: 'bg-white',
|
||||
activeMenu: 'bg-blue-50 text-blue-700 border-l-2 border-blue-600',
|
||||
inactiveMenu: 'text-slate-600 hover:bg-slate-50',
|
||||
description: 'Linear/Vercel 스타일'
|
||||
},
|
||||
{
|
||||
name: '그라데이션 (파란색)',
|
||||
sidebar: 'bg-gradient-to-b from-blue-800 to-blue-900',
|
||||
header: 'bg-white',
|
||||
activeMenu: 'bg-white text-slate-800',
|
||||
inactiveMenu: 'text-blue-100 hover:bg-white/10',
|
||||
description: '현대적이고 세련된 느낌'
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-100 p-8">
|
||||
<h1 className="text-2xl font-bold text-slate-800 mb-2">사이드바 색상 조합 데모</h1>
|
||||
<p className="text-slate-600 mb-8">로그인 페이지(흰색 배경)와 어울리는 사이드바 스타일 비교</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{colorSchemes.map((scheme, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
{/* 미니 레이아웃 프리뷰 */}
|
||||
<div className="h-64 flex">
|
||||
{/* 사이드바 */}
|
||||
<div className={`w-48 flex flex-col ${scheme.sidebar}`}>
|
||||
{/* 헤더 */}
|
||||
<div className={`p-3 ${scheme.header}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">H</span>
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-slate-800">한우 유전체</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 메뉴 */}
|
||||
<div className="flex-1 p-2 space-y-1">
|
||||
{/* 활성 메뉴 */}
|
||||
<div className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm ${scheme.activeMenu}`}>
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
<span>대시보드</span>
|
||||
</div>
|
||||
|
||||
{/* 비활성 메뉴 */}
|
||||
<div className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm ${scheme.inactiveMenu}`}>
|
||||
<Database className="w-4 h-4" />
|
||||
<span>개체 조회</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 메인 콘텐츠 영역 */}
|
||||
<div className="flex-1 bg-gradient-to-br from-blue-50/30 via-white to-amber-50/20 p-4">
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center text-slate-400 text-xs">
|
||||
메인 콘텐츠
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="p-4 border-t border-slate-100">
|
||||
<h3 className="font-semibold text-slate-800">{scheme.name}</h3>
|
||||
<p className="text-sm text-slate-500 mt-1">{scheme.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 헤더 연결 스타일 비교 */}
|
||||
<h2 className="text-xl font-bold text-slate-800 mt-12 mb-6">헤더 연결 스타일 비교</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* 현재: 흰색 헤더 + 파란 사이드바 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="h-72 flex">
|
||||
<div className="w-56 flex flex-col">
|
||||
{/* 흰색 헤더 */}
|
||||
<div className="p-4 bg-white h-16 flex items-center border-b border-slate-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-bold">H</span>
|
||||
</div>
|
||||
<span className="font-semibold text-slate-800">한우 유전체 분석</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 파란 콘텐츠 */}
|
||||
<div className="flex-1 bg-[#1f3a8f] p-2 space-y-1">
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 bg-white rounded-none text-slate-800 text-sm">
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
<span>대시보드</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 text-white text-sm hover:bg-white/20 rounded-md">
|
||||
<Database className="w-4 h-4" />
|
||||
<span>개체 조회</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 bg-gradient-to-br from-blue-50/30 via-white to-amber-50/20"></div>
|
||||
</div>
|
||||
<div className="p-4 border-t border-slate-100">
|
||||
<h3 className="font-semibold text-slate-800">현재 스타일</h3>
|
||||
<p className="text-sm text-slate-500 mt-1">흰색 헤더 → 파란 사이드바, 활성 메뉴 흰색</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 대안: 전체 밝은 톤 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="h-72 flex">
|
||||
<div className="w-56 flex flex-col bg-slate-50 border-r border-slate-200">
|
||||
{/* 헤더 */}
|
||||
<div className="p-4 bg-white h-16 flex items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-bold">H</span>
|
||||
</div>
|
||||
<span className="font-semibold text-slate-800">한우 유전체 분석</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 */}
|
||||
<div className="flex-1 p-2 space-y-1">
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 bg-white text-slate-800 text-sm shadow-sm rounded-md">
|
||||
<LayoutDashboard className="w-4 h-4 text-blue-600" />
|
||||
<span className="font-medium">대시보드</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 text-slate-600 text-sm hover:bg-slate-100 rounded-md">
|
||||
<Database className="w-4 h-4" />
|
||||
<span>개체 조회</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 bg-gradient-to-br from-blue-50/30 via-white to-amber-50/20"></div>
|
||||
</div>
|
||||
<div className="p-4 border-t border-slate-100">
|
||||
<h3 className="font-semibold text-slate-800">밝은 톤 스타일</h3>
|
||||
<p className="text-sm text-slate-500 mt-1">전체 밝은 톤, 로그인 페이지와 자연스러운 연결</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 대안: 파란 헤더 + 파란 사이드바 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="h-72 flex">
|
||||
<div className="w-56 flex flex-col bg-[#1f3a8f]">
|
||||
{/* 파란 헤더 */}
|
||||
<div className="p-4 h-16 flex items-center border-b border-white/10">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">
|
||||
<span className="text-blue-600 text-sm font-bold">H</span>
|
||||
</div>
|
||||
<span className="font-semibold text-white">한우 유전체 분석</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 */}
|
||||
<div className="flex-1 p-2 space-y-1">
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 bg-white/20 text-white text-sm rounded-md">
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
<span className="font-medium">대시보드</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 text-white/70 text-sm hover:bg-white/10 rounded-md">
|
||||
<Database className="w-4 h-4" />
|
||||
<span>개체 조회</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 bg-gradient-to-br from-blue-50/30 via-white to-amber-50/20"></div>
|
||||
</div>
|
||||
<div className="p-4 border-t border-slate-100">
|
||||
<h3 className="font-semibold text-slate-800">전체 파란색 스타일</h3>
|
||||
<p className="text-sm text-slate-500 mt-1">통일된 파란색, 강한 브랜드 아이덴티티</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 대안: 왼쪽 강조선 */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="h-72 flex">
|
||||
<div className="w-56 flex flex-col bg-white border-r border-slate-200">
|
||||
{/* 헤더 */}
|
||||
<div className="p-4 h-16 flex items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-bold">H</span>
|
||||
</div>
|
||||
<span className="font-semibold text-slate-800">한우 유전체 분석</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 */}
|
||||
<div className="flex-1 p-2 space-y-1">
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 bg-blue-50 text-blue-700 text-sm border-l-3 border-blue-600 rounded-r-md">
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
<span className="font-medium">대시보드</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 text-slate-600 text-sm hover:bg-slate-50 rounded-md">
|
||||
<Database className="w-4 h-4" />
|
||||
<span>개체 조회</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 bg-gradient-to-br from-blue-50/30 via-white to-amber-50/20"></div>
|
||||
</div>
|
||||
<div className="p-4 border-t border-slate-100">
|
||||
<h3 className="font-semibold text-slate-800">왼쪽 강조선 스타일</h3>
|
||||
<p className="text-sm text-slate-500 mt-1">미니멀하고 깔끔한 네비게이션</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user