Feature/home layout

frontend/src/App.tsx

@@ -1,5 +1,19 @@
-import DesignSystemDemo from '@/pages/DesignSystem'
+import { lazy, Suspense } from 'react'
+import HomePage from '@/pages/Home'
+
+const DesignSystemDemo = lazy(() => import('@/pages/DesignSystem'))
 
 export default function App() {
-  return <DesignSystemDemo />
+  const path =
+    typeof window !== 'undefined' ? window.location.pathname : '/'
+
+  if (path.startsWith('/design-system')) {
+    return (
+      <Suspense fallback={null}>
+        <DesignSystemDemo />
+      </Suspense>
+    )
+  }
+
+  return <HomePage />
 }

frontend/src/app/styles/global.css

@@ -3,8 +3,11 @@
  *  - html/body 기본
  *  - 접근성 기본 (focus-visible, prefers-reduced-motion)
  *
- * Google Fonts (Fira Sans Extra Condensed, Geist, Geist Mono, Inter) 는
- * `index.html` 의 `<link>` 로 로드 (성능상 CSS @import url 보다 권장).
+ * 폰트는 `index.html` 의 `<link>` 로 로드.
+ *  - Pretendard Variable (한·영 본문/서브헤딩)
+ *  - Bricolage Grotesque (디스플레이 헤딩)
+ *  - Caveat (스크립트 강조)
+ *  - Geist Mono (코드/모노)
  */
 
 @layer base {
@@ -26,8 +29,8 @@
   h1, h2, h3 {
     font-family: var(--font-heading);
     color: var(--color-fg-strong);
-    text-transform: uppercase;
     margin: 0;
+    letter-spacing: -0.01em;
   }
 
   h4, h5, h6 {
@@ -58,3 +61,55 @@
     }
   }
 }
