docs/RELEASE-NOTES.md

@@ -4,6 +4,12 @@
 
 ## [Unreleased]
 
+### 추가
+- 공통 UI 피드백 반영 (#121)
+  - 2단 탭 네비게이션 (섹션 탭 + 서브 탭)
+  - 섹션 간 직접 이동
+  - 메인화면 카드 높이 동기화 (CSS Grid)
+
 ## [2026-03-31]
 
 ### 추가

frontend/src/App.tsx

@@ -25,12 +25,24 @@ function AppLayout() {
   const isMainMenu = location.pathname === '/';
 
   return (
-    <div className="min-h-screen bg-wing-bg text-wing-text">
-      <div className={isMainMenu ? 'px-4' : 'max-w-7xl mx-auto px-4 py-6'}>
-        <Navbar />
+    <div className="h-screen bg-wing-bg text-wing-text flex flex-col overflow-hidden">
+      {/* 메인 화면: 전체화면, 섹션 페이지: 탭 + 스크롤 콘텐츠 */}
+      {isMainMenu ? (
+        <div className="flex-1 overflow-auto px-4">
           <Suspense fallback={<LoadingSpinner />}>
             <Routes>
               <Route path="/" element={<MainMenu />} />
+            </Routes>
+          </Suspense>
+        </div>
+      ) : (
+        <>
+          <div className="flex-shrink-0 px-4 pt-4 max-w-7xl mx-auto w-full">
+            <Navbar />
+          </div>
+          <div className="flex-1 overflow-auto px-4 pb-4 pt-6 max-w-7xl mx-auto w-full">
+            <Suspense fallback={<LoadingSpinner />}>
+              <Routes>
                 <Route path="/dashboard" element={<Dashboard />} />
                 <Route path="/jobs" element={<Jobs />} />
                 <Route path="/executions" element={<Executions />} />
@@ -45,6 +57,8 @@ function AppLayout() {
               </Routes>
             </Suspense>
           </div>
+        </>
+      )}
       <ToastContainer toasts={toasts} onRemove={removeToast} />
     </div>
   );

frontend/src/components/Navbar.tsx

@@ -1,49 +1,75 @@
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useThemeContext } from '../contexts/ThemeContext';
 
-interface NavSection {
-    key: string;
-    title: string;
-    paths: string[];
-    items: { path: string; label: string; icon: string }[];
+interface MenuItem {
+    id: string;
+    label: string;
+    path: string;
 }
 
-const sections: NavSection[] = [
+interface MenuSection {
+    id: string;
+    label: string;
+    shortLabel: string;
+    icon: React.ReactNode;
+    defaultPath: string;
+    children: MenuItem[];
+}
+
+const MENU_STRUCTURE: MenuSection[] = [
     {
-        key: 'collector',
-        title: 'S&P Collector',
-        paths: ['/dashboard', '/jobs', '/executions', '/recollects', '/schedules', '/schedule-timeline'],
-        items: [
-            { path: '/dashboard', label: '대시보드', icon: '📊' },
-            { path: '/executions', label: '실행 이력', icon: '📋' },
-            { path: '/recollects', label: '재수집 이력', icon: '🔄' },
-            { path: '/jobs', label: '작업', icon: '⚙️' },
-            { path: '/schedules', label: '스케줄', icon: '🕐' },
-            { path: '/schedule-timeline', label: '타임라인', icon: '📅' },
+        id: 'collector',
+        label: 'S&P Collector',
+        shortLabel: 'Collector',
+        icon: (
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+            </svg>
+        ),
+        defaultPath: '/dashboard',
+        children: [
+            { id: 'dashboard', label: '대시보드', path: '/dashboard' },
+            { id: 'executions', label: '실행 이력', path: '/executions' },
+            { id: 'recollects', label: '재수집 이력', path: '/recollects' },
+            { id: 'jobs', label: '작업 관리', path: '/jobs' },
+            { id: 'schedules', label: '스케줄', path: '/schedules' },
+            { id: 'timeline', label: '타임라인', path: '/schedule-timeline' },
         ],
     },
     {
-        key: 'bypass',
-        title: 'S&P Bypass',
-        paths: ['/bypass-config'],
-        items: [
-            { path: '/bypass-config', label: 'Bypass API', icon: '🔗' },
+        id: 'bypass',
+        label: 'S&P Bypass',
+        shortLabel: 'Bypass',
+        icon: (
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
+            </svg>
+        ),
+        defaultPath: '/bypass-config',
+        children: [
+            { id: 'bypass-config', label: 'Bypass API', path: '/bypass-config' },
         ],
     },
     {
-        key: 'risk',
-        title: 'S&P Risk & Compliance',
-        paths: ['/screening-guide', '/risk-compliance-history'],
-        items: [
-            { path: '/screening-guide', label: 'Screening Guide', icon: '⚖️' },
-            { path: '/risk-compliance-history', label: 'Change History', icon: '📜' },
+        id: 'risk',
+        label: 'S&P Risk & Compliance',
+        shortLabel: 'Risk & Compliance',
+        icon: (
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+        ),
+        defaultPath: '/screening-guide',
+        children: [
+            { id: 'screening-guide', label: 'Screening Guide', path: '/screening-guide' },
+            { id: 'risk-compliance-history', label: 'Change History', path: '/risk-compliance-history' },
         ],
     },
 ];
 
-function getCurrentSection(pathname: string): NavSection | null {
-    for (const section of sections) {
-        if (section.paths.some((p) => pathname === p || pathname.startsWith(p + '/'))) {
+function getCurrentSection(pathname: string): MenuSection | null {
+    for (const section of MENU_STRUCTURE) {
+        if (section.children.some((c) => pathname === c.path || pathname.startsWith(c.path + '/'))) {
             return section;
         }
     }
@@ -52,56 +78,75 @@ function getCurrentSection(pathname: string): NavSection | null {
 
 export default function Navbar() {
     const location = useLocation();
+    const navigate = useNavigate();
     const { theme, toggle } = useThemeContext();
     const currentSection = getCurrentSection(location.pathname);
 
-    // 메인 화면에서는 Navbar 숨김
+    // 메인 화면에서는 숨김
     if (!currentSection) return null;
 
-    const isActive = (path: string) => {
-        if (path === '/dashboard') return location.pathname === '/dashboard';
+    const isActivePath = (path: string) => {
         return location.pathname === path || location.pathname.startsWith(path + '/');
     };
 
     return (
-        <nav className="bg-wing-glass-dense backdrop-blur-sm shadow-md rounded-xl mb-6 px-4 py-3 border border-wing-border">
-            <div className="flex items-center justify-between flex-wrap gap-2">
-                <div className="flex items-center gap-3">
+        <div className="mb-6">
+            {/* 1단: 섹션 탭 */}
+            <div className="bg-slate-900 px-6 pt-3 rounded-t-xl flex items-center">
                 <Link
                     to="/"
-                        className="px-2.5 py-1.5 rounded-lg text-sm font-medium no-underline text-wing-muted hover:bg-wing-hover hover:text-wing-accent transition-colors"
+                    className="flex items-center gap-1 px-3 py-2.5 text-sm text-slate-400 hover:text-white no-underline transition-colors"
                     title="메인 메뉴"
                 >
-                        ← 메인
+                    ←
                 </Link>
-                    <span className="text-wing-border">|</span>
-                    <span className="text-sm font-bold text-wing-accent">{currentSection.title}</span>
-                </div>
-                <div className="flex gap-1 flex-wrap items-center">
-                    {currentSection.items.map((item) => (
-                        <Link
-                            key={item.path}
-                            to={item.path}
-                            className={`px-3 py-1.5 rounded-lg text-sm font-medium no-underline transition-colors
-                                ${isActive(item.path)
-                                    ? 'bg-wing-accent text-white'
-                                    : 'text-wing-muted hover:bg-wing-hover hover:text-wing-accent'
+                <div className="flex-1 flex items-center justify-center gap-1">
+                    {MENU_STRUCTURE.map((section) => (
+                        <button
+                            key={section.id}
+                            onClick={() => {
+                                if (currentSection?.id !== section.id) {
+                                    navigate(section.defaultPath);
+                                }
+                            }}
+                            className={`flex items-center gap-2 px-5 py-2.5 rounded-t-lg text-sm font-medium transition-all ${
+                                currentSection?.id === section.id
+                                    ? 'bg-wing-bg text-wing-text shadow-sm'
+                                    : 'text-slate-400 hover:text-white hover:bg-slate-800'
                             }`}
                         >
-                            <span className="mr-1">{item.icon}</span>
-                            {item.label}
-                        </Link>
+                            {section.icon}
+                            <span>{section.shortLabel}</span>
+                        </button>
                     ))}
+                </div>
                 <button
                     onClick={toggle}
-                        className="ml-2 px-2.5 py-1.5 rounded-lg text-sm bg-wing-card text-wing-muted
-                            hover:text-wing-text border border-wing-border transition-colors"
+                    className="px-2.5 py-1.5 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
                     title={theme === 'dark' ? '라이트 모드' : '다크 모드'}
                 >
                     {theme === 'dark' ? '☀️' : '🌙'}
                 </button>
             </div>
+
+            {/* 2단: 서브 탭 */}
+            <div className="bg-wing-surface border-b border-wing-border px-6 rounded-b-xl shadow-md">
+                <div className="flex gap-1 -mb-px justify-center">
+                    {currentSection?.children.map((child) => (
+                        <button
+                            key={child.id}
+                            onClick={() => navigate(child.path)}
+                            className={`px-4 py-3 text-sm font-medium transition-all border-b-2 ${
+                                isActivePath(child.path)
+                                    ? 'border-blue-600 text-blue-600'
+                                    : 'border-transparent text-wing-muted hover:text-wing-text hover:border-wing-border'
+                            }`}
+                        >
+                            {child.label}
+                        </button>
+                    ))}
+                </div>
+            </div>
         </div>
-        </nav>
     );
 }

frontend/src/theme/base.css

@@ -27,16 +27,19 @@ body {
 /* Main Menu Cards */
 .gc-cards {
   padding: 2rem 0;
-  display: flex;
-  justify-content: center;
-  align-items: stretch;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;
   gap: 2rem;
   width: 80%;
   margin: 0 auto;
 }
 
-.gc-cards > * {
-  flex: 1 1 0;
+@media (max-width: 768px) {
+  .gc-cards {
+    grid-template-columns: 1fr;
+    width: 90%;
+  }
 }
 
 .gc-card {