diff --git a/frontend/src/features/resume/api/resume.ts b/frontend/src/features/resume/api/resume.ts
new file mode 100644
index 00000000..993438b4
--- /dev/null
+++ b/frontend/src/features/resume/api/resume.ts
@@ -0,0 +1,31 @@
+import { apiClient } from '@/shared/api'
+import type {
+  PageResponse,
+  ResumeResponse,
+} from '@/features/resume/model/types'
+
+export async function uploadResume(file: File): Promise<ResumeResponse> {
+  const form = new FormData()
+  form.append('file', file)
+  const { data } = await apiClient.post<ResumeResponse>('/api/resumes', form)
+  return data
+}
+
+export async function listResumes(
+  page = 0,
+  size = 20,
+): Promise<PageResponse<ResumeResponse>> {
+  const { data } = await apiClient.get<PageResponse<ResumeResponse>>(
+    '/api/resumes', { params: { page, size, sort: 'createdAt,desc' } },
+  )
+  return data
+}
+
+export async function getResume(id: number): Promise<ResumeResponse> {
+  const { data } = await apiClient.get<ResumeResponse>(`/api/resumes/${id}`)
+  return data
+}
+
+export async function deleteResume(id: number): Promise<void> {
+  await apiClient.delete(`/api/resumes/${id}`)
+}
\ No newline at end of file
diff --git a/frontend/src/features/resume/index.ts b/frontend/src/features/resume/index.ts
index e69de29b..25e38e44 100644
--- a/frontend/src/features/resume/index.ts
+++ b/frontend/src/features/resume/index.ts
@@ -0,0 +1,7 @@
+export { ResumeList } from './ui/ResumeList'
+export { UploadResumeButton } from './ui/UploadResumeButton'
+export type {
+  PageResponse,
+  ResumeResponse,
+  ResumeStatus,
+} from './model/types'
diff --git a/frontend/src/features/resume/lib/file-validation.ts b/frontend/src/features/resume/lib/file-validation.ts
new file mode 100644
index 00000000..39fdc3db
--- /dev/null
+++ b/frontend/src/features/resume/lib/file-validation.ts
@@ -0,0 +1,42 @@
+export const RESUME_MAX_BYTES = 20 * 1024 * 1024
+export const RESUME_ACCEPT_MIME = 'application/pdf'
+export const RESUME_ACCEPT_EXTENSION = '.pdf'
+
+export type ResumeFileErrorCode =
+  | 'RESUME_EMPTY_FILE'
+  | 'RESUME_INVALID_FILE_TYPE'
+  | 'RESUME_FILE_TOO_LARGE'
+
+export type ResumeFileError = {
+  code: ResumeFileErrorCode
+  message: string
+  maxBytes?: number
+}
+
+export function validateResumeFile(file: File): ResumeFileError | null {
+  if (file.size === 0) {
+    return { code: 'RESUME_EMPTY_FILE', message: '빈 파일은 업로드할 수 없습니다.' }
+  }
+  const isPdfMime = file.type === RESUME_ACCEPT_MIME
+  const isPdfExt = file.name.toLowerCase().endsWith(RESUME_ACCEPT_EXTENSION)
+  if (!isPdfMime && !isPdfExt) {
+    return {
+      code: 'RESUME_INVALID_FILE_TYPE',
+      message: 'PDF 파일만 업로드할 수 있습니다.',
+    }
+  }
+  if (file.size > RESUME_MAX_BYTES) {
+    return {
+      code: 'RESUME_FILE_TOO_LARGE',
+      message: `파일 크기가 ${Math.floor(RESUME_MAX_BYTES / 1024 / 1024)}MB를 초과합니다.`,
+      maxBytes: RESUME_MAX_BYTES,
+    }
+  }
+  return null
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
diff --git a/frontend/src/features/resume/model/types.ts b/frontend/src/features/resume/model/types.ts
new file mode 100644
index 00000000..ce1551ba
--- /dev/null
+++ b/frontend/src/features/resume/model/types.ts
@@ -0,0 +1,20 @@
+export type ResumeStatus = 'PENDING' | 'ANALYZING' | 'ANALYZED' | 'FAILED'
+
+export type ResumeResponse = {
+  id: number
+  originalFilename: string
+  fileSize: number
+  status: ResumeStatus
+  createdAt: string
+  updatedAt: string
+}
+
+export type PageResponse<T> = {
+  content: T[]
+  page: number
+  size: number
+  totalElements: number
+  totalPages: number
+  first: boolean
+  last: boolean
+}
diff --git a/frontend/src/features/resume/model/useResumeUpload.ts b/frontend/src/features/resume/model/useResumeUpload.ts
new file mode 100644
index 00000000..23860ed2
--- /dev/null
+++ b/frontend/src/features/resume/model/useResumeUpload.ts
@@ -0,0 +1,59 @@
+import { useRef, useState } from 'react'
+import { isApiError } from '@/shared/api'
+import { useUploadResumeMutation } from '@/features/resume/model/useResumes'
+import {
+  RESUME_ACCEPT_EXTENSION,
+  RESUME_ACCEPT_MIME,
+  validateResumeFile,
+} from '@/features/resume/lib/file-validation'
+
+const RESUME_ACCEPT = `${RESUME_ACCEPT_MIME},${RESUME_ACCEPT_EXTENSION}`
+
+type Options = {
+  onError?: (message: string) => void
+}
+
+export function useResumeUpload({ onError }: Options = {}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const upload = useUploadResumeMutation()
+  const [error, setError] = useState<string | null>(null)
+
+  const fail = (message: string) => {
+    setError(message)
+    onError?.(message)
+  }
+
+  const handleFile = (file: File) => {
+    setError(null)
+    const invalid = validateResumeFile(file)
+    if (invalid) {
+      fail(invalid.message)
+      return
+    }
+    upload.mutate(file, {
+      onError: (err) => {
+        fail(
+          isApiError(err) ? err.message : '업로드 중 오류가 발생했습니다.',
+        )
+      },
+    })
+  }
+
+  const openPicker = () => inputRef.current?.click()
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) handleFile(file)
+    e.target.value = ''
+  }
+
+  return {
+    inputRef,
+    accept: RESUME_ACCEPT,
+    error,
+    isPending: upload.isPending,
+    openPicker,
+    handleFile,
+    onInputChange,
+  }
+}
diff --git a/frontend/src/features/resume/model/useResumes.ts b/frontend/src/features/resume/model/useResumes.ts
new file mode 100644
index 00000000..37bde3e7
--- /dev/null
+++ b/frontend/src/features/resume/model/useResumes.ts
@@ -0,0 +1,64 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  deleteResume,
+  getResume,
+  listResumes,
+  uploadResume,
+} from '@/features/resume/api/resume'
+import type {
+  PageResponse,
+  ResumeResponse,
+} from '@/features/resume/model/types'
+
+const RESUMES_KEY = 'resumes' as const
+const POLL_INTERVAL_MS = 2_000
+
+function hasInProgress(page: PageResponse<ResumeResponse> | undefined): boolean {
+  if (!page) return false
+  return page.content.some(
+    (r) => r.status === 'PENDING' || r.status === 'ANALYZING',
+  )
+}
+
+export function useResumesQuery(page = 0, size = 20) {
+  return useQuery({
+    queryKey: [RESUMES_KEY, page, size],
+    queryFn: () => listResumes(page, size),
+    refetchInterval: (query) =>
+      hasInProgress(query.state.data) ? POLL_INTERVAL_MS : false,
+  })
+}
+
+export function useResumeQuery(id: number | null) {
+  return useQuery({
+    queryKey: [RESUMES_KEY, 'detail', id],
+    queryFn: () => getResume(id as number),
+    enabled: id !== null,
+    refetchInterval: (query) => {
+      const status = query.state.data?.status
+      return status === 'PENDING' || status === 'ANALYZING'
+        ? POLL_INTERVAL_MS
+        : false
+    },
+  })
+}
+
+export function useUploadResumeMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (file: File) => uploadResume(file),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: [RESUMES_KEY] })
+    },
+  })
+}
+
+export function useDeleteResumeMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: number) => deleteResume(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: [RESUMES_KEY] })
+    },
+  })
+}
diff --git a/frontend/src/features/resume/ui/ResumeDropzone.tsx b/frontend/src/features/resume/ui/ResumeDropzone.tsx
new file mode 100644
index 00000000..06598df3
--- /dev/null
+++ b/frontend/src/features/resume/ui/ResumeDropzone.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+import { useResumeUpload } from '@/features/resume/model/useResumeUpload'
+
+const FAKE_PROGRESS_DURATION_MS = 1_500
+
+export function ResumeDropzone() {
+  const {
+    inputRef,
+    accept,
+    error,
+    isPending,
+    openPicker,
+    onInputChange,
+    handleFile,
+  } = useResumeUpload()
+  const [dragOver, setDragOver] = useState(false)
+  const progress = useFakeProgress(isPending)
+
+  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setDragOver(false)
+    const file = e.dataTransfer.files?.[0]
+    if (file) handleFile(file)
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      aria-label="PDF 이력서 업로드"
+      aria-busy={isPending}
+      onClick={openPicker}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          openPicker()
+        }
+      }}
+      onDragOver={(e) => {
+        e.preventDefault()
+        setDragOver(true)
+      }}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={onDrop}
+      className={[
+        'relative rounded-xl border border-dashed p-10 text-center cursor-pointer transition-colors duration-fast',
+        dragOver
+          ? 'border-primary bg-surface'
+          : 'border-border-strong bg-surface hover:border-primary/60',
+        isPending ? 'pointer-events-none' : '',
+      ].join(' ')}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className="sr-only"
+        onChange={onInputChange}
+      />
+      <p className="text-body text-fg-strong font-semibold">
+        PDF 이력서를 드래그하거나 클릭해서 업로드
+      </p>
+      <p className="text-caption text-fg-subtle mt-2">
+        최대 20MB · PDF 형식만 지원
+      </p>
+      {error ? (
+        <p
+          role="alert"
+          className="text-caption text-danger-700 mt-4"
+        >
+          {error}
+        </p>
+      ) : null}
+      {isPending ? (
+        <div className="mt-6">
+          <div className="h-1.5 w-full rounded-pill bg-sage-100 overflow-hidden">
+            <div
+              className="h-full bg-primary transition-[width] duration-fast"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <p className="text-caption text-fg-muted mt-2">
+            업로드 중… {Math.floor(progress)}%
+          </p>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function useFakeProgress(active: boolean): number {
+  const [progress, setProgress] = useState(0)
+  useEffect(() => {
+    if (!active) {
+      setProgress(0)
+      return
+    }
+    const start = Date.now()
+    const id = window.setInterval(() => {
+      const elapsed = Date.now() - start
+      const p = Math.min(100, (elapsed / FAKE_PROGRESS_DURATION_MS) * 100)
+      setProgress(p)
+      if (p >= 100) window.clearInterval(id)
+    }, 60)
+    return () => window.clearInterval(id)
+  }, [active])
+  return progress
+}
diff --git a/frontend/src/features/resume/ui/ResumeList.tsx b/frontend/src/features/resume/ui/ResumeList.tsx
new file mode 100644
index 00000000..133dd07c
--- /dev/null
+++ b/frontend/src/features/resume/ui/ResumeList.tsx
@@ -0,0 +1,174 @@
+import { isApiError } from '@/shared/api'
+import {
+  useDeleteResumeMutation,
+  useResumesQuery,
+} from '@/features/resume/model/useResumes'
+import { formatFileSize } from '@/features/resume/lib/file-validation'
+import type {
+  ResumeResponse,
+  ResumeStatus,
+} from '@/features/resume/model/types'
+import { ResumeDropzone } from './ResumeDropzone'
+
+export function ResumeList() {
+  const { data, isLoading, isError, error, refetch } = useResumesQuery()
+
+  if (isLoading) return <ResumeListSkeleton />
+  if (isError) {
+    const message = isApiError(error)
+      ? error.message
+      : '이력서 목록을 불러오지 못했습니다.'
+    return (
+      <div className="rounded-xl border border-border bg-surface-raised p-8 text-center">
+        <p role="alert" className="text-body text-danger-700">
+          {message}
+        </p>
+        <button
+          type="button"
+          onClick={() => refetch()}
+          className="mt-4 inline-flex items-center px-4 py-2 rounded-pill bg-sage-900 text-white text-button hover:bg-sage-800 transition-colors duration-fast"
+        >
+          다시 시도
+        </button>
+      </div>
+    )
+  }
+
+  const resumes = data?.content ?? []
+  if (resumes.length === 0) return <ResumeDropzone />
+
+  return (
+    <ul className="grid gap-3">
+      {resumes.map((resume) => (
+        <li key={resume.id}>
+          <ResumeCard resume={resume} />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function ResumeCard({ resume }: { resume: ResumeResponse }) {
+  const remove = useDeleteResumeMutation()
+  const handleDelete = () => {
+    // TODO: shared/ui/ConfirmDialog 도입 시 교체 (docs/ui-patterns.md §4)
+    const ok = window.confirm(
+      `'${resume.originalFilename}' 이력서를 삭제하시겠습니까?`,
+    )
+    if (!ok) return
+    remove.mutate(resume.id)
+  }
+  return (
+    <article className="rounded-xl bg-surface-raised border border-border shadow-sm p-5 flex items-center gap-4">
+      <FileIcon />
+      <div className="min-w-0 flex-1">
+        <p className="text-body text-fg-strong font-semibold truncate">
+          {resume.originalFilename}
+        </p>
+        <p className="text-caption text-fg-muted mt-1">
+          {formatFileSize(resume.fileSize)} · {relativeTime(resume.createdAt)}
+        </p>
+      </div>
+      <StatusBadge status={resume.status} />
+      <button
+        type="button"
+        onClick={handleDelete}
+        disabled={remove.isPending}
+        aria-busy={remove.isPending}
+        aria-label={`${resume.originalFilename} 삭제`}
+        className="inline-flex items-center px-3 py-1.5 rounded-pill border border-border text-button text-fg-muted hover:text-danger-700 hover:border-danger-500 transition-colors duration-fast disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        {remove.isPending ? '삭제 중…' : '삭제'}
+      </button>
+    </article>
+  )
+}
+
+function ResumeListSkeleton() {
+  return (
+    <ul aria-busy="true" aria-label="이력서 목록 로딩 중" className="grid gap-3">
+      {[0, 1, 2].map((i) => (
+        <li
+          key={i}
+          className="rounded-xl bg-surface-raised border border-border shadow-sm p-5 flex items-center gap-4"
+        >
+          <div className="w-10 h-10 rounded-md bg-sage-100 animate-pulse" />
+          <div className="flex-1 space-y-2">
+            <div className="h-4 w-1/2 rounded bg-sage-100 animate-pulse" />
+            <div className="h-3 w-1/3 rounded bg-sage-100 animate-pulse" />
+          </div>
+          <div className="h-6 w-20 rounded-pill bg-sage-100 animate-pulse" />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+const STATUS_LABEL: Record<ResumeStatus, string> = {
+  PENDING: '분석 대기',
+  ANALYZING: '분석 중',
+  ANALYZED: '분석 완료',
+  FAILED: '분석 실패',
+}
+
+const STATUS_CLASS: Record<ResumeStatus, string> = {
+  PENDING: 'bg-info-50 text-info-700',
+  ANALYZING: 'bg-info-50 text-info-700',
+  ANALYZED: 'bg-success-50 text-success-700',
+  FAILED: 'bg-danger-50 text-danger-700',
+}
+
+function StatusBadge({ status }: { status: ResumeStatus }) {
+  const inProgress = status === 'PENDING' || status === 'ANALYZING'
+  return (
+    <span
+      className={[
+        'inline-flex items-center gap-1.5 px-3 py-1 rounded-pill text-caption font-mono',
+        STATUS_CLASS[status],
+      ].join(' ')}
+    >
+      {inProgress ? <Spinner /> : null}
+      {STATUS_LABEL[status]}
+    </span>
+  )
+}
+
+function Spinner() {
+  return (
+    <svg
+      aria-hidden
+      width="10"
+      height="10"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      className="animate-spin"
+    >
+      <circle cx="12" cy="12" r="9" strokeOpacity="0.25" />
+      <path d="M21 12a9 9 0 0 0-9-9" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function FileIcon() {
+  return (
+    <div className="w-10 h-10 rounded-md bg-sage-100 text-fg-strong flex items-center justify-center font-mono text-caption font-bold">
+      PDF
+    </div>
+  )
+}
+
+function relativeTime(iso: string): string {
+  const diffMs = Date.now() - new Date(iso).getTime()
+  if (diffMs < 0) return '방금 전'
+  const sec = diffMs / 1000
+  if (sec < 60) return '방금 전'
+  const min = sec / 60
+  if (min < 60) return `${Math.floor(min)}분 전`
+  const hr = min / 60
+  if (hr < 24) return `${Math.floor(hr)}시간 전`
+  const day = hr / 24
+  if (day < 7) return `${Math.floor(day)}일 전`
+  return new Date(iso).toLocaleDateString('ko-KR')
+}
diff --git a/frontend/src/features/resume/ui/UploadResumeButton.tsx b/frontend/src/features/resume/ui/UploadResumeButton.tsx
new file mode 100644
index 00000000..881d6116
--- /dev/null
+++ b/frontend/src/features/resume/ui/UploadResumeButton.tsx
@@ -0,0 +1,36 @@
+import { useResumeUpload } from '@/features/resume/model/useResumeUpload'
+
+type Props = {
+  onError?: (message: string) => void
+}
+
+export function UploadResumeButton({ onError }: Props) {
+  const { inputRef, accept, error, isPending, openPicker, onInputChange } =
+    useResumeUpload({ onError })
+
+  return (
+    <div className="flex flex-col items-end gap-1">
+      <button
+        type="button"
+        onClick={openPicker}
+        disabled={isPending}
+        aria-busy={isPending}
+        className="inline-flex items-center gap-2 px-4 py-2 rounded-pill bg-sage-900 text-white text-button hover:bg-sage-800 transition-colors duration-fast disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        {isPending ? '업로드 중…' : 'PDF 업로드'}
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className="sr-only"
+        onChange={onInputChange}
+      />
+      {error ? (
+        <p role="alert" className="text-caption text-danger-700">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  )
+}
diff --git a/frontend/src/pages/Workspace/ui/WorkspacePage.tsx b/frontend/src/pages/Workspace/ui/WorkspacePage.tsx
index 3b964b3b..3bbc74e8 100644
--- a/frontend/src/pages/Workspace/ui/WorkspacePage.tsx
+++ b/frontend/src/pages/Workspace/ui/WorkspacePage.tsx
@@ -1,3 +1,4 @@
+import { ResumeList, UploadResumeButton } from '@/features/resume'
 import { SiteNav } from '@/widgets/site-nav'
 import { SiteFooter } from '@/widgets/site-footer'
 import { WorkspaceProfileCard } from '@/widgets/workspace-profile-card'
@@ -14,8 +15,9 @@ export default function WorkspacePage() {
         <WorkspaceSection
           title="내 이력서"
           description="PDF 이력서를 업로드하면 AI가 분석해 면접 질문 풀에 반영합니다."
+          action={<UploadResumeButton />}
         >
-          <EmptyResumeSlot />
+          <ResumeList />
         </WorkspaceSection>
 
         <WorkspaceSection
@@ -30,17 +32,6 @@ export default function WorkspacePage() {
   )
 }
 
-function EmptyResumeSlot() {
-  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">
-        다음 단계에서 PDF 업로드가 가능해집니다.
-      </p>
-    </div>
-  )
-}
-
 function EmptyRepoSlot() {
   return (
     <div className="rounded-xl border border-dashed border-border-strong bg-surface p-10 text-center">