+
+@layer utilities {
+  /* Hero stagger animation */
+  @keyframes hero-rise {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes hero-pop {
+    from {
+      opacity: 0;
+      transform: translateY(10px) rotate(-3deg) scale(0.92);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) rotate(-2deg) scale(1);
+    }
+  }
+  @keyframes laptop-rise {
+    from {
+      opacity: 0;
+      transform: translateY(24px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes screen-glow {
+    0%, 100% { opacity: 0.85; }
+    50% { opacity: 1; }
+  }
+  @keyframes caret-blink {
+    0%, 49% { opacity: 1; }
+    50%, 100% { opacity: 0; }
+  }
+
+  .anim-hero-rise {
+    animation: hero-rise 0.8s var(--ease-decelerate) both;
+  }
+  .anim-hero-pop {
+    animation: hero-pop 0.9s var(--ease-decelerate) both;
+  }
+  .anim-laptop-rise {
+    animation: laptop-rise 0.9s var(--ease-decelerate) both;
+  }
+}

frontend/src/app/styles/tokens.css

@@ -96,15 +96,17 @@
    *    font-heading, font-subheading, font-sans, font-mono
    * ========================================================= */
   --font-heading:
-    'Fira Sans Extra Condensed', 'Pretendard Variable', system-ui, sans-serif;
+    'Bricolage Grotesque', 'Pretendard Variable', system-ui, sans-serif;
   --font-display:
-    'Fira Sans Extra Condensed', 'Pretendard Variable', system-ui, sans-serif;
+    'Bricolage Grotesque', 'Pretendard Variable', system-ui, sans-serif;
   --font-subheading:
-    'Geist', 'Pretendard Variable', system-ui, sans-serif;
+    'Pretendard Variable', system-ui, sans-serif;
   --font-sans:
-    'Inter', 'Pretendard Variable', system-ui, sans-serif;
+    'Pretendard Variable', system-ui, sans-serif;
   --font-body:
-    'Inter', 'Pretendard Variable', system-ui, sans-serif;
+    'Pretendard Variable', system-ui, sans-serif;
+  --font-script:
+    'Caveat', 'Pretendard Variable', system-ui, sans-serif;
   --font-mono:
     'Geist Mono', ui-monospace, 'JetBrains Mono', Consolas, monospace;
 

frontend/src/pages/Home/index.ts

@@ -0,0 +1 @@
+export { default } from './ui/HomePage'

frontend/src/pages/Home/ui/HomePage.tsx

@@ -0,0 +1,18 @@
+// PR 2 (feature/home-layout) 단계의 HomePage.tsx
+import { SiteNav } from '@/widgets/site-nav'
+import { SiteFooter } from '@/widgets/site-footer'
+// 아직 PR 3에서 만들 예정이므로 주석 처리!
+// import { HomeHero } from '@/widgets/home-hero' 
+
+export default function HomePage() {
+  return (
+    <div className="min-h-svh bg-bg text-fg">
+      {/* 글로벌 레이아웃은 추후 분리 예정*/}
+      <SiteNav />
+      <main>
+        {/* TODO: 다음 PR에서 위젯들 추가 예정 */}
+      </main>
+      <SiteFooter />
+    </div>
+  )
+}

frontend/src/shared/lib/AsyncBoundary/ErrorBoundary.tsx → frontend/src/shared/lib/async-boundary/ErrorBoundary.tsx

@@ -1,23 +1,23 @@
 import { Component, type ErrorInfo, type ReactNode } from 'react';
 
-interface Props {
+interface ErrorBoundaryProps {
   children: ReactNode;
   fallback: ReactNode | ((props: { error: Error; reset: () => void }) => ReactNode);
   onReset?: () => void;
 }
 
-interface State {
+interface ErrorBoundaryState {
   hasError: boolean;
   error: Error | null;
 }
 
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { hasError: false, error: null };
   }
 
-  static getDerivedStateFromError(error: Error): State {
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     return { hasError: true, error };
   }
 

frontend/src/widgets/site-footer/index.ts

@@ -0,0 +1 @@
+export { SiteFooter } from './ui/SiteFooter'

frontend/src/widgets/site-footer/ui/SiteFooter.tsx

@@ -0,0 +1,113 @@
+// 단순 뷰 섹션 widgets 에선 굳이 나누지 않는게 좋다고 판단했습니다.
+// 상수, 메세지 등 마찬가지
+const columns = [
+  {
+    title: 'Company',
+    links: [
+      { label: 'Home', href: '#top' },
+      { label: 'About', href: '#quote' },
+      { label: 'FAQ', href: '#faq' },
+      { label: 'Team', href: '#quote' },
+    ],
+  },
+  {
+    title: 'Services',
+    links: [
+      { label: 'Frontend Interview', href: '#services' },
+      { label: 'Backend Interview', href: '#services' },
+      { label: 'CS / Full Stack', href: '#services' },
+      { label: 'Reports', href: '#services' },
+    ],
+  },
+  {
+    title: 'Other',
+    links: [
+      { label: 'Design System', href: '/design-system' },
+      { label: 'GitHub', href: '#' },
+      { label: 'Privacy', href: '#' },
+      { label: 'Get Started', href: '#cta' },
+    ],
+  },
+]
+
+export function SiteFooter() {
+  return (
+    <footer
+      id="footer"
+      className="relative text-white"
+      style={{ background: 'var(--color-sage-800)' }}
+    >
+      <div className="mx-auto max-w-content px-6 lg:px-12 pt-20 lg:pt-28 pb-12">
+        <div className="flex flex-col lg:flex-row lg:items-end gap-8 lg:gap-12">
+          <h2
+            className="font-heading font-extrabold uppercase text-white leading-[0.95] tracking-tight flex-1"
+            style={{ fontSize: 'clamp(40px, 6vw, 88px)' }}
+          >
+            One smart step
+          </h2>
+          <a
+            href="#cta"
+            className="inline-flex self-start lg:self-end items-center gap-2 pl-5 pr-2 py-2.5 rounded-pill bg-[#e6dfd4] text-sage-900 text-button hover:bg-white transition-colors duration-fast"
+          >
+            Get Started
+            <span
+              aria-hidden
+              className="inline-flex items-center justify-center w-6 h-6 rounded-pill bg-sage-900 text-white text-[11px]"
+            >
+              →
+            </span>
+          </a>
+        </div>
+
+        <div className="mt-12 h-px bg-sage-600/70" />
+
+        <div className="mt-12 grid gap-12 lg:grid-cols-12">
+          <div className="lg:col-span-5">
+            <div className="font-heading font-extrabold uppercase tracking-[0.06em] text-white text-[22px]">
+              Stack Up
+            </div>
+            <p className="mt-4 text-sage-200 max-w-sm leading-relaxed">
+              IT 직군 멀티모달 AI 면접 시뮬레이터. GitHub 레포와 이력서를 분석해
+              개인 맞춤 면접과 음성·비언어적 피드백을 제공합니다.
+            </p>
+          </div>
+
+          <nav
+            aria-label="Footer"
+            className="lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8"
+          >
+            {columns.map((col) => (
+              <div key={col.title}>
+                <div className="text-caption font-mono uppercase tracking-[0.22em] text-sage-300">
+                  {col.title}
+                </div>
+                <ul className="mt-4 space-y-3">
+                  {col.links.map((l) => (
+                    <li key={l.label}>
+                      <a
+                        href={l.href}
+                        className="text-white/90 hover:text-white transition-colors duration-fast"
+                      >
+                        {l.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </nav>
+        </div>
+
+        <div className="mt-16 pt-8 border-t border-sage-600/60 flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
+          <div className="text-caption font-mono text-sage-300">
+            © 2026 StackUp · CNU 종합설계. All rights reserved.
+          </div>
+          <ul className="flex gap-6 text-caption text-sage-300">
+            <li><a href="#" className="hover:text-white transition-colors duration-fast">Privacy</a></li>
+            <li><a href="#" className="hover:text-white transition-colors duration-fast">Terms</a></li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  )
+}

frontend/src/widgets/site-nav/index.ts

@@ -0,0 +1 @@
+export { SiteNav } from './ui/SiteNav'

frontend/src/widgets/site-nav/ui/SiteNav.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+
+const items = [
+  { href: '#services', label: 'Services' },
+  { href: '#quote', label: 'About' },
+  { href: '#faq', label: 'FAQ' },
+]
+
+export function SiteNav() {
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8)
+    onScroll()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <header
+      className={[
+        'sticky top-0 w-full transition-colors duration-normal ease-standard',
+        scrolled
+          ? 'bg-bg/85 backdrop-blur-md border-b border-border'
+          : 'bg-transparent border-b border-transparent',
+      ].join(' ')}
+      style={{ zIndex: 'var(--z-sticky)' }}
+    >
+      <div className="mx-auto max-w-content px-6 lg:px-12 h-16 flex items-center justify-between">
+        <a
+          href="#top"
+          className="font-heading font-extrabold tracking-[0.04em] text-sage-900 text-[15px] uppercase"
+        >
+          Stack Up
+        </a>
+
+        <nav aria-label="Primary" className="hidden md:flex items-center gap-1">
+          {items.map((it) => (
+            <a
+              key={it.href}
+              href={it.href}
+              className="px-3 py-2 text-button text-fg-strong/80 hover:text-fg-strong transition-colors duration-fast"
+            >
+              {it.label}
+            </a>
+          ))}
+        </nav>
+
+        <div className="flex items-center">
+          <a
+            href="#cta"
+            className="inline-flex items-center gap-2 pl-5 pr-2 py-2 rounded-pill bg-[#e6dfd4] text-sage-900 text-button hover:bg-[#dcd4c6] transition-colors duration-fast"
+          >
+            Get Started
+            <span
+              aria-hidden
+              className="inline-flex items-center justify-center w-6 h-6 rounded-pill bg-sage-900 text-white text-[11px]"
+            >
+              →
+            </span>
+          </a>
+        </div>
+      </div>
+    </header>
+  )
+}