diff --git a/frontend/src/app/router/index.tsx b/frontend/src/app/router/index.tsx
index ffdc4f54..1cb05589 100644
--- a/frontend/src/app/router/index.tsx
+++ b/frontend/src/app/router/index.tsx
@@ -1,4 +1,4 @@
-import { createBrowserRouter } from 'react-router-dom'
+import { createBrowserRouter, Navigate } from 'react-router-dom'
 import { RequireAuth } from '@/features/auth'
 import HomePage from '@/pages/Home'
 import LoginPage from '@/pages/Login'
@@ -7,7 +7,6 @@ import WorkspacePage from '@/pages/Workspace'
 import InterviewSetupPage from '@/pages/InterviewSetup'
 import InterviewSessionPage from '@/pages/InterviewSession'
 import SessionFeedbackPage from '@/pages/SessionFeedback'
-import HistoryPage from '@/pages/History'
 import SharedFeedbackPage from '@/pages/SharedFeedback'
 
 export const router = createBrowserRouter([
@@ -23,6 +22,22 @@ export const router = createBrowserRouter([
       </RequireAuth>
     ),
   },
+  {
+    path: '/workspace/resumes',
+    element: (
+      <RequireAuth>
+        <WorkspacePage />
+      </RequireAuth>
+    ),
+  },
+  {
+    path: '/workspace/repos',
+    element: (
+      <RequireAuth>
+        <WorkspacePage />
+      </RequireAuth>
+    ),
+  },
   {
     path: '/sessions/new',
     element: (
@@ -48,13 +63,14 @@ export const router = createBrowserRouter([
     ),
   },
   {
-    path: '/history',
+    path: '/workspace/history',
     element: (
       <RequireAuth>
-        <HistoryPage />
+        <WorkspacePage />
       </RequireAuth>
     ),
   },
+  { path: '/history', element: <Navigate to="/workspace/history" replace /> },
   {
     path: '/design-system/*',
     lazy: async () => {
diff --git a/frontend/src/features/analysis/ui/DocumentList.tsx b/frontend/src/features/analysis/ui/DocumentList.tsx
index a5724168..c993a759 100644
--- a/frontend/src/features/analysis/ui/DocumentList.tsx
+++ b/frontend/src/features/analysis/ui/DocumentList.tsx
@@ -24,9 +24,11 @@ const SOURCE_LABEL: Record<AnalysisSourceType, string> = {
 
 type Props = {
   filter?: DocumentFilter
+  // 클라이언트에서 소스 유형으로 한정 (탭별 분석 결과 분리용).
+  sourceType?: AnalysisSourceType
 }
 
-export function DocumentList({ filter = {} }: Props) {
+export function DocumentList({ filter = {}, sourceType }: Props) {
   const { data = [], isPending, isError, error } = useDocuments(filter)
 
   if (isPending) {
@@ -39,12 +41,18 @@ export function DocumentList({ filter = {} }: Props) {
       </p>
     )
   }
-  if (data.length === 0) {
+
+  const docs = sourceType
+    ? data.filter((doc) => doc.sourceType === sourceType)
+    : data
+
+  if (docs.length === 0) {
+    const subject = sourceType ? SOURCE_LABEL[sourceType] : '이력서·레포'
     return (
       <div className="rounded-xl border border-dashed border-border-strong bg-surface p-10 text-center">
         <p className="text-body text-fg-muted">아직 분석된 문서가 없습니다.</p>
         <p className="text-caption text-fg-subtle mt-2">
-          이력서·레포 분석이 완료되면 요약과 기술 스택이 여기에 표시됩니다.
+          {subject} 분석이 완료되면 요약과 기술 스택이 여기에 표시됩니다.
         </p>
       </div>
     )
@@ -52,7 +60,7 @@ export function DocumentList({ filter = {} }: Props) {
 
   return (
     <ul className="flex flex-col gap-3">
-      {data.map((doc) => (
+      {docs.map((doc) => (
         <DocumentRow key={doc.id} doc={doc} />
       ))}
     </ul>
diff --git a/frontend/src/pages/CLAUDE.md b/frontend/src/pages/CLAUDE.md
index f91c155c..6c4b58d0 100644
--- a/frontend/src/pages/CLAUDE.md
+++ b/frontend/src/pages/CLAUDE.md
@@ -40,7 +40,7 @@ pages/Workspace/
 | `Workspace` | `/workspace` | `features/resume`, `features/repo` (도입 예정) |
 | `Interview` | `/sessions/new`, `/sessions/:id` | `features/interview` |
 | `Interview (Feedback)` | `/sessions/:id/feedback` | `features/feedback` |
-| `History` | `/history`, `/history/:id` | `features/history` (도입 예정) |
+| `History` | `/workspace/history` (구 `/history` → 리다이렉트) | `features/history` |
 
 ---
 
diff --git a/frontend/src/pages/History/index.ts b/frontend/src/pages/History/index.ts
deleted file mode 100644
index c77a6ed6..00000000
--- a/frontend/src/pages/History/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ui/HistoryPage'
diff --git a/frontend/src/pages/History/ui/HistoryPage.tsx b/frontend/src/pages/History/ui/HistoryPage.tsx
deleted file mode 100644
index 4a2484cc..00000000
--- a/frontend/src/pages/History/ui/HistoryPage.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { SiteNav } from '@/widgets/site-nav'
-import { SiteFooter } from '@/widgets/site-footer'
-import {
-  ScoreTrend,
-  SessionHistoryList,
-  StatsSummary,
-  useUserStats,
-} from '@/features/history'
-
-export default function HistoryPage() {
-  const { data: stats } = useUserStats()
-
-  return (
-    <div className="flex min-h-svh flex-col bg-bg text-fg">
-      <SiteNav />
-      <main className="mx-auto flex w-full max-w-content flex-1 flex-col gap-8 px-6 py-12 lg:px-12">
-        <h1 className="text-h4 text-fg">면접 히스토리</h1>
-
-        {stats && (
-          <div className="grid gap-4 md:grid-cols-2">
-            <StatsSummary stats={stats} />
-            <ScoreTrend stats={stats} />
-          </div>
-        )}
-
-        <section className="flex flex-col gap-3">
-          <h2 className="text-h6 text-fg">지난 면접</h2>
-          <SessionHistoryList />
-        </section>
-      </main>
-      <SiteFooter />
-    </div>
-  )
-}
diff --git a/frontend/src/pages/Workspace/ui/HistoryView.tsx b/frontend/src/pages/Workspace/ui/HistoryView.tsx
new file mode 100644
index 00000000..a4ee6c67
--- /dev/null
+++ b/frontend/src/pages/Workspace/ui/HistoryView.tsx
@@ -0,0 +1,26 @@
+import {
+  ScoreTrend,
+  SessionHistoryList,
+  StatsSummary,
+  useUserStats,
+} from '@/features/history'
+
+export function HistoryView() {
+  const { data: stats } = useUserStats()
+
+  return (
+    <div className="space-y-8">
+      {stats && (
+        <div className="grid gap-4 md:grid-cols-2">
+          <StatsSummary stats={stats} />
+          <ScoreTrend stats={stats} />
+        </div>
+      )}
+
+      <section className="flex flex-col gap-3">
+        <h2 className="text-h6 text-fg">지난 면접</h2>
+        <SessionHistoryList />
+      </section>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/Workspace/ui/HomeView.tsx b/frontend/src/pages/Workspace/ui/HomeView.tsx
new file mode 100644
index 00000000..6cc1ec21
--- /dev/null
+++ b/frontend/src/pages/Workspace/ui/HomeView.tsx
@@ -0,0 +1,103 @@
+import { Link } from 'react-router-dom'
+import {
+  ScoreTrend,
+  StatsSummary,
+  useUserStats,
+} from '@/features/history'
+import { Button } from '@/shared/ui/Button'
+
+export function HomeView() {
+  const { data: stats } = useUserStats()
+  const hasSessions = (stats?.totalSessionCount ?? 0) > 0
+
+  return (
+    <div className="space-y-8">
+      <section className="overflow-hidden rounded-2xl border border-border bg-sage-600 p-8 text-white">
+        <p className="text-caption uppercase tracking-[0.08em] text-white/60">
+          맞춤 모의 면접
+        </p>
+        <h2 className="mt-2 font-heading text-h4 font-bold">
+          이력서·레포 기반 맞춤 면접을 시작하세요
+        </h2>
+        <p className="mt-2 max-w-xl text-body text-white/70">
+          면접 모드와 직군을 고르면 AI가 질문을 생성하고, 실시간으로 답변을
+          주고받습니다.
+        </p>
+        <div className="mt-6 flex flex-wrap gap-3">
+          <Link to="/sessions/new">
+            <Button size="lg" variant="secondary">
+              새 면접 시작
+            </Button>
+          </Link>
+          <Link to="/workspace/resumes">
+            <Button
+              size="lg"
+              variant="ghost"
+              className="text-white hover:bg-white/10"
+            >
+              자료 준비하기
+            </Button>
+          </Link>
+        </div>
+      </section>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <QuickLink
+          to="/workspace/resumes"
+          title="이력서"
+          description="이력서를 업로드하고 분석 결과를 확인하세요."
+        />
+        <QuickLink
+          to="/workspace/repos"
+          title="레포지토리"
+          description="GitHub 레포를 등록하고 분석 결과를 확인하세요."
+        />
+        <QuickLink
+          to="/workspace/history"
+          title="면접 히스토리"
+          description="지난 면접 기록과 점수 추이를 확인하세요."
+        />
+      </div>
+
+      {hasSessions && stats && (
+        <section className="space-y-3">
+          <h2 className="text-h6 text-fg">한눈에 보기</h2>
+          <div className="grid gap-4 md:grid-cols-2">
+            <StatsSummary stats={stats} />
+            <ScoreTrend stats={stats} />
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}
+
+function QuickLink({
+  to,
+  title,
+  description,
+}: {
+  to: string
+  title: string
+  description: string
+}) {
+  return (
+    <Link
+      to={to}
+      className="group flex items-center justify-between gap-4 rounded-xl border border-border bg-surface-raised p-5 transition-colors duration-fast hover:border-border-strong hover:bg-surface"
+    >
+      <div>
+        <h3 className="font-heading text-h6 font-bold text-fg-strong">
+          {title}
+        </h3>
+        <p className="mt-1 text-caption text-fg-muted">{description}</p>
+      </div>
+      <span
+        aria-hidden
+        className="text-fg-muted transition-transform duration-fast group-hover:translate-x-0.5"
+      >
+        →
+      </span>
+    </Link>
+  )
+}
diff --git a/frontend/src/pages/Workspace/ui/ReposView.tsx b/frontend/src/pages/Workspace/ui/ReposView.tsx
new file mode 100644
index 00000000..697fba99
--- /dev/null
+++ b/frontend/src/pages/Workspace/ui/ReposView.tsx
@@ -0,0 +1,26 @@
+import { WorkspaceSection } from '@/widgets/workspace-section'
+import { RepoList, RepoPicker } from '@/features/repo'
+import { DocumentList } from '@/features/analysis'
+
+export function ReposView() {
+  return (
+    <div className="space-y-10">
+      <WorkspaceSection
+        title="내 GitHub 레포지토리"
+        description="등록한 레포를 기반으로 코드 맥락에 맞는 질문이 생성됩니다."
+      >
+        <div className="space-y-4">
+          <RepoPicker />
+          <RepoList />
+        </div>
+      </WorkspaceSection>
+
+      <WorkspaceSection
+        title="레포지토리 분석 결과"
+        description="등록한 레포의 요약과 추출된 기술 스택입니다."
+      >
+        <DocumentList sourceType="REPOSITORY" />
+      </WorkspaceSection>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/Workspace/ui/ResumesView.tsx b/frontend/src/pages/Workspace/ui/ResumesView.tsx
new file mode 100644
index 00000000..ccb769cc
--- /dev/null
+++ b/frontend/src/pages/Workspace/ui/ResumesView.tsx
@@ -0,0 +1,24 @@
+import { WorkspaceSection } from '@/widgets/workspace-section'
+import { ResumeList, ResumeUploader } from '@/features/resume'
+import { DocumentList } from '@/features/analysis'
+
+export function ResumesView() {
+  return (
+    <div className="space-y-10">
+      <WorkspaceSection
+        title="내 이력서"
+        description="PDF 이력서를 업로드하면 AI가 분석해 면접 질문 풀에 반영합니다."
+        action={<ResumeUploader />}
+      >
+        <ResumeList />
+      </WorkspaceSection>
+
+      <WorkspaceSection
+        title="이력서 분석 결과"
+        description="업로드한 이력서의 요약과 추출된 기술 스택입니다."
+      >
+        <DocumentList sourceType="RESUME" />
+      </WorkspaceSection>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/Workspace/ui/WorkspacePage.tsx b/frontend/src/pages/Workspace/ui/WorkspacePage.tsx
index dd1dec0e..84368e6f 100644
--- a/frontend/src/pages/Workspace/ui/WorkspacePage.tsx
+++ b/frontend/src/pages/Workspace/ui/WorkspacePage.tsx
@@ -1,64 +1,66 @@
-import { Link } from 'react-router-dom'
-import { SiteNav } from '@/widgets/site-nav'
-import { SiteFooter } from '@/widgets/site-footer'
-import { WorkspaceProfileCard } from '@/widgets/workspace-profile-card'
-import { WorkspaceSection } from '@/widgets/workspace-section'
-import { ResumeList, ResumeUploader } from '@/features/resume'
-import { RepoList, RepoPicker } from '@/features/repo'
-import { DocumentList } from '@/features/analysis'
-import { Button } from '@/shared/ui/Button'
+import { useLocation } from 'react-router-dom'
+import { useAuth } from '@/features/auth'
+import { WorkspaceSidebar } from '@/widgets/workspace-sidebar'
 import { useWorkspaceAnalysisStream } from '../model/useWorkspaceAnalysisStream'
+import { HomeView } from './HomeView'
+import { ResumesView } from './ResumesView'
+import { ReposView } from './ReposView'
+import { HistoryView } from './HistoryView'
+
+type View = 'home' | 'resumes' | 'repos' | 'history'
+
+function resolveView(pathname: string): View {
+  if (pathname.startsWith('/workspace/history')) return 'history'
+  if (pathname.startsWith('/workspace/resumes')) return 'resumes'
+  if (pathname.startsWith('/workspace/repos')) return 'repos'
+  return 'home'
+}
 
 export default function WorkspacePage() {
-  // 분석 상태 실시간 구독 (SSE) — 완료되면 목록이 자동 갱신된다.
+  // 분석 상태 실시간 구독 (SSE) — 어떤 뷰에 있든 완료 시 목록이 자동 갱신된다.
   useWorkspaceAnalysisStream()
 
-  return (
-    <div className="min-h-svh bg-bg text-fg flex flex-col">
-      <SiteNav />
-      <main className="flex-1 mx-auto w-full max-w-content px-6 lg:px-12 py-10 space-y-10">
-        <WorkspaceProfileCard />
-
-        <WorkspaceSection
-          title="모의 면접"
-          description="분석된 이력서·레포를 바탕으로 맞춤 모의 면접을 시작하세요."
-          action={
-            <Link to="/sessions/new">
-              <Button size="lg">새 면접 시작</Button>
-            </Link>
-          }
-        >
-          <p className="text-body text-fg-muted">
-            면접 모드와 직군을 고르면 AI가 질문을 생성하고, 실시간으로 답변을 주고받습니다.
-          </p>
-        </WorkspaceSection>
+  const { user } = useAuth()
+  const { pathname } = useLocation()
+  const view = resolveView(pathname)
 
-        <WorkspaceSection
-          title="내 이력서"
-          description="PDF 이력서를 업로드하면 AI가 분석해 면접 질문 풀에 반영합니다."
-          action={<ResumeUploader />}
-        >
-          <ResumeList />
-        </WorkspaceSection>
+  const meta = {
+    home: {
+      title: user ? `안녕하세요, ${user.githubUsername}님` : '대시보드',
+      description: '오늘도 맞춤 모의 면접으로 실전 감각을 키워보세요.',
+    },
+    resumes: {
+      title: '이력서',
+      description: '이력서를 업로드하고 분석 결과를 확인하세요.',
+    },
+    repos: {
+      title: '레포지토리',
+      description: 'GitHub 레포를 등록하고 분석 결과를 확인하세요.',
+    },
+    history: {
+      title: '면접 히스토리',
+      description: '지난 면접 기록과 점수 추이를 확인하세요.',
+    },
+  }[view]
 
-        <WorkspaceSection
-          title="내 GitHub 레포지토리"
-          description="등록한 레포를 기반으로 코드 맥락에 맞는 질문이 생성됩니다."
-        >
-          <div className="space-y-4">
-            <RepoPicker />
-            <RepoList />
-          </div>
-        </WorkspaceSection>
+  return (
+    <div className="flex min-h-svh flex-col bg-bg text-fg lg:flex-row">
+      <WorkspaceSidebar />
+      <main className="min-w-0 flex-1">
+        <div className="mx-auto w-full max-w-content px-6 py-10 lg:px-12">
+          <header className="mb-8">
+            <h1 className="font-heading text-h4 font-bold text-fg-strong">
+              {meta.title}
+            </h1>
+            <p className="mt-1 text-body text-fg-muted">{meta.description}</p>
+          </header>
 
-        <WorkspaceSection
-          title="분석 결과"
-          description="이력서·레포 분석이 완료되면 요약과 기술 스택이 표시됩니다."
-        >
-          <DocumentList />
-        </WorkspaceSection>
+          {view === 'home' && <HomeView />}
+          {view === 'resumes' && <ResumesView />}
+          {view === 'repos' && <ReposView />}
+          {view === 'history' && <HistoryView />}
+        </div>
       </main>
-      <SiteFooter />
     </div>
   )
 }
diff --git a/frontend/src/widgets/CLAUDE.md b/frontend/src/widgets/CLAUDE.md
index ad23c576..98aafc5a 100644
--- a/frontend/src/widgets/CLAUDE.md
+++ b/frontend/src/widgets/CLAUDE.md
@@ -93,8 +93,8 @@ widgets/{X}  →  pages/*, app/*                    ✗
 | `home-quote` | 다크 그린 quote · 팀 크레딧 | `/` |
 | `home-faq` | FAQ 아코디언 (`<details>` 기반) | `/` |
 | `home-cta` | 풀-블리드 CTA 배너 | `/` |
-| `workspace-profile-card` | `useAuth().user` 기반 프로필 카드 (avatar + 핸들 + email + 연결 상태) | `/workspace` |
-| `workspace-section` | 타이틀·설명·우측 액션·children 슬롯 컨테이너 (도메인 무관) | `/workspace` |
+| `workspace-section` | 타이틀·설명·우측 액션·children 슬롯 컨테이너 (도메인 무관) | `/workspace/resumes`, `/workspace/repos` |
+| `workspace-sidebar` | 대시보드 좌측 사이드바 (브랜드 + 홈/이력서/레포지토리/히스토리 `NavLink` 전환 + 프로필·로그아웃). `lg` 미만에서는 상단 가로 바 | `/workspace`, `/workspace/resumes`, `/workspace/repos`, `/workspace/history` |
 
 ---
 
diff --git a/frontend/src/widgets/site-nav/ui/SiteNav.tsx b/frontend/src/widgets/site-nav/ui/SiteNav.tsx
index de6b7d68..989b617e 100644
--- a/frontend/src/widgets/site-nav/ui/SiteNav.tsx
+++ b/frontend/src/widgets/site-nav/ui/SiteNav.tsx
@@ -53,12 +53,6 @@ export function SiteNav() {
         <div className="flex items-center gap-2">
           {status === 'authenticated' ? (
             <>
-              <Link
-                to="/history"
-                className="hidden sm:inline-flex items-center px-3 py-2 text-button text-fg-strong/80 hover:text-fg-strong transition-colors duration-fast"
-              >
-                히스토리
-              </Link>
               <Link
                 to="/workspace"
                 className="hidden sm:inline-flex items-center gap-2 px-3 py-2 text-button text-fg-strong/80 hover:text-fg-strong transition-colors duration-fast"
diff --git a/frontend/src/widgets/workspace-profile-card/index.ts b/frontend/src/widgets/workspace-profile-card/index.ts
deleted file mode 100644
index 4f004789..00000000
--- a/frontend/src/widgets/workspace-profile-card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WorkspaceProfileCard } from './ui/WorkspaceProfileCard'
diff --git a/frontend/src/widgets/workspace-profile-card/ui/WorkspaceProfileCard.tsx b/frontend/src/widgets/workspace-profile-card/ui/WorkspaceProfileCard.tsx
deleted file mode 100644
index 77754f28..00000000
--- a/frontend/src/widgets/workspace-profile-card/ui/WorkspaceProfileCard.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useAuth } from '@/features/auth'
-
-export function WorkspaceProfileCard() {
-  const { status, user } = useAuth()
-
-  if (status === 'loading') return <ProfileSkeleton />
-  if (!user) return null
-
-  return (
-    <section className="rounded-2xl bg-surface-raised border border-border shadow-sm p-6 flex items-center gap-5">
-      <Avatar url={user.avatarUrl} name={user.githubUsername} />
-      <div className="min-w-0 flex-1">
-        <h2 className="font-heading font-bold text-h4 text-fg-strong truncate">
-          @{user.githubUsername}
-        </h2>
-        <p className="text-caption text-fg-muted mt-1 truncate">
-          {user.email ?? '이메일 미공개'}
-        </p>
-        <p className="text-caption text-fg-subtle mt-2 inline-flex items-center gap-1.5">
-          <GithubMark />
-          GitHub로 연결됨
-        </p>
-      </div>
-    </section>
-  )
-}
-
-function Avatar({ url, name }: { url: string | null; name: string }) {
-  if (url) {
-    return (
-      <img
-        src={url}
-        alt={name}
-        width={64}
-        height={64}
-        className="w-16 h-16 rounded-full object-cover border border-border"
-      />
-    )
-  }
-  const initial = name.charAt(0).toUpperCase() || '?'
-  return (
-    <div
-      aria-hidden
-      className="w-16 h-16 rounded-full bg-sage-100 text-fg-strong font-heading font-bold text-h5 flex items-center justify-center"
-    >
-      {initial}
-    </div>
-  )
-}
-
-function GithubMark() {
-  return (
-    <svg
-      aria-hidden
-      viewBox="0 0 16 16"
-      width="12"
-      height="12"
-      fill="currentColor"
-    >
-      <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.42 7.42 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
-    </svg>
-  )
-}
-
-function ProfileSkeleton() {
-  return (
-    <section
-      aria-busy="true"
-      aria-label="프로필 로딩 중"
-      className="rounded-2xl bg-surface-raised border border-border shadow-sm p-6 flex items-center gap-5"
-    >
-      <div className="w-16 h-16 rounded-full bg-sage-100 animate-pulse" />
-      <div className="flex-1 space-y-3">
-        <div className="h-5 w-40 rounded bg-sage-100 animate-pulse" />
-        <div className="h-3 w-56 rounded bg-sage-100 animate-pulse" />
-      </div>
-    </section>
-  )
-}
diff --git a/frontend/src/widgets/workspace-sidebar/index.ts b/frontend/src/widgets/workspace-sidebar/index.ts
new file mode 100644
index 00000000..907a994a
--- /dev/null
+++ b/frontend/src/widgets/workspace-sidebar/index.ts
@@ -0,0 +1 @@
+export { WorkspaceSidebar } from './ui/WorkspaceSidebar'
diff --git a/frontend/src/widgets/workspace-sidebar/ui/WorkspaceSidebar.tsx b/frontend/src/widgets/workspace-sidebar/ui/WorkspaceSidebar.tsx
new file mode 100644
index 00000000..9e15d0ee
--- /dev/null
+++ b/frontend/src/widgets/workspace-sidebar/ui/WorkspaceSidebar.tsx
@@ -0,0 +1,204 @@
+import type { ReactNode } from 'react'
+import { Link, NavLink } from 'react-router-dom'
+import { useAuth, useLogout } from '@/features/auth'
+
+type NavItem = {
+  to: string
+  label: string
+  icon: ReactNode
+  end?: boolean
+}
+
+const navItems: NavItem[] = [
+  { to: '/workspace', label: '홈', icon: <HomeIcon />, end: true },
+  { to: '/workspace/resumes', label: '이력서', icon: <ResumeIcon /> },
+  { to: '/workspace/repos', label: '레포지토리', icon: <RepoIcon /> },
+  { to: '/workspace/history', label: '히스토리', icon: <HistoryIcon /> },
+]
+
+export function WorkspaceSidebar() {
+  const { user } = useAuth()
+  const { logout, loggingOut } = useLogout()
+
+  return (
+    <aside
+      className={[
+        'flex flex-col border-border bg-surface-raised',
+        // 모바일: 상단 가로 바. lg 이상: 좌측 고정 컬럼.
+        'border-b lg:h-svh lg:w-64 lg:shrink-0 lg:border-b-0 lg:border-r',
+        'lg:sticky lg:top-0',
+      ].join(' ')}
+    >
+      <div className="flex items-center justify-between px-6 py-5 lg:py-6">
+        <Link
+          to="/"
+          className="font-heading text-[15px] font-extrabold uppercase tracking-[0.04em] text-sage-900"
+        >
+          Stack Up
+        </Link>
+      </div>
+
+      <nav
+        aria-label="Workspace"
+        className="flex gap-1 px-3 pb-4 lg:flex-col lg:gap-1 lg:pb-0"
+      >
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.end}
+            className={({ isActive }) =>
+              [
+                'flex flex-1 items-center gap-3 rounded-lg px-3 py-2.5 text-button transition-colors duration-fast lg:flex-none',
+                isActive
+                  ? 'bg-sage-100 text-fg-strong'
+                  : 'text-fg-strong/70 hover:bg-surface hover:text-fg-strong',
+              ].join(' ')
+            }
+          >
+            <span aria-hidden className="shrink-0">
+              {item.icon}
+            </span>
+            <span>{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="hidden flex-1 lg:block" />
+
+      {user ? (
+        <div className="hidden border-t border-border px-3 py-4 lg:block">
+          <div className="flex items-center gap-3 rounded-lg px-3 py-2">
+            {user.avatarUrl ? (
+              <img
+                src={user.avatarUrl}
+                alt=""
+                aria-hidden
+                className="h-9 w-9 rounded-full border border-border object-cover"
+              />
+            ) : (
+              <div
+                aria-hidden
+                className="flex h-9 w-9 items-center justify-center rounded-full bg-sage-100 font-heading text-button font-bold text-fg-strong"
+              >
+                {user.githubUsername.charAt(0).toUpperCase() || '?'}
+              </div>
+            )}
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-button text-fg-strong">
+                @{user.githubUsername}
+              </p>
+              <p className="truncate text-caption text-fg-muted">
+                {user.email ?? 'GitHub 연결됨'}
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={logout}
+            disabled={loggingOut}
+            aria-busy={loggingOut}
+            className="mt-1 flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-button text-fg-strong/70 transition-colors duration-fast hover:bg-surface hover:text-fg-strong disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            <span aria-hidden className="shrink-0">
+              <LogoutIcon />
+            </span>
+            <span>{loggingOut ? '로그아웃 중…' : '로그아웃'}</span>
+          </button>
+        </div>
+      ) : null}
+    </aside>
+  )
+}
+
+function HomeIcon() {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      width="18"
+      height="18"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 8.5 10 3l7 5.5V16a1.5 1.5 0 0 1-1.5 1.5h-3v-5h-5v5h-3A1.5 1.5 0 0 1 3 16z" />
+    </svg>
+  )
+}
+
+function ResumeIcon() {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      width="18"
+      height="18"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M5 2.5h6l4 4V16a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 16V4A1.5 1.5 0 0 1 5 2.5Z" />
+      <path d="M11 2.5V6a1 1 0 0 0 1 1h3" />
+      <path d="M7 10.5h6M7 13.5h4" />
+    </svg>
+  )
+}
+
+function RepoIcon() {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      width="18"
+      height="18"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="6" cy="5" r="2" />
+      <circle cx="6" cy="15" r="2" />
+      <circle cx="14" cy="7.5" r="2" />
+      <path d="M6 7v6M6 13a4 4 0 0 0 4-4h2.2" />
+    </svg>
+  )
+}
+
+function HistoryIcon() {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      width="18"
+      height="18"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="10" cy="10" r="7.5" />
+      <path d="M10 5.5V10l3 2" />
+    </svg>
+  )
+}
+
+function LogoutIcon() {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      width="18"
+      height="18"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M7.5 6.5V4.5a1.5 1.5 0 0 1 1.5-1.5h6A1.5 1.5 0 0 1 16.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H9a1.5 1.5 0 0 1-1.5-1.5v-2" />
+      <path d="M11 10H3m0 0 2.5-2.5M3 10l2.5 2.5" />
+    </svg>
+  )
+}