From d6393157792d5593d0949b179ee3bf9c98b6e9f3 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 20:30:32 +0900
Subject: [PATCH 01/33] =?UTF-8?q?feat:=20Toast=C2=B7SelectDropdown=C2=B7Sk?=
 =?UTF-8?q?eleton=20=EA=B3=B5=EC=9A=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/stores/useToastStore.ts      |  44 ++++++++
 src/shared/ui/common/SelectDropdown.tsx | 131 ++++++++++++++++++++++++
 src/shared/ui/common/Skeleton.tsx       |  17 +++
 src/shared/ui/common/Toast.tsx          |  71 +++++++++++++
 src/shared/ui/common/ToastViewport.tsx  |  25 +++++
 tailwind.config.js                      |  10 ++
 6 files changed, 298 insertions(+)
 create mode 100644 src/shared/stores/useToastStore.ts
 create mode 100644 src/shared/ui/common/SelectDropdown.tsx
 create mode 100644 src/shared/ui/common/Skeleton.tsx
 create mode 100644 src/shared/ui/common/Toast.tsx
 create mode 100644 src/shared/ui/common/ToastViewport.tsx

diff --git a/src/shared/stores/useToastStore.ts b/src/shared/stores/useToastStore.ts
new file mode 100644
index 00000000..1d5460c8
--- /dev/null
+++ b/src/shared/stores/useToastStore.ts
@@ -0,0 +1,44 @@
+import { create } from 'zustand'
+
+export type ToastVariant = 'success' | 'error'
+
+export interface ToastItem {
+  id: number
+  message: string
+  variant: ToastVariant
+}
+
+/** 자동 dismiss 지연(ms) */
+export const TOAST_DURATION = 2000
+
+interface ToastState {
+  toasts: ToastItem[]
+  showToast: (message: string, variant?: ToastVariant) => void
+  dismissToast: (id: number) => void
+}
+
+let toastSeq = 0
+
+export const useToastStore = create<ToastState>(set => ({
+  toasts: [],
+  showToast: (message, variant = 'success') => {
+    toastSeq += 1
+    const id = toastSeq
+    set(state => ({ toasts: [...state.toasts, { id, message, variant }] }))
+    setTimeout(() => {
+      set(state => ({ toasts: state.toasts.filter(t => t.id !== id) }))
+    }, TOAST_DURATION)
+  },
+  dismissToast: id =>
+    set(state => ({ toasts: state.toasts.filter(t => t.id !== id) })),
+}))
+
+/**
+ * 컴포넌트 외부(핸들러·훅)에서도 호출 가능한 단축 함수
+ * 예) showToast('최종합격 처리됐어요')
+ */
+export function showToast(message: string, variant: ToastVariant = 'success') {
+  useToastStore.getState().showToast(message, variant)
+}
+
+export default useToastStore
diff --git a/src/shared/ui/common/SelectDropdown.tsx b/src/shared/ui/common/SelectDropdown.tsx
new file mode 100644
index 00000000..89832234
--- /dev/null
+++ b/src/shared/ui/common/SelectDropdown.tsx
@@ -0,0 +1,131 @@
+import { useEffect, useId, useRef, useState } from 'react'
+
+import DownIcon from '@/assets/icons/home/chevron-down.svg?react'
+import { cn } from '@/shared/lib/utils'
+
+export interface SelectOption<T extends string | number> {
+  value: T
+  label: string
+}
+
+interface SelectDropdownProps<T extends string | number> {
+  options: SelectOption<T>[]
+  value: T
+  onChange: (value: T) => void
+  /** 접근성 라벨 (예: '업장 필터') */
+  ariaLabel: string
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+}
+
+/**
+ * 박스형 Select — FilterBar(업장·상태), 공고 등록 폼(업장 선택) 등에 사용.
+ * 외부 클릭·Escape로 닫히며, 옵션은 문자열/숫자 값을 지원합니다.
+ */
+export function SelectDropdown<T extends string | number>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  placeholder = '선택',
+  disabled = false,
+  className,
+}: SelectDropdownProps<T>) {
+  const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const listId = useId()
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    function handleOutsideClick(e: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+
+    document.addEventListener('mousedown', handleOutsideClick)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen])
+
+  const selected = options.find(option => option.value === value)
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)}>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? listId : undefined}
+        onClick={() => setIsOpen(prev => !prev)}
+        className={cn(
+          'flex h-11 w-full items-center justify-between gap-2 rounded-xl border border-line-1 bg-white px-3.5 text-left transition-colors',
+          'disabled:cursor-not-allowed disabled:bg-bg-light disabled:text-text-50',
+          isOpen && 'border-main'
+        )}
+      >
+        <span
+          className={cn(
+            'truncate typography-body02-regular',
+            selected ? 'text-text-100' : 'text-text-50'
+          )}
+        >
+          {selected?.label ?? placeholder}
+        </span>
+        <DownIcon
+          className={cn(
+            'size-4 shrink-0 text-text-70 transition-transform',
+            isOpen && 'rotate-180'
+          )}
+          aria-hidden
+        />
+      </button>
+
+      {isOpen ? (
+        <ul
+          id={listId}
+          role="listbox"
+          className="absolute left-0 top-full z-30 mt-1 max-h-60 w-full overflow-y-auto rounded-xl border border-line-1 bg-white py-1 shadow-md"
+        >
+          {options.map(option => {
+            const isSelected = option.value === value
+            return (
+              <li key={String(option.value)} role="none">
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  onClick={() => {
+                    onChange(option.value)
+                    setIsOpen(false)
+                  }}
+                  className={cn(
+                    'w-full px-3.5 py-2.5 text-left transition-colors hover:bg-main-100',
+                    isSelected
+                      ? 'typography-body02-semibold text-main'
+                      : 'typography-body02-regular text-text-100'
+                  )}
+                >
+                  {option.label}
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/shared/ui/common/Skeleton.tsx b/src/shared/ui/common/Skeleton.tsx
new file mode 100644
index 00000000..a5f5b73f
--- /dev/null
+++ b/src/shared/ui/common/Skeleton.tsx
@@ -0,0 +1,17 @@
+import { cn } from '@/shared/lib/utils'
+
+interface SkeletonProps {
+  className?: string
+}
+
+/** 로딩 플레이스홀더 블록 */
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-bg-dark', className)}
+      aria-hidden="true"
+    />
+  )
+}
+
+export type { SkeletonProps }
diff --git a/src/shared/ui/common/Toast.tsx b/src/shared/ui/common/Toast.tsx
new file mode 100644
index 00000000..7ae50270
--- /dev/null
+++ b/src/shared/ui/common/Toast.tsx
@@ -0,0 +1,71 @@
+import { cn } from '@/shared/lib/utils'
+import type { ToastVariant } from '@/shared/stores/useToastStore'
+
+interface ToastProps {
+  message: string
+  variant?: ToastVariant
+  className?: string
+}
+
+function CheckCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <path d="m8.5 12.2 2.4 2.4 4.6-4.9" />
+    </svg>
+  )
+}
+
+function AlertCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7.5v5" />
+      <path d="M12 16.2h.01" />
+    </svg>
+  )
+}
+
+/** 하단 다크 pill 형태의 스낵바 — ToastViewport를 통해 렌더링됩니다 */
+export function Toast({ message, variant = 'success', className }: ToastProps) {
+  const Icon = variant === 'success' ? CheckCircleIcon : AlertCircleIcon
+
+  return (
+    <div
+      className={cn(
+        'pointer-events-auto flex items-center gap-2 rounded-xl bg-text-100 px-4 py-3 shadow-[0_4px_16px_rgba(0,0,0,0.24)]',
+        className
+      )}
+      role="status"
+      aria-live="polite"
+    >
+      <Icon
+        className={cn(
+          'size-[18px] shrink-0',
+          variant === 'success' ? 'text-main' : 'text-error'
+        )}
+      />
+      <span className="typography-body02-semibold text-white">{message}</span>
+    </div>
+  )
+}
+
+export type { ToastProps }
diff --git a/src/shared/ui/common/ToastViewport.tsx b/src/shared/ui/common/ToastViewport.tsx
new file mode 100644
index 00000000..5994b5d8
--- /dev/null
+++ b/src/shared/ui/common/ToastViewport.tsx
@@ -0,0 +1,25 @@
+import { Toast } from '@/shared/ui/common/Toast'
+import { useToastStore } from '@/shared/stores/useToastStore'
+
+/**
+ * 앱 루트에 1회 마운트하는 Toast 렌더링 영역.
+ * Docbar(h-14) 위쪽에 겹치지 않도록 bottom 여백을 둡니다.
+ */
+export function ToastViewport() {
+  const toasts = useToastStore(state => state.toasts)
+
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="pointer-events-none fixed bottom-24 left-1/2 z-[90] flex w-full max-w-[428px] -translate-x-1/2 flex-col items-center gap-2 px-4">
+      {toasts.map(toast => (
+        <Toast
+          key={toast.id}
+          message={toast.message}
+          variant={toast.variant}
+          className="animate-toast-in"
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index c0d6bc01..35547934 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -118,6 +118,16 @@ export default {
         regular: '400',
         semibold: '600',
       },
+      // Animations
+      keyframes: {
+        'toast-in': {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      animation: {
+        'toast-in': 'toast-in 180ms ease-out',
+      },
     },
   },
   plugins: [],

From 117eff2e28205f20404b5fa388fccad5f814b1b6 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 20:30:34 +0900
Subject: [PATCH 02/33] =?UTF-8?q?feat:=20=EC=82=AC=EC=9E=A5=EB=8B=98=20?=
 =?UTF-8?q?=EA=B5=AC=EC=9D=B8=EA=B5=AC=EC=A7=81=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=81=EC=88=98=C2=B7path=20=ED=97=AC=ED=8D=BC?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/constants/routes.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
index ee395b46..115edc79 100644
--- a/src/shared/constants/routes.ts
+++ b/src/shared/constants/routes.ts
@@ -37,6 +37,19 @@ export const ROUTES = {
     WORKER_INVITE: '/manager/worker-invite',
     SOCIAL: '/manager/social',
     SOCIAL_CHAT: '/manager/social/chat',
+    /** 구인구직 — 내 공고 목록 (사장님 알바찾기 탭 진입점) */
+    POSTINGS: '/manager/postings',
+    /** 공고 등록 */
+    POSTING_NEW: '/manager/postings/new',
+    /** 지원자 목록 */
+    POSTING_APPLICATIONS: '/manager/postings/applications',
+    /** 지원자 상세·채용 결정 (파라미터) */
+    POSTING_APPLICATION_DETAIL_PATTERN:
+      '/manager/postings/applications/:applicationId',
+    /** 공고 상세·마감 (파라미터) */
+    POSTING_DETAIL_PATTERN: '/manager/postings/:postingId',
+    /** 공고 수정 (파라미터) */
+    POSTING_EDIT_PATTERN: '/manager/postings/:postingId/edit',
   },
   MY: {
     ROOT: '/my',
@@ -72,3 +85,21 @@ export function managerWorkerSchedulePath(
 export function managerWorkspaceImagesEditPath(workspaceId: number) {
   return `/manager/workspaces/${workspaceId}/images/edit`
 }
+
+export function managerPostingDetailPath(postingId: number) {
+  return `/manager/postings/${postingId}`
+}
+
+export function managerPostingEditPath(postingId: number) {
+  return `/manager/postings/${postingId}/edit`
+}
+
+export function managerPostingApplicationsPath(postingId?: number) {
+  return postingId === undefined
+    ? '/manager/postings/applications'
+    : `/manager/postings/applications?postingId=${postingId}`
+}
+
+export function managerPostingApplicationDetailPath(applicationId: number) {
+  return `/manager/postings/applications/${applicationId}`
+}

From 64b1b0740fbfde182d96ebfecbd12f496c99a4cd Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 20:30:35 +0900
Subject: [PATCH 03/33] =?UTF-8?q?feat:=20=EC=82=AC=EC=9E=A5=EB=8B=98=20?=
 =?UTF-8?q?=EA=B5=AC=EC=9D=B8=EA=B5=AC=EC=A7=81=20feature=20=EC=8A=AC?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EC=8A=A4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useApplicationDetailViewModel.ts    |  49 ++++
 .../hooks/useApplicationListViewModel.ts      | 102 +++++++
 .../hooks/usePostingDetailViewModel.ts        |  40 +++
 .../manager/posting/hooks/usePostingForm.ts   | 221 +++++++++++++++
 .../posting/hooks/usePostingListViewModel.ts  |  67 +++++
 .../manager/posting/lib/applicationStatus.ts  | 117 ++++++++
 .../manager/posting/lib/postingStatus.ts      |  37 +++
 src/features/manager/posting/mocks/data.ts    | 264 ++++++++++++++++++
 src/features/manager/posting/mocks/store.ts   | 121 ++++++++
 src/features/manager/posting/types/posting.ts | 178 ++++++++++++
 .../manager/posting/ui/ApplicantCard.tsx      |  62 ++++
 src/features/manager/posting/ui/FilterBar.tsx |  52 ++++
 .../manager/posting/ui/HiringActionBar.tsx    |  51 ++++
 .../ui/ManagerApplicationStatusBadge.tsx      |  29 ++
 .../posting/ui/ManagerPostingStatusBadge.tsx  |  29 ++
 .../manager/posting/ui/PostingFormFields.tsx  | 197 +++++++++++++
 .../manager/posting/ui/PostingListCard.tsx    |  71 +++++
 .../manager/posting/ui/ScheduleEditor.tsx     | 177 ++++++++++++
 src/features/manager/posting/ui/icons.tsx     | 164 +++++++++++
 19 files changed, 2028 insertions(+)
 create mode 100644 src/features/manager/posting/hooks/useApplicationDetailViewModel.ts
 create mode 100644 src/features/manager/posting/hooks/useApplicationListViewModel.ts
 create mode 100644 src/features/manager/posting/hooks/usePostingDetailViewModel.ts
 create mode 100644 src/features/manager/posting/hooks/usePostingForm.ts
 create mode 100644 src/features/manager/posting/hooks/usePostingListViewModel.ts
 create mode 100644 src/features/manager/posting/lib/applicationStatus.ts
 create mode 100644 src/features/manager/posting/lib/postingStatus.ts
 create mode 100644 src/features/manager/posting/mocks/data.ts
 create mode 100644 src/features/manager/posting/mocks/store.ts
 create mode 100644 src/features/manager/posting/types/posting.ts
 create mode 100644 src/features/manager/posting/ui/ApplicantCard.tsx
 create mode 100644 src/features/manager/posting/ui/FilterBar.tsx
 create mode 100644 src/features/manager/posting/ui/HiringActionBar.tsx
 create mode 100644 src/features/manager/posting/ui/ManagerApplicationStatusBadge.tsx
 create mode 100644 src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
 create mode 100644 src/features/manager/posting/ui/PostingFormFields.tsx
 create mode 100644 src/features/manager/posting/ui/PostingListCard.tsx
 create mode 100644 src/features/manager/posting/ui/ScheduleEditor.tsx
 create mode 100644 src/features/manager/posting/ui/icons.tsx

diff --git a/src/features/manager/posting/hooks/useApplicationDetailViewModel.ts b/src/features/manager/posting/hooks/useApplicationDetailViewModel.ts
new file mode 100644
index 00000000..cd08c19d
--- /dev/null
+++ b/src/features/manager/posting/hooks/useApplicationDetailViewModel.ts
@@ -0,0 +1,49 @@
+import { useMemo, useState } from 'react'
+
+import {
+  DECISION_COPY,
+  isTerminalApplicationStatus,
+  type HiringDecision,
+} from '@/features/manager/posting/lib/applicationStatus'
+import { useMockPostingStore } from '@/features/manager/posting/mocks/store'
+import { showToast } from '@/shared/stores/useToastStore'
+
+/** 지원자 상세 — 인적사항 조회 + 채용 결정(서류합격·최종합격·불합격) */
+export function useApplicationDetailViewModel(applicationId: number) {
+  const applications = useMockPostingStore(state => state.applications)
+  const updateApplicationStatus = useMockPostingStore(
+    state => state.updateApplicationStatus
+  )
+
+  const [pendingDecision, setPendingDecision] = useState<HiringDecision | null>(
+    null
+  )
+
+  const application = useMemo(
+    () => applications.find(item => item.id === applicationId) ?? null,
+    [applications, applicationId]
+  )
+
+  const isTerminal = application
+    ? isTerminalApplicationStatus(application.status)
+    : false
+
+  const confirmDecision = () => {
+    if (!pendingDecision) return
+    updateApplicationStatus(applicationId, pendingDecision)
+    showToast(DECISION_COPY[pendingDecision].toast)
+    setPendingDecision(null)
+  }
+
+  return {
+    application,
+    isNotFound: application === null,
+    /** 종료된 지원서는 채용 결정 액션을 숨깁니다 */
+    canDecide: application !== null && !isTerminal,
+    pendingDecision,
+    decisionCopy: pendingDecision ? DECISION_COPY[pendingDecision] : null,
+    requestDecision: (decision: HiringDecision) => setPendingDecision(decision),
+    cancelDecision: () => setPendingDecision(null),
+    confirmDecision,
+  }
+}
diff --git a/src/features/manager/posting/hooks/useApplicationListViewModel.ts b/src/features/manager/posting/hooks/useApplicationListViewModel.ts
new file mode 100644
index 00000000..6aab2d49
--- /dev/null
+++ b/src/features/manager/posting/hooks/useApplicationListViewModel.ts
@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import type { ApplicationStatusFilter } from '@/features/manager/posting/lib/applicationStatus'
+import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
+import {
+  MOCK_LATENCY,
+  useMockPostingStore,
+} from '@/features/manager/posting/mocks/store'
+import {
+  ALL_WORKSPACES,
+  type WorkspaceFilter,
+} from '@/features/manager/posting/hooks/usePostingListViewModel'
+
+/** 커서 기반 무한스크롤 흉내 — 한 번에 노출할 개수 */
+const PAGE_SIZE = 4
+
+interface UseApplicationListOptions {
+  /** 특정 공고의 지원자만 조회 (공고 상세 → 지원자 보기) */
+  postingId?: number
+}
+
+/** 지원자 목록 — 업장·상태 필터 + 무한스크롤 */
+export function useApplicationListViewModel({
+  postingId,
+}: UseApplicationListOptions = {}) {
+  const applications = useMockPostingStore(state => state.applications)
+
+  const [workspaceFilter, setWorkspaceFilterState] =
+    useState<WorkspaceFilter>(ALL_WORKSPACES)
+  const [statusFilter, setStatusFilterState] =
+    useState<ApplicationStatusFilter>('ALL')
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), MOCK_LATENCY)
+    return () => clearTimeout(timer)
+  }, [])
+
+  // 필터가 바뀌면 페이지를 처음으로 되돌림
+  const setWorkspaceFilter = useCallback((value: WorkspaceFilter) => {
+    setWorkspaceFilterState(value)
+    setVisibleCount(PAGE_SIZE)
+  }, [])
+
+  const setStatusFilter = useCallback((value: ApplicationStatusFilter) => {
+    setStatusFilterState(value)
+    setVisibleCount(PAGE_SIZE)
+  }, [])
+
+  const filteredApplications = useMemo(
+    () =>
+      applications.filter(application => {
+        if (postingId !== undefined && application.postingId !== postingId) {
+          return false
+        }
+        if (
+          workspaceFilter !== ALL_WORKSPACES &&
+          application.workspaceId !== workspaceFilter
+        ) {
+          return false
+        }
+        if (statusFilter !== 'ALL' && application.status !== statusFilter) {
+          return false
+        }
+        return true
+      }),
+    [applications, postingId, workspaceFilter, statusFilter]
+  )
+
+  const visibleApplications = filteredApplications.slice(0, visibleCount)
+  const hasNextPage = visibleCount < filteredApplications.length
+
+  const fetchNextPage = useCallback(() => {
+    setVisibleCount(prev => prev + PAGE_SIZE)
+  }, [])
+
+  const workspaceOptions = useMemo(
+    () => [
+      { value: ALL_WORKSPACES as WorkspaceFilter, label: '전체 업장' },
+      ...MOCK_WORKSPACES.map(workspace => ({
+        value: workspace.id as WorkspaceFilter,
+        label: workspace.businessName,
+      })),
+    ],
+    []
+  )
+
+  return {
+    applications: visibleApplications,
+    totalCount: filteredApplications.length,
+    isLoading,
+    isEmpty: !isLoading && filteredApplications.length === 0,
+    hasNextPage,
+    fetchNextPage,
+    workspaceFilter,
+    setWorkspaceFilter,
+    statusFilter,
+    setStatusFilter,
+    workspaceOptions,
+  }
+}
diff --git a/src/features/manager/posting/hooks/usePostingDetailViewModel.ts b/src/features/manager/posting/hooks/usePostingDetailViewModel.ts
new file mode 100644
index 00000000..2e8591f7
--- /dev/null
+++ b/src/features/manager/posting/hooks/usePostingDetailViewModel.ts
@@ -0,0 +1,40 @@
+import { useMemo, useState } from 'react'
+
+import { useMockPostingStore } from '@/features/manager/posting/mocks/store'
+import { showToast } from '@/shared/stores/useToastStore'
+
+/** 공고 상세 — 조회 + 모집 마감 처리 */
+export function usePostingDetailViewModel(postingId: number) {
+  const postings = useMockPostingStore(state => state.postings)
+  const applications = useMockPostingStore(state => state.applications)
+  const closePosting = useMockPostingStore(state => state.closePosting)
+
+  const [isCloseModalOpen, setIsCloseModalOpen] = useState(false)
+
+  const posting = useMemo(
+    () => postings.find(item => item.id === postingId) ?? null,
+    [postings, postingId]
+  )
+
+  // 목업 지원자 수 — 실제 API에서는 공고 상세 응답 필드 사용
+  const applicantCount = useMemo(
+    () => applications.filter(item => item.postingId === postingId).length,
+    [applications, postingId]
+  )
+
+  const confirmClose = () => {
+    closePosting(postingId)
+    setIsCloseModalOpen(false)
+    showToast('모집을 마감했어요')
+  }
+
+  return {
+    posting,
+    applicantCount,
+    isNotFound: posting === null,
+    isCloseModalOpen,
+    openCloseModal: () => setIsCloseModalOpen(true),
+    closeCloseModal: () => setIsCloseModalOpen(false),
+    confirmClose,
+  }
+}
diff --git a/src/features/manager/posting/hooks/usePostingForm.ts b/src/features/manager/posting/hooks/usePostingForm.ts
new file mode 100644
index 00000000..bb93cedf
--- /dev/null
+++ b/src/features/manager/posting/hooks/usePostingForm.ts
@@ -0,0 +1,221 @@
+import { useCallback, useMemo, useState } from 'react'
+
+import {
+  MAX_KEYWORDS,
+  type PaymentType,
+  type Posting,
+  type PostingFormErrors,
+  type PostingFormSchedule,
+  type PostingFormValues,
+  type WorkingDay,
+} from '@/features/manager/posting/types/posting'
+
+let scheduleKeySeq = 0
+
+function createEmptySchedule(): PostingFormSchedule {
+  scheduleKeySeq += 1
+  return {
+    key: `new-${scheduleKeySeq}`,
+    id: null,
+    workingDays: [],
+    startTime: '',
+    endTime: '',
+    position: '',
+    positionsNeeded: 1,
+  }
+}
+
+function createInitialValues(posting?: Posting | null): PostingFormValues {
+  if (!posting) {
+    return {
+      workspaceId: null,
+      title: '',
+      keywords: [],
+      schedules: [createEmptySchedule()],
+      paymentType: 'HOURLY',
+      payAmount: '',
+      description: '',
+    }
+  }
+
+  return {
+    workspaceId: posting.workspaceId,
+    title: posting.title,
+    keywords: [...posting.keywords],
+    schedules: posting.schedules.map(schedule => {
+      scheduleKeySeq += 1
+      return {
+        ...schedule,
+        workingDays: [...schedule.workingDays],
+        key: `existing-${schedule.id ?? scheduleKeySeq}`,
+      }
+    }),
+    paymentType: posting.paymentType,
+    payAmount: String(posting.payAmount),
+    description: posting.description,
+  }
+}
+
+function validate(values: PostingFormValues): PostingFormErrors {
+  const errors: PostingFormErrors = {}
+
+  if (values.workspaceId === null) {
+    errors.workspaceId = '업장을 선택해 주세요'
+  }
+  if (values.title.trim() === '') {
+    errors.title = '공고 제목을 입력해 주세요'
+  }
+  if (values.keywords.length === 0) {
+    errors.keywords = '업직종을 1개 이상 선택해 주세요'
+  }
+
+  const hasIncompleteSchedule = values.schedules.some(
+    schedule =>
+      schedule.workingDays.length === 0 ||
+      schedule.startTime === '' ||
+      schedule.endTime === ''
+  )
+  if (values.schedules.length === 0) {
+    errors.schedules = '근무일정을 1개 이상 추가해 주세요'
+  } else if (hasIncompleteSchedule) {
+    errors.schedules = '근무요일과 시작·종료 시간을 모두 입력해 주세요'
+  }
+
+  const payAmount = Number(values.payAmount.replace(/[^0-9]/g, ''))
+  if (values.payAmount.trim() === '' || payAmount <= 0) {
+    errors.payAmount = '급여를 입력해 주세요'
+  }
+
+  return errors
+}
+
+interface UsePostingFormOptions {
+  /** 수정 모드일 때 프리필할 공고 */
+  posting?: Posting | null
+}
+
+/**
+ * 공고 등록·수정 공용 폼 view-model.
+ * 프로젝트 관행에 따라 react-hook-form/zod 대신 useState 기반으로 구성합니다
+ * (참고: features/store-register/hooks/useStoreRegisterWizard.ts).
+ */
+export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
+  const isEditMode = Boolean(posting)
+  const [values, setValues] = useState<PostingFormValues>(() =>
+    createInitialValues(posting)
+  )
+  /** 제출을 한 번이라도 시도했을 때만 에러를 노출 */
+  const [isSubmitAttempted, setIsSubmitAttempted] = useState(false)
+
+  const errors = useMemo(() => validate(values), [values])
+  const isValid = Object.keys(errors).length === 0
+  const visibleErrors: PostingFormErrors = isSubmitAttempted ? errors : {}
+  /**
+   * 제출 전에는 버튼을 활성화해 두고, 클릭 시 검증 에러를 노출합니다.
+   * (처음부터 비활성화하면 무엇이 비었는지 알 수 없어 막다른 길이 됩니다)
+   */
+  const isSubmitDisabled = isSubmitAttempted && !isValid
+
+  const setWorkspaceId = useCallback((workspaceId: number) => {
+    setValues(prev => ({ ...prev, workspaceId }))
+  }, [])
+
+  const setTitle = useCallback((title: string) => {
+    setValues(prev => ({ ...prev, title }))
+  }, [])
+
+  const toggleKeyword = useCallback((keyword: string) => {
+    setValues(prev => {
+      if (prev.keywords.includes(keyword)) {
+        return {
+          ...prev,
+          keywords: prev.keywords.filter(item => item !== keyword),
+        }
+      }
+      if (prev.keywords.length >= MAX_KEYWORDS) return prev
+      return { ...prev, keywords: [...prev.keywords, keyword] }
+    })
+  }, [])
+
+  const setPaymentType = useCallback((paymentType: PaymentType) => {
+    setValues(prev => ({ ...prev, paymentType }))
+  }, [])
+
+  const setPayAmount = useCallback((payAmount: string) => {
+    // 숫자만 허용 후 천 단위 구분 표시는 UI에서 처리
+    setValues(prev => ({
+      ...prev,
+      payAmount: payAmount.replace(/[^0-9]/g, ''),
+    }))
+  }, [])
+
+  const setDescription = useCallback((description: string) => {
+    setValues(prev => ({ ...prev, description }))
+  }, [])
+
+  const addSchedule = useCallback(() => {
+    setValues(prev => ({
+      ...prev,
+      schedules: [...prev.schedules, createEmptySchedule()],
+    }))
+  }, [])
+
+  const removeSchedule = useCallback((key: string) => {
+    setValues(prev => ({
+      ...prev,
+      schedules: prev.schedules.filter(schedule => schedule.key !== key),
+    }))
+  }, [])
+
+  const updateSchedule = useCallback(
+    (key: string, patch: Partial<Omit<PostingFormSchedule, 'key'>>) => {
+      setValues(prev => ({
+        ...prev,
+        schedules: prev.schedules.map(schedule =>
+          schedule.key === key ? { ...schedule, ...patch } : schedule
+        ),
+      }))
+    },
+    []
+  )
+
+  const toggleScheduleDay = useCallback((key: string, day: WorkingDay) => {
+    setValues(prev => ({
+      ...prev,
+      schedules: prev.schedules.map(schedule => {
+        if (schedule.key !== key) return schedule
+        const workingDays = schedule.workingDays.includes(day)
+          ? schedule.workingDays.filter(item => item !== day)
+          : [...schedule.workingDays, day]
+        return { ...schedule, workingDays }
+      }),
+    }))
+  }, [])
+
+  /** 제출 시도 — 유효하면 true를 반환하고, 아니면 에러를 노출합니다 */
+  const attemptSubmit = useCallback(() => {
+    setIsSubmitAttempted(true)
+    return Object.keys(validate(values)).length === 0
+  }, [values])
+
+  return {
+    values,
+    errors: visibleErrors,
+    isValid,
+    isSubmitDisabled,
+    isEditMode,
+    setWorkspaceId,
+    setTitle,
+    toggleKeyword,
+    setPaymentType,
+    setPayAmount,
+    setDescription,
+    addSchedule,
+    removeSchedule,
+    updateSchedule,
+    toggleScheduleDay,
+    attemptSubmit,
+  }
+}
+
+export type PostingFormViewModel = ReturnType<typeof usePostingForm>
diff --git a/src/features/manager/posting/hooks/usePostingListViewModel.ts b/src/features/manager/posting/hooks/usePostingListViewModel.ts
new file mode 100644
index 00000000..00148dbc
--- /dev/null
+++ b/src/features/manager/posting/hooks/usePostingListViewModel.ts
@@ -0,0 +1,67 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
+import {
+  MOCK_LATENCY,
+  useMockPostingStore,
+} from '@/features/manager/posting/mocks/store'
+import type { PostingStatusFilter } from '@/features/manager/posting/lib/postingStatus'
+
+export const ALL_WORKSPACES = 'ALL' as const
+export type WorkspaceFilter = number | typeof ALL_WORKSPACES
+
+/** 내 공고 목록 — 업장·상태 필터 + 로딩(스켈레톤) 상태 */
+export function usePostingListViewModel() {
+  const postings = useMockPostingStore(state => state.postings)
+
+  const [workspaceFilter, setWorkspaceFilter] =
+    useState<WorkspaceFilter>(ALL_WORKSPACES)
+  const [statusFilter, setStatusFilter] = useState<PostingStatusFilter>('ALL')
+  const [isLoading, setIsLoading] = useState(true)
+
+  // 목업 로딩 지연 — 스켈레톤 확인용
+  useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), MOCK_LATENCY)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const filteredPostings = useMemo(
+    () =>
+      postings.filter(posting => {
+        if (
+          workspaceFilter !== ALL_WORKSPACES &&
+          posting.workspaceId !== workspaceFilter
+        ) {
+          return false
+        }
+        if (statusFilter !== 'ALL' && posting.status !== statusFilter) {
+          return false
+        }
+        return true
+      }),
+    [postings, workspaceFilter, statusFilter]
+  )
+
+  const workspaceOptions = useMemo(
+    () => [
+      { value: ALL_WORKSPACES as WorkspaceFilter, label: '전체 업장' },
+      ...MOCK_WORKSPACES.map(workspace => ({
+        value: workspace.id as WorkspaceFilter,
+        label: workspace.businessName,
+      })),
+    ],
+    []
+  )
+
+  return {
+    postings: filteredPostings,
+    totalCount: filteredPostings.length,
+    isLoading,
+    isEmpty: !isLoading && filteredPostings.length === 0,
+    workspaceFilter,
+    setWorkspaceFilter,
+    statusFilter,
+    setStatusFilter,
+    workspaceOptions,
+  }
+}
diff --git a/src/features/manager/posting/lib/applicationStatus.ts b/src/features/manager/posting/lib/applicationStatus.ts
new file mode 100644
index 00000000..892e28db
--- /dev/null
+++ b/src/features/manager/posting/lib/applicationStatus.ts
@@ -0,0 +1,117 @@
+import type { ApplicationStatus } from '@/features/manager/posting/types/posting'
+
+interface ApplicationStatusBadgeStyle {
+  label: string
+  containerClassName: string
+  textClassName: string
+}
+
+/**
+ * 지원 상태 배지 (PDF ApplicationStatusBadge).
+ * 기존 `shared/ui/home/ApplicationStatusBadge`는 유저 측 4상태 전용이므로
+ * 매니저 측 6상태는 여기서 별도로 매핑합니다.
+ */
+const APPLICATION_STATUS_BADGE: Record<
+  ApplicationStatus,
+  ApplicationStatusBadgeStyle
+> = {
+  SUBMITTED: {
+    label: '지원완료',
+    containerClassName: 'bg-white border border-line-1',
+    textClassName: 'text-text-70',
+  },
+  SHORTLISTED: {
+    label: '서류합격',
+    containerClassName: 'bg-main-100 border border-main-100',
+    textClassName: 'text-sub',
+  },
+  ACCEPTED: {
+    label: '최종합격',
+    containerClassName: 'bg-main border border-main',
+    textClassName: 'text-white',
+  },
+  REJECTED: {
+    label: '불합격',
+    containerClassName: 'bg-white border border-error',
+    textClassName: 'text-error',
+  },
+  CANCELLED: {
+    label: '취소',
+    containerClassName: 'bg-bg-dark border border-bg-dark',
+    textClassName: 'text-text-50',
+  },
+  EXPIRED: {
+    label: '만료',
+    containerClassName: 'bg-bg-dark border border-bg-dark',
+    textClassName: 'text-text-50',
+  },
+  DELETED: {
+    label: '삭제됨',
+    containerClassName: 'bg-bg-dark border border-bg-dark',
+    textClassName: 'text-text-50',
+  },
+}
+
+export function resolveApplicationStatusBadge(status: ApplicationStatus) {
+  return APPLICATION_STATUS_BADGE[status]
+}
+
+/** 더 이상 상태를 변경할 수 없는(종료된) 지원서 — 채용 결정 액션을 숨깁니다 */
+const TERMINAL_STATUSES: ApplicationStatus[] = [
+  'ACCEPTED',
+  'REJECTED',
+  'CANCELLED',
+  'EXPIRED',
+  'DELETED',
+]
+
+export function isTerminalApplicationStatus(status: ApplicationStatus) {
+  return TERMINAL_STATUSES.includes(status)
+}
+
+/** 채용 결정 액션 — PDF 하단 ActionBar */
+export const HIRING_DECISIONS = [
+  { status: 'SHORTLISTED', label: '서류합격' },
+  { status: 'ACCEPTED', label: '최종합격' },
+  { status: 'REJECTED', label: '불합격' },
+] as const
+
+export type HiringDecision = (typeof HIRING_DECISIONS)[number]['status']
+
+interface DecisionCopy {
+  title: string
+  description?: string
+  toast: string
+}
+
+/** 채용 결정 확인 모달 · 성공 Toast 문구 */
+export const DECISION_COPY: Record<HiringDecision, DecisionCopy> = {
+  SHORTLISTED: {
+    title: '서류합격 처리할까요?',
+    description: '지원자에게 서류합격 결과가 전달됩니다.',
+    toast: '서류합격 처리됐어요',
+  },
+  ACCEPTED: {
+    title: '최종합격 처리할까요?',
+    description: '최종합격 시 해당 지원자가 업장 근무자로 자동 등록됩니다.',
+    toast: '최종합격 처리됐어요',
+  },
+  REJECTED: {
+    title: '불합격 처리할까요?',
+    description: '불합격 처리 후에는 상태를 변경할 수 없어요.',
+    toast: '불합격 처리됐어요',
+  },
+}
+
+export const APPLICATION_STATUS_FILTER_OPTIONS = [
+  { value: 'ALL', label: '전체 상태' },
+  { value: 'SUBMITTED', label: '지원완료' },
+  { value: 'SHORTLISTED', label: '서류합격' },
+  { value: 'ACCEPTED', label: '최종합격' },
+  { value: 'REJECTED', label: '불합격' },
+  { value: 'CANCELLED', label: '취소' },
+  { value: 'EXPIRED', label: '만료' },
+] as const
+
+export type ApplicationStatusFilter =
+  (typeof APPLICATION_STATUS_FILTER_OPTIONS)[number]['value']
diff --git a/src/features/manager/posting/lib/postingStatus.ts b/src/features/manager/posting/lib/postingStatus.ts
new file mode 100644
index 00000000..b32b4742
--- /dev/null
+++ b/src/features/manager/posting/lib/postingStatus.ts
@@ -0,0 +1,37 @@
+import type { PostingStatus } from '@/features/manager/posting/types/posting'
+
+interface PostingStatusBadgeStyle {
+  label: string
+  containerClassName: string
+  textClassName: string
+}
+
+/**
+ * 공고 상태 배지 스타일.
+ * PDF 기준: 마감임박(warning)은 이번 범위에서 미사용 — API에 마감일 필드 근거 없음.
+ */
+const POSTING_STATUS_BADGE: Record<PostingStatus, PostingStatusBadgeStyle> = {
+  OPEN: {
+    label: '모집중',
+    containerClassName: 'bg-main-100',
+    textClassName: 'text-sub',
+  },
+  CLOSED: {
+    label: '모집완료',
+    containerClassName: 'bg-bg-dark',
+    textClassName: 'text-text-70',
+  },
+}
+
+export function resolvePostingStatusBadge(status: PostingStatus) {
+  return POSTING_STATUS_BADGE[status]
+}
+
+export const POSTING_STATUS_FILTER_OPTIONS = [
+  { value: 'ALL', label: '전체 상태' },
+  { value: 'OPEN', label: '모집중' },
+  { value: 'CLOSED', label: '모집완료' },
+] as const
+
+export type PostingStatusFilter =
+  (typeof POSTING_STATUS_FILTER_OPTIONS)[number]['value']
diff --git a/src/features/manager/posting/mocks/data.ts b/src/features/manager/posting/mocks/data.ts
new file mode 100644
index 00000000..4afb79bb
--- /dev/null
+++ b/src/features/manager/posting/mocks/data.ts
@@ -0,0 +1,264 @@
+/**
+ * API 미연동 단계용 목업 데이터.
+ * 추후 `features/manager/posting/api/`의 axios 호출로 교체됩니다.
+ */
+import type {
+  Application,
+  Posting,
+  Workspace,
+} from '@/features/manager/posting/types/posting'
+
+export const MOCK_WORKSPACES: Workspace[] = [
+  { id: 1, businessName: '알터 강남점', businessType: '카페' },
+  { id: 2, businessName: '알터 성수 로스터리', businessType: '카페' },
+]
+
+/** 업직종 키워드 — GET /manager/postings/available-keywords 대체 */
+export const MOCK_KEYWORDS: string[] = [
+  '카페',
+  '홀서빙',
+  '바리스타',
+  '베이킹',
+  '주방보조',
+  '마감청소',
+  '캐셔',
+  '배달',
+]
+
+export const MOCK_POSTINGS: Posting[] = [
+  {
+    id: 1,
+    workspaceId: 1,
+    workspaceName: '알터 강남점',
+    businessType: '카페',
+    title: '주말 홀서빙 · 오후 마감조 구합니다',
+    description:
+      '주말 오후 마감조 홀서빙 아르바이트를 구합니다. 성실하게 근무하실 분 환영해요. 경험자 우대하며, 미경험자도 교육 후 근무 가능합니다.',
+    keywords: ['카페', '홀서빙'],
+    paymentType: 'HOURLY',
+    payAmount: 12000,
+    status: 'OPEN',
+    applicantCount: 6,
+    createdAt: '2026-07-20T09:00:00.000Z',
+    schedules: [
+      {
+        id: 101,
+        workingDays: ['SATURDAY', 'SUNDAY'],
+        startTime: '17:00',
+        endTime: '22:00',
+        position: '홀서빙',
+        positionsNeeded: 2,
+      },
+      {
+        id: 102,
+        workingDays: ['FRIDAY', 'SATURDAY'],
+        startTime: '21:00',
+        endTime: '23:00',
+        position: '마감 청소',
+        positionsNeeded: 1,
+      },
+    ],
+  },
+  {
+    id: 2,
+    workspaceId: 1,
+    workspaceName: '알터 강남점',
+    businessType: '카페',
+    title: '평일 오픈 바리스타',
+    description:
+      '평일 오픈조 바리스타를 모집합니다. 바리스타 자격증 보유자 우대합니다.',
+    keywords: ['카페', '바리스타'],
+    paymentType: 'HOURLY',
+    payAmount: 12500,
+    status: 'OPEN',
+    applicantCount: 3,
+    createdAt: '2026-07-18T09:00:00.000Z',
+    schedules: [
+      {
+        id: 201,
+        workingDays: ['MONDAY', 'WEDNESDAY', 'FRIDAY'],
+        startTime: '07:00',
+        endTime: '12:00',
+        position: '바리스타',
+        positionsNeeded: 1,
+      },
+    ],
+  },
+  {
+    id: 3,
+    workspaceId: 2,
+    workspaceName: '알터 성수 로스터리',
+    businessType: '카페',
+    title: '여름 성수기 주말 단기',
+    description: '여름 성수기 주말 단기 아르바이트를 모집합니다.',
+    keywords: ['카페', '베이킹'],
+    paymentType: 'DAILY',
+    payAmount: 90000,
+    status: 'CLOSED',
+    applicantCount: 4,
+    createdAt: '2026-07-05T09:00:00.000Z',
+    schedules: [
+      {
+        id: 301,
+        workingDays: ['SATURDAY', 'SUNDAY'],
+        startTime: '13:00',
+        endTime: '18:00',
+        position: '베이킹 보조',
+        positionsNeeded: 2,
+      },
+    ],
+  },
+]
+
+export const MOCK_APPLICATIONS: Application[] = [
+  {
+    id: 1,
+    postingId: 1,
+    workspaceId: 1,
+    workspaceName: '알터 강남점',
+    status: 'SUBMITTED',
+    appliedAt: '2026-07-26T07:00:00.000Z',
+    schedule: {
+      workingDays: ['SATURDAY', 'SUNDAY'],
+      startTime: '17:00',
+      endTime: '22:00',
+      position: '홀서빙',
+    },
+    description:
+      '카페 홀 경험 1년 있습니다. 주말 마감조 성실하게 근무 가능하고, 바리스타 자격증도 보유하고 있어 음료 제조도 도와드릴 수 있습니다. 잘 부탁드립니다!',
+    applicant: {
+      name: '김지원',
+      phoneNumber: '010-2345-6789',
+      birthDate: '2001.03.14',
+      gender: '여성',
+      email: 'jiwon.k@example.com',
+      certificates: [
+        { name: '바리스타 2급', issuer: '한국커피협회', acquiredAt: '2023.08' },
+        {
+          name: '위생교육 이수증',
+          issuer: '식품안전정보원',
+          acquiredAt: '2024.02',
+        },
+      ],
+    },
+  },
+  {
+    id: 2,
+    postingId: 2,
+    workspaceId: 1,
+    workspaceName: '알터 강남점',
+    status: 'SHORTLISTED',
+    appliedAt: '2026-07-26T04:00:00.000Z',
+    schedule: {
+      workingDays: ['MONDAY', 'WEDNESDAY', 'FRIDAY'],
+      startTime: '09:00',
+      endTime: '14:00',
+      position: '바리스타',
+    },
+    description:
+      '바리스타로 2년간 근무했습니다. 평일 오전 근무 가능하며 오픈 업무 경험이 많습니다.',
+    applicant: {
+      name: '이서준',
+      phoneNumber: '010-3456-7890',
+      birthDate: '1998.06.21',
+      gender: '남성',
+      email: 'seojun.lee@example.com',
+      certificates: [
+        { name: '바리스타 1급', issuer: '한국커피협회', acquiredAt: '2022.05' },
+      ],
+    },
+  },
+  {
+    id: 3,
+    postingId: 3,
+    workspaceId: 2,
+    workspaceName: '알터 성수 로스터리',
+    status: 'ACCEPTED',
+    appliedAt: '2026-07-25T09:00:00.000Z',
+    schedule: {
+      workingDays: ['SATURDAY', 'SUNDAY'],
+      startTime: '13:00',
+      endTime: '18:00',
+      position: '베이킹 보조',
+    },
+    description:
+      '베이커리 아르바이트 경험이 있어 빠르게 적응할 수 있습니다. 주말 오후 근무 가능합니다.',
+    applicant: {
+      name: '박하늘',
+      phoneNumber: '010-8765-4321',
+      birthDate: '1999.11.02',
+      gender: '여성',
+      email: 'haneul@example.com',
+      certificates: [],
+    },
+  },
+  {
+    id: 4,
+    postingId: 1,
+    workspaceId: 1,
+    workspaceName: '알터 강남점',
+    status: 'REJECTED',
+    appliedAt: '2026-07-24T09:00:00.000Z',
+    schedule: {
+      workingDays: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY'],
+      startTime: '18:00',
+      endTime: '22:00',
+      position: '마감조',
+    },
+    description: '평일 저녁 근무 가능합니다. 성실하게 근무하겠습니다.',
+    applicant: {
+      name: '정민재',
+      phoneNumber: '010-1122-3344',
+      birthDate: '2000.01.09',
+      gender: '남성',
+      email: 'minjae.j@example.com',
+      certificates: [],
+    },
+  },
+  {
+    id: 5,
+    postingId: 2,
+    workspaceId: 1,
+    workspaceName: '알터 강남점',
+    status: 'CANCELLED',
+    appliedAt: '2026-07-23T09:00:00.000Z',
+    schedule: {
+      workingDays: ['MONDAY', 'WEDNESDAY'],
+      startTime: '07:00',
+      endTime: '12:00',
+      position: '바리스타',
+    },
+    description: '오전 근무 가능합니다.',
+    applicant: {
+      name: '최유나',
+      phoneNumber: '010-5566-7788',
+      birthDate: '2002.04.18',
+      gender: '여성',
+      email: 'yuna.choi@example.com',
+      certificates: [],
+    },
+  },
+  {
+    id: 6,
+    postingId: 3,
+    workspaceId: 2,
+    workspaceName: '알터 성수 로스터리',
+    status: 'EXPIRED',
+    appliedAt: '2026-07-20T09:00:00.000Z',
+    schedule: {
+      workingDays: ['SATURDAY'],
+      startTime: '13:00',
+      endTime: '18:00',
+      position: '베이킹 보조',
+    },
+    description: '주말 단기 근무 희망합니다.',
+    applicant: {
+      name: '한소희',
+      phoneNumber: '010-9900-1122',
+      birthDate: '1997.09.30',
+      gender: '여성',
+      email: 'sohee.han@example.com',
+      certificates: [],
+    },
+  },
+]
diff --git a/src/features/manager/posting/mocks/store.ts b/src/features/manager/posting/mocks/store.ts
new file mode 100644
index 00000000..1894b914
--- /dev/null
+++ b/src/features/manager/posting/mocks/store.ts
@@ -0,0 +1,121 @@
+/**
+ * 목업 인메모리 스토어.
+ *
+ * API 연동 전까지 화면 간 상태(등록/수정/마감/채용 결정)를 유지하기 위한 임시 저장소입니다.
+ * 실제 API 연동 시 이 파일과 `mocks/data.ts`는 삭제하고,
+ * 각 view-model 훅을 react-query(useQuery/useMutation)로 교체하면 됩니다.
+ */
+import { create } from 'zustand'
+
+import {
+  MOCK_APPLICATIONS,
+  MOCK_POSTINGS,
+} from '@/features/manager/posting/mocks/data'
+import type {
+  Application,
+  ApplicationStatus,
+  Posting,
+  PostingFormSchedule,
+  PostingFormValues,
+  PostingSchedule,
+} from '@/features/manager/posting/types/posting'
+
+/** 네트워크 지연 흉내 — 스켈레톤/로딩 상태를 확인하기 위함 */
+export const MOCK_LATENCY = 400
+
+interface MockPostingState {
+  postings: Posting[]
+  applications: Application[]
+  createPosting: (values: PostingFormValues, workspaceName: string) => number
+  updatePosting: (postingId: number, values: PostingFormValues) => void
+  closePosting: (postingId: number) => void
+  updateApplicationStatus: (
+    applicationId: number,
+    status: ApplicationStatus
+  ) => void
+}
+
+let nextPostingId = MOCK_POSTINGS.length + 1
+
+function toPayAmount(payAmount: string): number {
+  const parsed = Number(payAmount.replace(/[^0-9]/g, ''))
+  return Number.isNaN(parsed) ? 0 : parsed
+}
+
+/** 폼 전용 필드(key)를 제거해 저장용 일정으로 변환 */
+function toPostingSchedules(
+  schedules: PostingFormSchedule[]
+): PostingSchedule[] {
+  return schedules.map(schedule => ({
+    id: schedule.id,
+    workingDays: schedule.workingDays,
+    startTime: schedule.startTime,
+    endTime: schedule.endTime,
+    position: schedule.position,
+    positionsNeeded: schedule.positionsNeeded,
+  }))
+}
+
+export const useMockPostingStore = create<MockPostingState>((set, get) => ({
+  postings: MOCK_POSTINGS,
+  applications: MOCK_APPLICATIONS,
+
+  createPosting: (values, workspaceName) => {
+    nextPostingId += 1
+    const id = nextPostingId
+    const posting: Posting = {
+      id,
+      workspaceId: values.workspaceId ?? 0,
+      workspaceName,
+      businessType: '카페',
+      title: values.title.trim(),
+      description: values.description.trim(),
+      keywords: values.keywords,
+      paymentType: values.paymentType,
+      payAmount: toPayAmount(values.payAmount),
+      status: 'OPEN',
+      applicantCount: 0,
+      createdAt: new Date().toISOString(),
+      schedules: toPostingSchedules(values.schedules),
+    }
+    set(state => ({ postings: [posting, ...state.postings] }))
+    return id
+  },
+
+  updatePosting: (postingId, values) => {
+    set(state => ({
+      postings: state.postings.map(posting =>
+        posting.id === postingId
+          ? {
+              ...posting,
+              title: values.title.trim(),
+              description: values.description.trim(),
+              keywords: values.keywords,
+              paymentType: values.paymentType,
+              payAmount: toPayAmount(values.payAmount),
+              schedules: toPostingSchedules(values.schedules),
+            }
+          : posting
+      ),
+    }))
+  },
+
+  closePosting: postingId => {
+    set(state => ({
+      postings: state.postings.map(posting =>
+        posting.id === postingId ? { ...posting, status: 'CLOSED' } : posting
+      ),
+    }))
+  },
+
+  updateApplicationStatus: (applicationId, status) => {
+    const { applications } = get()
+    set({
+      applications: applications.map(application =>
+        application.id === applicationId
+          ? { ...application, status }
+          : application
+      ),
+    })
+  },
+}))
diff --git a/src/features/manager/posting/types/posting.ts b/src/features/manager/posting/types/posting.ts
new file mode 100644
index 00000000..bfc31425
--- /dev/null
+++ b/src/features/manager/posting/types/posting.ts
@@ -0,0 +1,178 @@
+/**
+ * 사장님 구인구직 — 매니저 측 공고/지원자 UI 모델
+ *
+ * 서버 DTO(`@/features/manager/home/types/posting`)와 지원 상태 enum
+ * (`@/features/user/home/applied-stores/types/application`)을 계승합니다.
+ * API 미연동 단계이므로 화면이 소비하는 UI 모델을 이 파일에서 정의합니다.
+ */
+import type { ApplicationApiStatus } from '@/features/user/home/applied-stores/types/application'
+
+// ---- 요일 ----
+export const WORKING_DAYS = [
+  'MONDAY',
+  'TUESDAY',
+  'WEDNESDAY',
+  'THURSDAY',
+  'FRIDAY',
+  'SATURDAY',
+  'SUNDAY',
+] as const
+
+export type WorkingDay = (typeof WORKING_DAYS)[number]
+
+export const WORKING_DAY_LABEL: Record<WorkingDay, string> = {
+  MONDAY: '월',
+  TUESDAY: '화',
+  WEDNESDAY: '수',
+  THURSDAY: '목',
+  FRIDAY: '금',
+  SATURDAY: '토',
+  SUNDAY: '일',
+}
+
+// ---- 급여 ----
+export const PAYMENT_TYPES = ['HOURLY', 'DAILY', 'WEEKLY', 'MONTHLY'] as const
+export type PaymentType = (typeof PAYMENT_TYPES)[number]
+
+export const PAYMENT_TYPE_LABEL: Record<PaymentType, string> = {
+  HOURLY: '시급',
+  DAILY: '일급',
+  WEEKLY: '주급',
+  MONTHLY: '월급',
+}
+
+// ---- 공고 상태 ----
+/** OPEN=모집중, CLOSED=모집완료 */
+export type PostingStatus = 'OPEN' | 'CLOSED'
+
+// ---- 지원 상태 ----
+/** 서버 enum을 그대로 사용 (SUBMITTED/SHORTLISTED/ACCEPTED/REJECTED/CANCELLED/EXPIRED/DELETED) */
+export type ApplicationStatus = ApplicationApiStatus
+
+// ---- UI 모델 ----
+export interface PostingSchedule {
+  /** 기존 일정은 서버 id, 신규 추가분은 null */
+  id: number | null
+  workingDays: WorkingDay[]
+  startTime: string
+  endTime: string
+  position: string
+  positionsNeeded: number
+}
+
+export interface Workspace {
+  id: number
+  businessName: string
+  businessType: string
+}
+
+export interface Posting {
+  id: number
+  workspaceId: number
+  workspaceName: string
+  businessType: string
+  title: string
+  description: string
+  keywords: string[]
+  paymentType: PaymentType
+  payAmount: number
+  status: PostingStatus
+  schedules: PostingSchedule[]
+  applicantCount: number
+  createdAt: string
+}
+
+export interface Certificate {
+  name: string
+  issuer: string
+  acquiredAt: string
+}
+
+export interface Applicant {
+  name: string
+  phoneNumber: string
+  birthDate: string
+  gender: '남성' | '여성'
+  email: string
+  certificates: Certificate[]
+}
+
+export interface Application {
+  id: number
+  postingId: number
+  workspaceId: number
+  workspaceName: string
+  status: ApplicationStatus
+  /** 지원 시각 (ISO) — 목록에서 '2시간 전' 형태로 표시 */
+  appliedAt: string
+  applicant: Applicant
+  /** 지원한 근무일정 */
+  schedule: Pick<
+    PostingSchedule,
+    'workingDays' | 'startTime' | 'endTime' | 'position'
+  >
+  /** 지원 메시지 */
+  description: string
+}
+
+// ---- 폼 모델 ----
+export interface PostingFormSchedule extends PostingSchedule {
+  /** 폼 내부에서 일정 카드를 구분하기 위한 로컬 키 */
+  key: string
+}
+
+export interface PostingFormValues {
+  workspaceId: number | null
+  title: string
+  keywords: string[]
+  schedules: PostingFormSchedule[]
+  paymentType: PaymentType
+  payAmount: string
+  description: string
+}
+
+/** 필드별 검증 에러 — 값이 있으면 해당 필드에 에러 표시 */
+export interface PostingFormErrors {
+  workspaceId?: string
+  title?: string
+  keywords?: string
+  schedules?: string
+  payAmount?: string
+}
+
+/** 공고당 선택 가능한 최대 키워드 수 */
+export const MAX_KEYWORDS = 3
+
+// ---- 포맷터 ----
+export function formatPay(paymentType: PaymentType, payAmount: number): string {
+  return `${PAYMENT_TYPE_LABEL[paymentType]} ${payAmount.toLocaleString('ko-KR')}원`
+}
+
+export function formatWorkingDays(days: WorkingDay[]): string {
+  if (days.length === 0) return '-'
+  return WORKING_DAYS.filter(day => days.includes(day))
+    .map(day => WORKING_DAY_LABEL[day])
+    .join('·')
+}
+
+export function formatTimeRange(startTime: string, endTime: string): string {
+  return `${startTime}~${endTime}`
+}
+
+/** 지원 시각을 '방금 전 / N시간 전 / 어제 / N일 전' 형태로 변환 */
+export function formatRelativeTime(isoDate: string, now = new Date()): string {
+  const target = new Date(isoDate)
+  const diffMs = now.getTime() - target.getTime()
+  if (Number.isNaN(diffMs)) return ''
+
+  const diffMinutes = Math.floor(diffMs / (1000 * 60))
+  if (diffMinutes < 1) return '방금 전'
+  if (diffMinutes < 60) return `${diffMinutes}분 전`
+
+  const diffHours = Math.floor(diffMinutes / 60)
+  if (diffHours < 24) return `${diffHours}시간 전`
+
+  const diffDays = Math.floor(diffHours / 24)
+  if (diffDays === 1) return '어제'
+  return `${diffDays}일 전`
+}
diff --git a/src/features/manager/posting/ui/ApplicantCard.tsx b/src/features/manager/posting/ui/ApplicantCard.tsx
new file mode 100644
index 00000000..c189969a
--- /dev/null
+++ b/src/features/manager/posting/ui/ApplicantCard.tsx
@@ -0,0 +1,62 @@
+import { ManagerApplicationStatusBadge } from '@/features/manager/posting/ui/ManagerApplicationStatusBadge'
+import { CalendarIcon, ClockIcon } from '@/features/manager/posting/ui/icons'
+import {
+  formatRelativeTime,
+  formatTimeRange,
+  formatWorkingDays,
+  type Application,
+} from '@/features/manager/posting/types/posting'
+
+interface ApplicantCardProps {
+  application: Application
+  onClick: () => void
+}
+
+/** 지원자 카드 — 업장·상태·이름·지원시각·희망 근무 (PDF ApplicantCard) */
+export function ApplicantCard({ application, onClick }: ApplicantCardProps) {
+  const { applicant, schedule } = application
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-full overflow-hidden rounded-2xl bg-white text-left shadow-sm transition-colors hover:bg-bg-light/60"
+    >
+      <div className="flex flex-col gap-3 px-4 pb-3 pt-4">
+        <div className="flex items-center justify-between gap-2">
+          <span className="line-clamp-1 typography-body02-semibold text-text-100">
+            {application.workspaceName}
+          </span>
+          <ManagerApplicationStatusBadge status={application.status} />
+        </div>
+
+        <div className="flex items-center gap-2.5">
+          <span
+            className="flex size-8 shrink-0 items-center justify-center rounded-full bg-main-100 typography-body03-semibold text-sub"
+            aria-hidden="true"
+          >
+            {applicant.name.charAt(0)}
+          </span>
+          <span className="typography-body01-semibold text-text-100">
+            {applicant.name}
+          </span>
+          <span className="ml-auto typography-body03-regular text-text-50">
+            {formatRelativeTime(application.appliedAt)}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-line-1 px-4 py-3 typography-body03-regular text-text-90">
+        <span className="flex items-center gap-1.5">
+          <CalendarIcon className="size-4 text-main" />
+          {formatWorkingDays(schedule.workingDays)}
+        </span>
+        <span className="flex items-center gap-1.5">
+          <ClockIcon className="size-4 text-main" />
+          {formatTimeRange(schedule.startTime, schedule.endTime)}
+        </span>
+        <span className="text-text-70">{schedule.position}</span>
+      </div>
+    </button>
+  )
+}
diff --git a/src/features/manager/posting/ui/FilterBar.tsx b/src/features/manager/posting/ui/FilterBar.tsx
new file mode 100644
index 00000000..567f1b31
--- /dev/null
+++ b/src/features/manager/posting/ui/FilterBar.tsx
@@ -0,0 +1,52 @@
+import type { WorkspaceFilter } from '@/features/manager/posting/hooks/usePostingListViewModel'
+import { SelectDropdown } from '@/shared/ui/common/SelectDropdown'
+import type { SelectOption } from '@/shared/ui/common/SelectDropdown'
+
+interface FilterBarProps<TStatus extends string> {
+  workspaceOptions: SelectOption<WorkspaceFilter>[]
+  workspaceValue: WorkspaceFilter
+  onWorkspaceChange: (value: WorkspaceFilter) => void
+  statusOptions: readonly SelectOption<TStatus>[]
+  statusValue: TStatus
+  onStatusChange: (value: TStatus) => void
+  totalCount: number
+}
+
+/** 업장·상태 드롭다운 + 총 N건 */
+export function FilterBar<TStatus extends string>({
+  workspaceOptions,
+  workspaceValue,
+  onWorkspaceChange,
+  statusOptions,
+  statusValue,
+  onStatusChange,
+  totalCount,
+}: FilterBarProps<TStatus>) {
+  return (
+    <div className="rounded-2xl bg-white p-4 shadow-sm">
+      <div className="flex items-center gap-2">
+        <SelectDropdown
+          className="flex-1"
+          ariaLabel="업장 필터"
+          options={workspaceOptions}
+          value={workspaceValue}
+          onChange={onWorkspaceChange}
+        />
+        <SelectDropdown
+          className="flex-1"
+          ariaLabel="상태 필터"
+          options={[...statusOptions]}
+          value={statusValue}
+          onChange={onStatusChange}
+        />
+      </div>
+      <p className="mt-3 typography-body02-regular text-text-70">
+        총{' '}
+        <span className="text-main typography-body02-semibold">
+          {totalCount}
+        </span>
+        건
+      </p>
+    </div>
+  )
+}
diff --git a/src/features/manager/posting/ui/HiringActionBar.tsx b/src/features/manager/posting/ui/HiringActionBar.tsx
new file mode 100644
index 00000000..380d0df4
--- /dev/null
+++ b/src/features/manager/posting/ui/HiringActionBar.tsx
@@ -0,0 +1,51 @@
+import {
+  HIRING_DECISIONS,
+  type HiringDecision,
+} from '@/features/manager/posting/lib/applicationStatus'
+import { LockIcon } from '@/features/manager/posting/ui/icons'
+import { cn } from '@/shared/lib/utils'
+
+interface HiringActionBarProps {
+  /** false면 '상태 변경 불가' 안내를 표시하고 액션을 숨깁니다 */
+  canDecide: boolean
+  onDecide: (decision: HiringDecision) => void
+}
+
+const DECISION_CLASS: Record<HiringDecision, string> = {
+  SHORTLISTED: 'border border-main bg-white text-main',
+  ACCEPTED: 'border border-main bg-main text-white',
+  REJECTED: 'border border-error bg-white text-error',
+}
+
+/** 채용 결정 하단 고정 바 — [서류합격][최종합격][불합격] */
+export function HiringActionBar({ canDecide, onDecide }: HiringActionBarProps) {
+  return (
+    <div className="fixed bottom-0 left-1/2 z-10 w-full max-w-[428px] -translate-x-1/2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
+      {canDecide ? (
+        <div className="flex items-center gap-2">
+          {HIRING_DECISIONS.map(decision => (
+            <button
+              key={decision.status}
+              type="button"
+              onClick={() => onDecide(decision.status)}
+              className={cn(
+                'h-12 flex-1 rounded-xl typography-bt transition-all',
+                'hover:brightness-[0.96] active:brightness-[0.9]',
+                DECISION_CLASS[decision.status]
+              )}
+            >
+              {decision.label}
+            </button>
+          ))}
+        </div>
+      ) : (
+        <div className="flex h-12 items-center justify-center gap-2 rounded-xl bg-bg-dark">
+          <LockIcon className="size-4 text-text-50" />
+          <span className="typography-body02-regular text-text-50">
+            상태 변경 불가 (종료된 지원서)
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/features/manager/posting/ui/ManagerApplicationStatusBadge.tsx b/src/features/manager/posting/ui/ManagerApplicationStatusBadge.tsx
new file mode 100644
index 00000000..28df9128
--- /dev/null
+++ b/src/features/manager/posting/ui/ManagerApplicationStatusBadge.tsx
@@ -0,0 +1,29 @@
+import { resolveApplicationStatusBadge } from '@/features/manager/posting/lib/applicationStatus'
+import type { ApplicationStatus } from '@/features/manager/posting/types/posting'
+import { cn } from '@/shared/lib/utils'
+
+interface ManagerApplicationStatusBadgeProps {
+  status: ApplicationStatus
+  className?: string
+}
+
+/** 지원 상태 배지 — 지원완료 / 서류합격 / 최종합격 / 불합격 / 취소 / 만료 */
+export function ManagerApplicationStatusBadge({
+  status,
+  className,
+}: ManagerApplicationStatusBadgeProps) {
+  const style = resolveApplicationStatusBadge(status)
+
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center rounded-[50px] px-2 py-1 typography-bg',
+        style.containerClassName,
+        style.textClassName,
+        className
+      )}
+    >
+      {style.label}
+    </span>
+  )
+}
diff --git a/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx b/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
new file mode 100644
index 00000000..dbe10240
--- /dev/null
+++ b/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
@@ -0,0 +1,29 @@
+import { resolvePostingStatusBadge } from '@/features/manager/posting/lib/postingStatus'
+import type { PostingStatus } from '@/features/manager/posting/types/posting'
+import { cn } from '@/shared/lib/utils'
+
+interface ManagerPostingStatusBadgeProps {
+  status: PostingStatus
+  className?: string
+}
+
+/** 공고 상태 배지 — 모집중 / 모집완료 */
+export function ManagerPostingStatusBadge({
+  status,
+  className,
+}: ManagerPostingStatusBadgeProps) {
+  const style = resolvePostingStatusBadge(status)
+
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center rounded-[50px] px-2 py-1 typography-bg',
+        style.containerClassName,
+        style.textClassName,
+        className
+      )}
+    >
+      {style.label}
+    </span>
+  )
+}
diff --git a/src/features/manager/posting/ui/PostingFormFields.tsx b/src/features/manager/posting/ui/PostingFormFields.tsx
new file mode 100644
index 00000000..5a790c80
--- /dev/null
+++ b/src/features/manager/posting/ui/PostingFormFields.tsx
@@ -0,0 +1,197 @@
+import type { ReactNode } from 'react'
+
+import type { PostingFormViewModel } from '@/features/manager/posting/hooks/usePostingForm'
+import {
+  MOCK_KEYWORDS,
+  MOCK_WORKSPACES,
+} from '@/features/manager/posting/mocks/data'
+import { AlertIcon } from '@/features/manager/posting/ui/icons'
+import { ScheduleEditor } from '@/features/manager/posting/ui/ScheduleEditor'
+import {
+  MAX_KEYWORDS,
+  PAYMENT_TYPES,
+  PAYMENT_TYPE_LABEL,
+} from '@/features/manager/posting/types/posting'
+import { cn } from '@/shared/lib/utils'
+import { SelectDropdown } from '@/shared/ui/common/SelectDropdown'
+
+interface PostingFormFieldsProps {
+  form: PostingFormViewModel
+}
+
+/** 섹션 카드 — 라벨 + 필수 표시 + 에러 테두리/메시지 */
+function Section({
+  label,
+  required = false,
+  error,
+  hint,
+  children,
+}: {
+  label: string
+  required?: boolean
+  error?: string
+  hint?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <section
+      className={cn(
+        'rounded-2xl bg-white p-4 shadow-sm',
+        error && 'border border-error'
+      )}
+    >
+      <div className="mb-2.5 flex items-center justify-between">
+        <h2 className="typography-body02-semibold text-text-100">
+          {label}
+          {required ? <span className="ml-0.5 text-error">*</span> : null}
+        </h2>
+        {hint}
+      </div>
+      {children}
+      {error ? (
+        <p className="mt-2 flex items-center gap-1 typography-body03-regular text-error">
+          <AlertIcon className="size-3.5 shrink-0" />
+          {error}
+        </p>
+      ) : null}
+    </section>
+  )
+}
+
+const inputClassName =
+  'h-12 w-full rounded-xl border bg-white px-3.5 typography-body02-regular text-text-100 placeholder:text-text-50 focus:outline-none'
+
+/** 공고 등록·수정 공용 폼 — 업장/제목/키워드/근무일정/급여/상세내용 */
+export function PostingFormFields({ form }: PostingFormFieldsProps) {
+  const { values, errors } = form
+
+  const workspaceOptions = MOCK_WORKSPACES.map(workspace => ({
+    value: workspace.id,
+    label: workspace.businessName,
+  }))
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Section label="업장 선택" required error={errors.workspaceId}>
+        <SelectDropdown
+          ariaLabel="업장 선택"
+          placeholder="업장을 선택해 주세요"
+          options={workspaceOptions}
+          value={values.workspaceId ?? -1}
+          onChange={form.setWorkspaceId}
+        />
+      </Section>
+
+      <Section label="공고 제목" required error={errors.title}>
+        <input
+          type="text"
+          value={values.title}
+          placeholder="예: 주말 홀서빙 구합니다"
+          onChange={e => form.setTitle(e.target.value)}
+          className={cn(
+            inputClassName,
+            errors.title ? 'border-error' : 'border-line-1 focus:border-main'
+          )}
+        />
+      </Section>
+
+      <Section
+        label="업직종 키워드"
+        required
+        error={errors.keywords}
+        hint={
+          <span className="typography-body03-regular text-text-50">
+            최대 {MAX_KEYWORDS}개
+          </span>
+        }
+      >
+        <div className="flex flex-wrap gap-2">
+          {MOCK_KEYWORDS.map(keyword => {
+            const isSelected = values.keywords.includes(keyword)
+            const isDisabled =
+              !isSelected && values.keywords.length >= MAX_KEYWORDS
+            return (
+              <button
+                key={keyword}
+                type="button"
+                aria-pressed={isSelected}
+                disabled={isDisabled}
+                onClick={() => form.toggleKeyword(keyword)}
+                className={cn(
+                  'h-9 rounded-lg px-3.5 typography-body02-semibold transition-colors',
+                  isSelected
+                    ? 'bg-main-100 text-sub'
+                    : 'border border-dashed border-line-2 bg-white text-text-70',
+                  isDisabled && 'opacity-40'
+                )}
+              >
+                {isSelected ? keyword : `+ ${keyword}`}
+              </button>
+            )
+          })}
+        </div>
+      </Section>
+
+      <Section label="근무일정" required error={errors.schedules}>
+        <ScheduleEditor form={form} />
+      </Section>
+
+      <Section label="급여" required error={errors.payAmount}>
+        <div className="mb-2 flex gap-1.5">
+          {PAYMENT_TYPES.map(paymentType => {
+            const isSelected = values.paymentType === paymentType
+            return (
+              <button
+                key={paymentType}
+                type="button"
+                aria-pressed={isSelected}
+                onClick={() => form.setPaymentType(paymentType)}
+                className={cn(
+                  'h-9 flex-1 rounded-lg typography-body02-semibold transition-colors',
+                  isSelected
+                    ? 'bg-main text-white'
+                    : 'border border-line-1 bg-white text-text-70'
+                )}
+              >
+                {PAYMENT_TYPE_LABEL[paymentType]}
+              </button>
+            )
+          })}
+        </div>
+        <div className="relative">
+          <input
+            type="text"
+            inputMode="numeric"
+            value={
+              values.payAmount === ''
+                ? ''
+                : Number(values.payAmount).toLocaleString('ko-KR')
+            }
+            placeholder="예: 12,000"
+            onChange={e => form.setPayAmount(e.target.value)}
+            className={cn(
+              inputClassName,
+              'pr-10',
+              errors.payAmount
+                ? 'border-error'
+                : 'border-line-1 focus:border-main'
+            )}
+          />
+          <span className="pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2 typography-body02-regular text-text-70">
+            원
+          </span>
+        </div>
+      </Section>
+
+      <Section label="상세내용">
+        <textarea
+          value={values.description}
+          rows={5}
+          placeholder="근무 조건, 우대 사항 등을 자유롭게 작성해 주세요"
+          onChange={e => form.setDescription(e.target.value)}
+          className="w-full resize-none rounded-xl border border-line-1 bg-white p-3.5 typography-body02-regular text-text-100 placeholder:text-text-50 focus:border-main focus:outline-none"
+        />
+      </Section>
+    </div>
+  )
+}
diff --git a/src/features/manager/posting/ui/PostingListCard.tsx b/src/features/manager/posting/ui/PostingListCard.tsx
new file mode 100644
index 00000000..9cb287ec
--- /dev/null
+++ b/src/features/manager/posting/ui/PostingListCard.tsx
@@ -0,0 +1,71 @@
+import { ManagerPostingStatusBadge } from '@/features/manager/posting/ui/ManagerPostingStatusBadge'
+import { CalendarIcon, ClockIcon } from '@/features/manager/posting/ui/icons'
+import {
+  formatTimeRange,
+  formatWorkingDays,
+  PAYMENT_TYPE_LABEL,
+  type Posting,
+} from '@/features/manager/posting/types/posting'
+import { cn } from '@/shared/lib/utils'
+
+interface PostingListCardProps {
+  posting: Posting
+  onClick: () => void
+}
+
+/** 내 공고 카드 — PDF OngoingPostingCard */
+export function PostingListCard({ posting, onClick }: PostingListCardProps) {
+  const isClosed = posting.status === 'CLOSED'
+  const firstSchedule = posting.schedules[0]
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'w-full overflow-hidden rounded-2xl bg-white text-left shadow-sm transition-colors hover:bg-bg-light/60',
+        isClosed && 'opacity-70'
+      )}
+    >
+      <div className="flex flex-col gap-1.5 px-4 pb-3 pt-4">
+        <div className="flex items-start justify-between gap-2">
+          <h3
+            className={cn(
+              'line-clamp-1 typography-body01-semibold',
+              isClosed ? 'text-text-70' : 'text-text-100'
+            )}
+          >
+            {posting.title}
+          </h3>
+          <ManagerPostingStatusBadge status={posting.status} />
+        </div>
+
+        <p className="typography-body03-regular text-text-70">
+          {posting.workspaceName} · {posting.businessType}
+        </p>
+
+        {firstSchedule ? (
+          <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1 typography-body03-regular text-text-90">
+            <span className="flex items-center gap-1.5">
+              <CalendarIcon className="size-4 text-main" />
+              {formatWorkingDays(firstSchedule.workingDays)}
+            </span>
+            <span className="flex items-center gap-1.5">
+              <ClockIcon className="size-4 text-main" />
+              {formatTimeRange(firstSchedule.startTime, firstSchedule.endTime)}
+            </span>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex items-center justify-between border-t border-line-1 px-4 py-3">
+        <span className="typography-body03-regular text-text-70">
+          {PAYMENT_TYPE_LABEL[posting.paymentType]}
+        </span>
+        <span className="typography-body01-semibold text-text-100">
+          {posting.payAmount.toLocaleString('ko-KR')}원
+        </span>
+      </div>
+    </button>
+  )
+}
diff --git a/src/features/manager/posting/ui/ScheduleEditor.tsx b/src/features/manager/posting/ui/ScheduleEditor.tsx
new file mode 100644
index 00000000..e5407146
--- /dev/null
+++ b/src/features/manager/posting/ui/ScheduleEditor.tsx
@@ -0,0 +1,177 @@
+import type { PostingFormViewModel } from '@/features/manager/posting/hooks/usePostingForm'
+import { CloseIcon, PlusIcon } from '@/features/manager/posting/ui/icons'
+import {
+  WORKING_DAYS,
+  WORKING_DAY_LABEL,
+  type PostingFormSchedule,
+} from '@/features/manager/posting/types/posting'
+import { cn } from '@/shared/lib/utils'
+
+interface ScheduleEditorProps {
+  form: PostingFormViewModel
+}
+
+function ScheduleCard({
+  schedule,
+  index,
+  form,
+  canRemove,
+}: {
+  schedule: PostingFormSchedule
+  index: number
+  form: PostingFormViewModel
+  canRemove: boolean
+}) {
+  const isExisting = schedule.id !== null
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border p-3.5',
+        isExisting ? 'border-line-1' : 'border-main'
+      )}
+    >
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-1.5">
+          <span className="typography-body02-semibold text-text-100">
+            일정 {index + 1}
+          </span>
+          {/* 수정 화면에서 기존 일정과 신규 추가분을 구분 */}
+          {form.isEditMode ? (
+            <span
+              className={cn(
+                'rounded-[50px] px-1.5 py-0.5 typography-bg',
+                isExisting ? 'bg-bg-dark text-text-70' : 'bg-main-100 text-sub'
+              )}
+            >
+              {isExisting ? '기존' : '신규'}
+            </span>
+          ) : null}
+        </div>
+        {canRemove ? (
+          <button
+            type="button"
+            onClick={() => form.removeSchedule(schedule.key)}
+            aria-label={`일정 ${index + 1} 삭제`}
+            className="flex size-7 items-center justify-center rounded-lg text-text-50 transition-colors hover:bg-bg-light"
+          >
+            <CloseIcon className="size-4" />
+          </button>
+        ) : null}
+      </div>
+
+      <p className="mb-2 typography-body03-regular text-text-70">근무요일</p>
+      <div className="mb-3 flex flex-wrap gap-1.5">
+        {WORKING_DAYS.map(day => {
+          const isSelected = schedule.workingDays.includes(day)
+          return (
+            <button
+              key={day}
+              type="button"
+              aria-pressed={isSelected}
+              onClick={() => form.toggleScheduleDay(schedule.key, day)}
+              className={cn(
+                'size-9 rounded-lg typography-body02-semibold transition-colors',
+                isSelected
+                  ? 'bg-main text-white'
+                  : 'border border-line-1 bg-white text-text-70'
+              )}
+            >
+              {WORKING_DAY_LABEL[day]}
+            </button>
+          )
+        })}
+      </div>
+
+      <div className="mb-3 flex gap-2">
+        <label className="flex-1">
+          <span className="mb-1 block typography-body03-regular text-text-70">
+            시작
+          </span>
+          <input
+            type="time"
+            value={schedule.startTime}
+            onChange={e =>
+              form.updateSchedule(schedule.key, { startTime: e.target.value })
+            }
+            className="h-11 w-full rounded-xl border border-line-1 bg-white px-3 typography-body02-regular text-text-100 focus:border-main focus:outline-none"
+          />
+        </label>
+        <label className="flex-1">
+          <span className="mb-1 block typography-body03-regular text-text-70">
+            종료
+          </span>
+          <input
+            type="time"
+            value={schedule.endTime}
+            onChange={e =>
+              form.updateSchedule(schedule.key, { endTime: e.target.value })
+            }
+            className="h-11 w-full rounded-xl border border-line-1 bg-white px-3 typography-body02-regular text-text-100 focus:border-main focus:outline-none"
+          />
+        </label>
+      </div>
+
+      <div className="flex gap-2">
+        <label className="flex-1">
+          <span className="mb-1 block typography-body03-regular text-text-70">
+            포지션
+          </span>
+          <input
+            type="text"
+            value={schedule.position}
+            placeholder="예: 홀서빙"
+            onChange={e =>
+              form.updateSchedule(schedule.key, { position: e.target.value })
+            }
+            className="h-11 w-full rounded-xl border border-line-1 bg-white px-3 typography-body02-regular text-text-100 placeholder:text-text-50 focus:border-main focus:outline-none"
+          />
+        </label>
+        <label className="w-[96px]">
+          <span className="mb-1 block typography-body03-regular text-text-70">
+            모집 인원
+          </span>
+          <input
+            type="number"
+            min={1}
+            value={schedule.positionsNeeded}
+            onChange={e =>
+              form.updateSchedule(schedule.key, {
+                positionsNeeded: Math.max(1, Number(e.target.value) || 1),
+              })
+            }
+            className="h-11 w-full rounded-xl border border-line-1 bg-white px-3 typography-body02-regular text-text-100 focus:border-main focus:outline-none"
+          />
+        </label>
+      </div>
+    </div>
+  )
+}
+
+/** 근무일정 편집기 — 일정 카드 추가/삭제, 요일 토글, 시간·포지션·인원 입력 */
+export function ScheduleEditor({ form }: ScheduleEditorProps) {
+  const { schedules } = form.values
+
+  return (
+    <div className="flex flex-col gap-3">
+      {schedules.map((schedule, index) => (
+        <ScheduleCard
+          key={schedule.key}
+          schedule={schedule}
+          index={index}
+          form={form}
+          canRemove={schedules.length > 1}
+        />
+      ))}
+
+      <button
+        type="button"
+        onClick={form.addSchedule}
+        className="flex h-12 w-full items-center justify-center gap-1.5 rounded-xl border border-dashed border-main text-main transition-colors hover:bg-main-100"
+      >
+        <PlusIcon className="size-4" />
+        <span className="typography-bt">일정 추가</span>
+      </button>
+    </div>
+  )
+}
diff --git a/src/features/manager/posting/ui/icons.tsx b/src/features/manager/posting/ui/icons.tsx
new file mode 100644
index 00000000..574cabb2
--- /dev/null
+++ b/src/features/manager/posting/ui/icons.tsx
@@ -0,0 +1,164 @@
+/** 구인구직 화면 전용 아이콘 — 24 viewBox, 색상은 부모의 text-* 를 따릅니다 */
+
+interface IconProps {
+  className?: string
+}
+
+export function CalendarIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="3" y="5" width="18" height="16" rx="3" />
+      <path d="M3 10h18M8 3v4M16 3v4" />
+    </svg>
+  )
+}
+
+export function ClockIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3 2" />
+    </svg>
+  )
+}
+
+export function PersonIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="8" r="3.5" />
+      <path d="M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5" />
+    </svg>
+  )
+}
+
+export function ChevronRightIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m9 5 7 7-7 7" />
+    </svg>
+  )
+}
+
+export function PlusIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  )
+}
+
+export function CloseIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M6 6l12 12M18 6L6 18" />
+    </svg>
+  )
+}
+
+export function AlertIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7.5v5M12 16.2h.01" />
+    </svg>
+  )
+}
+
+export function CheckCircleIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <path d="m8.5 12.2 2.4 2.4 4.6-4.9" />
+    </svg>
+  )
+}
+
+export function LockIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="4.5" y="10.5" width="15" height="10" rx="2.5" />
+      <path d="M8 10.5V7.8a4 4 0 0 1 8 0v2.7" />
+    </svg>
+  )
+}

From ffe76569738b322f7eec56269308dd53d47e720e Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 20:30:37 +0900
Subject: [PATCH 04/33] =?UTF-8?q?feat:=20=EC=82=AC=EC=9E=A5=EB=8B=98=20?=
 =?UTF-8?q?=EA=B5=AC=EC=9D=B8=EA=B5=AC=EC=A7=81=20=ED=99=94=EB=A9=B4=206?=
 =?UTF-8?q?=EC=A2=85=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8A=B8=20=EB=93=B1=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/App.tsx                               |  57 ++++++
 .../manager/application-detail/index.tsx      | 186 +++++++++++++++++
 src/pages/manager/application-list/index.tsx  | 112 +++++++++++
 src/pages/manager/posting-create/index.tsx    |  63 ++++++
 src/pages/manager/posting-detail/index.tsx    | 187 ++++++++++++++++++
 src/pages/manager/posting-edit/index.tsx      |  88 +++++++++
 src/pages/manager/posting-list/index.tsx      |  98 +++++++++
 7 files changed, 791 insertions(+)
 create mode 100644 src/pages/manager/application-detail/index.tsx
 create mode 100644 src/pages/manager/application-list/index.tsx
 create mode 100644 src/pages/manager/posting-create/index.tsx
 create mode 100644 src/pages/manager/posting-detail/index.tsx
 create mode 100644 src/pages/manager/posting-edit/index.tsx
 create mode 100644 src/pages/manager/posting-list/index.tsx

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 20665f50..5b29df49 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -30,6 +30,12 @@ import { StoreRegisterRequestsPage } from '@/pages/store-register/requests'
 import { StoreRegisterRequestDetailPage } from '@/pages/store-register/request-detail'
 import { ManagerWorkerInvitePage } from '@/pages/manager/worker-invite'
 import { WorkspaceImageEditPage } from '@/pages/manager/workspace-image-edit'
+import { ManagerPostingListPage } from '@/pages/manager/posting-list'
+import { ManagerPostingCreatePage } from '@/pages/manager/posting-create'
+import { ManagerPostingDetailPage } from '@/pages/manager/posting-detail'
+import { ManagerPostingEditPage } from '@/pages/manager/posting-edit'
+import { ManagerApplicationListPage } from '@/pages/manager/application-list'
+import { ManagerApplicationDetailPage } from '@/pages/manager/application-detail'
 import { WorkspaceJoinPage } from '@/pages/user/workspace-join'
 import { NotificationPage } from '@/pages/notification'
 import { NotificationSettingsPage } from '@/pages/notification/settings'
@@ -44,6 +50,7 @@ import { ErrorPageRoute } from '@/pages/error'
 import { MobileLayout } from '@/shared/ui/MobileLayout'
 import { MobileLayoutWithDocbar } from '@/shared/ui/MobileLayoutWithDocbar'
 import { HomeRouteGuard } from '@/shared/ui/common/HomeRouteGuard'
+import { ToastViewport } from '@/shared/ui/common/ToastViewport'
 import { ROUTES } from '@/shared/constants/routes'
 
 const SignupPage = lazy(async () => {
@@ -161,6 +168,39 @@ export function App() {
             path={ROUTES.MANAGER.WORKSPACE_IMAGES_EDIT_PATTERN}
             element={<WorkspaceImageEditPage />}
           />
+          {/* 사장님 구인구직 — 정적 세그먼트가 :postingId보다 우선 매칭됩니다 */}
+          <Route
+            path={ROUTES.MANAGER.POSTING_NEW}
+            element={
+              <HomeRouteGuard expected="MANAGER">
+                <ManagerPostingCreatePage />
+              </HomeRouteGuard>
+            }
+          />
+          <Route
+            path={ROUTES.MANAGER.POSTING_APPLICATION_DETAIL_PATTERN}
+            element={
+              <HomeRouteGuard expected="MANAGER">
+                <ManagerApplicationDetailPage />
+              </HomeRouteGuard>
+            }
+          />
+          <Route
+            path={ROUTES.MANAGER.POSTING_EDIT_PATTERN}
+            element={
+              <HomeRouteGuard expected="MANAGER">
+                <ManagerPostingEditPage />
+              </HomeRouteGuard>
+            }
+          />
+          <Route
+            path={ROUTES.MANAGER.POSTING_DETAIL_PATTERN}
+            element={
+              <HomeRouteGuard expected="MANAGER">
+                <ManagerPostingDetailPage />
+              </HomeRouteGuard>
+            }
+          />
         </Route>
 
         <Route element={<MobileRouteLayoutWithDocbar />}>
@@ -205,6 +245,22 @@ export function App() {
             path={ROUTES.MANAGER.SOCIAL_CHAT}
             element={<SocialChatPage />}
           />
+          <Route
+            path={ROUTES.MANAGER.POSTINGS}
+            element={
+              <HomeRouteGuard expected="MANAGER">
+                <ManagerPostingListPage />
+              </HomeRouteGuard>
+            }
+          />
+          <Route
+            path={ROUTES.MANAGER.POSTING_APPLICATIONS}
+            element={
+              <HomeRouteGuard expected="MANAGER">
+                <ManagerApplicationListPage />
+              </HomeRouteGuard>
+            }
+          />
           <Route path={ROUTES.MY.ROOT} element={<MyPage />} />
           <Route
             path={ROUTES.USER.SUBSTITUTE_REQUEST_DETAIL_PATTERN}
@@ -227,6 +283,7 @@ export function App() {
         <Route path="/" element={<Navigate to={ROUTES.AUTH.LOGIN} replace />} />
         <Route path="*" element={<ErrorPageRoute />} />
       </Routes>
+      <ToastViewport />
     </BrowserRouter>
   )
 }
diff --git a/src/pages/manager/application-detail/index.tsx b/src/pages/manager/application-detail/index.tsx
new file mode 100644
index 00000000..5f1ff0dd
--- /dev/null
+++ b/src/pages/manager/application-detail/index.tsx
@@ -0,0 +1,186 @@
+import { useParams } from 'react-router-dom'
+
+import { useApplicationDetailViewModel } from '@/features/manager/posting/hooks/useApplicationDetailViewModel'
+import { HiringActionBar } from '@/features/manager/posting/ui/HiringActionBar'
+import { ManagerApplicationStatusBadge } from '@/features/manager/posting/ui/ManagerApplicationStatusBadge'
+import { CheckCircleIcon } from '@/features/manager/posting/ui/icons'
+import {
+  formatTimeRange,
+  formatWorkingDays,
+  type ApplicationStatus,
+} from '@/features/manager/posting/types/posting'
+import { resolveApplicationStatusBadge } from '@/features/manager/posting/lib/applicationStatus'
+import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
+import { Navbar } from '@/shared/ui/common/Navbar'
+
+function InfoRow({
+  label,
+  value,
+  isLast = false,
+}: {
+  label: string
+  value: string
+  isLast?: boolean
+}) {
+  return (
+    <div
+      className={`flex items-center justify-between py-3 ${
+        isLast ? '' : 'border-b border-line-1'
+      }`}
+    >
+      <span className="typography-body02-regular text-text-70">{label}</span>
+      <span className="typography-body02-semibold text-text-100">{value}</span>
+    </div>
+  )
+}
+
+/** 종료된 지원서 안내 문구 */
+function TerminalNotice({ status }: { status: ApplicationStatus }) {
+  const { label } = resolveApplicationStatusBadge(status)
+  const isAccepted = status === 'ACCEPTED'
+
+  return (
+    <div
+      className={`flex items-start gap-2 rounded-2xl p-4 ${
+        isAccepted ? 'bg-main-100' : 'bg-bg-dark'
+      }`}
+    >
+      <CheckCircleIcon
+        className={`mt-0.5 size-4 shrink-0 ${
+          isAccepted ? 'text-main' : 'text-text-50'
+        }`}
+      />
+      <p className="typography-body02-regular text-text-90">
+        이미 <span className="typography-body02-semibold">{label}</span>{' '}
+        {isAccepted
+          ? '처리되어 근무자로 등록됐어요. 상태를 더 이상 변경할 수 없어요.'
+          : '처리된 지원서예요. 상태를 더 이상 변경할 수 없어요.'}
+      </p>
+    </div>
+  )
+}
+
+/** SCREEN 3 · 지원자 상세 · 채용 결정 */
+export function ManagerApplicationDetailPage() {
+  const { applicationId } = useParams()
+  const numericApplicationId = Number(applicationId)
+
+  const {
+    application,
+    isNotFound,
+    canDecide,
+    pendingDecision,
+    decisionCopy,
+    requestDecision,
+    cancelDecision,
+    confirmDecision,
+  } = useApplicationDetailViewModel(numericApplicationId)
+
+  if (isNotFound || !application) {
+    return (
+      <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+        <Navbar variant="detail" title="지원자 상세" />
+        <main className="flex flex-1 items-center justify-center px-4">
+          <p className="typography-body02-regular text-text-70">
+            지원서를 찾을 수 없어요.
+          </p>
+        </main>
+      </div>
+    )
+  }
+
+  const { applicant, schedule } = application
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <Navbar variant="detail" title="지원자 상세" />
+
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-32 pt-4">
+        <section className="flex items-center gap-3">
+          <span
+            className="flex size-12 shrink-0 items-center justify-center rounded-full bg-main-100 typography-headline03 text-sub"
+            aria-hidden="true"
+          >
+            {applicant.name.charAt(0)}
+          </span>
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h1 className="typography-headline03 text-text-100">
+                {applicant.name}
+              </h1>
+              <ManagerApplicationStatusBadge status={application.status} />
+            </div>
+            <p className="mt-0.5 typography-body03-regular text-text-70">
+              {application.workspaceName} ·{' '}
+              {formatWorkingDays(schedule.workingDays)}{' '}
+              {formatTimeRange(schedule.startTime, schedule.endTime)}
+              {schedule.position ? ` · ${schedule.position}` : ''}
+            </p>
+          </div>
+        </section>
+
+        {!canDecide ? <TerminalNotice status={application.status} /> : null}
+
+        <section className="rounded-2xl bg-white px-4 shadow-sm">
+          <InfoRow label="연락처" value={applicant.phoneNumber} />
+          <InfoRow label="생년월일" value={applicant.birthDate} />
+          <InfoRow label="성별" value={applicant.gender} />
+          <InfoRow label="이메일" value={applicant.email} isLast />
+        </section>
+
+        {applicant.certificates.length > 0 ? (
+          <section>
+            <h2 className="mb-2 typography-body02-semibold text-text-100">
+              보유 자격증
+            </h2>
+            <ul className="rounded-2xl bg-white px-4 shadow-sm">
+              {applicant.certificates.map((certificate, index) => (
+                <li
+                  key={certificate.name}
+                  className={`flex items-center justify-between py-3 ${
+                    index === applicant.certificates.length - 1
+                      ? ''
+                      : 'border-b border-line-1'
+                  }`}
+                >
+                  <div>
+                    <p className="typography-body02-semibold text-text-100">
+                      {certificate.name}
+                    </p>
+                    <p className="typography-body03-regular text-text-70">
+                      {certificate.issuer}
+                    </p>
+                  </div>
+                  <span className="typography-body03-regular text-text-70">
+                    {certificate.acquiredAt}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ) : null}
+
+        <section>
+          <h2 className="mb-2 typography-body02-semibold text-text-100">
+            지원 메시지
+          </h2>
+          <p className="whitespace-pre-wrap rounded-2xl bg-white p-4 typography-body02-regular text-text-90 shadow-sm">
+            {application.description}
+          </p>
+        </section>
+      </main>
+
+      <HiringActionBar canDecide={canDecide} onDecide={requestDecision} />
+
+      <ConfirmModal
+        isOpen={pendingDecision !== null}
+        title={decisionCopy?.title ?? ''}
+        description={decisionCopy?.description}
+        confirmLabel="확인"
+        cancelLabel="취소"
+        onConfirm={confirmDecision}
+        onClose={cancelDecision}
+      />
+    </div>
+  )
+}
diff --git a/src/pages/manager/application-list/index.tsx b/src/pages/manager/application-list/index.tsx
new file mode 100644
index 00000000..fce790a0
--- /dev/null
+++ b/src/pages/manager/application-list/index.tsx
@@ -0,0 +1,112 @@
+import { useNavigate, useSearchParams } from 'react-router-dom'
+
+import { useApplicationListViewModel } from '@/features/manager/posting/hooks/useApplicationListViewModel'
+import { APPLICATION_STATUS_FILTER_OPTIONS } from '@/features/manager/posting/lib/applicationStatus'
+import { ApplicantCard } from '@/features/manager/posting/ui/ApplicantCard'
+import { FilterBar } from '@/features/manager/posting/ui/FilterBar'
+import { PersonIcon } from '@/features/manager/posting/ui/icons'
+import { managerPostingApplicationDetailPath } from '@/shared/constants/routes'
+import { MoreButton } from '@/shared/ui/common/MoreButton'
+import { Navbar } from '@/shared/ui/common/Navbar'
+import { Skeleton } from '@/shared/ui/common/Skeleton'
+
+function ApplicantListSkeleton() {
+  return (
+    <ul className="flex flex-col gap-3">
+      {[0, 1, 2].map(index => (
+        <li key={index} className="rounded-2xl bg-white p-4 shadow-sm">
+          <div className="mb-3 flex items-center justify-between">
+            <Skeleton className="h-5 w-28" />
+            <Skeleton className="h-5 w-14 rounded-full" />
+          </div>
+          <div className="mb-4 flex items-center gap-2.5">
+            <Skeleton className="size-8 rounded-full" />
+            <Skeleton className="h-5 w-20" />
+          </div>
+          <Skeleton className="h-4 w-44" />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/** SCREEN 2 · 지원자 목록 */
+export function ManagerApplicationListPage() {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+
+  // 공고 상세 → '지원자 보기'로 진입한 경우 해당 공고로 한정
+  const postingIdParam = searchParams.get('postingId')
+  const postingId = postingIdParam ? Number(postingIdParam) : undefined
+
+  const {
+    applications,
+    totalCount,
+    isLoading,
+    isEmpty,
+    hasNextPage,
+    fetchNextPage,
+    workspaceFilter,
+    setWorkspaceFilter,
+    statusFilter,
+    setStatusFilter,
+    workspaceOptions,
+  } = useApplicationListViewModel({ postingId })
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <Navbar variant="detail" title="지원자 목록" />
+
+      {/* 하단 Docbar(h-14)에 가리지 않도록 여유 패딩 */}
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-24 pt-4">
+        <FilterBar
+          workspaceOptions={workspaceOptions}
+          workspaceValue={workspaceFilter}
+          onWorkspaceChange={setWorkspaceFilter}
+          statusOptions={APPLICATION_STATUS_FILTER_OPTIONS}
+          statusValue={statusFilter}
+          onStatusChange={setStatusFilter}
+          totalCount={totalCount}
+        />
+
+        {isLoading ? <ApplicantListSkeleton /> : null}
+
+        {isEmpty ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 py-16">
+            <span className="flex size-16 items-center justify-center rounded-full bg-main-100">
+              <PersonIcon className="size-7 text-main" />
+            </span>
+            <p className="typography-body01-semibold text-text-100">
+              조건에 맞는 지원자가 없어요
+            </p>
+            <p className="typography-body02-regular text-center text-text-70">
+              필터를 바꾸거나 공고를 새로 등록해 지원자를
+              <br />
+              기다려 보세요.
+            </p>
+          </div>
+        ) : null}
+
+        {!isLoading && applications.length > 0 ? (
+          <>
+            <ul className="flex flex-col gap-3">
+              {applications.map(application => (
+                <li key={application.id}>
+                  <ApplicantCard
+                    application={application}
+                    onClick={() =>
+                      navigate(
+                        managerPostingApplicationDetailPath(application.id)
+                      )
+                    }
+                  />
+                </li>
+              ))}
+            </ul>
+            {hasNextPage ? <MoreButton onClick={fetchNextPage} /> : null}
+          </>
+        ) : null}
+      </main>
+    </div>
+  )
+}
diff --git a/src/pages/manager/posting-create/index.tsx b/src/pages/manager/posting-create/index.tsx
new file mode 100644
index 00000000..bfbe64d4
--- /dev/null
+++ b/src/pages/manager/posting-create/index.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { usePostingForm } from '@/features/manager/posting/hooks/usePostingForm'
+import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
+import { useMockPostingStore } from '@/features/manager/posting/mocks/store'
+import { PostingFormFields } from '@/features/manager/posting/ui/PostingFormFields'
+import { ROUTES } from '@/shared/constants/routes'
+import { showToast } from '@/shared/stores/useToastStore'
+import { AuthButton } from '@/shared/ui/common/AuthButton'
+import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
+import { Navbar } from '@/shared/ui/common/Navbar'
+
+/** SCREEN 1 · 공고 등록 */
+export function ManagerPostingCreatePage() {
+  const navigate = useNavigate()
+  const form = usePostingForm()
+  const createPosting = useMockPostingStore(state => state.createPosting)
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false)
+
+  const handleSubmit = () => {
+    if (!form.attemptSubmit()) return
+    setIsConfirmOpen(true)
+  }
+
+  const handleConfirm = () => {
+    const workspaceName =
+      MOCK_WORKSPACES.find(
+        workspace => workspace.id === form.values.workspaceId
+      )?.businessName ?? ''
+
+    createPosting(form.values, workspaceName)
+    setIsConfirmOpen(false)
+    showToast('공고를 등록했어요')
+    navigate(ROUTES.MANAGER.POSTINGS, { replace: true })
+  }
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <Navbar variant="detail" title="공고 작성" />
+
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-28 pt-4">
+        <PostingFormFields form={form} />
+      </main>
+
+      <div className="fixed bottom-0 left-1/2 z-10 w-full max-w-[428px] -translate-x-1/2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
+        <AuthButton onClick={handleSubmit} disabled={form.isSubmitDisabled}>
+          등록하기
+        </AuthButton>
+      </div>
+
+      <ConfirmModal
+        isOpen={isConfirmOpen}
+        title="공고를 등록할까요?"
+        description="등록 후에도 내 공고에서 수정하거나 마감할 수 있어요."
+        confirmLabel="등록"
+        cancelLabel="취소"
+        onConfirm={handleConfirm}
+        onClose={() => setIsConfirmOpen(false)}
+      />
+    </div>
+  )
+}
diff --git a/src/pages/manager/posting-detail/index.tsx b/src/pages/manager/posting-detail/index.tsx
new file mode 100644
index 00000000..e843bf64
--- /dev/null
+++ b/src/pages/manager/posting-detail/index.tsx
@@ -0,0 +1,187 @@
+import { useNavigate, useParams } from 'react-router-dom'
+
+import { usePostingDetailViewModel } from '@/features/manager/posting/hooks/usePostingDetailViewModel'
+import { ManagerPostingStatusBadge } from '@/features/manager/posting/ui/ManagerPostingStatusBadge'
+import {
+  CalendarIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  PersonIcon,
+} from '@/features/manager/posting/ui/icons'
+import {
+  formatTimeRange,
+  formatWorkingDays,
+  PAYMENT_TYPE_LABEL,
+} from '@/features/manager/posting/types/posting'
+import {
+  managerPostingApplicationsPath,
+  managerPostingEditPath,
+} from '@/shared/constants/routes'
+import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
+import { Navbar } from '@/shared/ui/common/Navbar'
+
+/** SCREEN 4 · 내 공고 상세 · 마감 */
+export function ManagerPostingDetailPage() {
+  const navigate = useNavigate()
+  const { postingId } = useParams()
+  const numericPostingId = Number(postingId)
+
+  const {
+    posting,
+    applicantCount,
+    isNotFound,
+    isCloseModalOpen,
+    openCloseModal,
+    closeCloseModal,
+    confirmClose,
+  } = usePostingDetailViewModel(numericPostingId)
+
+  if (isNotFound || !posting) {
+    return (
+      <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+        <Navbar variant="detail" title="공고 상세" />
+        <main className="flex flex-1 items-center justify-center px-4">
+          <p className="typography-body02-regular text-text-70">
+            공고를 찾을 수 없어요.
+          </p>
+        </main>
+      </div>
+    )
+  }
+
+  const isClosed = posting.status === 'CLOSED'
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <Navbar variant="detail" title="공고 상세" />
+
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-28 pt-4">
+        <section className="rounded-2xl bg-white p-4 shadow-sm">
+          <h1 className="typography-headline03 text-text-100">
+            {posting.title}
+          </h1>
+          <div className="mt-1.5 flex items-center justify-between gap-2">
+            <p className="typography-body02-regular text-text-70">
+              {posting.workspaceName} · {posting.businessType}
+            </p>
+            <ManagerPostingStatusBadge status={posting.status} />
+          </div>
+
+          {posting.keywords.length > 0 ? (
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              {posting.keywords.map(keyword => (
+                <span
+                  key={keyword}
+                  className="rounded-lg bg-main-100 px-2.5 py-1 typography-body03-semibold text-sub"
+                >
+                  {keyword}
+                </span>
+              ))}
+            </div>
+          ) : null}
+        </section>
+
+        <section className="flex items-center justify-between rounded-2xl bg-white p-4 shadow-sm">
+          <span className="typography-body02-regular text-text-70">급여</span>
+          <span className="typography-body01-semibold text-text-100">
+            {PAYMENT_TYPE_LABEL[posting.paymentType]}{' '}
+            {posting.payAmount.toLocaleString('ko-KR')}원
+          </span>
+        </section>
+
+        <section>
+          <h2 className="mb-2 typography-body02-semibold text-text-100">
+            근무일정
+          </h2>
+          <ul className="flex flex-col gap-2">
+            {posting.schedules.map((schedule, index) => (
+              <li
+                key={schedule.id ?? index}
+                className="rounded-2xl bg-white p-4 shadow-sm"
+              >
+                <div className="mb-1.5 flex items-center justify-between gap-2">
+                  <span className="typography-body02-semibold text-text-100">
+                    {schedule.position || '포지션 미지정'}
+                  </span>
+                  <span className="typography-body03-regular text-text-70">
+                    모집 {schedule.positionsNeeded}명
+                  </span>
+                </div>
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 typography-body03-regular text-text-90">
+                  <span className="flex items-center gap-1.5">
+                    <CalendarIcon className="size-4 text-main" />
+                    {formatWorkingDays(schedule.workingDays)}
+                  </span>
+                  <span className="flex items-center gap-1.5">
+                    <ClockIcon className="size-4 text-main" />
+                    {formatTimeRange(schedule.startTime, schedule.endTime)}
+                  </span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        {posting.description ? (
+          <section className="rounded-2xl bg-white p-4 shadow-sm">
+            <h2 className="mb-2 typography-body02-semibold text-text-100">
+              상세내용
+            </h2>
+            <p className="whitespace-pre-wrap typography-body02-regular text-text-90">
+              {posting.description}
+            </p>
+          </section>
+        ) : null}
+
+        <button
+          type="button"
+          onClick={() =>
+            navigate(managerPostingApplicationsPath(numericPostingId))
+          }
+          className="flex items-center justify-between rounded-2xl bg-white p-4 shadow-sm transition-colors hover:bg-bg-light/60"
+        >
+          <span className="flex items-center gap-2">
+            <PersonIcon className="size-5 text-main" />
+            <span className="typography-body02-semibold text-text-100">
+              지원자 보기
+            </span>
+          </span>
+          <span className="flex items-center gap-1.5">
+            <span className="flex h-6 min-w-6 items-center justify-center rounded-full bg-main px-1.5 typography-bg text-white">
+              {applicantCount}
+            </span>
+            <ChevronRightIcon className="size-4 text-text-50" />
+          </span>
+        </button>
+      </main>
+
+      <div className="fixed bottom-0 left-1/2 z-10 flex w-full max-w-[428px] -translate-x-1/2 gap-2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
+        <button
+          type="button"
+          onClick={() => navigate(managerPostingEditPath(numericPostingId))}
+          className="h-12 flex-1 rounded-xl bg-main typography-bt text-white transition-all hover:brightness-[0.94] active:brightness-[0.88]"
+        >
+          수정
+        </button>
+        <button
+          type="button"
+          onClick={openCloseModal}
+          disabled={isClosed}
+          className="h-12 flex-1 rounded-xl border border-line-1 bg-white typography-bt text-text-90 transition-colors hover:bg-bg-light disabled:cursor-not-allowed disabled:text-text-50"
+        >
+          {isClosed ? '마감됨' : '모집 마감'}
+        </button>
+      </div>
+
+      <ConfirmModal
+        isOpen={isCloseModalOpen}
+        title="모집을 마감할까요?"
+        description="마감 후에는 새로운 지원을 받을 수 없어요."
+        confirmLabel="모집 마감"
+        cancelLabel="취소"
+        onConfirm={confirmClose}
+        onClose={closeCloseModal}
+      />
+    </div>
+  )
+}
diff --git a/src/pages/manager/posting-edit/index.tsx b/src/pages/manager/posting-edit/index.tsx
new file mode 100644
index 00000000..eb164c08
--- /dev/null
+++ b/src/pages/manager/posting-edit/index.tsx
@@ -0,0 +1,88 @@
+import { useNavigate, useParams } from 'react-router-dom'
+
+import { usePostingForm } from '@/features/manager/posting/hooks/usePostingForm'
+import { useMockPostingStore } from '@/features/manager/posting/mocks/store'
+import { PostingFormFields } from '@/features/manager/posting/ui/PostingFormFields'
+import type {
+  Posting,
+  PostingFormValues,
+} from '@/features/manager/posting/types/posting'
+import { showToast } from '@/shared/stores/useToastStore'
+import { AuthButton } from '@/shared/ui/common/AuthButton'
+import { Navbar } from '@/shared/ui/common/Navbar'
+
+/** SCREEN 4 · 공고 수정 — 등록 폼 재사용 · 프리필 */
+export function ManagerPostingEditPage() {
+  const navigate = useNavigate()
+  const { postingId } = useParams()
+  const numericPostingId = Number(postingId)
+
+  const posting = useMockPostingStore(state =>
+    state.postings.find(item => item.id === numericPostingId)
+  )
+  const updatePosting = useMockPostingStore(state => state.updatePosting)
+
+  if (!posting) {
+    return (
+      <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+        <Navbar variant="detail" title="공고 수정" />
+        <main className="flex flex-1 items-center justify-center px-4">
+          <p className="typography-body02-regular text-text-70">
+            공고를 찾을 수 없어요.
+          </p>
+        </main>
+      </div>
+    )
+  }
+
+  return (
+    <PostingEditContent
+      postingId={numericPostingId}
+      posting={posting}
+      onSubmit={values => {
+        updatePosting(numericPostingId, values)
+        showToast('공고를 수정했어요')
+        navigate(-1)
+      }}
+    />
+  )
+}
+
+interface PostingEditContentProps {
+  postingId: number
+  posting: Posting
+  onSubmit: (values: PostingFormValues) => void
+}
+
+/**
+ * 폼 초기값이 `posting`에 의존하므로, 공고를 찾은 뒤에 마운트되도록 분리합니다
+ * (훅 순서를 안정적으로 유지).
+ */
+function PostingEditContent({
+  postingId,
+  posting,
+  onSubmit,
+}: PostingEditContentProps) {
+  const form = usePostingForm({ posting })
+
+  const handleSubmit = () => {
+    if (!form.attemptSubmit()) return
+    onSubmit(form.values)
+  }
+
+  return (
+    <div key={postingId} className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <Navbar variant="detail" title="공고 수정" />
+
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-28 pt-4">
+        <PostingFormFields form={form} />
+      </main>
+
+      <div className="fixed bottom-0 left-1/2 z-10 w-full max-w-[428px] -translate-x-1/2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
+        <AuthButton onClick={handleSubmit} disabled={form.isSubmitDisabled}>
+          수정 완료
+        </AuthButton>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/manager/posting-list/index.tsx b/src/pages/manager/posting-list/index.tsx
new file mode 100644
index 00000000..291d8cff
--- /dev/null
+++ b/src/pages/manager/posting-list/index.tsx
@@ -0,0 +1,98 @@
+import { useNavigate } from 'react-router-dom'
+
+import { usePostingListViewModel } from '@/features/manager/posting/hooks/usePostingListViewModel'
+import { POSTING_STATUS_FILTER_OPTIONS } from '@/features/manager/posting/lib/postingStatus'
+import { FilterBar } from '@/features/manager/posting/ui/FilterBar'
+import { PostingListCard } from '@/features/manager/posting/ui/PostingListCard'
+import { managerPostingDetailPath, ROUTES } from '@/shared/constants/routes'
+import { AuthButton } from '@/shared/ui/common/AuthButton'
+import { Navbar } from '@/shared/ui/common/Navbar'
+import { Skeleton } from '@/shared/ui/common/Skeleton'
+
+function PostingListSkeleton() {
+  return (
+    <ul className="flex flex-col gap-3">
+      {[0, 1, 2].map(index => (
+        <li key={index} className="rounded-2xl bg-white p-4 shadow-sm">
+          <div className="mb-3 flex items-center justify-between">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-5 w-14 rounded-full" />
+          </div>
+          <Skeleton className="mb-2 h-4 w-32" />
+          <Skeleton className="mb-4 h-4 w-48" />
+          <Skeleton className="ml-auto h-5 w-24" />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/** SCREEN 5 · 내 공고 목록 — 사장님 알바찾기(내 공고) 탭 진입점 */
+export function ManagerPostingListPage() {
+  const navigate = useNavigate()
+  const {
+    postings,
+    totalCount,
+    isLoading,
+    isEmpty,
+    workspaceFilter,
+    setWorkspaceFilter,
+    statusFilter,
+    setStatusFilter,
+    workspaceOptions,
+  } = usePostingListViewModel()
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <Navbar
+        variant="detail"
+        title="내 공고"
+        onBackClick={() => navigate(-1)}
+      />
+
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-32 pt-4">
+        <FilterBar
+          workspaceOptions={workspaceOptions}
+          workspaceValue={workspaceFilter}
+          onWorkspaceChange={setWorkspaceFilter}
+          statusOptions={POSTING_STATUS_FILTER_OPTIONS}
+          statusValue={statusFilter}
+          onStatusChange={setStatusFilter}
+          totalCount={totalCount}
+        />
+
+        {isLoading ? <PostingListSkeleton /> : null}
+
+        {isEmpty ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-2 py-16">
+            <p className="typography-body01-semibold text-text-100">
+              등록된 공고가 없어요
+            </p>
+            <p className="typography-body02-regular text-center text-text-70">
+              필터를 바꾸거나 새 공고를 등록해 보세요.
+            </p>
+          </div>
+        ) : null}
+
+        {!isLoading && postings.length > 0 ? (
+          <ul className="flex flex-col gap-3">
+            {postings.map(posting => (
+              <li key={posting.id}>
+                <PostingListCard
+                  posting={posting}
+                  onClick={() => navigate(managerPostingDetailPath(posting.id))}
+                />
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </main>
+
+      <div className="fixed bottom-14 left-1/2 z-10 w-full max-w-[428px] -translate-x-1/2 border-t border-line-1 bg-white px-4 pb-4 pt-3">
+        <AuthButton onClick={() => navigate(ROUTES.MANAGER.POSTING_NEW)}>
+          공고 작성
+        </AuthButton>
+      </div>
+    </div>
+  )
+}

From f519133eee4ee60fef9834facc9225e2a1b71085 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 20:30:39 +0900
Subject: [PATCH 05/33] =?UTF-8?q?feat:=20Docbar=20=EC=82=AC=EC=9E=A5?=
 =?UTF-8?q?=EB=8B=98=20=EC=A0=84=EC=9A=A9=20=EB=82=B4=20=EA=B3=B5=EA=B3=A0?=
 =?UTF-8?q?=C2=B7=EC=A7=80=EC=9B=90=EC=9E=90=20=ED=83=AD=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/doc/Applicant.svg   |  6 ++++
 src/shared/stores/useDocStore.ts     | 14 ++++----
 src/shared/types/tab.ts              |  4 ++-
 src/shared/ui/common/Docbar.tsx      | 54 ++++++++++++++++++++++------
 storybook/stories/Docbar.stories.tsx | 29 +++++++++++++++
 5 files changed, 88 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/icons/doc/Applicant.svg

diff --git a/src/assets/icons/doc/Applicant.svg b/src/assets/icons/doc/Applicant.svg
new file mode 100644
index 00000000..a2241ee1
--- /dev/null
+++ b/src/assets/icons/doc/Applicant.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 21V19.3333C16 18.2725 15.5786 17.2551 14.8284 16.5049C14.0783 15.7548 13.0609 15.3333 12 15.3333H6C4.93913 15.3333 3.92172 15.7548 3.17157 16.5049C2.42143 17.2551 2 18.2725 2 19.3333V21" fill="#232323" stroke="#232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 11.3333C11.2091 11.3333 13 9.54247 13 7.33333C13 5.12419 11.2091 3.33333 9 3.33333C6.79086 3.33333 5 5.12419 5 7.33333C5 9.54247 6.79086 11.3333 9 11.3333Z" fill="#232323" stroke="#232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 21V19.3333C21.9993 18.4471 21.7044 17.5861 21.1615 16.8857C20.6186 16.1853 19.8582 15.6851 19 15.485" stroke="#232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 3.44C16.8604 3.63823 17.6234 4.1235 18.1698 4.81358C18.7161 5.50367 19.0129 6.35772 19.0129 7.2375C19.0129 8.11728 18.7161 8.97133 18.1698 9.66142C17.6234 10.3515 16.8604 10.8368 16 11.035" stroke="#232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/shared/stores/useDocStore.ts b/src/shared/stores/useDocStore.ts
index 9ce61b87..a38ea0f8 100644
--- a/src/shared/stores/useDocStore.ts
+++ b/src/shared/stores/useDocStore.ts
@@ -8,22 +8,22 @@ const PATHNAME_TAB_MAP: Array<{ matcher: RegExp; tab: TabKey }> = [
   { matcher: /^\/user\/substitute-request/, tab: 'substitute' },
   { matcher: /^\/manager\/home/, tab: 'home' },
   { matcher: /^\/user\/job-lookup-map/, tab: 'search' },
+  // 사장님 구인구직 — 지원자 경로가 아래 내 공고 패턴보다 먼저 매칭돼야 합니다
+  { matcher: /^\/manager\/postings\/applications/, tab: 'applicant' },
+  // 사장님 구인구직 — 알바찾기(내 공고) 탭 하이라이트
+  { matcher: /^\/manager\/postings/, tab: 'search' },
 ]
 
-const createSelectedTab = (activeTab?: TabKey) => ({
+const createSelectedTab = (activeTab?: TabKey): Record<TabKey, boolean> => ({
   home: activeTab === 'home',
   my: activeTab === 'my',
   search: activeTab === 'search',
   substitute: activeTab === 'substitute',
+  applicant: activeTab === 'applicant',
 })
 
 interface DocStoreState {
-  selectedTab: {
-    home: boolean
-    my: boolean
-    search: boolean
-    substitute: boolean
-  }
+  selectedTab: Record<TabKey, boolean>
   setSelectedTab: (selectedTab: DocStoreState['selectedTab']) => void
   setSelectedTabByPathname: (pathname: string) => void
 }
diff --git a/src/shared/types/tab.ts b/src/shared/types/tab.ts
index 4413f25c..24ea3ce8 100644
--- a/src/shared/types/tab.ts
+++ b/src/shared/types/tab.ts
@@ -1,8 +1,10 @@
-export type TabKey = 'home' | 'my' | 'search' | 'substitute'
+export type TabKey = 'home' | 'my' | 'search' | 'substitute' | 'applicant'
 
 export const TAB_TITLE_MAP: Record<TabKey, string> = {
   home: '홈',
   my: 'MY',
   search: '알바 찾기',
   substitute: '대타',
+  /** 사장님(MANAGER) 전용 탭 */
+  applicant: '지원자',
 }
diff --git a/src/shared/ui/common/Docbar.tsx b/src/shared/ui/common/Docbar.tsx
index e4ddc0c9..08ea6576 100644
--- a/src/shared/ui/common/Docbar.tsx
+++ b/src/shared/ui/common/Docbar.tsx
@@ -1,3 +1,4 @@
+import ApplicantIcon from '@/assets/icons/doc/Applicant.svg?react'
 import HomeIcon from '@/assets/icons/doc/Home.svg?react'
 import MYIcon from '@/assets/icons/doc/MY.svg?react'
 import SearchIcon from '@/assets/icons/doc/Search.svg?react'
@@ -17,12 +18,14 @@ function DocContent({
   alt,
   isSelected,
   titleKey,
+  label,
   onClick,
 }: {
   icon: ComponentType<SVGProps<SVGSVGElement>>
   alt: string
   isSelected: boolean
   titleKey: TabKey
+  label?: string
   onClick: () => void
 }) {
   const Icon = icon
@@ -46,7 +49,7 @@ function DocContent({
           letterSpacing: typography.doc.letterSpacing,
         }}
       >
-        {TAB_TITLE_MAP[titleKey]}
+        {label ?? TAB_TITLE_MAP[titleKey]}
       </p>
     </button>
   )
@@ -58,12 +61,20 @@ interface DocbarViewProps {
   selectedTab: DocbarSelectedTab
   onTabClick: (tab: TabKey) => void
   tabs: TabKey[]
+  /** 탭별 라벨 오버라이드 — 미지정 탭은 TAB_TITLE_MAP 기본값을 사용 */
+  labelByTab?: Partial<Record<TabKey, string>>
 }
 
-export function DocbarView({ selectedTab, onTabClick, tabs }: DocbarViewProps) {
+export function DocbarView({
+  selectedTab,
+  onTabClick,
+  tabs,
+  labelByTab,
+}: DocbarViewProps) {
   const iconByTab: Record<TabKey, ComponentType<SVGProps<SVGSVGElement>>> = {
     home: HomeIcon,
     search: SearchIcon,
+    applicant: ApplicantIcon,
     substitute: SubstituteIcon,
     my: MYIcon,
   }
@@ -71,6 +82,7 @@ export function DocbarView({ selectedTab, onTabClick, tabs }: DocbarViewProps) {
   const altByTab: Record<TabKey, string> = {
     home: 'Home',
     search: 'Search',
+    applicant: 'Applicant',
     substitute: 'Substitute',
     my: 'MY',
   }
@@ -85,6 +97,7 @@ export function DocbarView({ selectedTab, onTabClick, tabs }: DocbarViewProps) {
             alt={altByTab[tab]}
             isSelected={selectedTab[tab]}
             titleKey={tab}
+            label={labelByTab?.[tab]}
             onClick={() => onTabClick(tab)}
           />
         ))}
@@ -106,22 +119,36 @@ export function Docbar() {
     setSelectedTabByPathname(pathname)
   }, [pathname, setSelectedTabByPathname])
 
+  const isManager = scope === 'MANAGER'
+
+  /** 지원자 탭은 사장님 전용 — 일반 유저는 기존 4탭을 유지합니다 */
   const tabs = useMemo<TabKey[]>(
-    () => ['home', 'search', 'substitute', 'my'],
-    []
+    () =>
+      isManager
+        ? ['home', 'search', 'applicant', 'substitute', 'my']
+        : ['home', 'search', 'substitute', 'my'],
+    [isManager]
   )
 
   const pathByTab: Record<TabKey, string> = useMemo(
     () => ({
       home: homePathForScope(scope),
-      search: ROUTES.USER.JOB_LOOKUP_MAP,
-      substitute:
-        scope === 'MANAGER'
-          ? ROUTES.MANAGER.SUBSTITUTE_REQUEST
-          : ROUTES.USER.SUBSTITUTE_REQUEST,
+      // 사장님은 구인구직(내 공고 목록), 일반 유저는 기존 알바찾기 경로 유지
+      search: isManager ? ROUTES.MANAGER.POSTINGS : ROUTES.USER.JOB_LOOKUP_MAP,
+      // 사장님 전용 탭 — 일반 유저에게는 렌더링되지 않습니다
+      applicant: ROUTES.MANAGER.POSTING_APPLICATIONS,
+      substitute: isManager
+        ? ROUTES.MANAGER.SUBSTITUTE_REQUEST
+        : ROUTES.USER.SUBSTITUTE_REQUEST,
       my: ROUTES.MY.ROOT,
     }),
-    [scope]
+    [scope, isManager]
+  )
+
+  /** 사장님에게는 '알바 찾기' 대신 '내 공고'로 노출 */
+  const labelByTab = useMemo<Partial<Record<TabKey, string>> | undefined>(
+    () => (isManager ? { search: '내 공고' } : undefined),
+    [isManager]
   )
 
   const onTabClick = (tab: TabKey) => {
@@ -129,6 +156,11 @@ export function Docbar() {
   }
 
   return (
-    <DocbarView selectedTab={selectedTab} onTabClick={onTabClick} tabs={tabs} />
+    <DocbarView
+      selectedTab={selectedTab}
+      onTabClick={onTabClick}
+      tabs={tabs}
+      labelByTab={labelByTab}
+    />
   )
 }
diff --git a/storybook/stories/Docbar.stories.tsx b/storybook/stories/Docbar.stories.tsx
index ebb070a0..35f3c844 100644
--- a/storybook/stories/Docbar.stories.tsx
+++ b/storybook/stories/Docbar.stories.tsx
@@ -11,8 +11,18 @@ const createSelectedTab = (activeTab: TabKey): DocbarSelectedTab => ({
   my: activeTab === 'my',
   search: activeTab === 'search',
   substitute: activeTab === 'substitute',
+  applicant: activeTab === 'applicant',
 })
 
+/** 사장님(MANAGER) 탭 구성 — 지원자 탭 포함 5탭 */
+const MANAGER_TABS: TabKey[] = [
+  'home',
+  'search',
+  'applicant',
+  'substitute',
+  'my',
+]
+
 const meta = {
   title: 'shared/ui/common/Docbar',
   component: DocbarView,
@@ -56,3 +66,22 @@ export const MySelected: Story = {
     tabs: ['home', 'search', 'substitute', 'my'],
   },
 }
+
+/** 사장님 5탭 — '알바 찾기'가 '내 공고'로 노출되고 지원자 탭이 추가됩니다 */
+export const ManagerApplicantSelected: Story = {
+  args: {
+    selectedTab: createSelectedTab('applicant'),
+    onTabClick: () => {},
+    tabs: MANAGER_TABS,
+    labelByTab: { search: '내 공고' },
+  },
+}
+
+export const ManagerPostingsSelected: Story = {
+  args: {
+    selectedTab: createSelectedTab('search'),
+    onTabClick: () => {},
+    tabs: MANAGER_TABS,
+    labelByTab: { search: '내 공고' },
+  },
+}

From 05091cf6cfefc23c969a484579219129e984f9fb Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 20:53:26 +0900
Subject: [PATCH 06/33] =?UTF-8?q?refactor:=20=EA=B5=AC=EC=9D=B8=EA=B5=AC?=
 =?UTF-8?q?=EC=A7=81=20=EC=9D=B8=EB=9D=BC=EC=9D=B8=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20SVG=20=EC=9E=90=EC=82=B0=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/posting/Alert.svg            |   4 +
 src/assets/icons/posting/Calendar.svg         |   4 +
 src/assets/icons/posting/CheckCircle.svg      |   4 +
 src/assets/icons/posting/ChevronRight.svg     |   3 +
 src/assets/icons/posting/Clock.svg            |   4 +
 src/assets/icons/posting/Close.svg            |   3 +
 src/assets/icons/posting/Lock.svg             |   4 +
 src/assets/icons/posting/Person.svg           |   4 +
 src/assets/icons/posting/Plus.svg             |   3 +
 .../manager/posting/ui/ApplicantCard.tsx      |   3 +-
 .../manager/posting/ui/HiringActionBar.tsx    |   2 +-
 .../manager/posting/ui/PostingFormFields.tsx  |   2 +-
 .../manager/posting/ui/PostingListCard.tsx    |   3 +-
 .../manager/posting/ui/ScheduleEditor.tsx     |   3 +-
 src/features/manager/posting/ui/icons.tsx     | 164 ------------------
 .../manager/application-detail/index.tsx      |   2 +-
 src/pages/manager/application-list/index.tsx  |   2 +-
 src/pages/manager/posting-detail/index.tsx    |  10 +-
 18 files changed, 47 insertions(+), 177 deletions(-)
 create mode 100644 src/assets/icons/posting/Alert.svg
 create mode 100644 src/assets/icons/posting/Calendar.svg
 create mode 100644 src/assets/icons/posting/CheckCircle.svg
 create mode 100644 src/assets/icons/posting/ChevronRight.svg
 create mode 100644 src/assets/icons/posting/Clock.svg
 create mode 100644 src/assets/icons/posting/Close.svg
 create mode 100644 src/assets/icons/posting/Lock.svg
 create mode 100644 src/assets/icons/posting/Person.svg
 create mode 100644 src/assets/icons/posting/Plus.svg
 delete mode 100644 src/features/manager/posting/ui/icons.tsx

diff --git a/src/assets/icons/posting/Alert.svg b/src/assets/icons/posting/Alert.svg
new file mode 100644
index 00000000..c221a140
--- /dev/null
+++ b/src/assets/icons/posting/Alert.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="9"/>
+<path d="M12 7.5v5M12 16.2h.01"/>
+</svg>
diff --git a/src/assets/icons/posting/Calendar.svg b/src/assets/icons/posting/Calendar.svg
new file mode 100644
index 00000000..17c0f11b
--- /dev/null
+++ b/src/assets/icons/posting/Calendar.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="5" width="18" height="16" rx="3"/>
+<path d="M3 10h18M8 3v4M16 3v4"/>
+</svg>
diff --git a/src/assets/icons/posting/CheckCircle.svg b/src/assets/icons/posting/CheckCircle.svg
new file mode 100644
index 00000000..b75691d9
--- /dev/null
+++ b/src/assets/icons/posting/CheckCircle.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="9"/>
+<path d="m8.5 12.2 2.4 2.4 4.6-4.9"/>
+</svg>
diff --git a/src/assets/icons/posting/ChevronRight.svg b/src/assets/icons/posting/ChevronRight.svg
new file mode 100644
index 00000000..55696990
--- /dev/null
+++ b/src/assets/icons/posting/ChevronRight.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<path d="m9 5 7 7-7 7"/>
+</svg>
diff --git a/src/assets/icons/posting/Clock.svg b/src/assets/icons/posting/Clock.svg
new file mode 100644
index 00000000..6bad8fda
--- /dev/null
+++ b/src/assets/icons/posting/Clock.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="9"/>
+<path d="M12 7v5l3 2"/>
+</svg>
diff --git a/src/assets/icons/posting/Close.svg b/src/assets/icons/posting/Close.svg
new file mode 100644
index 00000000..fa406d71
--- /dev/null
+++ b/src/assets/icons/posting/Close.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6l12 12M18 6L6 18"/>
+</svg>
diff --git a/src/assets/icons/posting/Lock.svg b/src/assets/icons/posting/Lock.svg
new file mode 100644
index 00000000..c929a9c8
--- /dev/null
+++ b/src/assets/icons/posting/Lock.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.5" y="10.5" width="15" height="10" rx="2.5"/>
+<path d="M8 10.5V7.8a4 4 0 0 1 8 0v2.7"/>
+</svg>
diff --git a/src/assets/icons/posting/Person.svg b/src/assets/icons/posting/Person.svg
new file mode 100644
index 00000000..057cddce
--- /dev/null
+++ b/src/assets/icons/posting/Person.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="8" r="3.5"/>
+<path d="M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5"/>
+</svg>
diff --git a/src/assets/icons/posting/Plus.svg b/src/assets/icons/posting/Plus.svg
new file mode 100644
index 00000000..fca5177b
--- /dev/null
+++ b/src/assets/icons/posting/Plus.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5v14M5 12h14"/>
+</svg>
diff --git a/src/features/manager/posting/ui/ApplicantCard.tsx b/src/features/manager/posting/ui/ApplicantCard.tsx
index c189969a..3aa8eece 100644
--- a/src/features/manager/posting/ui/ApplicantCard.tsx
+++ b/src/features/manager/posting/ui/ApplicantCard.tsx
@@ -1,5 +1,6 @@
+import CalendarIcon from '@/assets/icons/posting/Calendar.svg?react'
+import ClockIcon from '@/assets/icons/posting/Clock.svg?react'
 import { ManagerApplicationStatusBadge } from '@/features/manager/posting/ui/ManagerApplicationStatusBadge'
-import { CalendarIcon, ClockIcon } from '@/features/manager/posting/ui/icons'
 import {
   formatRelativeTime,
   formatTimeRange,
diff --git a/src/features/manager/posting/ui/HiringActionBar.tsx b/src/features/manager/posting/ui/HiringActionBar.tsx
index 380d0df4..e4368f78 100644
--- a/src/features/manager/posting/ui/HiringActionBar.tsx
+++ b/src/features/manager/posting/ui/HiringActionBar.tsx
@@ -2,7 +2,7 @@ import {
   HIRING_DECISIONS,
   type HiringDecision,
 } from '@/features/manager/posting/lib/applicationStatus'
-import { LockIcon } from '@/features/manager/posting/ui/icons'
+import LockIcon from '@/assets/icons/posting/Lock.svg?react'
 import { cn } from '@/shared/lib/utils'
 
 interface HiringActionBarProps {
diff --git a/src/features/manager/posting/ui/PostingFormFields.tsx b/src/features/manager/posting/ui/PostingFormFields.tsx
index 5a790c80..ab96ebe3 100644
--- a/src/features/manager/posting/ui/PostingFormFields.tsx
+++ b/src/features/manager/posting/ui/PostingFormFields.tsx
@@ -5,7 +5,7 @@ import {
   MOCK_KEYWORDS,
   MOCK_WORKSPACES,
 } from '@/features/manager/posting/mocks/data'
-import { AlertIcon } from '@/features/manager/posting/ui/icons'
+import AlertIcon from '@/assets/icons/posting/Alert.svg?react'
 import { ScheduleEditor } from '@/features/manager/posting/ui/ScheduleEditor'
 import {
   MAX_KEYWORDS,
diff --git a/src/features/manager/posting/ui/PostingListCard.tsx b/src/features/manager/posting/ui/PostingListCard.tsx
index 9cb287ec..6925eacb 100644
--- a/src/features/manager/posting/ui/PostingListCard.tsx
+++ b/src/features/manager/posting/ui/PostingListCard.tsx
@@ -1,5 +1,6 @@
+import CalendarIcon from '@/assets/icons/posting/Calendar.svg?react'
+import ClockIcon from '@/assets/icons/posting/Clock.svg?react'
 import { ManagerPostingStatusBadge } from '@/features/manager/posting/ui/ManagerPostingStatusBadge'
-import { CalendarIcon, ClockIcon } from '@/features/manager/posting/ui/icons'
 import {
   formatTimeRange,
   formatWorkingDays,
diff --git a/src/features/manager/posting/ui/ScheduleEditor.tsx b/src/features/manager/posting/ui/ScheduleEditor.tsx
index e5407146..c2e269f3 100644
--- a/src/features/manager/posting/ui/ScheduleEditor.tsx
+++ b/src/features/manager/posting/ui/ScheduleEditor.tsx
@@ -1,5 +1,6 @@
+import CloseIcon from '@/assets/icons/posting/Close.svg?react'
+import PlusIcon from '@/assets/icons/posting/Plus.svg?react'
 import type { PostingFormViewModel } from '@/features/manager/posting/hooks/usePostingForm'
-import { CloseIcon, PlusIcon } from '@/features/manager/posting/ui/icons'
 import {
   WORKING_DAYS,
   WORKING_DAY_LABEL,
diff --git a/src/features/manager/posting/ui/icons.tsx b/src/features/manager/posting/ui/icons.tsx
deleted file mode 100644
index 574cabb2..00000000
--- a/src/features/manager/posting/ui/icons.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-/** 구인구직 화면 전용 아이콘 — 24 viewBox, 색상은 부모의 text-* 를 따릅니다 */
-
-interface IconProps {
-  className?: string
-}
-
-export function CalendarIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect x="3" y="5" width="18" height="16" rx="3" />
-      <path d="M3 10h18M8 3v4M16 3v4" />
-    </svg>
-  )
-}
-
-export function ClockIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <circle cx="12" cy="12" r="9" />
-      <path d="M12 7v5l3 2" />
-    </svg>
-  )
-}
-
-export function PersonIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <circle cx="12" cy="8" r="3.5" />
-      <path d="M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5" />
-    </svg>
-  )
-}
-
-export function ChevronRightIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="m9 5 7 7-7 7" />
-    </svg>
-  )
-}
-
-export function PlusIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M12 5v14M5 12h14" />
-    </svg>
-  )
-}
-
-export function CloseIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M6 6l12 12M18 6L6 18" />
-    </svg>
-  )
-}
-
-export function AlertIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <circle cx="12" cy="12" r="9" />
-      <path d="M12 7.5v5M12 16.2h.01" />
-    </svg>
-  )
-}
-
-export function CheckCircleIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <circle cx="12" cy="12" r="9" />
-      <path d="m8.5 12.2 2.4 2.4 4.6-4.9" />
-    </svg>
-  )
-}
-
-export function LockIcon({ className }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect x="4.5" y="10.5" width="15" height="10" rx="2.5" />
-      <path d="M8 10.5V7.8a4 4 0 0 1 8 0v2.7" />
-    </svg>
-  )
-}
diff --git a/src/pages/manager/application-detail/index.tsx b/src/pages/manager/application-detail/index.tsx
index 5f1ff0dd..349398f1 100644
--- a/src/pages/manager/application-detail/index.tsx
+++ b/src/pages/manager/application-detail/index.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import { useApplicationDetailViewModel } from '@/features/manager/posting/hooks/useApplicationDetailViewModel'
 import { HiringActionBar } from '@/features/manager/posting/ui/HiringActionBar'
 import { ManagerApplicationStatusBadge } from '@/features/manager/posting/ui/ManagerApplicationStatusBadge'
-import { CheckCircleIcon } from '@/features/manager/posting/ui/icons'
+import CheckCircleIcon from '@/assets/icons/posting/CheckCircle.svg?react'
 import {
   formatTimeRange,
   formatWorkingDays,
diff --git a/src/pages/manager/application-list/index.tsx b/src/pages/manager/application-list/index.tsx
index fce790a0..53d849ab 100644
--- a/src/pages/manager/application-list/index.tsx
+++ b/src/pages/manager/application-list/index.tsx
@@ -4,7 +4,7 @@ import { useApplicationListViewModel } from '@/features/manager/posting/hooks/us
 import { APPLICATION_STATUS_FILTER_OPTIONS } from '@/features/manager/posting/lib/applicationStatus'
 import { ApplicantCard } from '@/features/manager/posting/ui/ApplicantCard'
 import { FilterBar } from '@/features/manager/posting/ui/FilterBar'
-import { PersonIcon } from '@/features/manager/posting/ui/icons'
+import PersonIcon from '@/assets/icons/posting/Person.svg?react'
 import { managerPostingApplicationDetailPath } from '@/shared/constants/routes'
 import { MoreButton } from '@/shared/ui/common/MoreButton'
 import { Navbar } from '@/shared/ui/common/Navbar'
diff --git a/src/pages/manager/posting-detail/index.tsx b/src/pages/manager/posting-detail/index.tsx
index e843bf64..39d126c3 100644
--- a/src/pages/manager/posting-detail/index.tsx
+++ b/src/pages/manager/posting-detail/index.tsx
@@ -1,13 +1,11 @@
 import { useNavigate, useParams } from 'react-router-dom'
 
+import CalendarIcon from '@/assets/icons/posting/Calendar.svg?react'
+import ChevronRightIcon from '@/assets/icons/posting/ChevronRight.svg?react'
+import ClockIcon from '@/assets/icons/posting/Clock.svg?react'
+import PersonIcon from '@/assets/icons/posting/Person.svg?react'
 import { usePostingDetailViewModel } from '@/features/manager/posting/hooks/usePostingDetailViewModel'
 import { ManagerPostingStatusBadge } from '@/features/manager/posting/ui/ManagerPostingStatusBadge'
-import {
-  CalendarIcon,
-  ChevronRightIcon,
-  ClockIcon,
-  PersonIcon,
-} from '@/features/manager/posting/ui/icons'
 import {
   formatTimeRange,
   formatWorkingDays,

From edc1af562ca23c97e07dcbc1103d4797d44a2d53 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 21:07:10 +0900
Subject: [PATCH 07/33] =?UTF-8?q?feat:=20Navbar=20=EB=92=A4=EB=A1=9C?=
 =?UTF-8?q?=EA=B0=80=EA=B8=B0=20=EC=88=A8=EA=B9=80=20=EC=98=B5=EC=85=98(sh?=
 =?UTF-8?q?owBack)=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/common/Navbar.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/shared/ui/common/Navbar.tsx b/src/shared/ui/common/Navbar.tsx
index b3f67974..6dbcb10b 100644
--- a/src/shared/ui/common/Navbar.tsx
+++ b/src/shared/ui/common/Navbar.tsx
@@ -13,6 +13,8 @@ interface NavbarProps {
   onBackClick?: () => void
   /** 상세 헤더(`variant="detail"`) 우측 영역 — 알림·메뉴 자리에 커스텀 노출 시 사용 */
   rightAction?: ReactNode
+  /** 뒤로가기 버튼 노출 — 기본 true. Docbar 탭 진입점처럼 돌아갈 곳이 없는 화면은 false */
+  showBack?: boolean
   /** 하단 구분선 — 기본 true */
   showBorder?: boolean
   /** 메인 헤더 알림 뱃지 표시 여부 */
@@ -26,6 +28,7 @@ export function Navbar({
   title = '',
   onBackClick,
   rightAction,
+  showBack = true,
   showBorder = true,
   hasUnread = false,
   onNotificationClick,
@@ -55,14 +58,16 @@ export function Navbar({
             <span className="typography-logo">알터</span>
           </div>
         ) : (
-          <button
-            type="button"
-            aria-label="뒤로가기"
-            onClick={handleBackClick}
-            className="flex h-6 w-6 items-center justify-center"
-          >
-            <img src={ChevronLeftIcon} alt="Back" className="h-6 w-6" />
-          </button>
+          showBack && (
+            <button
+              type="button"
+              aria-label="뒤로가기"
+              onClick={handleBackClick}
+              className="flex h-6 w-6 items-center justify-center"
+            >
+              <img src={ChevronLeftIcon} alt="Back" className="h-6 w-6" />
+            </button>
+          )
         )}
       </div>
 

From ca32bc238a8ed93987677f96415e166fc4223a7d Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 21:07:19 +0900
Subject: [PATCH 08/33] =?UTF-8?q?fix:=20=EB=82=B4=20=EA=B3=B5=EA=B3=A0=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=95=98=EB=8B=A8=20CTA=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20Navbar=20=EC=9E=91=EC=84=B1=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/posting/Write.svg       |  4 ++++
 src/pages/manager/posting-list/index.tsx | 23 ++++++++++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/icons/posting/Write.svg

diff --git a/src/assets/icons/posting/Write.svg b/src/assets/icons/posting/Write.svg
new file mode 100644
index 00000000..88461cd8
--- /dev/null
+++ b/src/assets/icons/posting/Write.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 4.5H5.5A2.5 2.5 0 0 0 3 7v11.5A2.5 2.5 0 0 0 5.5 21H17a2.5 2.5 0 0 0 2.5-2.5v-6"/>
+<path d="M17.6 3.4a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 8.6-8.6Z"/>
+</svg>
diff --git a/src/pages/manager/posting-list/index.tsx b/src/pages/manager/posting-list/index.tsx
index 291d8cff..e3a278c9 100644
--- a/src/pages/manager/posting-list/index.tsx
+++ b/src/pages/manager/posting-list/index.tsx
@@ -1,11 +1,11 @@
 import { useNavigate } from 'react-router-dom'
 
+import WriteIcon from '@/assets/icons/posting/Write.svg?react'
 import { usePostingListViewModel } from '@/features/manager/posting/hooks/usePostingListViewModel'
 import { POSTING_STATUS_FILTER_OPTIONS } from '@/features/manager/posting/lib/postingStatus'
 import { FilterBar } from '@/features/manager/posting/ui/FilterBar'
 import { PostingListCard } from '@/features/manager/posting/ui/PostingListCard'
 import { managerPostingDetailPath, ROUTES } from '@/shared/constants/routes'
-import { AuthButton } from '@/shared/ui/common/AuthButton'
 import { Navbar } from '@/shared/ui/common/Navbar'
 import { Skeleton } from '@/shared/ui/common/Skeleton'
 
@@ -47,10 +47,21 @@ export function ManagerPostingListPage() {
       <Navbar
         variant="detail"
         title="내 공고"
-        onBackClick={() => navigate(-1)}
+        showBack={false}
+        rightAction={
+          <button
+            type="button"
+            aria-label="공고 작성"
+            onClick={() => navigate(ROUTES.MANAGER.POSTING_NEW)}
+            className="flex h-6 w-6 items-center justify-center text-text-100 transition-colors hover:text-main"
+          >
+            <WriteIcon className="h-6 w-6" />
+          </button>
+        }
       />
 
-      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-32 pt-4">
+      {/* 하단 Docbar(h-14)에 가리지 않도록 여유 패딩 */}
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-24 pt-4">
         <FilterBar
           workspaceOptions={workspaceOptions}
           workspaceValue={workspaceFilter}
@@ -87,12 +98,6 @@ export function ManagerPostingListPage() {
           </ul>
         ) : null}
       </main>
-
-      <div className="fixed bottom-14 left-1/2 z-10 w-full max-w-[428px] -translate-x-1/2 border-t border-line-1 bg-white px-4 pb-4 pt-3">
-        <AuthButton onClick={() => navigate(ROUTES.MANAGER.POSTING_NEW)}>
-          공고 작성
-        </AuthButton>
-      </div>
     </div>
   )
 }

From 8689cc69e53a9a299e7c110d23ec9ced4d905d63 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Sun, 26 Jul 2026 21:07:28 +0900
Subject: [PATCH 09/33] =?UTF-8?q?fix:=20=EA=B3=B5=EA=B3=A0=EB=B3=84=20?=
 =?UTF-8?q?=EC=A7=80=EC=9B=90=EC=9E=90=20=EB=AA=A9=EB=A1=9D=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20Docbar=20=EC=88=A8?=
 =?UTF-8?q?=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/App.tsx                              |  8 ++++++++
 src/pages/manager/application-list/index.tsx | 14 +++++++++-----
 src/shared/constants/routes.ts               |  8 ++++++--
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 5b29df49..989a8a39 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -177,6 +177,14 @@ export function App() {
               </HomeRouteGuard>
             }
           />
+          <Route
+            path={ROUTES.MANAGER.POSTING_APPLICATIONS_BY_POSTING_PATTERN}
+            element={
+              <HomeRouteGuard expected="MANAGER">
+                <ManagerApplicationListPage />
+              </HomeRouteGuard>
+            }
+          />
           <Route
             path={ROUTES.MANAGER.POSTING_APPLICATION_DETAIL_PATTERN}
             element={
diff --git a/src/pages/manager/application-list/index.tsx b/src/pages/manager/application-list/index.tsx
index 53d849ab..f1cfd1da 100644
--- a/src/pages/manager/application-list/index.tsx
+++ b/src/pages/manager/application-list/index.tsx
@@ -1,4 +1,4 @@
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import { useApplicationListViewModel } from '@/features/manager/posting/hooks/useApplicationListViewModel'
 import { APPLICATION_STATUS_FILTER_OPTIONS } from '@/features/manager/posting/lib/applicationStatus'
@@ -33,11 +33,15 @@ function ApplicantListSkeleton() {
 /** SCREEN 2 · 지원자 목록 */
 export function ManagerApplicationListPage() {
   const navigate = useNavigate()
-  const [searchParams] = useSearchParams()
+  const { postingId: postingIdParam } = useParams()
 
-  // 공고 상세 → '지원자 보기'로 진입한 경우 해당 공고로 한정
-  const postingIdParam = searchParams.get('postingId')
+  /**
+   * 진입 경로 2가지
+   * - Docbar '지원자' 탭: /manager/postings/applications — 전체 지원자, 뒤로가기 없음
+   * - 공고 상세 '지원자 보기': /manager/postings/:postingId/applications — 해당 공고로 한정
+   */
   const postingId = postingIdParam ? Number(postingIdParam) : undefined
+  const isFromPosting = postingId !== undefined
 
   const {
     applications,
@@ -55,7 +59,7 @@ export function ManagerApplicationListPage() {
 
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
-      <Navbar variant="detail" title="지원자 목록" />
+      <Navbar variant="detail" title="지원자 목록" showBack={isFromPosting} />
 
       {/* 하단 Docbar(h-14)에 가리지 않도록 여유 패딩 */}
       <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-24 pt-4">
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
index 115edc79..36753051 100644
--- a/src/shared/constants/routes.ts
+++ b/src/shared/constants/routes.ts
@@ -41,8 +41,11 @@ export const ROUTES = {
     POSTINGS: '/manager/postings',
     /** 공고 등록 */
     POSTING_NEW: '/manager/postings/new',
-    /** 지원자 목록 */
+    /** 지원자 목록 — Docbar 탭 진입점(전체 지원자) */
     POSTING_APPLICATIONS: '/manager/postings/applications',
+    /** 특정 공고의 지원자 목록 — 공고 상세에서 진입(Docbar 없음) */
+    POSTING_APPLICATIONS_BY_POSTING_PATTERN:
+      '/manager/postings/:postingId/applications',
     /** 지원자 상세·채용 결정 (파라미터) */
     POSTING_APPLICATION_DETAIL_PATTERN:
       '/manager/postings/applications/:applicationId',
@@ -95,9 +98,10 @@ export function managerPostingEditPath(postingId: number) {
 }
 
 export function managerPostingApplicationsPath(postingId?: number) {
+  // 공고 지정 시 Docbar 없는 하위 경로로, 미지정 시 탭 진입점으로
   return postingId === undefined
     ? '/manager/postings/applications'
-    : `/manager/postings/applications?postingId=${postingId}`
+    : `/manager/postings/${postingId}/applications`
 }
 
 export function managerPostingApplicationDetailPath(applicationId: number) {

From ae8ba1cd4948b9ecc1e6c107c557139c886e608c Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 11:08:03 +0900
Subject: [PATCH 10/33] =?UTF-8?q?refactor:=20=EC=8B=9C=EA=B0=84=20?=
 =?UTF-8?q?=ED=94=BD=EC=BB=A4=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20sha?=
 =?UTF-8?q?red=20=EA=B3=84=EC=B8=B5=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../worker-schedule/components/FixedScheduleDateSection.tsx | 2 +-
 .../components/GeneralScheduleDateSection.tsx               | 2 +-
 .../worker-schedule/components/WorkTimeRangeField.tsx       | 6 +++---
 .../worker-schedule => shared}/lib/formatKoreanWorkTime.ts  | 0
 .../manager/worker-schedule => shared}/types/workTime.ts    | 0
 .../components => shared/ui/common}/WheelPicker.tsx         | 0
 .../ui/common}/WorkTimePickerDrawer.tsx                     | 6 +++---
 7 files changed, 8 insertions(+), 8 deletions(-)
 rename src/{pages/manager/worker-schedule => shared}/lib/formatKoreanWorkTime.ts (100%)
 rename src/{pages/manager/worker-schedule => shared}/types/workTime.ts (100%)
 rename src/{pages/manager/worker-schedule/components => shared/ui/common}/WheelPicker.tsx (100%)
 rename src/{pages/manager/worker-schedule/components => shared/ui/common}/WorkTimePickerDrawer.tsx (93%)

diff --git a/src/pages/manager/worker-schedule/components/FixedScheduleDateSection.tsx b/src/pages/manager/worker-schedule/components/FixedScheduleDateSection.tsx
index 6eb50bc0..7c751aa7 100644
--- a/src/pages/manager/worker-schedule/components/FixedScheduleDateSection.tsx
+++ b/src/pages/manager/worker-schedule/components/FixedScheduleDateSection.tsx
@@ -7,7 +7,7 @@ import { ScheduleDateDisplayRow } from '@/pages/manager/worker-schedule/componen
 import { ScheduleDatePickerDrawer } from '@/pages/manager/worker-schedule/components/ScheduleDatePickerDrawer'
 import { WeekdayPicker } from '@/pages/manager/worker-schedule/components/WeekdayPicker'
 import { WorkTimeRangeField } from '@/pages/manager/worker-schedule/components/WorkTimeRangeField'
-import type { WorkTimeEditorState } from '@/pages/manager/worker-schedule/types/workTime'
+import type { WorkTimeEditorState } from '@/shared/types/workTime'
 
 type DatePickerTarget = 'start' | 'end' | null
 
diff --git a/src/pages/manager/worker-schedule/components/GeneralScheduleDateSection.tsx b/src/pages/manager/worker-schedule/components/GeneralScheduleDateSection.tsx
index fff95e39..4b194c32 100644
--- a/src/pages/manager/worker-schedule/components/GeneralScheduleDateSection.tsx
+++ b/src/pages/manager/worker-schedule/components/GeneralScheduleDateSection.tsx
@@ -1,7 +1,7 @@
 import calendarIcon from '@/assets/icons/schedule/schedule_calendar.svg'
 import { CollapsibleScheduleSection } from '@/pages/manager/worker-schedule/components/CollapsibleScheduleSection'
 import { WorkTimeRangeField } from '@/pages/manager/worker-schedule/components/WorkTimeRangeField'
-import type { WorkTimeEditorState } from '@/pages/manager/worker-schedule/types/workTime'
+import type { WorkTimeEditorState } from '@/shared/types/workTime'
 import { ManagerMonthCalendar } from '@/shared/ui/schedule/ManagerMonthCalendar'
 
 interface GeneralScheduleDateSectionProps {
diff --git a/src/pages/manager/worker-schedule/components/WorkTimeRangeField.tsx b/src/pages/manager/worker-schedule/components/WorkTimeRangeField.tsx
index c75a3b6f..d06b0b53 100644
--- a/src/pages/manager/worker-schedule/components/WorkTimeRangeField.tsx
+++ b/src/pages/manager/worker-schedule/components/WorkTimeRangeField.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { formatKoreanTimePart } from '@/pages/manager/worker-schedule/lib/formatKoreanWorkTime'
-import { WorkTimePickerDrawer } from '@/pages/manager/worker-schedule/components/WorkTimePickerDrawer'
-import type { WorkTimeEditorState } from '@/pages/manager/worker-schedule/types/workTime'
+import { formatKoreanTimePart } from '@/shared/lib/formatKoreanWorkTime'
+import { WorkTimePickerDrawer } from '@/shared/ui/common/WorkTimePickerDrawer'
+import type { WorkTimeEditorState } from '@/shared/types/workTime'
 import { cn } from '@/shared/lib/utils'
 
 type EditTarget = 'start' | 'end'
diff --git a/src/pages/manager/worker-schedule/lib/formatKoreanWorkTime.ts b/src/shared/lib/formatKoreanWorkTime.ts
similarity index 100%
rename from src/pages/manager/worker-schedule/lib/formatKoreanWorkTime.ts
rename to src/shared/lib/formatKoreanWorkTime.ts
diff --git a/src/pages/manager/worker-schedule/types/workTime.ts b/src/shared/types/workTime.ts
similarity index 100%
rename from src/pages/manager/worker-schedule/types/workTime.ts
rename to src/shared/types/workTime.ts
diff --git a/src/pages/manager/worker-schedule/components/WheelPicker.tsx b/src/shared/ui/common/WheelPicker.tsx
similarity index 100%
rename from src/pages/manager/worker-schedule/components/WheelPicker.tsx
rename to src/shared/ui/common/WheelPicker.tsx
diff --git a/src/pages/manager/worker-schedule/components/WorkTimePickerDrawer.tsx b/src/shared/ui/common/WorkTimePickerDrawer.tsx
similarity index 93%
rename from src/pages/manager/worker-schedule/components/WorkTimePickerDrawer.tsx
rename to src/shared/ui/common/WorkTimePickerDrawer.tsx
index d09822bd..f2b77da0 100644
--- a/src/pages/manager/worker-schedule/components/WorkTimePickerDrawer.tsx
+++ b/src/shared/ui/common/WorkTimePickerDrawer.tsx
@@ -1,5 +1,5 @@
 import { Drawer } from 'vaul'
-import { WheelPicker } from '@/pages/manager/worker-schedule/components/WheelPicker'
+import { WheelPicker } from '@/shared/ui/common/WheelPicker'
 import {
   hour24To12Parts,
   partsToHour24,
@@ -7,8 +7,8 @@ import {
   minuteToTenMinuteIndex,
   WORK_TIME_MINUTE_OPTIONS,
   type TimePeriod,
-} from '@/pages/manager/worker-schedule/lib/formatKoreanWorkTime'
-import type { WorkTimeEditorState } from '@/pages/manager/worker-schedule/types/workTime'
+} from '@/shared/lib/formatKoreanWorkTime'
+import type { WorkTimeEditorState } from '@/shared/types/workTime'
 
 const PERIOD_ITEMS = ['오전', '오후'] as const
 const HOUR_ITEMS = Array.from({ length: 12 }, (_, i) => `${i + 1}시`)

From 048df1c26d42abee8548f6be4793165de25f7fb2 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 11:08:20 +0900
Subject: [PATCH 11/33] =?UTF-8?q?feat:=20=EA=B7=BC=EB=AC=B4=EC=9D=BC?=
 =?UTF-8?q?=EC=A0=95=20=EC=8B=9C=EA=B0=84=20=EC=9E=85=EB=A0=A5=EC=9D=84=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=ED=94=BD=EC=BB=A4=EB=A1=9C=20=EA=B5=90?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manager/posting/ui/ScheduleEditor.tsx     | 123 ++++++++++++++----
 1 file changed, 97 insertions(+), 26 deletions(-)

diff --git a/src/features/manager/posting/ui/ScheduleEditor.tsx b/src/features/manager/posting/ui/ScheduleEditor.tsx
index c2e269f3..87a90119 100644
--- a/src/features/manager/posting/ui/ScheduleEditor.tsx
+++ b/src/features/manager/posting/ui/ScheduleEditor.tsx
@@ -1,6 +1,11 @@
 import CloseIcon from '@/assets/icons/posting/Close.svg?react'
 import PlusIcon from '@/assets/icons/posting/Plus.svg?react'
+import { useState } from 'react'
+
 import type { PostingFormViewModel } from '@/features/manager/posting/hooks/usePostingForm'
+import { formatKoreanTimePart } from '@/shared/lib/formatKoreanWorkTime'
+import type { WorkTimeEditorState } from '@/shared/types/workTime'
+import { WorkTimePickerDrawer } from '@/shared/ui/common/WorkTimePickerDrawer'
 import {
   WORKING_DAYS,
   WORKING_DAY_LABEL,
@@ -12,6 +17,48 @@ interface ScheduleEditorProps {
   form: PostingFormViewModel
 }
 
+type TimeTarget = 'start' | 'end'
+
+/** 'HH:MM' → { hour, minute }. 미입력이면 빈 문자열 */
+function splitTime(time: string) {
+  const [hour = '', minute = ''] = time.split(':')
+  return { hour, minute }
+}
+
+/** 시간 선택 버튼 — 미입력 시 플레이스홀더를 노출합니다 */
+function TimeField({
+  label,
+  value,
+  onOpen,
+}: {
+  label: string
+  value: string
+  onOpen: () => void
+}) {
+  const { hour, minute } = splitTime(value)
+  const isEmpty = value === ''
+
+  return (
+    <div className="flex-1">
+      <span className="mb-1 block typography-body03-regular text-text-70">
+        {label}
+      </span>
+      <button
+        type="button"
+        onClick={onOpen}
+        aria-haspopup="dialog"
+        aria-label={`${label} 시간 선택`}
+        className={cn(
+          'h-11 w-full rounded-xl border border-line-1 bg-white px-3 text-left typography-body02-regular transition-colors hover:border-main',
+          isEmpty ? 'text-text-50' : 'text-text-100'
+        )}
+      >
+        {isEmpty ? '시간 선택' : formatKoreanTimePart(hour, minute)}
+      </button>
+    </div>
+  )
+}
+
 function ScheduleCard({
   schedule,
   index,
@@ -24,6 +71,37 @@ function ScheduleCard({
   canRemove: boolean
 }) {
   const isExisting = schedule.id !== null
+  const [pickerTarget, setPickerTarget] = useState<TimeTarget | null>(null)
+
+  const start = splitTime(schedule.startTime)
+  const end = splitTime(schedule.endTime)
+
+  /**
+   * 폼의 'HH:MM' 문자열을 픽커가 요구하는 시/분 단위 상태로 어댑트합니다.
+   * 한쪽만 선택된 경우 나머지는 '00'으로 채웁니다.
+   */
+  const workTime: WorkTimeEditorState = {
+    startHour: start.hour,
+    startMinute: start.minute,
+    endHour: end.hour,
+    endMinute: end.minute,
+    setStartHour: hour =>
+      form.updateSchedule(schedule.key, {
+        startTime: `${hour}:${start.minute || '00'}`,
+      }),
+    setStartMinute: minute =>
+      form.updateSchedule(schedule.key, {
+        startTime: `${start.hour || '00'}:${minute}`,
+      }),
+    setEndHour: hour =>
+      form.updateSchedule(schedule.key, {
+        endTime: `${hour}:${end.minute || '00'}`,
+      }),
+    setEndMinute: minute =>
+      form.updateSchedule(schedule.key, {
+        endTime: `${end.hour || '00'}:${minute}`,
+      }),
+  }
 
   return (
     <div
@@ -85,34 +163,27 @@ function ScheduleCard({
       </div>
 
       <div className="mb-3 flex gap-2">
-        <label className="flex-1">
-          <span className="mb-1 block typography-body03-regular text-text-70">
-            시작
-          </span>
-          <input
-            type="time"
-            value={schedule.startTime}
-            onChange={e =>
-              form.updateSchedule(schedule.key, { startTime: e.target.value })
-            }
-            className="h-11 w-full rounded-xl border border-line-1 bg-white px-3 typography-body02-regular text-text-100 focus:border-main focus:outline-none"
-          />
-        </label>
-        <label className="flex-1">
-          <span className="mb-1 block typography-body03-regular text-text-70">
-            종료
-          </span>
-          <input
-            type="time"
-            value={schedule.endTime}
-            onChange={e =>
-              form.updateSchedule(schedule.key, { endTime: e.target.value })
-            }
-            className="h-11 w-full rounded-xl border border-line-1 bg-white px-3 typography-body02-regular text-text-100 focus:border-main focus:outline-none"
-          />
-        </label>
+        <TimeField
+          label="시작"
+          value={schedule.startTime}
+          onOpen={() => setPickerTarget('start')}
+        />
+        <TimeField
+          label="종료"
+          value={schedule.endTime}
+          onOpen={() => setPickerTarget('end')}
+        />
       </div>
 
+      <WorkTimePickerDrawer
+        open={pickerTarget !== null}
+        target={pickerTarget}
+        workTime={workTime}
+        onOpenChange={open => {
+          if (!open) setPickerTarget(null)
+        }}
+      />
+
       <div className="flex gap-2">
         <label className="flex-1">
           <span className="mb-1 block typography-body03-regular text-text-70">

From 923f379672b1a5b65e59818a9fe1a2803cdac379 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 11:22:35 +0900
Subject: [PATCH 12/33] =?UTF-8?q?remove:=20=EA=B3=B5=EA=B3=A0=20=EC=97=85?=
 =?UTF-8?q?=EC=A7=81=EC=A2=85=20=ED=82=A4=EC=9B=8C=EB=93=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manager/posting/hooks/usePostingForm.ts   | 21 ---------
 src/features/manager/posting/mocks/data.ts    | 15 -------
 src/features/manager/posting/mocks/store.ts   |  2 -
 src/features/manager/posting/types/posting.ts |  6 ---
 .../manager/posting/ui/PostingFormFields.tsx  | 43 +------------------
 src/pages/manager/posting-detail/index.tsx    | 13 ------
 6 files changed, 1 insertion(+), 99 deletions(-)

diff --git a/src/features/manager/posting/hooks/usePostingForm.ts b/src/features/manager/posting/hooks/usePostingForm.ts
index bb93cedf..2c09e712 100644
--- a/src/features/manager/posting/hooks/usePostingForm.ts
+++ b/src/features/manager/posting/hooks/usePostingForm.ts
@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react'
 
 import {
-  MAX_KEYWORDS,
   type PaymentType,
   type Posting,
   type PostingFormErrors,
@@ -30,7 +29,6 @@ function createInitialValues(posting?: Posting | null): PostingFormValues {
     return {
       workspaceId: null,
       title: '',
-      keywords: [],
       schedules: [createEmptySchedule()],
       paymentType: 'HOURLY',
       payAmount: '',
@@ -41,7 +39,6 @@ function createInitialValues(posting?: Posting | null): PostingFormValues {
   return {
     workspaceId: posting.workspaceId,
     title: posting.title,
-    keywords: [...posting.keywords],
     schedules: posting.schedules.map(schedule => {
       scheduleKeySeq += 1
       return {
@@ -65,10 +62,6 @@ function validate(values: PostingFormValues): PostingFormErrors {
   if (values.title.trim() === '') {
     errors.title = '공고 제목을 입력해 주세요'
   }
-  if (values.keywords.length === 0) {
-    errors.keywords = '업직종을 1개 이상 선택해 주세요'
-  }
-
   const hasIncompleteSchedule = values.schedules.some(
     schedule =>
       schedule.workingDays.length === 0 ||
@@ -124,19 +117,6 @@ export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
     setValues(prev => ({ ...prev, title }))
   }, [])
 
-  const toggleKeyword = useCallback((keyword: string) => {
-    setValues(prev => {
-      if (prev.keywords.includes(keyword)) {
-        return {
-          ...prev,
-          keywords: prev.keywords.filter(item => item !== keyword),
-        }
-      }
-      if (prev.keywords.length >= MAX_KEYWORDS) return prev
-      return { ...prev, keywords: [...prev.keywords, keyword] }
-    })
-  }, [])
-
   const setPaymentType = useCallback((paymentType: PaymentType) => {
     setValues(prev => ({ ...prev, paymentType }))
   }, [])
@@ -206,7 +186,6 @@ export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
     isEditMode,
     setWorkspaceId,
     setTitle,
-    toggleKeyword,
     setPaymentType,
     setPayAmount,
     setDescription,
diff --git a/src/features/manager/posting/mocks/data.ts b/src/features/manager/posting/mocks/data.ts
index 4afb79bb..09178264 100644
--- a/src/features/manager/posting/mocks/data.ts
+++ b/src/features/manager/posting/mocks/data.ts
@@ -13,18 +13,6 @@ export const MOCK_WORKSPACES: Workspace[] = [
   { id: 2, businessName: '알터 성수 로스터리', businessType: '카페' },
 ]
 
-/** 업직종 키워드 — GET /manager/postings/available-keywords 대체 */
-export const MOCK_KEYWORDS: string[] = [
-  '카페',
-  '홀서빙',
-  '바리스타',
-  '베이킹',
-  '주방보조',
-  '마감청소',
-  '캐셔',
-  '배달',
-]
-
 export const MOCK_POSTINGS: Posting[] = [
   {
     id: 1,
@@ -34,7 +22,6 @@ export const MOCK_POSTINGS: Posting[] = [
     title: '주말 홀서빙 · 오후 마감조 구합니다',
     description:
       '주말 오후 마감조 홀서빙 아르바이트를 구합니다. 성실하게 근무하실 분 환영해요. 경험자 우대하며, 미경험자도 교육 후 근무 가능합니다.',
-    keywords: ['카페', '홀서빙'],
     paymentType: 'HOURLY',
     payAmount: 12000,
     status: 'OPEN',
@@ -67,7 +54,6 @@ export const MOCK_POSTINGS: Posting[] = [
     title: '평일 오픈 바리스타',
     description:
       '평일 오픈조 바리스타를 모집합니다. 바리스타 자격증 보유자 우대합니다.',
-    keywords: ['카페', '바리스타'],
     paymentType: 'HOURLY',
     payAmount: 12500,
     status: 'OPEN',
@@ -91,7 +77,6 @@ export const MOCK_POSTINGS: Posting[] = [
     businessType: '카페',
     title: '여름 성수기 주말 단기',
     description: '여름 성수기 주말 단기 아르바이트를 모집합니다.',
-    keywords: ['카페', '베이킹'],
     paymentType: 'DAILY',
     payAmount: 90000,
     status: 'CLOSED',
diff --git a/src/features/manager/posting/mocks/store.ts b/src/features/manager/posting/mocks/store.ts
index 1894b914..14d1d43a 100644
--- a/src/features/manager/posting/mocks/store.ts
+++ b/src/features/manager/posting/mocks/store.ts
@@ -70,7 +70,6 @@ export const useMockPostingStore = create<MockPostingState>((set, get) => ({
       businessType: '카페',
       title: values.title.trim(),
       description: values.description.trim(),
-      keywords: values.keywords,
       paymentType: values.paymentType,
       payAmount: toPayAmount(values.payAmount),
       status: 'OPEN',
@@ -90,7 +89,6 @@ export const useMockPostingStore = create<MockPostingState>((set, get) => ({
               ...posting,
               title: values.title.trim(),
               description: values.description.trim(),
-              keywords: values.keywords,
               paymentType: values.paymentType,
               payAmount: toPayAmount(values.payAmount),
               schedules: toPostingSchedules(values.schedules),
diff --git a/src/features/manager/posting/types/posting.ts b/src/features/manager/posting/types/posting.ts
index bfc31425..dd5acf2c 100644
--- a/src/features/manager/posting/types/posting.ts
+++ b/src/features/manager/posting/types/posting.ts
@@ -73,7 +73,6 @@ export interface Posting {
   businessType: string
   title: string
   description: string
-  keywords: string[]
   paymentType: PaymentType
   payAmount: number
   status: PostingStatus
@@ -124,7 +123,6 @@ export interface PostingFormSchedule extends PostingSchedule {
 export interface PostingFormValues {
   workspaceId: number | null
   title: string
-  keywords: string[]
   schedules: PostingFormSchedule[]
   paymentType: PaymentType
   payAmount: string
@@ -135,14 +133,10 @@ export interface PostingFormValues {
 export interface PostingFormErrors {
   workspaceId?: string
   title?: string
-  keywords?: string
   schedules?: string
   payAmount?: string
 }
 
-/** 공고당 선택 가능한 최대 키워드 수 */
-export const MAX_KEYWORDS = 3
-
 // ---- 포맷터 ----
 export function formatPay(paymentType: PaymentType, payAmount: number): string {
   return `${PAYMENT_TYPE_LABEL[paymentType]} ${payAmount.toLocaleString('ko-KR')}원`
diff --git a/src/features/manager/posting/ui/PostingFormFields.tsx b/src/features/manager/posting/ui/PostingFormFields.tsx
index ab96ebe3..1dc169fe 100644
--- a/src/features/manager/posting/ui/PostingFormFields.tsx
+++ b/src/features/manager/posting/ui/PostingFormFields.tsx
@@ -1,14 +1,10 @@
 import type { ReactNode } from 'react'
 
 import type { PostingFormViewModel } from '@/features/manager/posting/hooks/usePostingForm'
-import {
-  MOCK_KEYWORDS,
-  MOCK_WORKSPACES,
-} from '@/features/manager/posting/mocks/data'
+import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
 import AlertIcon from '@/assets/icons/posting/Alert.svg?react'
 import { ScheduleEditor } from '@/features/manager/posting/ui/ScheduleEditor'
 import {
-  MAX_KEYWORDS,
   PAYMENT_TYPES,
   PAYMENT_TYPE_LABEL,
 } from '@/features/manager/posting/types/posting'
@@ -95,43 +91,6 @@ export function PostingFormFields({ form }: PostingFormFieldsProps) {
         />
       </Section>
 
-      <Section
-        label="업직종 키워드"
-        required
-        error={errors.keywords}
-        hint={
-          <span className="typography-body03-regular text-text-50">
-            최대 {MAX_KEYWORDS}개
-          </span>
-        }
-      >
-        <div className="flex flex-wrap gap-2">
-          {MOCK_KEYWORDS.map(keyword => {
-            const isSelected = values.keywords.includes(keyword)
-            const isDisabled =
-              !isSelected && values.keywords.length >= MAX_KEYWORDS
-            return (
-              <button
-                key={keyword}
-                type="button"
-                aria-pressed={isSelected}
-                disabled={isDisabled}
-                onClick={() => form.toggleKeyword(keyword)}
-                className={cn(
-                  'h-9 rounded-lg px-3.5 typography-body02-semibold transition-colors',
-                  isSelected
-                    ? 'bg-main-100 text-sub'
-                    : 'border border-dashed border-line-2 bg-white text-text-70',
-                  isDisabled && 'opacity-40'
-                )}
-              >
-                {isSelected ? keyword : `+ ${keyword}`}
-              </button>
-            )
-          })}
-        </div>
-      </Section>
-
       <Section label="근무일정" required error={errors.schedules}>
         <ScheduleEditor form={form} />
       </Section>
diff --git a/src/pages/manager/posting-detail/index.tsx b/src/pages/manager/posting-detail/index.tsx
index 39d126c3..0c45267c 100644
--- a/src/pages/manager/posting-detail/index.tsx
+++ b/src/pages/manager/posting-detail/index.tsx
@@ -64,19 +64,6 @@ export function ManagerPostingDetailPage() {
             </p>
             <ManagerPostingStatusBadge status={posting.status} />
           </div>
-
-          {posting.keywords.length > 0 ? (
-            <div className="mt-3 flex flex-wrap gap-1.5">
-              {posting.keywords.map(keyword => (
-                <span
-                  key={keyword}
-                  className="rounded-lg bg-main-100 px-2.5 py-1 typography-body03-semibold text-sub"
-                >
-                  {keyword}
-                </span>
-              ))}
-            </div>
-          ) : null}
         </section>
 
         <section className="flex items-center justify-between rounded-2xl bg-white p-4 shadow-sm">

From 0b37eb2ccd9746c2ffc2016da4b7f02e2e7b5bf8 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 11:59:27 +0900
Subject: [PATCH 13/33] =?UTF-8?q?fix:=20=EC=A7=80=EC=9B=90=EC=9E=90=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EB=AC=B4=ED=95=9C?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useApplicationListViewModel.ts      | 52 +++++++++++++++----
 src/pages/manager/application-list/index.tsx  | 35 ++++++++++++-
 2 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/src/features/manager/posting/hooks/useApplicationListViewModel.ts b/src/features/manager/posting/hooks/useApplicationListViewModel.ts
index 6aab2d49..d8f30246 100644
--- a/src/features/manager/posting/hooks/useApplicationListViewModel.ts
+++ b/src/features/manager/posting/hooks/useApplicationListViewModel.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type { ApplicationStatusFilter } from '@/features/manager/posting/lib/applicationStatus'
 import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
@@ -31,23 +31,49 @@ export function useApplicationListViewModel({
     useState<ApplicationStatusFilter>('ALL')
   const [visibleCount, setVisibleCount] = useState(PAGE_SIZE)
   const [isLoading, setIsLoading] = useState(true)
+  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)
+  /** 다음 페이지 로딩 타이머 — 언마운트·필터 변경 시 취소 */
+  const nextPageTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     const timer = setTimeout(() => setIsLoading(false), MOCK_LATENCY)
     return () => clearTimeout(timer)
   }, [])
 
-  // 필터가 바뀌면 페이지를 처음으로 되돌림
-  const setWorkspaceFilter = useCallback((value: WorkspaceFilter) => {
-    setWorkspaceFilterState(value)
-    setVisibleCount(PAGE_SIZE)
-  }, [])
+  useEffect(
+    () => () => {
+      if (nextPageTimer.current) clearTimeout(nextPageTimer.current)
+    },
+    []
+  )
 
-  const setStatusFilter = useCallback((value: ApplicationStatusFilter) => {
-    setStatusFilterState(value)
+  /** 진행 중인 다음 페이지 로딩을 취소하고 첫 페이지로 되돌림 */
+  const resetPaging = useCallback(() => {
+    if (nextPageTimer.current) {
+      clearTimeout(nextPageTimer.current)
+      nextPageTimer.current = null
+    }
+    setIsFetchingNextPage(false)
     setVisibleCount(PAGE_SIZE)
   }, [])
 
+  // 필터가 바뀌면 페이지를 처음으로 되돌림
+  const setWorkspaceFilter = useCallback(
+    (value: WorkspaceFilter) => {
+      setWorkspaceFilterState(value)
+      resetPaging()
+    },
+    [resetPaging]
+  )
+
+  const setStatusFilter = useCallback(
+    (value: ApplicationStatusFilter) => {
+      setStatusFilterState(value)
+      resetPaging()
+    },
+    [resetPaging]
+  )
+
   const filteredApplications = useMemo(
     () =>
       applications.filter(application => {
@@ -71,8 +97,15 @@ export function useApplicationListViewModel({
   const visibleApplications = filteredApplications.slice(0, visibleCount)
   const hasNextPage = visibleCount < filteredApplications.length
 
+  /** 커서 기반 다음 페이지 로드 — 실제 API 연동 시 useInfiniteQuery로 교체 */
   const fetchNextPage = useCallback(() => {
-    setVisibleCount(prev => prev + PAGE_SIZE)
+    if (nextPageTimer.current) return
+    setIsFetchingNextPage(true)
+    nextPageTimer.current = setTimeout(() => {
+      setVisibleCount(prev => prev + PAGE_SIZE)
+      setIsFetchingNextPage(false)
+      nextPageTimer.current = null
+    }, MOCK_LATENCY)
   }, [])
 
   const workspaceOptions = useMemo(
@@ -92,6 +125,7 @@ export function useApplicationListViewModel({
     isLoading,
     isEmpty: !isLoading && filteredApplications.length === 0,
     hasNextPage,
+    isFetchingNextPage,
     fetchNextPage,
     workspaceFilter,
     setWorkspaceFilter,
diff --git a/src/pages/manager/application-list/index.tsx b/src/pages/manager/application-list/index.tsx
index f1cfd1da..ec38c895 100644
--- a/src/pages/manager/application-list/index.tsx
+++ b/src/pages/manager/application-list/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
 import { useApplicationListViewModel } from '@/features/manager/posting/hooks/useApplicationListViewModel'
@@ -6,8 +7,8 @@ import { ApplicantCard } from '@/features/manager/posting/ui/ApplicantCard'
 import { FilterBar } from '@/features/manager/posting/ui/FilterBar'
 import PersonIcon from '@/assets/icons/posting/Person.svg?react'
 import { managerPostingApplicationDetailPath } from '@/shared/constants/routes'
-import { MoreButton } from '@/shared/ui/common/MoreButton'
 import { Navbar } from '@/shared/ui/common/Navbar'
+import { Spinner } from '@/shared/ui/Spinner'
 import { Skeleton } from '@/shared/ui/common/Skeleton'
 
 function ApplicantListSkeleton() {
@@ -49,6 +50,7 @@ export function ManagerApplicationListPage() {
     isLoading,
     isEmpty,
     hasNextPage,
+    isFetchingNextPage,
     fetchNextPage,
     workspaceFilter,
     setWorkspaceFilter,
@@ -57,6 +59,28 @@ export function ManagerApplicationListPage() {
     workspaceOptions,
   } = useApplicationListViewModel({ postingId })
 
+  // 커서 기반 무한스크롤 — 목록 하단 sentinel이 보이면 다음 페이지 로드
+  const sentinelRef = useRef<HTMLDivElement>(null)
+  /** sentinel은 로딩이 끝난 뒤에야 마운트되므로 deps에 isLoading·개수를 포함해야 관찰이 붙는다 */
+  const visibleCount = applications.length
+
+  useEffect(() => {
+    const el = sentinelRef.current
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage()
+        }
+      },
+      { threshold: 0.1 }
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, isLoading, visibleCount])
+
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
       <Navbar variant="detail" title="지원자 목록" showBack={isFromPosting} />
@@ -107,7 +131,14 @@ export function ManagerApplicationListPage() {
                 </li>
               ))}
             </ul>
-            {hasNextPage ? <MoreButton onClick={fetchNextPage} /> : null}
+            {/* 무한스크롤 감지 지점 */}
+            <div
+              ref={sentinelRef}
+              className="flex h-10 items-center justify-center"
+              aria-hidden={!isFetchingNextPage}
+            >
+              {isFetchingNextPage ? <Spinner size={24} /> : null}
+            </div>
           </>
         ) : null}
       </main>

From 6af44dc8f44841851870d23d6c4184077043f26c Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 12:23:39 +0900
Subject: [PATCH 14/33] =?UTF-8?q?fix:=20=EA=B3=B5=EA=B3=A0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EC=8B=9C=20=EC=97=85=EC=9E=A5=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/manager/posting/ui/PostingFormFields.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/features/manager/posting/ui/PostingFormFields.tsx b/src/features/manager/posting/ui/PostingFormFields.tsx
index 1dc169fe..d89fc1b2 100644
--- a/src/features/manager/posting/ui/PostingFormFields.tsx
+++ b/src/features/manager/posting/ui/PostingFormFields.tsx
@@ -69,12 +69,14 @@ export function PostingFormFields({ form }: PostingFormFieldsProps) {
   return (
     <div className="flex flex-col gap-3">
       <Section label="업장 선택" required error={errors.workspaceId}>
+        {/* 공고의 소속 업장은 등록 시 확정 — 수정 화면에서는 변경 불가 */}
         <SelectDropdown
           ariaLabel="업장 선택"
           placeholder="업장을 선택해 주세요"
           options={workspaceOptions}
           value={values.workspaceId ?? -1}
           onChange={form.setWorkspaceId}
+          disabled={form.isEditMode}
         />
       </Section>
 

From 582ea84e80354307241b3ed810ba79c84db3c18c Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 12:25:41 +0900
Subject: [PATCH 15/33] =?UTF-8?q?fix:=20=EA=B7=BC=EB=AC=B4=EC=9D=BC?=
 =?UTF-8?q?=EC=A0=95=20=EB=AA=A8=EC=A7=91=20=EC=9D=B8=EC=9B=90=C2=B7?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=ED=94=BD=EC=BB=A4=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/manager/posting/mocks/store.ts   |  3 +-
 .../manager/posting/ui/ScheduleEditor.tsx     | 34 ++++++++++++++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/features/manager/posting/mocks/store.ts b/src/features/manager/posting/mocks/store.ts
index 14d1d43a..4250768a 100644
--- a/src/features/manager/posting/mocks/store.ts
+++ b/src/features/manager/posting/mocks/store.ts
@@ -52,7 +52,8 @@ function toPostingSchedules(
     startTime: schedule.startTime,
     endTime: schedule.endTime,
     position: schedule.position,
-    positionsNeeded: schedule.positionsNeeded,
+    // 편집 중 빈 값(0)이 남아 있어도 저장 시 최소 1명 보장
+    positionsNeeded: Math.max(1, schedule.positionsNeeded),
   }))
 }
 
diff --git a/src/features/manager/posting/ui/ScheduleEditor.tsx b/src/features/manager/posting/ui/ScheduleEditor.tsx
index 87a90119..cc9106ca 100644
--- a/src/features/manager/posting/ui/ScheduleEditor.tsx
+++ b/src/features/manager/posting/ui/ScheduleEditor.tsx
@@ -73,6 +73,21 @@ function ScheduleCard({
   const isExisting = schedule.id !== null
   const [pickerTarget, setPickerTarget] = useState<TimeTarget | null>(null)
 
+  /**
+   * 픽커는 휠 조작 시에만 onChange를 발생시키므로, 빈 값인 채로 열면
+   * 하이라이트된 '오전 12시 00분'을 그대로 닫아도 아무것도 기록되지 않습니다.
+   * 열기 전에 기본값(00:00)을 먼저 커밋해 보이는 값과 기록 값을 일치시킵니다.
+   */
+  const openPicker = (target: TimeTarget) => {
+    if (target === 'start' && schedule.startTime === '') {
+      form.updateSchedule(schedule.key, { startTime: '00:00' })
+    }
+    if (target === 'end' && schedule.endTime === '') {
+      form.updateSchedule(schedule.key, { endTime: '00:00' })
+    }
+    setPickerTarget(target)
+  }
+
   const start = splitTime(schedule.startTime)
   const end = splitTime(schedule.endTime)
 
@@ -166,12 +181,12 @@ function ScheduleCard({
         <TimeField
           label="시작"
           value={schedule.startTime}
-          onOpen={() => setPickerTarget('start')}
+          onOpen={() => openPicker('start')}
         />
         <TimeField
           label="종료"
           value={schedule.endTime}
-          onOpen={() => setPickerTarget('end')}
+          onOpen={() => openPicker('end')}
         />
       </div>
 
@@ -203,13 +218,24 @@ function ScheduleCard({
           <span className="mb-1 block typography-body03-regular text-text-70">
             모집 인원
           </span>
+          {/* 편집 중에는 빈 값(0)을 허용하고 blur 시점에 최소 1로 보정 */}
           <input
             type="number"
             min={1}
-            value={schedule.positionsNeeded}
+            value={
+              schedule.positionsNeeded === 0 ? '' : schedule.positionsNeeded
+            }
             onChange={e =>
               form.updateSchedule(schedule.key, {
-                positionsNeeded: Math.max(1, Number(e.target.value) || 1),
+                positionsNeeded: Math.max(
+                  0,
+                  Number(e.target.value.replace(/[^0-9]/g, '')) || 0
+                ),
+              })
+            }
+            onBlur={() =>
+              form.updateSchedule(schedule.key, {
+                positionsNeeded: Math.max(1, schedule.positionsNeeded),
               })
             }
             className="h-11 w-full rounded-xl border border-line-1 bg-white px-3 typography-body02-regular text-text-100 focus:border-main focus:outline-none"

From b5217d0f0203e545f27372809f1553470c8a935b Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 12:26:38 +0900
Subject: [PATCH 16/33] =?UTF-8?q?fix:=20=EA=B3=B5=EA=B3=A0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=ED=8F=BC=20=EB=A6=AC=EB=A7=88=EC=9A=B4=ED=8A=B8=20?=
 =?UTF-8?q?key=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/manager/posting-edit/index.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/manager/posting-edit/index.tsx b/src/pages/manager/posting-edit/index.tsx
index eb164c08..df363bd2 100644
--- a/src/pages/manager/posting-edit/index.tsx
+++ b/src/pages/manager/posting-edit/index.tsx
@@ -36,8 +36,9 @@ export function ManagerPostingEditPage() {
   }
 
   return (
+    // key로 공고 전환 시 컴포넌트를 리마운트해 폼 초기값(usePostingForm의 lazy useState)을 재계산
     <PostingEditContent
-      postingId={numericPostingId}
+      key={numericPostingId}
       posting={posting}
       onSubmit={values => {
         updatePosting(numericPostingId, values)
@@ -49,20 +50,15 @@ export function ManagerPostingEditPage() {
 }
 
 interface PostingEditContentProps {
-  postingId: number
   posting: Posting
   onSubmit: (values: PostingFormValues) => void
 }
 
 /**
  * 폼 초기값이 `posting`에 의존하므로, 공고를 찾은 뒤에 마운트되도록 분리합니다
- * (훅 순서를 안정적으로 유지).
+ * (훅 순서를 안정적으로 유지). 공고 전환 시 리마운트는 호출부의 key가 담당합니다.
  */
-function PostingEditContent({
-  postingId,
-  posting,
-  onSubmit,
-}: PostingEditContentProps) {
+function PostingEditContent({ posting, onSubmit }: PostingEditContentProps) {
   const form = usePostingForm({ posting })
 
   const handleSubmit = () => {
@@ -71,7 +67,7 @@ function PostingEditContent({
   }
 
   return (
-    <div key={postingId} className="flex min-h-[100dvh] flex-col bg-bg-light">
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
       <Navbar variant="detail" title="공고 수정" />
 
       <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-28 pt-4">

From 357ee28068df7f420c912c9224755f52ad05de03 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 12:29:08 +0900
Subject: [PATCH 17/33] =?UTF-8?q?refactor:=20=EC=9A=94=EC=9D=BC=C2=B7?=
 =?UTF-8?q?=EA=B8=89=EC=97=AC=C2=B7=EC=83=81=EB=8C=80=EC=8B=9C=EA=B0=84=20?=
 =?UTF-8?q?=ED=8F=AC=EB=A7=B7=ED=84=B0=20shared=20=EC=B6=94=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/manager/home/types/posting.ts    | 31 ++--------
 src/features/manager/posting/types/posting.ts | 62 +++----------------
 src/shared/constants/payment.ts               | 11 ++++
 src/shared/constants/workingDays.ts           | 22 +++++++
 src/shared/lib/formatRelativeTime.ts          | 23 +++++++
 5 files changed, 70 insertions(+), 79 deletions(-)
 create mode 100644 src/shared/constants/payment.ts
 create mode 100644 src/shared/constants/workingDays.ts
 create mode 100644 src/shared/lib/formatRelativeTime.ts

diff --git a/src/features/manager/home/types/posting.ts b/src/features/manager/home/types/posting.ts
index b627d1fa..fcd76bdc 100644
--- a/src/features/manager/home/types/posting.ts
+++ b/src/features/manager/home/types/posting.ts
@@ -1,3 +1,5 @@
+import { PAYMENT_TYPE_LABEL as SHARED_PAYMENT_TYPE_LABEL } from '@/shared/constants/payment'
+import { WORKING_DAYS, WORKING_DAY_LABEL } from '@/shared/constants/workingDays'
 import type { CommonApiResponse } from '@/shared/types/common'
 import type { JobPostingItem } from '@/shared/ui/manager/OngoingPostingCard'
 
@@ -51,22 +53,10 @@ export interface ManagedPostingsQueryParams {
 }
 
 // ---- Mappers ----
-const PAYMENT_TYPE_LABEL: Record<string, string> = {
-  HOURLY: '시급',
-  DAILY: '일급',
-  MONTHLY: '월급',
-  WEEKLY: '주급',
-}
+// 서버 응답의 paymentType/workingDays는 string이므로 안전한 폴백을 위해 넓은 타입으로 참조
+const PAYMENT_TYPE_LABEL: Record<string, string> = SHARED_PAYMENT_TYPE_LABEL
 
-const WORKING_DAY_KO: Record<string, string> = {
-  MONDAY: '월',
-  TUESDAY: '화',
-  WEDNESDAY: '수',
-  THURSDAY: '목',
-  FRIDAY: '금',
-  SATURDAY: '토',
-  SUNDAY: '일',
-}
+const WORKING_DAY_KO: Record<string, string> = WORKING_DAY_LABEL
 
 function formatWage(payAmount: number, paymentType: string): string {
   const label = PAYMENT_TYPE_LABEL[paymentType] ?? paymentType
@@ -84,17 +74,8 @@ function formatWorkHours(schedules: PostingScheduleDto[]): string {
 function formatWorkDays(schedules: PostingScheduleDto[]): string {
   if (schedules.length === 0) return '-'
   // 모든 스케줄의 요일을 합산 후 중복 제거 + 요일 순서 정렬
-  const DAY_ORDER = [
-    'MONDAY',
-    'TUESDAY',
-    'WEDNESDAY',
-    'THURSDAY',
-    'FRIDAY',
-    'SATURDAY',
-    'SUNDAY',
-  ]
   const daySet = new Set(schedules.flatMap(s => s.workingDays))
-  return DAY_ORDER.filter(d => daySet.has(d))
+  return WORKING_DAYS.filter(d => daySet.has(d))
     .map(d => WORKING_DAY_KO[d] ?? d)
     .join(', ')
 }
diff --git a/src/features/manager/posting/types/posting.ts b/src/features/manager/posting/types/posting.ts
index dd5acf2c..50aee4e9 100644
--- a/src/features/manager/posting/types/posting.ts
+++ b/src/features/manager/posting/types/posting.ts
@@ -6,40 +6,14 @@
  * API 미연동 단계이므로 화면이 소비하는 UI 모델을 이 파일에서 정의합니다.
  */
 import type { ApplicationApiStatus } from '@/features/user/home/applied-stores/types/application'
+import type { PaymentType } from '@/shared/constants/payment'
+import type { WorkingDay } from '@/shared/constants/workingDays'
+import { WORKING_DAYS, WORKING_DAY_LABEL } from '@/shared/constants/workingDays'
 
-// ---- 요일 ----
-export const WORKING_DAYS = [
-  'MONDAY',
-  'TUESDAY',
-  'WEDNESDAY',
-  'THURSDAY',
-  'FRIDAY',
-  'SATURDAY',
-  'SUNDAY',
-] as const
-
-export type WorkingDay = (typeof WORKING_DAYS)[number]
-
-export const WORKING_DAY_LABEL: Record<WorkingDay, string> = {
-  MONDAY: '월',
-  TUESDAY: '화',
-  WEDNESDAY: '수',
-  THURSDAY: '목',
-  FRIDAY: '금',
-  SATURDAY: '토',
-  SUNDAY: '일',
-}
-
-// ---- 급여 ----
-export const PAYMENT_TYPES = ['HOURLY', 'DAILY', 'WEEKLY', 'MONTHLY'] as const
-export type PaymentType = (typeof PAYMENT_TYPES)[number]
-
-export const PAYMENT_TYPE_LABEL: Record<PaymentType, string> = {
-  HOURLY: '시급',
-  DAILY: '일급',
-  WEEKLY: '주급',
-  MONTHLY: '월급',
-}
+// ---- 요일·급여 (shared 재노출 — 슬라이스 내 호출부 경로 유지) ----
+export type { PaymentType, WorkingDay }
+export { PAYMENT_TYPES, PAYMENT_TYPE_LABEL } from '@/shared/constants/payment'
+export { WORKING_DAYS, WORKING_DAY_LABEL }
 
 // ---- 공고 상태 ----
 /** OPEN=모집중, CLOSED=모집완료 */
@@ -138,10 +112,6 @@ export interface PostingFormErrors {
 }
 
 // ---- 포맷터 ----
-export function formatPay(paymentType: PaymentType, payAmount: number): string {
-  return `${PAYMENT_TYPE_LABEL[paymentType]} ${payAmount.toLocaleString('ko-KR')}원`
-}
-
 export function formatWorkingDays(days: WorkingDay[]): string {
   if (days.length === 0) return '-'
   return WORKING_DAYS.filter(day => days.includes(day))
@@ -153,20 +123,4 @@ export function formatTimeRange(startTime: string, endTime: string): string {
   return `${startTime}~${endTime}`
 }
 
-/** 지원 시각을 '방금 전 / N시간 전 / 어제 / N일 전' 형태로 변환 */
-export function formatRelativeTime(isoDate: string, now = new Date()): string {
-  const target = new Date(isoDate)
-  const diffMs = now.getTime() - target.getTime()
-  if (Number.isNaN(diffMs)) return ''
-
-  const diffMinutes = Math.floor(diffMs / (1000 * 60))
-  if (diffMinutes < 1) return '방금 전'
-  if (diffMinutes < 60) return `${diffMinutes}분 전`
-
-  const diffHours = Math.floor(diffMinutes / 60)
-  if (diffHours < 24) return `${diffHours}시간 전`
-
-  const diffDays = Math.floor(diffHours / 24)
-  if (diffDays === 1) return '어제'
-  return `${diffDays}일 전`
-}
+export { formatRelativeTime } from '@/shared/lib/formatRelativeTime'
diff --git a/src/shared/constants/payment.ts b/src/shared/constants/payment.ts
new file mode 100644
index 00000000..732ea9db
--- /dev/null
+++ b/src/shared/constants/payment.ts
@@ -0,0 +1,11 @@
+/** 급여 지급 형태 — 서버 enum */
+export const PAYMENT_TYPES = ['HOURLY', 'DAILY', 'WEEKLY', 'MONTHLY'] as const
+
+export type PaymentType = (typeof PAYMENT_TYPES)[number]
+
+export const PAYMENT_TYPE_LABEL: Record<PaymentType, string> = {
+  HOURLY: '시급',
+  DAILY: '일급',
+  WEEKLY: '주급',
+  MONTHLY: '월급',
+}
diff --git a/src/shared/constants/workingDays.ts b/src/shared/constants/workingDays.ts
new file mode 100644
index 00000000..b3f2eb18
--- /dev/null
+++ b/src/shared/constants/workingDays.ts
@@ -0,0 +1,22 @@
+/** 서버 요일 enum 순서 — 표시 정렬 기준으로도 사용합니다 */
+export const WORKING_DAYS = [
+  'MONDAY',
+  'TUESDAY',
+  'WEDNESDAY',
+  'THURSDAY',
+  'FRIDAY',
+  'SATURDAY',
+  'SUNDAY',
+] as const
+
+export type WorkingDay = (typeof WORKING_DAYS)[number]
+
+export const WORKING_DAY_LABEL: Record<WorkingDay, string> = {
+  MONDAY: '월',
+  TUESDAY: '화',
+  WEDNESDAY: '수',
+  THURSDAY: '목',
+  FRIDAY: '금',
+  SATURDAY: '토',
+  SUNDAY: '일',
+}
diff --git a/src/shared/lib/formatRelativeTime.ts b/src/shared/lib/formatRelativeTime.ts
new file mode 100644
index 00000000..9f31d00e
--- /dev/null
+++ b/src/shared/lib/formatRelativeTime.ts
@@ -0,0 +1,23 @@
+/**
+ * 시각을 '방금 전 / N분 전 / N시간 전 / 어제 / N일 전' 형태로 변환합니다.
+ *
+ * 유사 구현이 2곳 더 있으나 출력 규칙이 달라 통합하지 않았습니다:
+ * - features/user/substitute/lib/adaptUserSubstituteRequest.ts — '어제' 없음, NaN → '-'
+ * - features/notification/useNotificationViewModel.ts — '방금 전' 없음
+ */
+export function formatRelativeTime(isoDate: string, now = new Date()): string {
+  const target = new Date(isoDate)
+  const diffMs = now.getTime() - target.getTime()
+  if (Number.isNaN(diffMs)) return ''
+
+  const diffMinutes = Math.floor(diffMs / (1000 * 60))
+  if (diffMinutes < 1) return '방금 전'
+  if (diffMinutes < 60) return `${diffMinutes}분 전`
+
+  const diffHours = Math.floor(diffMinutes / 60)
+  if (diffHours < 24) return `${diffHours}시간 전`
+
+  const diffDays = Math.floor(diffHours / 24)
+  if (diffDays === 1) return '어제'
+  return `${diffDays}일 전`
+}

From 9f5e8fb56182377fb08bfc03dc8daf633837d3c5 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Mon, 27 Jul 2026 12:31:35 +0900
Subject: [PATCH 18/33] =?UTF-8?q?refactor:=20ApplicationApiStatus=20shared?=
 =?UTF-8?q?=20=ED=83=80=EC=9E=85=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/manager/posting/types/posting.ts        |  4 ++--
 .../user/home/applied-stores/types/application.ts    | 11 +++--------
 src/shared/types/applicationStatus.ts                | 12 ++++++++++++
 3 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 src/shared/types/applicationStatus.ts

diff --git a/src/features/manager/posting/types/posting.ts b/src/features/manager/posting/types/posting.ts
index 50aee4e9..4b5a3d5c 100644
--- a/src/features/manager/posting/types/posting.ts
+++ b/src/features/manager/posting/types/posting.ts
@@ -2,10 +2,10 @@
  * 사장님 구인구직 — 매니저 측 공고/지원자 UI 모델
  *
  * 서버 DTO(`@/features/manager/home/types/posting`)와 지원 상태 enum
- * (`@/features/user/home/applied-stores/types/application`)을 계승합니다.
+ * (`@/shared/types/applicationStatus`)을 계승합니다.
  * API 미연동 단계이므로 화면이 소비하는 UI 모델을 이 파일에서 정의합니다.
  */
-import type { ApplicationApiStatus } from '@/features/user/home/applied-stores/types/application'
+import type { ApplicationApiStatus } from '@/shared/types/applicationStatus'
 import type { PaymentType } from '@/shared/constants/payment'
 import type { WorkingDay } from '@/shared/constants/workingDays'
 import { WORKING_DAYS, WORKING_DAY_LABEL } from '@/shared/constants/workingDays'
diff --git a/src/features/user/home/applied-stores/types/application.ts b/src/features/user/home/applied-stores/types/application.ts
index 386fc126..b7f7e5b5 100644
--- a/src/features/user/home/applied-stores/types/application.ts
+++ b/src/features/user/home/applied-stores/types/application.ts
@@ -4,16 +4,11 @@ import type {
   FilterType,
   WeekdayLabel,
 } from '@/features/user/home/applied-stores/types/appliedStore'
+import type { ApplicationApiStatus } from '@/shared/types/applicationStatus'
 
 // ---- API Status ----
-export type ApplicationApiStatus =
-  | 'SUBMITTED'
-  | 'SHORTLISTED'
-  | 'ACCEPTED'
-  | 'REJECTED'
-  | 'CANCELLED'
-  | 'EXPIRED'
-  | 'DELETED'
+// 크로스 롤(유저·매니저) 공용 enum — 정의는 shared로 이동, 기존 소비처를 위해 재노출
+export type { ApplicationApiStatus } from '@/shared/types/applicationStatus'
 
 // ---- DTO ----
 export interface PostingScheduleDto {
diff --git a/src/shared/types/applicationStatus.ts b/src/shared/types/applicationStatus.ts
new file mode 100644
index 00000000..34be0c5c
--- /dev/null
+++ b/src/shared/types/applicationStatus.ts
@@ -0,0 +1,12 @@
+/**
+ * 공고 지원서 상태 — 서버 enum.
+ * 유저(내 지원 현황)와 매니저(지원자 관리) 양쪽에서 사용하는 크로스 롤 타입입니다.
+ */
+export type ApplicationApiStatus =
+  | 'SUBMITTED'
+  | 'SHORTLISTED'
+  | 'ACCEPTED'
+  | 'REJECTED'
+  | 'CANCELLED'
+  | 'EXPIRED'
+  | 'DELETED'

From c84bcbda4e1b96b151a99ff8cc73c1c49e22a325 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 29 Jul 2026 20:10:54 +0900
Subject: [PATCH 19/33] =?UTF-8?q?refactor:=20=EC=BB=A4=EC=84=9C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=95=C2=B7=EC=8B=9C=EA=B0=84=20=ED=8F=AC?=
 =?UTF-8?q?=EB=A7=B7=20=EA=B3=B5=EC=9A=A9=20=EC=9C=A0=ED=8B=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/lib/cursorPage.ts  | 19 +++++++++++++++++++
 src/shared/lib/toTimeOfDay.ts |  4 ++++
 2 files changed, 23 insertions(+)
 create mode 100644 src/shared/lib/cursorPage.ts
 create mode 100644 src/shared/lib/toTimeOfDay.ts

diff --git a/src/shared/lib/cursorPage.ts b/src/shared/lib/cursorPage.ts
new file mode 100644
index 00000000..539e9513
--- /dev/null
+++ b/src/shared/lib/cursorPage.ts
@@ -0,0 +1,19 @@
+import type { CommonApiResponse } from '@/shared/types/common'
+
+export interface CursorPageInfo {
+  cursor: string | null
+  pageSize: number
+  totalCount: number
+}
+
+export interface CursorPage<T> {
+  page: CursorPageInfo
+  data: T[]
+}
+
+export function unwrapCursorPage<T>(
+  body: CursorPage<T> | CommonApiResponse<CursorPage<T>>
+): CursorPage<T> {
+  if (body && 'page' in body) return body
+  return body.data
+}
diff --git a/src/shared/lib/toTimeOfDay.ts b/src/shared/lib/toTimeOfDay.ts
new file mode 100644
index 00000000..e36fe667
--- /dev/null
+++ b/src/shared/lib/toTimeOfDay.ts
@@ -0,0 +1,4 @@
+export function toTimeOfDay(time: string | null | undefined): string {
+  if (!time) return ''
+  return time.slice(0, 5)
+}

From a38b286a923dc475dcd75583f76f4b3eb1f4ffa9 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 29 Jul 2026 20:12:57 +0900
Subject: [PATCH 20/33] =?UTF-8?q?feat:=20=EB=A7=A4=EB=8B=88=EC=A0=80=20?=
 =?UTF-8?q?=EA=B3=B5=EA=B3=A0=C2=B7=EC=A7=80=EC=9B=90=EC=9E=90=20API=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EB=B0=8F=20=EB=AA=A9=EC=97=85=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manager/posting/api/application.ts        |  57 ++++
 src/features/manager/posting/api/posting.ts   |  69 +++++
 .../hooks/mutation/useClosePostingMutation.ts |  23 ++
 .../mutation/useCreatePostingMutation.ts      |  31 +++
 .../useUpdateApplicationStatusMutation.ts     |  27 ++
 .../mutation/useUpdatePostingMutation.ts      |  34 +++
 .../query/useManagerPostingDetailQuery.ts     |  22 ++
 .../hooks/query/useManagerPostingsQuery.ts    |  65 +++++
 .../query/usePostingApplicationDetailQuery.ts |  23 ++
 .../query/usePostingApplicationsQuery.ts      |  65 +++++
 .../hooks/query/useWorkspaceFilterOptions.ts  |  58 ++++
 .../hooks/useApplicationDetailViewModel.ts    |  34 +--
 .../hooks/useApplicationListViewModel.ts      | 141 ++--------
 .../hooks/usePostingDetailViewModel.ts        |  33 +--
 .../manager/posting/hooks/usePostingForm.ts   |  18 +-
 .../posting/hooks/usePostingListViewModel.ts  |  74 ++---
 .../posting/lib/buildPostingRequest.ts        |  75 ++++++
 .../posting/lib/postingErrorMessage.ts        |  26 ++
 .../manager/posting/lib/postingStatus.ts      |  14 +-
 src/features/manager/posting/mocks/data.ts    | 249 -----------------
 src/features/manager/posting/mocks/store.ts   | 120 ---------
 src/features/manager/posting/types/dto.ts     | 255 ++++++++++++++++++
 src/features/manager/posting/types/posting.ts |  57 ++--
 .../manager/posting/ui/ApplicantCard.tsx      |  15 +-
 src/features/manager/posting/ui/FilterBar.tsx |   3 +-
 .../manager/posting/ui/PostingFormFields.tsx  |  19 +-
 .../manager/posting/ui/PostingListCard.tsx    |  27 +-
 .../manager/application-detail/index.tsx      |  19 +-
 src/pages/manager/application-list/index.tsx  |  26 +-
 src/pages/manager/posting-create/index.tsx    |  29 +-
 src/pages/manager/posting-detail/index.tsx    |  30 ++-
 src/pages/manager/posting-edit/index.tsx      |  68 +++--
 src/pages/manager/posting-list/index.tsx      |  71 ++++-
 src/shared/lib/queryKeys.ts                   |   9 +
 34 files changed, 1165 insertions(+), 721 deletions(-)
 create mode 100644 src/features/manager/posting/api/application.ts
 create mode 100644 src/features/manager/posting/api/posting.ts
 create mode 100644 src/features/manager/posting/hooks/mutation/useClosePostingMutation.ts
 create mode 100644 src/features/manager/posting/hooks/mutation/useCreatePostingMutation.ts
 create mode 100644 src/features/manager/posting/hooks/mutation/useUpdateApplicationStatusMutation.ts
 create mode 100644 src/features/manager/posting/hooks/mutation/useUpdatePostingMutation.ts
 create mode 100644 src/features/manager/posting/hooks/query/useManagerPostingDetailQuery.ts
 create mode 100644 src/features/manager/posting/hooks/query/useManagerPostingsQuery.ts
 create mode 100644 src/features/manager/posting/hooks/query/usePostingApplicationDetailQuery.ts
 create mode 100644 src/features/manager/posting/hooks/query/usePostingApplicationsQuery.ts
 create mode 100644 src/features/manager/posting/hooks/query/useWorkspaceFilterOptions.ts
 create mode 100644 src/features/manager/posting/lib/buildPostingRequest.ts
 create mode 100644 src/features/manager/posting/lib/postingErrorMessage.ts
 delete mode 100644 src/features/manager/posting/mocks/data.ts
 delete mode 100644 src/features/manager/posting/mocks/store.ts
 create mode 100644 src/features/manager/posting/types/dto.ts

diff --git a/src/features/manager/posting/api/application.ts b/src/features/manager/posting/api/application.ts
new file mode 100644
index 00000000..2d3f685a
--- /dev/null
+++ b/src/features/manager/posting/api/application.ts
@@ -0,0 +1,57 @@
+import axiosInstance from '@/shared/lib/axiosInstance'
+import { unwrapCursorPage, type CursorPage } from '@/shared/lib/cursorPage'
+import type { ApplicationApiStatus } from '@/shared/types/applicationStatus'
+import type { CommonApiResponse } from '@/shared/types/common'
+import type {
+  PostingApplicationDetailDto,
+  PostingApplicationListItemDto,
+} from '@/features/manager/posting/types/dto'
+
+export interface PostingApplicationsQueryParams {
+  pageSize: number
+  workspaceId?: number
+  status?: ApplicationApiStatus[]
+  cursor?: string
+}
+
+type ApplicationListBody =
+  | CursorPage<PostingApplicationListItemDto>
+  | CommonApiResponse<CursorPage<PostingApplicationListItemDto>>
+
+export async function fetchPostingApplications(
+  params: PostingApplicationsQueryParams
+): Promise<CursorPage<PostingApplicationListItemDto>> {
+  const response = await axiosInstance.get<ApplicationListBody>(
+    '/manager/postings/applications',
+    {
+      params: {
+        pageSize: params.pageSize,
+        ...(params.workspaceId !== undefined && {
+          workspaceId: params.workspaceId,
+        }),
+        ...(params.status?.length && { status: params.status }),
+        ...(params.cursor !== undefined && { cursor: params.cursor }),
+      },
+    }
+  )
+  return unwrapCursorPage(response.data)
+}
+
+export async function fetchPostingApplicationDetail(
+  postingApplicationId: number
+): Promise<PostingApplicationDetailDto> {
+  const response = await axiosInstance.get<
+    CommonApiResponse<PostingApplicationDetailDto>
+  >(`/manager/postings/applications/${postingApplicationId}`)
+  return response.data.data
+}
+
+export async function patchPostingApplicationStatus(
+  postingApplicationId: number,
+  status: ApplicationApiStatus
+): Promise<void> {
+  await axiosInstance.patch(
+    `/manager/postings/applications/${postingApplicationId}/status`,
+    { status }
+  )
+}
diff --git a/src/features/manager/posting/api/posting.ts b/src/features/manager/posting/api/posting.ts
new file mode 100644
index 00000000..a07e9b34
--- /dev/null
+++ b/src/features/manager/posting/api/posting.ts
@@ -0,0 +1,69 @@
+import axiosInstance from '@/shared/lib/axiosInstance'
+import { unwrapCursorPage, type CursorPage } from '@/shared/lib/cursorPage'
+import type { CommonApiResponse } from '@/shared/types/common'
+import type { PostingStatus } from '@/features/manager/posting/types/posting'
+import type {
+  CreatePostingRequestDto,
+  ManagerPostingDetailDto,
+  ManagerPostingListItemDto,
+  UpdatePostingRequestDto,
+} from '@/features/manager/posting/types/dto'
+
+export interface ManagerPostingsQueryParams {
+  pageSize: number
+  workspaceId?: number
+  status?: PostingStatus
+  cursor?: string
+}
+
+type PostingListBody =
+  | CursorPage<ManagerPostingListItemDto>
+  | CommonApiResponse<CursorPage<ManagerPostingListItemDto>>
+
+export async function fetchManagerPostings(
+  params: ManagerPostingsQueryParams
+): Promise<CursorPage<ManagerPostingListItemDto>> {
+  const response = await axiosInstance.get<PostingListBody>(
+    '/manager/postings',
+    {
+      params: {
+        pageSize: params.pageSize,
+        ...(params.workspaceId !== undefined && {
+          workspaceId: params.workspaceId,
+        }),
+        ...(params.status && { status: params.status }),
+        ...(params.cursor !== undefined && { cursor: params.cursor }),
+      },
+    }
+  )
+  return unwrapCursorPage(response.data)
+}
+
+export async function fetchManagerPostingDetail(
+  postingId: number
+): Promise<ManagerPostingDetailDto> {
+  const response = await axiosInstance.get<
+    CommonApiResponse<ManagerPostingDetailDto>
+  >(`/manager/postings/${postingId}`)
+  return response.data.data
+}
+
+export async function postManagerPosting(
+  body: CreatePostingRequestDto
+): Promise<void> {
+  await axiosInstance.post('/manager/postings', body)
+}
+
+export async function putManagerPosting(
+  postingId: number,
+  body: UpdatePostingRequestDto
+): Promise<void> {
+  await axiosInstance.put(`/manager/postings/${postingId}`, body)
+}
+
+export async function patchManagerPostingStatus(
+  postingId: number,
+  status: PostingStatus
+): Promise<void> {
+  await axiosInstance.patch(`/manager/postings/${postingId}/status`, { status })
+}
diff --git a/src/features/manager/posting/hooks/mutation/useClosePostingMutation.ts b/src/features/manager/posting/hooks/mutation/useClosePostingMutation.ts
new file mode 100644
index 00000000..ed4a5e77
--- /dev/null
+++ b/src/features/manager/posting/hooks/mutation/useClosePostingMutation.ts
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { patchManagerPostingStatus } from '@/features/manager/posting/api/posting'
+import { resolvePostingErrorMessage } from '@/features/manager/posting/lib/postingErrorMessage'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { showToast } from '@/shared/stores/useToastStore'
+
+export function useClosePostingMutation(postingId: number) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: () => patchManagerPostingStatus(postingId, 'CLOSED'),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.posting.all })
+    },
+    onError: (error: unknown) => {
+      showToast(
+        resolvePostingErrorMessage(error, '모집을 마감하지 못했어요.'),
+        'error'
+      )
+    },
+  })
+}
diff --git a/src/features/manager/posting/hooks/mutation/useCreatePostingMutation.ts b/src/features/manager/posting/hooks/mutation/useCreatePostingMutation.ts
new file mode 100644
index 00000000..974b99e0
--- /dev/null
+++ b/src/features/manager/posting/hooks/mutation/useCreatePostingMutation.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { postManagerPosting } from '@/features/manager/posting/api/posting'
+import { toCreatePostingRequest } from '@/features/manager/posting/lib/buildPostingRequest'
+import { resolvePostingErrorMessage } from '@/features/manager/posting/lib/postingErrorMessage'
+import type { PostingFormValues } from '@/features/manager/posting/types/posting'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { showToast } from '@/shared/stores/useToastStore'
+
+interface CreatePostingVariables {
+  values: PostingFormValues
+  workspaceId: number
+}
+
+export function useCreatePostingMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ values, workspaceId }: CreatePostingVariables) =>
+      postManagerPosting(toCreatePostingRequest(values, workspaceId)),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.posting.all })
+    },
+    onError: (error: unknown) => {
+      showToast(
+        resolvePostingErrorMessage(error, '공고를 등록하지 못했어요.'),
+        'error'
+      )
+    },
+  })
+}
diff --git a/src/features/manager/posting/hooks/mutation/useUpdateApplicationStatusMutation.ts b/src/features/manager/posting/hooks/mutation/useUpdateApplicationStatusMutation.ts
new file mode 100644
index 00000000..6db5faa7
--- /dev/null
+++ b/src/features/manager/posting/hooks/mutation/useUpdateApplicationStatusMutation.ts
@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { patchPostingApplicationStatus } from '@/features/manager/posting/api/application'
+import type { HiringDecision } from '@/features/manager/posting/lib/applicationStatus'
+import { resolvePostingErrorMessage } from '@/features/manager/posting/lib/postingErrorMessage'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { showToast } from '@/shared/stores/useToastStore'
+
+export function useUpdateApplicationStatusMutation(
+  postingApplicationId: number
+) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (status: HiringDecision) =>
+      patchPostingApplicationStatus(postingApplicationId, status),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.posting.all })
+    },
+    onError: (error: unknown) => {
+      showToast(
+        resolvePostingErrorMessage(error, '상태를 변경하지 못했어요.'),
+        'error'
+      )
+    },
+  })
+}
diff --git a/src/features/manager/posting/hooks/mutation/useUpdatePostingMutation.ts b/src/features/manager/posting/hooks/mutation/useUpdatePostingMutation.ts
new file mode 100644
index 00000000..6eb64950
--- /dev/null
+++ b/src/features/manager/posting/hooks/mutation/useUpdatePostingMutation.ts
@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { putManagerPosting } from '@/features/manager/posting/api/posting'
+import { toUpdatePostingRequest } from '@/features/manager/posting/lib/buildPostingRequest'
+import { resolvePostingErrorMessage } from '@/features/manager/posting/lib/postingErrorMessage'
+import type { PostingFormValues } from '@/features/manager/posting/types/posting'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { showToast } from '@/shared/stores/useToastStore'
+
+interface UpdatePostingVariables {
+  values: PostingFormValues
+  originalScheduleIds: number[]
+}
+
+export function useUpdatePostingMutation(postingId: number) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ values, originalScheduleIds }: UpdatePostingVariables) =>
+      putManagerPosting(
+        postingId,
+        toUpdatePostingRequest(values, originalScheduleIds)
+      ),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.posting.all })
+    },
+    onError: (error: unknown) => {
+      showToast(
+        resolvePostingErrorMessage(error, '공고를 수정하지 못했어요.'),
+        'error'
+      )
+    },
+  })
+}
diff --git a/src/features/manager/posting/hooks/query/useManagerPostingDetailQuery.ts b/src/features/manager/posting/hooks/query/useManagerPostingDetailQuery.ts
new file mode 100644
index 00000000..721b1ca7
--- /dev/null
+++ b/src/features/manager/posting/hooks/query/useManagerPostingDetailQuery.ts
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchManagerPostingDetail } from '@/features/manager/posting/api/posting'
+import { adaptPostingDetail } from '@/features/manager/posting/types/dto'
+import { queryKeys } from '@/shared/lib/queryKeys'
+
+export function useManagerPostingDetailQuery(postingId: number) {
+  const isValidId = Number.isInteger(postingId) && postingId > 0
+
+  const { data, isPending, isError } = useQuery({
+    queryKey: queryKeys.posting.detail(postingId),
+    queryFn: () => fetchManagerPostingDetail(postingId),
+    enabled: isValidId,
+    select: adaptPostingDetail,
+  })
+
+  return {
+    posting: data ?? null,
+    isLoading: isValidId && isPending,
+    isError: !isValidId || isError,
+  }
+}
diff --git a/src/features/manager/posting/hooks/query/useManagerPostingsQuery.ts b/src/features/manager/posting/hooks/query/useManagerPostingsQuery.ts
new file mode 100644
index 00000000..407583dc
--- /dev/null
+++ b/src/features/manager/posting/hooks/query/useManagerPostingsQuery.ts
@@ -0,0 +1,65 @@
+import { useMemo } from 'react'
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import { fetchManagerPostings } from '@/features/manager/posting/api/posting'
+import { adaptPostingListItem } from '@/features/manager/posting/types/dto'
+import type {
+  PostingListItem,
+  PostingStatus,
+} from '@/features/manager/posting/types/posting'
+import { queryKeys } from '@/shared/lib/queryKeys'
+
+const PAGE_SIZE = 10
+
+interface UseManagerPostingsQueryOptions {
+  workspaceId?: number
+  status?: PostingStatus
+}
+
+export function useManagerPostingsQuery({
+  workspaceId,
+  status,
+}: UseManagerPostingsQueryOptions) {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isPending,
+    isError,
+  } = useInfiniteQuery({
+    queryKey: queryKeys.posting.list({
+      workspaceId,
+      status,
+      pageSize: PAGE_SIZE,
+    }),
+    queryFn: ({ pageParam }) =>
+      fetchManagerPostings({
+        pageSize: PAGE_SIZE,
+        workspaceId,
+        status,
+        cursor: pageParam,
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: lastPage => lastPage.page?.cursor ?? undefined,
+  })
+
+  const postings = useMemo<PostingListItem[]>(() => {
+    const byId = new Map<number, PostingListItem>()
+    for (const dto of data?.pages.flatMap(page => page.data ?? []) ?? []) {
+      const posting = adaptPostingListItem(dto)
+      byId.set(posting.id, posting)
+    }
+    return [...byId.values()]
+  }, [data])
+
+  return {
+    postings,
+    totalCount: data?.pages[0]?.page?.totalCount ?? postings.length,
+    isLoading: isPending,
+    isError,
+    hasNextPage: Boolean(hasNextPage),
+    isFetchingNextPage,
+    fetchNextPage,
+  }
+}
diff --git a/src/features/manager/posting/hooks/query/usePostingApplicationDetailQuery.ts b/src/features/manager/posting/hooks/query/usePostingApplicationDetailQuery.ts
new file mode 100644
index 00000000..827fa8a8
--- /dev/null
+++ b/src/features/manager/posting/hooks/query/usePostingApplicationDetailQuery.ts
@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchPostingApplicationDetail } from '@/features/manager/posting/api/application'
+import { adaptApplicationDetail } from '@/features/manager/posting/types/dto'
+import { queryKeys } from '@/shared/lib/queryKeys'
+
+export function usePostingApplicationDetailQuery(postingApplicationId: number) {
+  const isValidId =
+    Number.isInteger(postingApplicationId) && postingApplicationId > 0
+
+  const { data, isPending, isError } = useQuery({
+    queryKey: queryKeys.posting.applicationDetail(postingApplicationId),
+    queryFn: () => fetchPostingApplicationDetail(postingApplicationId),
+    enabled: isValidId,
+    select: adaptApplicationDetail,
+  })
+
+  return {
+    application: data ?? null,
+    isLoading: isValidId && isPending,
+    isError: !isValidId || isError,
+  }
+}
diff --git a/src/features/manager/posting/hooks/query/usePostingApplicationsQuery.ts b/src/features/manager/posting/hooks/query/usePostingApplicationsQuery.ts
new file mode 100644
index 00000000..568c2e9c
--- /dev/null
+++ b/src/features/manager/posting/hooks/query/usePostingApplicationsQuery.ts
@@ -0,0 +1,65 @@
+import { useMemo } from 'react'
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import { fetchPostingApplications } from '@/features/manager/posting/api/application'
+import { adaptApplicationListItem } from '@/features/manager/posting/types/dto'
+import type { ApplicationListItem } from '@/features/manager/posting/types/posting'
+import type { ApplicationApiStatus } from '@/shared/types/applicationStatus'
+import { queryKeys } from '@/shared/lib/queryKeys'
+
+const PAGE_SIZE = 10
+
+interface UsePostingApplicationsQueryOptions {
+  workspaceId?: number
+  status?: ApplicationApiStatus
+}
+
+export function usePostingApplicationsQuery({
+  workspaceId,
+  status,
+}: UsePostingApplicationsQueryOptions) {
+  const statusFilter = useMemo(() => (status ? [status] : undefined), [status])
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isPending,
+    isError,
+  } = useInfiniteQuery({
+    queryKey: queryKeys.posting.applicationList({
+      workspaceId,
+      status: statusFilter,
+      pageSize: PAGE_SIZE,
+    }),
+    queryFn: ({ pageParam }) =>
+      fetchPostingApplications({
+        pageSize: PAGE_SIZE,
+        workspaceId,
+        status: statusFilter,
+        cursor: pageParam,
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: lastPage => lastPage.page?.cursor ?? undefined,
+  })
+
+  const applications = useMemo<ApplicationListItem[]>(() => {
+    const byId = new Map<number, ApplicationListItem>()
+    for (const dto of data?.pages.flatMap(page => page.data ?? []) ?? []) {
+      const application = adaptApplicationListItem(dto)
+      byId.set(application.id, application)
+    }
+    return [...byId.values()]
+  }, [data])
+
+  return {
+    applications,
+    totalCount: data?.pages[0]?.page?.totalCount ?? applications.length,
+    isLoading: isPending,
+    isError,
+    hasNextPage: Boolean(hasNextPage),
+    isFetchingNextPage,
+    fetchNextPage,
+  }
+}
diff --git a/src/features/manager/posting/hooks/query/useWorkspaceFilterOptions.ts b/src/features/manager/posting/hooks/query/useWorkspaceFilterOptions.ts
new file mode 100644
index 00000000..1c2fcb76
--- /dev/null
+++ b/src/features/manager/posting/hooks/query/useWorkspaceFilterOptions.ts
@@ -0,0 +1,58 @@
+import { useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchManagedWorkspaces } from '@/features/manager/api/workspace'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import type { SelectOption } from '@/shared/ui/common/SelectDropdown'
+
+export const ALL_WORKSPACES = 'ALL' as const
+export type WorkspaceFilter = number | typeof ALL_WORKSPACES
+
+function useActivatedWorkspaces() {
+  const { data, isPending, isError } = useQuery({
+    queryKey: queryKeys.managerWorkspace.list(),
+    queryFn: fetchManagedWorkspaces,
+  })
+
+  const workspaces = useMemo(
+    () =>
+      (data?.data ?? []).filter(
+        workspace => workspace.status?.value === 'ACTIVATED'
+      ),
+    [data]
+  )
+
+  return { workspaces, isLoading: isPending, isError }
+}
+
+export function useWorkspaceFilterOptions() {
+  const { workspaces, isLoading, isError } = useActivatedWorkspaces()
+
+  const workspaceOptions = useMemo<SelectOption<WorkspaceFilter>[]>(
+    () => [
+      { value: ALL_WORKSPACES, label: '전체 업장' },
+      ...workspaces.map(workspace => ({
+        value: workspace.id as WorkspaceFilter,
+        label: workspace.businessName,
+      })),
+    ],
+    [workspaces]
+  )
+
+  return { workspaceOptions, isLoading, isError }
+}
+
+export function useWorkspaceSelectOptions() {
+  const { workspaces, isLoading, isError } = useActivatedWorkspaces()
+
+  const workspaceOptions = useMemo<SelectOption<number>[]>(
+    () =>
+      workspaces.map(workspace => ({
+        value: workspace.id,
+        label: workspace.businessName,
+      })),
+    [workspaces]
+  )
+
+  return { workspaceOptions, isLoading, isError }
+}
diff --git a/src/features/manager/posting/hooks/useApplicationDetailViewModel.ts b/src/features/manager/posting/hooks/useApplicationDetailViewModel.ts
index cd08c19d..5c878268 100644
--- a/src/features/manager/posting/hooks/useApplicationDetailViewModel.ts
+++ b/src/features/manager/posting/hooks/useApplicationDetailViewModel.ts
@@ -1,48 +1,48 @@
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 
 import {
   DECISION_COPY,
   isTerminalApplicationStatus,
   type HiringDecision,
 } from '@/features/manager/posting/lib/applicationStatus'
-import { useMockPostingStore } from '@/features/manager/posting/mocks/store'
+import { useUpdateApplicationStatusMutation } from '@/features/manager/posting/hooks/mutation/useUpdateApplicationStatusMutation'
+import { usePostingApplicationDetailQuery } from '@/features/manager/posting/hooks/query/usePostingApplicationDetailQuery'
 import { showToast } from '@/shared/stores/useToastStore'
 
-/** 지원자 상세 — 인적사항 조회 + 채용 결정(서류합격·최종합격·불합격) */
 export function useApplicationDetailViewModel(applicationId: number) {
-  const applications = useMockPostingStore(state => state.applications)
-  const updateApplicationStatus = useMockPostingStore(
-    state => state.updateApplicationStatus
-  )
+  const { application, isLoading, isError } =
+    usePostingApplicationDetailQuery(applicationId)
+  const updateStatus = useUpdateApplicationStatusMutation(applicationId)
 
   const [pendingDecision, setPendingDecision] = useState<HiringDecision | null>(
     null
   )
 
-  const application = useMemo(
-    () => applications.find(item => item.id === applicationId) ?? null,
-    [applications, applicationId]
-  )
-
   const isTerminal = application
     ? isTerminalApplicationStatus(application.status)
     : false
 
   const confirmDecision = () => {
     if (!pendingDecision) return
-    updateApplicationStatus(applicationId, pendingDecision)
-    showToast(DECISION_COPY[pendingDecision].toast)
+    const decision = pendingDecision
     setPendingDecision(null)
+    updateStatus.mutate(decision, {
+      onSuccess: () => showToast(DECISION_COPY[decision].toast),
+    })
   }
 
   return {
     application,
-    isNotFound: application === null,
-    /** 종료된 지원서는 채용 결정 액션을 숨깁니다 */
+    isLoading,
+    isNotFound: !isLoading && (isError || application === null),
     canDecide: application !== null && !isTerminal,
+    isDeciding: updateStatus.isPending,
     pendingDecision,
     decisionCopy: pendingDecision ? DECISION_COPY[pendingDecision] : null,
-    requestDecision: (decision: HiringDecision) => setPendingDecision(decision),
+    requestDecision: (decision: HiringDecision) => {
+      if (updateStatus.isPending) return
+      setPendingDecision(decision)
+    },
     cancelDecision: () => setPendingDecision(null),
     confirmDecision,
   }
diff --git a/src/features/manager/posting/hooks/useApplicationListViewModel.ts b/src/features/manager/posting/hooks/useApplicationListViewModel.ts
index d8f30246..de191103 100644
--- a/src/features/manager/posting/hooks/useApplicationListViewModel.ts
+++ b/src/features/manager/posting/hooks/useApplicationListViewModel.ts
@@ -1,129 +1,42 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useState } from 'react'
 
-import type { ApplicationStatusFilter } from '@/features/manager/posting/lib/applicationStatus'
-import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
-import {
-  MOCK_LATENCY,
-  useMockPostingStore,
-} from '@/features/manager/posting/mocks/store'
+import { usePostingApplicationsQuery } from '@/features/manager/posting/hooks/query/usePostingApplicationsQuery'
 import {
   ALL_WORKSPACES,
+  useWorkspaceFilterOptions,
   type WorkspaceFilter,
-} from '@/features/manager/posting/hooks/usePostingListViewModel'
-
-/** 커서 기반 무한스크롤 흉내 — 한 번에 노출할 개수 */
-const PAGE_SIZE = 4
-
-interface UseApplicationListOptions {
-  /** 특정 공고의 지원자만 조회 (공고 상세 → 지원자 보기) */
-  postingId?: number
-}
-
-/** 지원자 목록 — 업장·상태 필터 + 무한스크롤 */
-export function useApplicationListViewModel({
-  postingId,
-}: UseApplicationListOptions = {}) {
-  const applications = useMockPostingStore(state => state.applications)
+} from '@/features/manager/posting/hooks/query/useWorkspaceFilterOptions'
+import type { ApplicationStatusFilter } from '@/features/manager/posting/lib/applicationStatus'
 
-  const [workspaceFilter, setWorkspaceFilterState] =
+// 서버에 postingId 필터가 없어 공고별로 좁힐 수 없음 (응답 DTO에도 postingId 없음)
+export function useApplicationListViewModel() {
+  const [workspaceFilter, setWorkspaceFilter] =
     useState<WorkspaceFilter>(ALL_WORKSPACES)
-  const [statusFilter, setStatusFilterState] =
+  const [statusFilter, setStatusFilter] =
     useState<ApplicationStatusFilter>('ALL')
-  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE)
-  const [isLoading, setIsLoading] = useState(true)
-  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)
-  /** 다음 페이지 로딩 타이머 — 언마운트·필터 변경 시 취소 */
-  const nextPageTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  useEffect(() => {
-    const timer = setTimeout(() => setIsLoading(false), MOCK_LATENCY)
-    return () => clearTimeout(timer)
-  }, [])
-
-  useEffect(
-    () => () => {
-      if (nextPageTimer.current) clearTimeout(nextPageTimer.current)
-    },
-    []
-  )
 
-  /** 진행 중인 다음 페이지 로딩을 취소하고 첫 페이지로 되돌림 */
-  const resetPaging = useCallback(() => {
-    if (nextPageTimer.current) {
-      clearTimeout(nextPageTimer.current)
-      nextPageTimer.current = null
-    }
-    setIsFetchingNextPage(false)
-    setVisibleCount(PAGE_SIZE)
-  }, [])
+  const { workspaceOptions } = useWorkspaceFilterOptions()
 
-  // 필터가 바뀌면 페이지를 처음으로 되돌림
-  const setWorkspaceFilter = useCallback(
-    (value: WorkspaceFilter) => {
-      setWorkspaceFilterState(value)
-      resetPaging()
-    },
-    [resetPaging]
-  )
-
-  const setStatusFilter = useCallback(
-    (value: ApplicationStatusFilter) => {
-      setStatusFilterState(value)
-      resetPaging()
-    },
-    [resetPaging]
-  )
-
-  const filteredApplications = useMemo(
-    () =>
-      applications.filter(application => {
-        if (postingId !== undefined && application.postingId !== postingId) {
-          return false
-        }
-        if (
-          workspaceFilter !== ALL_WORKSPACES &&
-          application.workspaceId !== workspaceFilter
-        ) {
-          return false
-        }
-        if (statusFilter !== 'ALL' && application.status !== statusFilter) {
-          return false
-        }
-        return true
-      }),
-    [applications, postingId, workspaceFilter, statusFilter]
-  )
-
-  const visibleApplications = filteredApplications.slice(0, visibleCount)
-  const hasNextPage = visibleCount < filteredApplications.length
-
-  /** 커서 기반 다음 페이지 로드 — 실제 API 연동 시 useInfiniteQuery로 교체 */
-  const fetchNextPage = useCallback(() => {
-    if (nextPageTimer.current) return
-    setIsFetchingNextPage(true)
-    nextPageTimer.current = setTimeout(() => {
-      setVisibleCount(prev => prev + PAGE_SIZE)
-      setIsFetchingNextPage(false)
-      nextPageTimer.current = null
-    }, MOCK_LATENCY)
-  }, [])
-
-  const workspaceOptions = useMemo(
-    () => [
-      { value: ALL_WORKSPACES as WorkspaceFilter, label: '전체 업장' },
-      ...MOCK_WORKSPACES.map(workspace => ({
-        value: workspace.id as WorkspaceFilter,
-        label: workspace.businessName,
-      })),
-    ],
-    []
-  )
+  const {
+    applications,
+    totalCount,
+    isLoading,
+    isError,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = usePostingApplicationsQuery({
+    workspaceId:
+      workspaceFilter === ALL_WORKSPACES ? undefined : workspaceFilter,
+    status: statusFilter === 'ALL' ? undefined : statusFilter,
+  })
 
   return {
-    applications: visibleApplications,
-    totalCount: filteredApplications.length,
+    applications,
+    totalCount,
     isLoading,
-    isEmpty: !isLoading && filteredApplications.length === 0,
+    isError,
+    isEmpty: !isLoading && !isError && applications.length === 0,
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
diff --git a/src/features/manager/posting/hooks/usePostingDetailViewModel.ts b/src/features/manager/posting/hooks/usePostingDetailViewModel.ts
index 2e8591f7..9a3d30a5 100644
--- a/src/features/manager/posting/hooks/usePostingDetailViewModel.ts
+++ b/src/features/manager/posting/hooks/usePostingDetailViewModel.ts
@@ -1,37 +1,28 @@
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 
-import { useMockPostingStore } from '@/features/manager/posting/mocks/store'
+import { useClosePostingMutation } from '@/features/manager/posting/hooks/mutation/useClosePostingMutation'
+import { useManagerPostingDetailQuery } from '@/features/manager/posting/hooks/query/useManagerPostingDetailQuery'
 import { showToast } from '@/shared/stores/useToastStore'
 
-/** 공고 상세 — 조회 + 모집 마감 처리 */
 export function usePostingDetailViewModel(postingId: number) {
-  const postings = useMockPostingStore(state => state.postings)
-  const applications = useMockPostingStore(state => state.applications)
-  const closePosting = useMockPostingStore(state => state.closePosting)
+  const { posting, isLoading, isError } =
+    useManagerPostingDetailQuery(postingId)
+  const closePosting = useClosePostingMutation(postingId)
 
   const [isCloseModalOpen, setIsCloseModalOpen] = useState(false)
 
-  const posting = useMemo(
-    () => postings.find(item => item.id === postingId) ?? null,
-    [postings, postingId]
-  )
-
-  // 목업 지원자 수 — 실제 API에서는 공고 상세 응답 필드 사용
-  const applicantCount = useMemo(
-    () => applications.filter(item => item.postingId === postingId).length,
-    [applications, postingId]
-  )
-
   const confirmClose = () => {
-    closePosting(postingId)
     setIsCloseModalOpen(false)
-    showToast('모집을 마감했어요')
+    closePosting.mutate(undefined, {
+      onSuccess: () => showToast('모집을 마감했어요'),
+    })
   }
 
   return {
     posting,
-    applicantCount,
-    isNotFound: posting === null,
+    isLoading,
+    isNotFound: !isLoading && (isError || posting === null),
+    isClosing: closePosting.isPending,
     isCloseModalOpen,
     openCloseModal: () => setIsCloseModalOpen(true),
     closeCloseModal: () => setIsCloseModalOpen(false),
diff --git a/src/features/manager/posting/hooks/usePostingForm.ts b/src/features/manager/posting/hooks/usePostingForm.ts
index 2c09e712..16f923da 100644
--- a/src/features/manager/posting/hooks/usePostingForm.ts
+++ b/src/features/manager/posting/hooks/usePostingForm.ts
@@ -79,34 +79,28 @@ function validate(values: PostingFormValues): PostingFormErrors {
     errors.payAmount = '급여를 입력해 주세요'
   }
 
+  // 서버가 description을 필수(minLength 1)로 받습니다
+  if (values.description.trim() === '') {
+    errors.description = '상세내용을 입력해 주세요'
+  }
+
   return errors
 }
 
 interface UsePostingFormOptions {
-  /** 수정 모드일 때 프리필할 공고 */
   posting?: Posting | null
 }
 
-/**
- * 공고 등록·수정 공용 폼 view-model.
- * 프로젝트 관행에 따라 react-hook-form/zod 대신 useState 기반으로 구성합니다
- * (참고: features/store-register/hooks/useStoreRegisterWizard.ts).
- */
 export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
   const isEditMode = Boolean(posting)
   const [values, setValues] = useState<PostingFormValues>(() =>
     createInitialValues(posting)
   )
-  /** 제출을 한 번이라도 시도했을 때만 에러를 노출 */
   const [isSubmitAttempted, setIsSubmitAttempted] = useState(false)
 
   const errors = useMemo(() => validate(values), [values])
   const isValid = Object.keys(errors).length === 0
   const visibleErrors: PostingFormErrors = isSubmitAttempted ? errors : {}
-  /**
-   * 제출 전에는 버튼을 활성화해 두고, 클릭 시 검증 에러를 노출합니다.
-   * (처음부터 비활성화하면 무엇이 비었는지 알 수 없어 막다른 길이 됩니다)
-   */
   const isSubmitDisabled = isSubmitAttempted && !isValid
 
   const setWorkspaceId = useCallback((workspaceId: number) => {
@@ -122,7 +116,6 @@ export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
   }, [])
 
   const setPayAmount = useCallback((payAmount: string) => {
-    // 숫자만 허용 후 천 단위 구분 표시는 UI에서 처리
     setValues(prev => ({
       ...prev,
       payAmount: payAmount.replace(/[^0-9]/g, ''),
@@ -172,7 +165,6 @@ export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
     }))
   }, [])
 
-  /** 제출 시도 — 유효하면 true를 반환하고, 아니면 에러를 노출합니다 */
   const attemptSubmit = useCallback(() => {
     setIsSubmitAttempted(true)
     return Object.keys(validate(values)).length === 0
diff --git a/src/features/manager/posting/hooks/usePostingListViewModel.ts b/src/features/manager/posting/hooks/usePostingListViewModel.ts
index 00148dbc..77e37992 100644
--- a/src/features/manager/posting/hooks/usePostingListViewModel.ts
+++ b/src/features/manager/posting/hooks/usePostingListViewModel.ts
@@ -1,63 +1,43 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useState } from 'react'
 
-import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
+import { useManagerPostingsQuery } from '@/features/manager/posting/hooks/query/useManagerPostingsQuery'
 import {
-  MOCK_LATENCY,
-  useMockPostingStore,
-} from '@/features/manager/posting/mocks/store'
+  ALL_WORKSPACES,
+  useWorkspaceFilterOptions,
+  type WorkspaceFilter,
+} from '@/features/manager/posting/hooks/query/useWorkspaceFilterOptions'
 import type { PostingStatusFilter } from '@/features/manager/posting/lib/postingStatus'
 
-export const ALL_WORKSPACES = 'ALL' as const
-export type WorkspaceFilter = number | typeof ALL_WORKSPACES
-
-/** 내 공고 목록 — 업장·상태 필터 + 로딩(스켈레톤) 상태 */
 export function usePostingListViewModel() {
-  const postings = useMockPostingStore(state => state.postings)
-
   const [workspaceFilter, setWorkspaceFilter] =
     useState<WorkspaceFilter>(ALL_WORKSPACES)
   const [statusFilter, setStatusFilter] = useState<PostingStatusFilter>('ALL')
-  const [isLoading, setIsLoading] = useState(true)
 
-  // 목업 로딩 지연 — 스켈레톤 확인용
-  useEffect(() => {
-    const timer = setTimeout(() => setIsLoading(false), MOCK_LATENCY)
-    return () => clearTimeout(timer)
-  }, [])
+  const { workspaceOptions } = useWorkspaceFilterOptions()
 
-  const filteredPostings = useMemo(
-    () =>
-      postings.filter(posting => {
-        if (
-          workspaceFilter !== ALL_WORKSPACES &&
-          posting.workspaceId !== workspaceFilter
-        ) {
-          return false
-        }
-        if (statusFilter !== 'ALL' && posting.status !== statusFilter) {
-          return false
-        }
-        return true
-      }),
-    [postings, workspaceFilter, statusFilter]
-  )
-
-  const workspaceOptions = useMemo(
-    () => [
-      { value: ALL_WORKSPACES as WorkspaceFilter, label: '전체 업장' },
-      ...MOCK_WORKSPACES.map(workspace => ({
-        value: workspace.id as WorkspaceFilter,
-        label: workspace.businessName,
-      })),
-    ],
-    []
-  )
+  const {
+    postings,
+    totalCount,
+    isLoading,
+    isError,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useManagerPostingsQuery({
+    workspaceId:
+      workspaceFilter === ALL_WORKSPACES ? undefined : workspaceFilter,
+    status: statusFilter === 'ALL' ? undefined : statusFilter,
+  })
 
   return {
-    postings: filteredPostings,
-    totalCount: filteredPostings.length,
+    postings,
+    totalCount,
     isLoading,
-    isEmpty: !isLoading && filteredPostings.length === 0,
+    isError,
+    isEmpty: !isLoading && !isError && postings.length === 0,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
     workspaceFilter,
     setWorkspaceFilter,
     statusFilter,
diff --git a/src/features/manager/posting/lib/buildPostingRequest.ts b/src/features/manager/posting/lib/buildPostingRequest.ts
new file mode 100644
index 00000000..94f76e5c
--- /dev/null
+++ b/src/features/manager/posting/lib/buildPostingRequest.ts
@@ -0,0 +1,75 @@
+import type {
+  CreatePostingRequestDto,
+  CreatePostingScheduleRequestDto,
+  UpdatePostingRequestDto,
+  UpdatePostingScheduleRequestDto,
+} from '@/features/manager/posting/types/dto'
+import type {
+  PostingFormSchedule,
+  PostingFormValues,
+} from '@/features/manager/posting/types/posting'
+
+export function toPayAmount(payAmount: string): number {
+  return Number(payAmount.replace(/[^0-9]/g, '')) || 0
+}
+
+function toScheduleBody(
+  schedule: PostingFormSchedule
+): CreatePostingScheduleRequestDto {
+  const position = schedule.position.trim()
+  return {
+    workingDays: schedule.workingDays,
+    startTime: schedule.startTime,
+    endTime: schedule.endTime,
+    positionsNeeded: Math.max(1, schedule.positionsNeeded),
+    // 서버가 빈 문자열을 거부함
+    ...(position && { position }),
+  }
+}
+
+export function toCreatePostingRequest(
+  values: PostingFormValues,
+  workspaceId: number
+): CreatePostingRequestDto {
+  return {
+    workspaceId,
+    title: values.title.trim(),
+    description: values.description.trim(),
+    payAmount: toPayAmount(values.payAmount),
+    paymentType: values.paymentType,
+    schedules: values.schedules.map(toScheduleBody),
+  }
+}
+
+export function toUpdatePostingRequest(
+  values: PostingFormValues,
+  originalScheduleIds: number[]
+): UpdatePostingRequestDto {
+  const createSchedules: CreatePostingScheduleRequestDto[] = []
+  const updateSchedules: UpdatePostingScheduleRequestDto[] = []
+
+  for (const schedule of values.schedules) {
+    const body = toScheduleBody(schedule)
+    if (schedule.id === null) {
+      createSchedules.push(body)
+    } else {
+      updateSchedules.push({ ...body, id: schedule.id })
+    }
+  }
+
+  const remainingIds = new Set(
+    values.schedules
+      .map(schedule => schedule.id)
+      .filter((id): id is number => id !== null)
+  )
+
+  return {
+    title: values.title.trim(),
+    description: values.description.trim(),
+    payAmount: toPayAmount(values.payAmount),
+    paymentType: values.paymentType,
+    createSchedules,
+    updateSchedules,
+    deleteScheduleIds: originalScheduleIds.filter(id => !remainingIds.has(id)),
+  }
+}
diff --git a/src/features/manager/posting/lib/postingErrorMessage.ts b/src/features/manager/posting/lib/postingErrorMessage.ts
new file mode 100644
index 00000000..b1128bfe
--- /dev/null
+++ b/src/features/manager/posting/lib/postingErrorMessage.ts
@@ -0,0 +1,26 @@
+import axios from 'axios'
+
+import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
+import type { ErrorResponse } from '@/shared/types/common'
+
+const POSTING_ERROR_MESSAGES: Record<string, string> = {
+  B007: '존재하지 않는 공고예요.',
+  B012: '지원 정보를 찾을 수 없어요.',
+  B017: '이미 처리된 지원서예요.',
+  B018: '이미 근무 중인 사용자예요.',
+  B019: '수정할 근무일정을 찾을 수 없어요.',
+  B020: '상태를 변경할 수 없는 공고예요.',
+}
+
+export function resolvePostingErrorMessage(
+  error: unknown,
+  fallback: string
+): string {
+  if (axios.isAxiosError(error)) {
+    const code = (error.response?.data as ErrorResponse | undefined)?.code
+    if (code && POSTING_ERROR_MESSAGES[code]) {
+      return POSTING_ERROR_MESSAGES[code]
+    }
+  }
+  return getAxiosErrorMessage(error, fallback)
+}
diff --git a/src/features/manager/posting/lib/postingStatus.ts b/src/features/manager/posting/lib/postingStatus.ts
index b32b4742..44dd425d 100644
--- a/src/features/manager/posting/lib/postingStatus.ts
+++ b/src/features/manager/posting/lib/postingStatus.ts
@@ -6,10 +6,6 @@ interface PostingStatusBadgeStyle {
   textClassName: string
 }
 
-/**
- * 공고 상태 배지 스타일.
- * PDF 기준: 마감임박(warning)은 이번 범위에서 미사용 — API에 마감일 필드 근거 없음.
- */
 const POSTING_STATUS_BADGE: Record<PostingStatus, PostingStatusBadgeStyle> = {
   OPEN: {
     label: '모집중',
@@ -21,6 +17,16 @@ const POSTING_STATUS_BADGE: Record<PostingStatus, PostingStatusBadgeStyle> = {
     containerClassName: 'bg-bg-dark',
     textClassName: 'text-text-70',
   },
+  CANCELLED: {
+    label: '취소됨',
+    containerClassName: 'bg-bg-dark',
+    textClassName: 'text-text-50',
+  },
+  DELETED: {
+    label: '삭제됨',
+    containerClassName: 'bg-bg-dark',
+    textClassName: 'text-text-50',
+  },
 }
 
 export function resolvePostingStatusBadge(status: PostingStatus) {
diff --git a/src/features/manager/posting/mocks/data.ts b/src/features/manager/posting/mocks/data.ts
deleted file mode 100644
index 09178264..00000000
--- a/src/features/manager/posting/mocks/data.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-/**
- * API 미연동 단계용 목업 데이터.
- * 추후 `features/manager/posting/api/`의 axios 호출로 교체됩니다.
- */
-import type {
-  Application,
-  Posting,
-  Workspace,
-} from '@/features/manager/posting/types/posting'
-
-export const MOCK_WORKSPACES: Workspace[] = [
-  { id: 1, businessName: '알터 강남점', businessType: '카페' },
-  { id: 2, businessName: '알터 성수 로스터리', businessType: '카페' },
-]
-
-export const MOCK_POSTINGS: Posting[] = [
-  {
-    id: 1,
-    workspaceId: 1,
-    workspaceName: '알터 강남점',
-    businessType: '카페',
-    title: '주말 홀서빙 · 오후 마감조 구합니다',
-    description:
-      '주말 오후 마감조 홀서빙 아르바이트를 구합니다. 성실하게 근무하실 분 환영해요. 경험자 우대하며, 미경험자도 교육 후 근무 가능합니다.',
-    paymentType: 'HOURLY',
-    payAmount: 12000,
-    status: 'OPEN',
-    applicantCount: 6,
-    createdAt: '2026-07-20T09:00:00.000Z',
-    schedules: [
-      {
-        id: 101,
-        workingDays: ['SATURDAY', 'SUNDAY'],
-        startTime: '17:00',
-        endTime: '22:00',
-        position: '홀서빙',
-        positionsNeeded: 2,
-      },
-      {
-        id: 102,
-        workingDays: ['FRIDAY', 'SATURDAY'],
-        startTime: '21:00',
-        endTime: '23:00',
-        position: '마감 청소',
-        positionsNeeded: 1,
-      },
-    ],
-  },
-  {
-    id: 2,
-    workspaceId: 1,
-    workspaceName: '알터 강남점',
-    businessType: '카페',
-    title: '평일 오픈 바리스타',
-    description:
-      '평일 오픈조 바리스타를 모집합니다. 바리스타 자격증 보유자 우대합니다.',
-    paymentType: 'HOURLY',
-    payAmount: 12500,
-    status: 'OPEN',
-    applicantCount: 3,
-    createdAt: '2026-07-18T09:00:00.000Z',
-    schedules: [
-      {
-        id: 201,
-        workingDays: ['MONDAY', 'WEDNESDAY', 'FRIDAY'],
-        startTime: '07:00',
-        endTime: '12:00',
-        position: '바리스타',
-        positionsNeeded: 1,
-      },
-    ],
-  },
-  {
-    id: 3,
-    workspaceId: 2,
-    workspaceName: '알터 성수 로스터리',
-    businessType: '카페',
-    title: '여름 성수기 주말 단기',
-    description: '여름 성수기 주말 단기 아르바이트를 모집합니다.',
-    paymentType: 'DAILY',
-    payAmount: 90000,
-    status: 'CLOSED',
-    applicantCount: 4,
-    createdAt: '2026-07-05T09:00:00.000Z',
-    schedules: [
-      {
-        id: 301,
-        workingDays: ['SATURDAY', 'SUNDAY'],
-        startTime: '13:00',
-        endTime: '18:00',
-        position: '베이킹 보조',
-        positionsNeeded: 2,
-      },
-    ],
-  },
-]
-
-export const MOCK_APPLICATIONS: Application[] = [
-  {
-    id: 1,
-    postingId: 1,
-    workspaceId: 1,
-    workspaceName: '알터 강남점',
-    status: 'SUBMITTED',
-    appliedAt: '2026-07-26T07:00:00.000Z',
-    schedule: {
-      workingDays: ['SATURDAY', 'SUNDAY'],
-      startTime: '17:00',
-      endTime: '22:00',
-      position: '홀서빙',
-    },
-    description:
-      '카페 홀 경험 1년 있습니다. 주말 마감조 성실하게 근무 가능하고, 바리스타 자격증도 보유하고 있어 음료 제조도 도와드릴 수 있습니다. 잘 부탁드립니다!',
-    applicant: {
-      name: '김지원',
-      phoneNumber: '010-2345-6789',
-      birthDate: '2001.03.14',
-      gender: '여성',
-      email: 'jiwon.k@example.com',
-      certificates: [
-        { name: '바리스타 2급', issuer: '한국커피협회', acquiredAt: '2023.08' },
-        {
-          name: '위생교육 이수증',
-          issuer: '식품안전정보원',
-          acquiredAt: '2024.02',
-        },
-      ],
-    },
-  },
-  {
-    id: 2,
-    postingId: 2,
-    workspaceId: 1,
-    workspaceName: '알터 강남점',
-    status: 'SHORTLISTED',
-    appliedAt: '2026-07-26T04:00:00.000Z',
-    schedule: {
-      workingDays: ['MONDAY', 'WEDNESDAY', 'FRIDAY'],
-      startTime: '09:00',
-      endTime: '14:00',
-      position: '바리스타',
-    },
-    description:
-      '바리스타로 2년간 근무했습니다. 평일 오전 근무 가능하며 오픈 업무 경험이 많습니다.',
-    applicant: {
-      name: '이서준',
-      phoneNumber: '010-3456-7890',
-      birthDate: '1998.06.21',
-      gender: '남성',
-      email: 'seojun.lee@example.com',
-      certificates: [
-        { name: '바리스타 1급', issuer: '한국커피협회', acquiredAt: '2022.05' },
-      ],
-    },
-  },
-  {
-    id: 3,
-    postingId: 3,
-    workspaceId: 2,
-    workspaceName: '알터 성수 로스터리',
-    status: 'ACCEPTED',
-    appliedAt: '2026-07-25T09:00:00.000Z',
-    schedule: {
-      workingDays: ['SATURDAY', 'SUNDAY'],
-      startTime: '13:00',
-      endTime: '18:00',
-      position: '베이킹 보조',
-    },
-    description:
-      '베이커리 아르바이트 경험이 있어 빠르게 적응할 수 있습니다. 주말 오후 근무 가능합니다.',
-    applicant: {
-      name: '박하늘',
-      phoneNumber: '010-8765-4321',
-      birthDate: '1999.11.02',
-      gender: '여성',
-      email: 'haneul@example.com',
-      certificates: [],
-    },
-  },
-  {
-    id: 4,
-    postingId: 1,
-    workspaceId: 1,
-    workspaceName: '알터 강남점',
-    status: 'REJECTED',
-    appliedAt: '2026-07-24T09:00:00.000Z',
-    schedule: {
-      workingDays: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY'],
-      startTime: '18:00',
-      endTime: '22:00',
-      position: '마감조',
-    },
-    description: '평일 저녁 근무 가능합니다. 성실하게 근무하겠습니다.',
-    applicant: {
-      name: '정민재',
-      phoneNumber: '010-1122-3344',
-      birthDate: '2000.01.09',
-      gender: '남성',
-      email: 'minjae.j@example.com',
-      certificates: [],
-    },
-  },
-  {
-    id: 5,
-    postingId: 2,
-    workspaceId: 1,
-    workspaceName: '알터 강남점',
-    status: 'CANCELLED',
-    appliedAt: '2026-07-23T09:00:00.000Z',
-    schedule: {
-      workingDays: ['MONDAY', 'WEDNESDAY'],
-      startTime: '07:00',
-      endTime: '12:00',
-      position: '바리스타',
-    },
-    description: '오전 근무 가능합니다.',
-    applicant: {
-      name: '최유나',
-      phoneNumber: '010-5566-7788',
-      birthDate: '2002.04.18',
-      gender: '여성',
-      email: 'yuna.choi@example.com',
-      certificates: [],
-    },
-  },
-  {
-    id: 6,
-    postingId: 3,
-    workspaceId: 2,
-    workspaceName: '알터 성수 로스터리',
-    status: 'EXPIRED',
-    appliedAt: '2026-07-20T09:00:00.000Z',
-    schedule: {
-      workingDays: ['SATURDAY'],
-      startTime: '13:00',
-      endTime: '18:00',
-      position: '베이킹 보조',
-    },
-    description: '주말 단기 근무 희망합니다.',
-    applicant: {
-      name: '한소희',
-      phoneNumber: '010-9900-1122',
-      birthDate: '1997.09.30',
-      gender: '여성',
-      email: 'sohee.han@example.com',
-      certificates: [],
-    },
-  },
-]
diff --git a/src/features/manager/posting/mocks/store.ts b/src/features/manager/posting/mocks/store.ts
deleted file mode 100644
index 4250768a..00000000
--- a/src/features/manager/posting/mocks/store.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * 목업 인메모리 스토어.
- *
- * API 연동 전까지 화면 간 상태(등록/수정/마감/채용 결정)를 유지하기 위한 임시 저장소입니다.
- * 실제 API 연동 시 이 파일과 `mocks/data.ts`는 삭제하고,
- * 각 view-model 훅을 react-query(useQuery/useMutation)로 교체하면 됩니다.
- */
-import { create } from 'zustand'
-
-import {
-  MOCK_APPLICATIONS,
-  MOCK_POSTINGS,
-} from '@/features/manager/posting/mocks/data'
-import type {
-  Application,
-  ApplicationStatus,
-  Posting,
-  PostingFormSchedule,
-  PostingFormValues,
-  PostingSchedule,
-} from '@/features/manager/posting/types/posting'
-
-/** 네트워크 지연 흉내 — 스켈레톤/로딩 상태를 확인하기 위함 */
-export const MOCK_LATENCY = 400
-
-interface MockPostingState {
-  postings: Posting[]
-  applications: Application[]
-  createPosting: (values: PostingFormValues, workspaceName: string) => number
-  updatePosting: (postingId: number, values: PostingFormValues) => void
-  closePosting: (postingId: number) => void
-  updateApplicationStatus: (
-    applicationId: number,
-    status: ApplicationStatus
-  ) => void
-}
-
-let nextPostingId = MOCK_POSTINGS.length + 1
-
-function toPayAmount(payAmount: string): number {
-  const parsed = Number(payAmount.replace(/[^0-9]/g, ''))
-  return Number.isNaN(parsed) ? 0 : parsed
-}
-
-/** 폼 전용 필드(key)를 제거해 저장용 일정으로 변환 */
-function toPostingSchedules(
-  schedules: PostingFormSchedule[]
-): PostingSchedule[] {
-  return schedules.map(schedule => ({
-    id: schedule.id,
-    workingDays: schedule.workingDays,
-    startTime: schedule.startTime,
-    endTime: schedule.endTime,
-    position: schedule.position,
-    // 편집 중 빈 값(0)이 남아 있어도 저장 시 최소 1명 보장
-    positionsNeeded: Math.max(1, schedule.positionsNeeded),
-  }))
-}
-
-export const useMockPostingStore = create<MockPostingState>((set, get) => ({
-  postings: MOCK_POSTINGS,
-  applications: MOCK_APPLICATIONS,
-
-  createPosting: (values, workspaceName) => {
-    nextPostingId += 1
-    const id = nextPostingId
-    const posting: Posting = {
-      id,
-      workspaceId: values.workspaceId ?? 0,
-      workspaceName,
-      businessType: '카페',
-      title: values.title.trim(),
-      description: values.description.trim(),
-      paymentType: values.paymentType,
-      payAmount: toPayAmount(values.payAmount),
-      status: 'OPEN',
-      applicantCount: 0,
-      createdAt: new Date().toISOString(),
-      schedules: toPostingSchedules(values.schedules),
-    }
-    set(state => ({ postings: [posting, ...state.postings] }))
-    return id
-  },
-
-  updatePosting: (postingId, values) => {
-    set(state => ({
-      postings: state.postings.map(posting =>
-        posting.id === postingId
-          ? {
-              ...posting,
-              title: values.title.trim(),
-              description: values.description.trim(),
-              paymentType: values.paymentType,
-              payAmount: toPayAmount(values.payAmount),
-              schedules: toPostingSchedules(values.schedules),
-            }
-          : posting
-      ),
-    }))
-  },
-
-  closePosting: postingId => {
-    set(state => ({
-      postings: state.postings.map(posting =>
-        posting.id === postingId ? { ...posting, status: 'CLOSED' } : posting
-      ),
-    }))
-  },
-
-  updateApplicationStatus: (applicationId, status) => {
-    const { applications } = get()
-    set({
-      applications: applications.map(application =>
-        application.id === applicationId
-          ? { ...application, status }
-          : application
-      ),
-    })
-  },
-}))
diff --git a/src/features/manager/posting/types/dto.ts b/src/features/manager/posting/types/dto.ts
new file mode 100644
index 00000000..480824b4
--- /dev/null
+++ b/src/features/manager/posting/types/dto.ts
@@ -0,0 +1,255 @@
+import type { PaymentType } from '@/shared/constants/payment'
+import type { WorkingDay } from '@/shared/constants/workingDays'
+import { toTimeOfDay } from '@/shared/lib/toTimeOfDay'
+import type { ApplicationApiStatus } from '@/shared/types/applicationStatus'
+import type {
+  Applicant,
+  Application,
+  ApplicationListItem,
+  Certificate,
+  Posting,
+  PostingListItem,
+  PostingSchedule,
+  PostingStatus,
+} from '@/features/manager/posting/types/posting'
+
+export interface DescribedEnumDto<T extends string> {
+  value: T
+  description: string
+}
+
+export interface PostingScheduleDto {
+  id: number
+  workingDays: WorkingDay[]
+  startTime: string
+  endTime: string
+  positionsNeeded: number
+  positionsAvailable: number
+  position?: string
+}
+
+export interface ManagerPostingListWorkspaceDto {
+  id: number
+  businessName?: string
+  businessType?: string
+  businessTypeDetail?: string
+}
+
+export interface ManagerPostingListItemDto {
+  id: number
+  title: string
+  payAmount: number
+  paymentType: PaymentType
+  createdAt: string
+  schedules: PostingScheduleDto[]
+  workspace: ManagerPostingListWorkspaceDto
+}
+
+export interface ManagerPostingDetailWorkspaceDto {
+  id: number
+  name?: string
+  businessType?: string
+  businessTypeDetail?: string
+  fullAddress?: string
+}
+
+export interface ManagerPostingDetailDto {
+  id: number
+  workspace: ManagerPostingDetailWorkspaceDto
+  title: string
+  description?: string
+  payAmount: number
+  paymentType: PaymentType
+  status: DescribedEnumDto<PostingStatus>
+  createdAt: string
+  updatedAt: string
+  schedules: PostingScheduleDto[]
+}
+
+export interface PostingApplicationWorkspaceDto {
+  id: number
+  name?: string
+}
+
+export interface PostingApplicationScheduleDto {
+  id: number
+  workingDays: WorkingDay[]
+  startTime: string
+  endTime: string
+  position?: string
+}
+
+export interface PostingApplicationListItemDto {
+  id: number
+  workspace: PostingApplicationWorkspaceDto
+  schedule: PostingApplicationScheduleDto
+  status: DescribedEnumDto<ApplicationApiStatus>
+  applicant: { name?: string }
+  createdAt: string
+}
+
+export interface PostingApplicantCertificateDto {
+  id: number
+  certificateName?: string
+  publisherName?: string
+  issuedAt?: string
+  expiresAt?: string
+}
+
+export interface PostingApplicantDetailDto {
+  id: number
+  name?: string
+  email?: string
+  contact?: string
+  birthday?: string
+  gender?: 'GENDER_MALE' | 'GENDER_FEMALE'
+  userCertificates?: PostingApplicantCertificateDto[]
+}
+
+export interface PostingApplicationDetailDto {
+  id: number
+  workspace: PostingApplicationWorkspaceDto
+  schedule: PostingApplicationScheduleDto
+  description?: string
+  status: DescribedEnumDto<ApplicationApiStatus>
+  applicant: PostingApplicantDetailDto
+  createdAt: string
+}
+
+export interface CreatePostingScheduleRequestDto {
+  workingDays: WorkingDay[]
+  startTime: string
+  endTime: string
+  positionsNeeded: number
+  position?: string
+}
+
+export interface CreatePostingRequestDto {
+  workspaceId: number
+  title: string
+  description: string
+  payAmount: number
+  paymentType: PaymentType
+  schedules: CreatePostingScheduleRequestDto[]
+}
+
+export interface UpdatePostingScheduleRequestDto extends CreatePostingScheduleRequestDto {
+  id: number
+}
+
+export interface UpdatePostingRequestDto {
+  title: string
+  description: string
+  payAmount: number
+  paymentType: PaymentType
+  createSchedules: CreatePostingScheduleRequestDto[]
+  updateSchedules: UpdatePostingScheduleRequestDto[]
+  deleteScheduleIds: number[]
+}
+
+function resolveBusinessType(workspace: {
+  businessType?: string
+  businessTypeDetail?: string
+}): string {
+  return workspace.businessTypeDetail?.trim() || workspace.businessType || ''
+}
+
+function toPostingSchedule(dto: PostingScheduleDto): PostingSchedule {
+  return {
+    id: dto.id ?? null,
+    workingDays: dto.workingDays ?? [],
+    startTime: toTimeOfDay(dto.startTime),
+    endTime: toTimeOfDay(dto.endTime),
+    position: dto.position ?? '',
+    positionsNeeded: dto.positionsNeeded ?? 1,
+  }
+}
+
+export function adaptPostingListItem(
+  dto: ManagerPostingListItemDto
+): PostingListItem {
+  return {
+    id: dto.id,
+    workspaceId: dto.workspace?.id ?? 0,
+    workspaceName: dto.workspace?.businessName ?? '',
+    businessType: resolveBusinessType(dto.workspace ?? {}),
+    title: dto.title,
+    paymentType: dto.paymentType,
+    payAmount: dto.payAmount,
+    schedules: (dto.schedules ?? []).map(toPostingSchedule),
+    createdAt: dto.createdAt,
+  }
+}
+
+export function adaptPostingDetail(dto: ManagerPostingDetailDto): Posting {
+  return {
+    id: dto.id,
+    workspaceId: dto.workspace?.id ?? 0,
+    workspaceName: dto.workspace?.name ?? '',
+    businessType: resolveBusinessType(dto.workspace ?? {}),
+    title: dto.title,
+    description: dto.description ?? '',
+    paymentType: dto.paymentType,
+    payAmount: dto.payAmount,
+    status: dto.status?.value ?? 'OPEN',
+    schedules: (dto.schedules ?? []).map(toPostingSchedule),
+    createdAt: dto.createdAt,
+  }
+}
+
+function toApplicationSchedule(dto: PostingApplicationScheduleDto) {
+  return {
+    workingDays: dto?.workingDays ?? [],
+    startTime: toTimeOfDay(dto?.startTime),
+    endTime: toTimeOfDay(dto?.endTime),
+    position: dto?.position ?? '',
+  }
+}
+
+export function adaptApplicationListItem(
+  dto: PostingApplicationListItemDto
+): ApplicationListItem {
+  return {
+    id: dto.id,
+    workspaceId: dto.workspace?.id ?? 0,
+    workspaceName: dto.workspace?.name ?? '',
+    status: dto.status?.value ?? 'SUBMITTED',
+    appliedAt: dto.createdAt,
+    applicantName: dto.applicant?.name ?? '',
+    schedule: toApplicationSchedule(dto.schedule),
+  }
+}
+
+function toCertificate(dto: PostingApplicantCertificateDto): Certificate {
+  return {
+    name: dto.certificateName ?? '',
+    issuer: dto.publisherName ?? '',
+    acquiredAt: dto.issuedAt ?? '',
+  }
+}
+
+function adaptApplicant(dto: PostingApplicantDetailDto): Applicant {
+  return {
+    name: dto?.name ?? '',
+    phoneNumber: dto?.contact ?? '-',
+    birthDate: dto?.birthday ?? '-',
+    gender: dto?.gender === 'GENDER_FEMALE' ? '여성' : '남성',
+    email: dto?.email ?? '-',
+    certificates: (dto?.userCertificates ?? []).map(toCertificate),
+  }
+}
+
+export function adaptApplicationDetail(
+  dto: PostingApplicationDetailDto
+): Application {
+  return {
+    id: dto.id,
+    workspaceId: dto.workspace?.id ?? 0,
+    workspaceName: dto.workspace?.name ?? '',
+    status: dto.status?.value ?? 'SUBMITTED',
+    appliedAt: dto.createdAt,
+    applicant: adaptApplicant(dto.applicant),
+    schedule: toApplicationSchedule(dto.schedule),
+    description: dto.description ?? '',
+  }
+}
diff --git a/src/features/manager/posting/types/posting.ts b/src/features/manager/posting/types/posting.ts
index 4b5a3d5c..673464e2 100644
--- a/src/features/manager/posting/types/posting.ts
+++ b/src/features/manager/posting/types/posting.ts
@@ -1,31 +1,18 @@
-/**
- * 사장님 구인구직 — 매니저 측 공고/지원자 UI 모델
- *
- * 서버 DTO(`@/features/manager/home/types/posting`)와 지원 상태 enum
- * (`@/shared/types/applicationStatus`)을 계승합니다.
- * API 미연동 단계이므로 화면이 소비하는 UI 모델을 이 파일에서 정의합니다.
- */
 import type { ApplicationApiStatus } from '@/shared/types/applicationStatus'
 import type { PaymentType } from '@/shared/constants/payment'
 import type { WorkingDay } from '@/shared/constants/workingDays'
 import { WORKING_DAYS, WORKING_DAY_LABEL } from '@/shared/constants/workingDays'
 
-// ---- 요일·급여 (shared 재노출 — 슬라이스 내 호출부 경로 유지) ----
 export type { PaymentType, WorkingDay }
 export { PAYMENT_TYPES, PAYMENT_TYPE_LABEL } from '@/shared/constants/payment'
 export { WORKING_DAYS, WORKING_DAY_LABEL }
 
-// ---- 공고 상태 ----
-/** OPEN=모집중, CLOSED=모집완료 */
-export type PostingStatus = 'OPEN' | 'CLOSED'
+export type PostingStatus = 'OPEN' | 'CLOSED' | 'CANCELLED' | 'DELETED'
 
-// ---- 지원 상태 ----
-/** 서버 enum을 그대로 사용 (SUBMITTED/SHORTLISTED/ACCEPTED/REJECTED/CANCELLED/EXPIRED/DELETED) */
 export type ApplicationStatus = ApplicationApiStatus
 
-// ---- UI 모델 ----
 export interface PostingSchedule {
-  /** 기존 일정은 서버 id, 신규 추가분은 null */
+  // 신규 추가분은 null
   id: number | null
   workingDays: WorkingDay[]
   startTime: string
@@ -34,10 +21,16 @@ export interface PostingSchedule {
   positionsNeeded: number
 }
 
-export interface Workspace {
+export interface PostingListItem {
   id: number
-  businessName: string
+  workspaceId: number
+  workspaceName: string
   businessType: string
+  title: string
+  paymentType: PaymentType
+  payAmount: number
+  schedules: PostingSchedule[]
+  createdAt: string
 }
 
 export interface Posting {
@@ -51,7 +44,6 @@ export interface Posting {
   payAmount: number
   status: PostingStatus
   schedules: PostingSchedule[]
-  applicantCount: number
   createdAt: string
 }
 
@@ -70,27 +62,33 @@ export interface Applicant {
   certificates: Certificate[]
 }
 
+export type ApplicationSchedule = Pick<
+  PostingSchedule,
+  'workingDays' | 'startTime' | 'endTime' | 'position'
+>
+
+export interface ApplicationListItem {
+  id: number
+  workspaceId: number
+  workspaceName: string
+  status: ApplicationStatus
+  appliedAt: string
+  applicantName: string
+  schedule: ApplicationSchedule
+}
+
 export interface Application {
   id: number
-  postingId: number
   workspaceId: number
   workspaceName: string
   status: ApplicationStatus
-  /** 지원 시각 (ISO) — 목록에서 '2시간 전' 형태로 표시 */
   appliedAt: string
   applicant: Applicant
-  /** 지원한 근무일정 */
-  schedule: Pick<
-    PostingSchedule,
-    'workingDays' | 'startTime' | 'endTime' | 'position'
-  >
-  /** 지원 메시지 */
+  schedule: ApplicationSchedule
   description: string
 }
 
-// ---- 폼 모델 ----
 export interface PostingFormSchedule extends PostingSchedule {
-  /** 폼 내부에서 일정 카드를 구분하기 위한 로컬 키 */
   key: string
 }
 
@@ -103,15 +101,14 @@ export interface PostingFormValues {
   description: string
 }
 
-/** 필드별 검증 에러 — 값이 있으면 해당 필드에 에러 표시 */
 export interface PostingFormErrors {
   workspaceId?: string
   title?: string
   schedules?: string
   payAmount?: string
+  description?: string
 }
 
-// ---- 포맷터 ----
 export function formatWorkingDays(days: WorkingDay[]): string {
   if (days.length === 0) return '-'
   return WORKING_DAYS.filter(day => days.includes(day))
diff --git a/src/features/manager/posting/ui/ApplicantCard.tsx b/src/features/manager/posting/ui/ApplicantCard.tsx
index 3aa8eece..6a1c6dc1 100644
--- a/src/features/manager/posting/ui/ApplicantCard.tsx
+++ b/src/features/manager/posting/ui/ApplicantCard.tsx
@@ -5,17 +5,16 @@ import {
   formatRelativeTime,
   formatTimeRange,
   formatWorkingDays,
-  type Application,
+  type ApplicationListItem,
 } from '@/features/manager/posting/types/posting'
 
 interface ApplicantCardProps {
-  application: Application
+  application: ApplicationListItem
   onClick: () => void
 }
 
-/** 지원자 카드 — 업장·상태·이름·지원시각·희망 근무 (PDF ApplicantCard) */
 export function ApplicantCard({ application, onClick }: ApplicantCardProps) {
-  const { applicant, schedule } = application
+  const { applicantName, schedule } = application
 
   return (
     <button
@@ -36,10 +35,10 @@ export function ApplicantCard({ application, onClick }: ApplicantCardProps) {
             className="flex size-8 shrink-0 items-center justify-center rounded-full bg-main-100 typography-body03-semibold text-sub"
             aria-hidden="true"
           >
-            {applicant.name.charAt(0)}
+            {applicantName.charAt(0)}
           </span>
           <span className="typography-body01-semibold text-text-100">
-            {applicant.name}
+            {applicantName}
           </span>
           <span className="ml-auto typography-body03-regular text-text-50">
             {formatRelativeTime(application.appliedAt)}
@@ -56,7 +55,9 @@ export function ApplicantCard({ application, onClick }: ApplicantCardProps) {
           <ClockIcon className="size-4 text-main" />
           {formatTimeRange(schedule.startTime, schedule.endTime)}
         </span>
-        <span className="text-text-70">{schedule.position}</span>
+        {schedule.position ? (
+          <span className="text-text-70">{schedule.position}</span>
+        ) : null}
       </div>
     </button>
   )
diff --git a/src/features/manager/posting/ui/FilterBar.tsx b/src/features/manager/posting/ui/FilterBar.tsx
index 567f1b31..434d78a1 100644
--- a/src/features/manager/posting/ui/FilterBar.tsx
+++ b/src/features/manager/posting/ui/FilterBar.tsx
@@ -1,4 +1,4 @@
-import type { WorkspaceFilter } from '@/features/manager/posting/hooks/usePostingListViewModel'
+import type { WorkspaceFilter } from '@/features/manager/posting/hooks/query/useWorkspaceFilterOptions'
 import { SelectDropdown } from '@/shared/ui/common/SelectDropdown'
 import type { SelectOption } from '@/shared/ui/common/SelectDropdown'
 
@@ -12,7 +12,6 @@ interface FilterBarProps<TStatus extends string> {
   totalCount: number
 }
 
-/** 업장·상태 드롭다운 + 총 N건 */
 export function FilterBar<TStatus extends string>({
   workspaceOptions,
   workspaceValue,
diff --git a/src/features/manager/posting/ui/PostingFormFields.tsx b/src/features/manager/posting/ui/PostingFormFields.tsx
index d89fc1b2..15730af1 100644
--- a/src/features/manager/posting/ui/PostingFormFields.tsx
+++ b/src/features/manager/posting/ui/PostingFormFields.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 
 import type { PostingFormViewModel } from '@/features/manager/posting/hooks/usePostingForm'
-import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
+import { useWorkspaceSelectOptions } from '@/features/manager/posting/hooks/query/useWorkspaceFilterOptions'
 import AlertIcon from '@/assets/icons/posting/Alert.svg?react'
 import { ScheduleEditor } from '@/features/manager/posting/ui/ScheduleEditor'
 import {
@@ -15,7 +15,6 @@ interface PostingFormFieldsProps {
   form: PostingFormViewModel
 }
 
-/** 섹션 카드 — 라벨 + 필수 표시 + 에러 테두리/메시지 */
 function Section({
   label,
   required = false,
@@ -57,14 +56,9 @@ function Section({
 const inputClassName =
   'h-12 w-full rounded-xl border bg-white px-3.5 typography-body02-regular text-text-100 placeholder:text-text-50 focus:outline-none'
 
-/** 공고 등록·수정 공용 폼 — 업장/제목/키워드/근무일정/급여/상세내용 */
 export function PostingFormFields({ form }: PostingFormFieldsProps) {
   const { values, errors } = form
-
-  const workspaceOptions = MOCK_WORKSPACES.map(workspace => ({
-    value: workspace.id,
-    label: workspace.businessName,
-  }))
+  const { workspaceOptions } = useWorkspaceSelectOptions()
 
   return (
     <div className="flex flex-col gap-3">
@@ -144,13 +138,18 @@ export function PostingFormFields({ form }: PostingFormFieldsProps) {
         </div>
       </Section>
 
-      <Section label="상세내용">
+      <Section label="상세내용" required error={errors.description}>
         <textarea
           value={values.description}
           rows={5}
           placeholder="근무 조건, 우대 사항 등을 자유롭게 작성해 주세요"
           onChange={e => form.setDescription(e.target.value)}
-          className="w-full resize-none rounded-xl border border-line-1 bg-white p-3.5 typography-body02-regular text-text-100 placeholder:text-text-50 focus:border-main focus:outline-none"
+          className={cn(
+            'w-full resize-none rounded-xl border bg-white p-3.5 typography-body02-regular text-text-100 placeholder:text-text-50 focus:outline-none',
+            errors.description
+              ? 'border-error'
+              : 'border-line-1 focus:border-main'
+          )}
         />
       </Section>
     </div>
diff --git a/src/features/manager/posting/ui/PostingListCard.tsx b/src/features/manager/posting/ui/PostingListCard.tsx
index 6925eacb..bd77462b 100644
--- a/src/features/manager/posting/ui/PostingListCard.tsx
+++ b/src/features/manager/posting/ui/PostingListCard.tsx
@@ -1,45 +1,30 @@
 import CalendarIcon from '@/assets/icons/posting/Calendar.svg?react'
 import ClockIcon from '@/assets/icons/posting/Clock.svg?react'
-import { ManagerPostingStatusBadge } from '@/features/manager/posting/ui/ManagerPostingStatusBadge'
 import {
   formatTimeRange,
   formatWorkingDays,
   PAYMENT_TYPE_LABEL,
-  type Posting,
+  type PostingListItem,
 } from '@/features/manager/posting/types/posting'
-import { cn } from '@/shared/lib/utils'
 
 interface PostingListCardProps {
-  posting: Posting
+  posting: PostingListItem
   onClick: () => void
 }
 
-/** 내 공고 카드 — PDF OngoingPostingCard */
 export function PostingListCard({ posting, onClick }: PostingListCardProps) {
-  const isClosed = posting.status === 'CLOSED'
   const firstSchedule = posting.schedules[0]
 
   return (
     <button
       type="button"
       onClick={onClick}
-      className={cn(
-        'w-full overflow-hidden rounded-2xl bg-white text-left shadow-sm transition-colors hover:bg-bg-light/60',
-        isClosed && 'opacity-70'
-      )}
+      className="w-full overflow-hidden rounded-2xl bg-white text-left shadow-sm transition-colors hover:bg-bg-light/60"
     >
       <div className="flex flex-col gap-1.5 px-4 pb-3 pt-4">
-        <div className="flex items-start justify-between gap-2">
-          <h3
-            className={cn(
-              'line-clamp-1 typography-body01-semibold',
-              isClosed ? 'text-text-70' : 'text-text-100'
-            )}
-          >
-            {posting.title}
-          </h3>
-          <ManagerPostingStatusBadge status={posting.status} />
-        </div>
+        <h3 className="line-clamp-1 typography-body01-semibold text-text-100">
+          {posting.title}
+        </h3>
 
         <p className="typography-body03-regular text-text-70">
           {posting.workspaceName} · {posting.businessType}
diff --git a/src/pages/manager/application-detail/index.tsx b/src/pages/manager/application-detail/index.tsx
index 349398f1..4f8d1a0a 100644
--- a/src/pages/manager/application-detail/index.tsx
+++ b/src/pages/manager/application-detail/index.tsx
@@ -12,6 +12,7 @@ import {
 import { resolveApplicationStatusBadge } from '@/features/manager/posting/lib/applicationStatus'
 import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
 import { Navbar } from '@/shared/ui/common/Navbar'
+import { Skeleton } from '@/shared/ui/common/Skeleton'
 
 function InfoRow({
   label,
@@ -34,7 +35,6 @@ function InfoRow({
   )
 }
 
-/** 종료된 지원서 안내 문구 */
 function TerminalNotice({ status }: { status: ApplicationStatus }) {
   const { label } = resolveApplicationStatusBadge(status)
   const isAccepted = status === 'ACCEPTED'
@@ -60,13 +60,13 @@ function TerminalNotice({ status }: { status: ApplicationStatus }) {
   )
 }
 
-/** SCREEN 3 · 지원자 상세 · 채용 결정 */
 export function ManagerApplicationDetailPage() {
   const { applicationId } = useParams()
   const numericApplicationId = Number(applicationId)
 
   const {
     application,
+    isLoading,
     isNotFound,
     canDecide,
     pendingDecision,
@@ -76,6 +76,19 @@ export function ManagerApplicationDetailPage() {
     confirmDecision,
   } = useApplicationDetailViewModel(numericApplicationId)
 
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+        <Navbar variant="detail" title="지원자 상세" />
+        <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pt-4">
+          <Skeleton className="h-16 rounded-2xl" />
+          <Skeleton className="h-40 rounded-2xl" />
+          <Skeleton className="h-24 rounded-2xl" />
+        </main>
+      </div>
+    )
+  }
+
   if (isNotFound || !application) {
     return (
       <div className="flex min-h-[100dvh] flex-col bg-bg-light">
@@ -136,7 +149,7 @@ export function ManagerApplicationDetailPage() {
             <ul className="rounded-2xl bg-white px-4 shadow-sm">
               {applicant.certificates.map((certificate, index) => (
                 <li
-                  key={certificate.name}
+                  key={`${certificate.name}-${index}`}
                   className={`flex items-center justify-between py-3 ${
                     index === applicant.certificates.length - 1
                       ? ''
diff --git a/src/pages/manager/application-list/index.tsx b/src/pages/manager/application-list/index.tsx
index ec38c895..310688b5 100644
--- a/src/pages/manager/application-list/index.tsx
+++ b/src/pages/manager/application-list/index.tsx
@@ -31,23 +31,17 @@ function ApplicantListSkeleton() {
   )
 }
 
-/** SCREEN 2 · 지원자 목록 */
 export function ManagerApplicationListPage() {
   const navigate = useNavigate()
   const { postingId: postingIdParam } = useParams()
 
-  /**
-   * 진입 경로 2가지
-   * - Docbar '지원자' 탭: /manager/postings/applications — 전체 지원자, 뒤로가기 없음
-   * - 공고 상세 '지원자 보기': /manager/postings/:postingId/applications — 해당 공고로 한정
-   */
-  const postingId = postingIdParam ? Number(postingIdParam) : undefined
-  const isFromPosting = postingId !== undefined
+  const isFromPosting = postingIdParam !== undefined
 
   const {
     applications,
     totalCount,
     isLoading,
+    isError,
     isEmpty,
     hasNextPage,
     isFetchingNextPage,
@@ -57,11 +51,10 @@ export function ManagerApplicationListPage() {
     statusFilter,
     setStatusFilter,
     workspaceOptions,
-  } = useApplicationListViewModel({ postingId })
+  } = useApplicationListViewModel()
 
-  // 커서 기반 무한스크롤 — 목록 하단 sentinel이 보이면 다음 페이지 로드
   const sentinelRef = useRef<HTMLDivElement>(null)
-  /** sentinel은 로딩이 끝난 뒤에야 마운트되므로 deps에 isLoading·개수를 포함해야 관찰이 붙는다 */
+  // sentinel은 로딩 후에야 마운트되므로 deps에 isLoading·개수가 있어야 관찰이 붙는다
   const visibleCount = applications.length
 
   useEffect(() => {
@@ -99,6 +92,17 @@ export function ManagerApplicationListPage() {
 
         {isLoading ? <ApplicantListSkeleton /> : null}
 
+        {isError ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-2 py-16">
+            <p className="typography-body01-semibold text-text-100">
+              지원자를 불러오지 못했어요
+            </p>
+            <p className="typography-body02-regular text-center text-text-70">
+              잠시 후 다시 시도해 주세요.
+            </p>
+          </div>
+        ) : null}
+
         {isEmpty ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-3 py-16">
             <span className="flex size-16 items-center justify-center rounded-full bg-main-100">
diff --git a/src/pages/manager/posting-create/index.tsx b/src/pages/manager/posting-create/index.tsx
index bfbe64d4..aaa2aa63 100644
--- a/src/pages/manager/posting-create/index.tsx
+++ b/src/pages/manager/posting-create/index.tsx
@@ -1,9 +1,8 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+import { useCreatePostingMutation } from '@/features/manager/posting/hooks/mutation/useCreatePostingMutation'
 import { usePostingForm } from '@/features/manager/posting/hooks/usePostingForm'
-import { MOCK_WORKSPACES } from '@/features/manager/posting/mocks/data'
-import { useMockPostingStore } from '@/features/manager/posting/mocks/store'
 import { PostingFormFields } from '@/features/manager/posting/ui/PostingFormFields'
 import { ROUTES } from '@/shared/constants/routes'
 import { showToast } from '@/shared/stores/useToastStore'
@@ -11,11 +10,10 @@ import { AuthButton } from '@/shared/ui/common/AuthButton'
 import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
 import { Navbar } from '@/shared/ui/common/Navbar'
 
-/** SCREEN 1 · 공고 등록 */
 export function ManagerPostingCreatePage() {
   const navigate = useNavigate()
   const form = usePostingForm()
-  const createPosting = useMockPostingStore(state => state.createPosting)
+  const createPosting = useCreatePostingMutation()
   const [isConfirmOpen, setIsConfirmOpen] = useState(false)
 
   const handleSubmit = () => {
@@ -24,15 +22,19 @@ export function ManagerPostingCreatePage() {
   }
 
   const handleConfirm = () => {
-    const workspaceName =
-      MOCK_WORKSPACES.find(
-        workspace => workspace.id === form.values.workspaceId
-      )?.businessName ?? ''
+    const { workspaceId } = form.values
+    if (workspaceId === null) return
 
-    createPosting(form.values, workspaceName)
     setIsConfirmOpen(false)
-    showToast('공고를 등록했어요')
-    navigate(ROUTES.MANAGER.POSTINGS, { replace: true })
+    createPosting.mutate(
+      { values: form.values, workspaceId },
+      {
+        onSuccess: () => {
+          showToast('공고를 등록했어요')
+          navigate(ROUTES.MANAGER.POSTINGS, { replace: true })
+        },
+      }
+    )
   }
 
   return (
@@ -44,7 +46,10 @@ export function ManagerPostingCreatePage() {
       </main>
 
       <div className="fixed bottom-0 left-1/2 z-10 w-full max-w-[428px] -translate-x-1/2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
-        <AuthButton onClick={handleSubmit} disabled={form.isSubmitDisabled}>
+        <AuthButton
+          onClick={handleSubmit}
+          disabled={form.isSubmitDisabled || createPosting.isPending}
+        >
           등록하기
         </AuthButton>
       </div>
diff --git a/src/pages/manager/posting-detail/index.tsx b/src/pages/manager/posting-detail/index.tsx
index 0c45267c..0b8a8b55 100644
--- a/src/pages/manager/posting-detail/index.tsx
+++ b/src/pages/manager/posting-detail/index.tsx
@@ -17,8 +17,8 @@ import {
 } from '@/shared/constants/routes'
 import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
 import { Navbar } from '@/shared/ui/common/Navbar'
+import { Skeleton } from '@/shared/ui/common/Skeleton'
 
-/** SCREEN 4 · 내 공고 상세 · 마감 */
 export function ManagerPostingDetailPage() {
   const navigate = useNavigate()
   const { postingId } = useParams()
@@ -26,14 +26,28 @@ export function ManagerPostingDetailPage() {
 
   const {
     posting,
-    applicantCount,
+    isLoading,
     isNotFound,
+    isClosing,
     isCloseModalOpen,
     openCloseModal,
     closeCloseModal,
     confirmClose,
   } = usePostingDetailViewModel(numericPostingId)
 
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+        <Navbar variant="detail" title="공고 상세" />
+        <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pt-4">
+          <Skeleton className="h-24 rounded-2xl" />
+          <Skeleton className="h-16 rounded-2xl" />
+          <Skeleton className="h-28 rounded-2xl" />
+        </main>
+      </div>
+    )
+  }
+
   if (isNotFound || !posting) {
     return (
       <div className="flex min-h-[100dvh] flex-col bg-bg-light">
@@ -47,7 +61,7 @@ export function ManagerPostingDetailPage() {
     )
   }
 
-  const isClosed = posting.status === 'CLOSED'
+  const isClosed = posting.status !== 'OPEN'
 
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
@@ -131,12 +145,8 @@ export function ManagerPostingDetailPage() {
               지원자 보기
             </span>
           </span>
-          <span className="flex items-center gap-1.5">
-            <span className="flex h-6 min-w-6 items-center justify-center rounded-full bg-main px-1.5 typography-bg text-white">
-              {applicantCount}
-            </span>
-            <ChevronRightIcon className="size-4 text-text-50" />
-          </span>
+          {/* 지원자 수는 공고 상세 응답에 필드가 없어 노출하지 않습니다 (백엔드 추가 요청 중) */}
+          <ChevronRightIcon className="size-4 text-text-50" />
         </button>
       </main>
 
@@ -151,7 +161,7 @@ export function ManagerPostingDetailPage() {
         <button
           type="button"
           onClick={openCloseModal}
-          disabled={isClosed}
+          disabled={isClosed || isClosing}
           className="h-12 flex-1 rounded-xl border border-line-1 bg-white typography-bt text-text-90 transition-colors hover:bg-bg-light disabled:cursor-not-allowed disabled:text-text-50"
         >
           {isClosed ? '마감됨' : '모집 마감'}
diff --git a/src/pages/manager/posting-edit/index.tsx b/src/pages/manager/posting-edit/index.tsx
index df363bd2..2674488f 100644
--- a/src/pages/manager/posting-edit/index.tsx
+++ b/src/pages/manager/posting-edit/index.tsx
@@ -1,7 +1,8 @@
 import { useNavigate, useParams } from 'react-router-dom'
 
+import { useUpdatePostingMutation } from '@/features/manager/posting/hooks/mutation/useUpdatePostingMutation'
+import { useManagerPostingDetailQuery } from '@/features/manager/posting/hooks/query/useManagerPostingDetailQuery'
 import { usePostingForm } from '@/features/manager/posting/hooks/usePostingForm'
-import { useMockPostingStore } from '@/features/manager/posting/mocks/store'
 import { PostingFormFields } from '@/features/manager/posting/ui/PostingFormFields'
 import type {
   Posting,
@@ -10,19 +11,31 @@ import type {
 import { showToast } from '@/shared/stores/useToastStore'
 import { AuthButton } from '@/shared/ui/common/AuthButton'
 import { Navbar } from '@/shared/ui/common/Navbar'
+import { Skeleton } from '@/shared/ui/common/Skeleton'
 
-/** SCREEN 4 · 공고 수정 — 등록 폼 재사용 · 프리필 */
 export function ManagerPostingEditPage() {
   const navigate = useNavigate()
   const { postingId } = useParams()
   const numericPostingId = Number(postingId)
 
-  const posting = useMockPostingStore(state =>
-    state.postings.find(item => item.id === numericPostingId)
-  )
-  const updatePosting = useMockPostingStore(state => state.updatePosting)
+  const { posting, isLoading, isError } =
+    useManagerPostingDetailQuery(numericPostingId)
+  const updatePosting = useUpdatePostingMutation(numericPostingId)
 
-  if (!posting) {
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+        <Navbar variant="detail" title="공고 수정" />
+        <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pt-4">
+          <Skeleton className="h-24 rounded-2xl" />
+          <Skeleton className="h-24 rounded-2xl" />
+          <Skeleton className="h-40 rounded-2xl" />
+        </main>
+      </div>
+    )
+  }
+
+  if (isError || !posting) {
     return (
       <div className="flex min-h-[100dvh] flex-col bg-bg-light">
         <Navbar variant="detail" title="공고 수정" />
@@ -35,30 +48,44 @@ export function ManagerPostingEditPage() {
     )
   }
 
+  const handleSubmit = (values: PostingFormValues) => {
+    const originalScheduleIds = posting.schedules
+      .map(schedule => schedule.id)
+      .filter((id): id is number => id !== null)
+
+    updatePosting.mutate(
+      { values, originalScheduleIds },
+      {
+        onSuccess: () => {
+          showToast('공고를 수정했어요')
+          navigate(-1)
+        },
+      }
+    )
+  }
+
   return (
-    // key로 공고 전환 시 컴포넌트를 리마운트해 폼 초기값(usePostingForm의 lazy useState)을 재계산
+    // key로 리마운트해야 폼 초기값(lazy useState)이 재계산된다
     <PostingEditContent
       key={numericPostingId}
       posting={posting}
-      onSubmit={values => {
-        updatePosting(numericPostingId, values)
-        showToast('공고를 수정했어요')
-        navigate(-1)
-      }}
+      isSubmitting={updatePosting.isPending}
+      onSubmit={handleSubmit}
     />
   )
 }
 
 interface PostingEditContentProps {
   posting: Posting
+  isSubmitting: boolean
   onSubmit: (values: PostingFormValues) => void
 }
 
-/**
- * 폼 초기값이 `posting`에 의존하므로, 공고를 찾은 뒤에 마운트되도록 분리합니다
- * (훅 순서를 안정적으로 유지). 공고 전환 시 리마운트는 호출부의 key가 담당합니다.
- */
-function PostingEditContent({ posting, onSubmit }: PostingEditContentProps) {
+function PostingEditContent({
+  posting,
+  isSubmitting,
+  onSubmit,
+}: PostingEditContentProps) {
   const form = usePostingForm({ posting })
 
   const handleSubmit = () => {
@@ -75,7 +102,10 @@ function PostingEditContent({ posting, onSubmit }: PostingEditContentProps) {
       </main>
 
       <div className="fixed bottom-0 left-1/2 z-10 w-full max-w-[428px] -translate-x-1/2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
-        <AuthButton onClick={handleSubmit} disabled={form.isSubmitDisabled}>
+        <AuthButton
+          onClick={handleSubmit}
+          disabled={form.isSubmitDisabled || isSubmitting}
+        >
           수정 완료
         </AuthButton>
       </div>
diff --git a/src/pages/manager/posting-list/index.tsx b/src/pages/manager/posting-list/index.tsx
index e3a278c9..684f8a13 100644
--- a/src/pages/manager/posting-list/index.tsx
+++ b/src/pages/manager/posting-list/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import WriteIcon from '@/assets/icons/posting/Write.svg?react'
@@ -8,6 +9,7 @@ import { PostingListCard } from '@/features/manager/posting/ui/PostingListCard'
 import { managerPostingDetailPath, ROUTES } from '@/shared/constants/routes'
 import { Navbar } from '@/shared/ui/common/Navbar'
 import { Skeleton } from '@/shared/ui/common/Skeleton'
+import { Spinner } from '@/shared/ui/Spinner'
 
 function PostingListSkeleton() {
   return (
@@ -27,14 +29,17 @@ function PostingListSkeleton() {
   )
 }
 
-/** SCREEN 5 · 내 공고 목록 — 사장님 알바찾기(내 공고) 탭 진입점 */
 export function ManagerPostingListPage() {
   const navigate = useNavigate()
   const {
     postings,
     totalCount,
     isLoading,
+    isError,
     isEmpty,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
     workspaceFilter,
     setWorkspaceFilter,
     statusFilter,
@@ -42,6 +47,27 @@ export function ManagerPostingListPage() {
     workspaceOptions,
   } = usePostingListViewModel()
 
+  const sentinelRef = useRef<HTMLDivElement>(null)
+  // sentinel은 로딩 후에야 마운트되므로 deps에 isLoading·개수가 있어야 관찰이 붙는다
+  const visibleCount = postings.length
+
+  useEffect(() => {
+    const el = sentinelRef.current
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage()
+        }
+      },
+      { threshold: 0.1 }
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, isLoading, visibleCount])
+
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
       <Navbar
@@ -74,6 +100,17 @@ export function ManagerPostingListPage() {
 
         {isLoading ? <PostingListSkeleton /> : null}
 
+        {isError ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-2 py-16">
+            <p className="typography-body01-semibold text-text-100">
+              공고를 불러오지 못했어요
+            </p>
+            <p className="typography-body02-regular text-center text-text-70">
+              잠시 후 다시 시도해 주세요.
+            </p>
+          </div>
+        ) : null}
+
         {isEmpty ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-2 py-16">
             <p className="typography-body01-semibold text-text-100">
@@ -86,16 +123,28 @@ export function ManagerPostingListPage() {
         ) : null}
 
         {!isLoading && postings.length > 0 ? (
-          <ul className="flex flex-col gap-3">
-            {postings.map(posting => (
-              <li key={posting.id}>
-                <PostingListCard
-                  posting={posting}
-                  onClick={() => navigate(managerPostingDetailPath(posting.id))}
-                />
-              </li>
-            ))}
-          </ul>
+          <>
+            <ul className="flex flex-col gap-3">
+              {postings.map(posting => (
+                <li key={posting.id}>
+                  <PostingListCard
+                    posting={posting}
+                    onClick={() =>
+                      navigate(managerPostingDetailPath(posting.id))
+                    }
+                  />
+                </li>
+              ))}
+            </ul>
+            {/* 무한스크롤 감지 지점 */}
+            <div
+              ref={sentinelRef}
+              className="flex h-10 items-center justify-center"
+              aria-hidden={!isFetchingNextPage}
+            >
+              {isFetchingNextPage ? <Spinner size={24} /> : null}
+            </div>
+          </>
         ) : null}
       </main>
     </div>
diff --git a/src/shared/lib/queryKeys.ts b/src/shared/lib/queryKeys.ts
index f231bb3c..f1a6b9f3 100644
--- a/src/shared/lib/queryKeys.ts
+++ b/src/shared/lib/queryKeys.ts
@@ -48,11 +48,20 @@ export const queryKeys = {
       ['managerWorkspace', 'images', workspaceId] as const,
   },
   posting: {
+    all: ['posting'] as const,
     list: (params?: {
       workspaceId?: number
       status?: string
       pageSize?: number
     }) => ['posting', 'list', params] as const,
+    detail: (postingId: number) => ['posting', 'detail', postingId] as const,
+    applicationList: (params?: {
+      workspaceId?: number
+      status?: string[]
+      pageSize?: number
+    }) => ['posting', 'application', 'list', params] as const,
+    applicationDetail: (postingApplicationId: number) =>
+      ['posting', 'application', 'detail', postingApplicationId] as const,
   },
   substitute: {
     list: (params?: {

From bcf7ab33bea19cf265f157cd3c5a6be577867026 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 29 Jul 2026 20:13:07 +0900
Subject: [PATCH 21/33] =?UTF-8?q?fix:=20=EB=A7=A4=EB=8B=88=EC=A0=80=20?=
 =?UTF-8?q?=ED=99=88=20=EC=A7=84=ED=96=89=20=EC=A4=91=20=EA=B3=B5=EA=B3=A0?=
 =?UTF-8?q?=EA=B0=80=20=ED=95=AD=EC=83=81=200=EA=B1=B4=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/manager/api/posting.ts           |  6 ++--
 .../home/hooks/useManagedPostingsViewModel.ts |  8 ++---
 src/features/manager/home/types/posting.ts    | 29 ++++++-------------
 3 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/src/features/manager/api/posting.ts b/src/features/manager/api/posting.ts
index 5b814f77..eb749046 100644
--- a/src/features/manager/api/posting.ts
+++ b/src/features/manager/api/posting.ts
@@ -1,12 +1,14 @@
 import axiosInstance from '@/shared/lib/axiosInstance'
+import { unwrapCursorPage, type CursorPage } from '@/shared/lib/cursorPage'
 import type {
+  PostingDto,
   PostingListApiResponse,
   ManagedPostingsQueryParams,
 } from '@/features/manager/home/types/posting'
 
 export async function fetchManagedPostings(
   params: ManagedPostingsQueryParams
-): Promise<PostingListApiResponse> {
+): Promise<CursorPage<PostingDto>> {
   const response = await axiosInstance.get<PostingListApiResponse>(
     '/manager/postings',
     {
@@ -20,5 +22,5 @@ export async function fetchManagedPostings(
       },
     }
   )
-  return response.data
+  return unwrapCursorPage(response.data)
 }
diff --git a/src/features/manager/home/hooks/useManagedPostingsViewModel.ts b/src/features/manager/home/hooks/useManagedPostingsViewModel.ts
index 3b1a5871..c87696fe 100644
--- a/src/features/manager/home/hooks/useManagedPostingsViewModel.ts
+++ b/src/features/manager/home/hooks/useManagedPostingsViewModel.ts
@@ -30,19 +30,17 @@ export function useManagedPostingsViewModel(
         cursor: pageParam as string | undefined,
       }),
     initialPageParam: undefined as string | undefined,
-    getNextPageParam: lastPage => lastPage.data?.page?.cursor ?? undefined,
+    getNextPageParam: lastPage => lastPage.page?.cursor ?? undefined,
     enabled: workspaceId !== null,
   })
 
   const postings = useMemo(() => {
     const all =
-      data?.pages.flatMap(
-        page => page.data?.data?.map(adaptPostingDto) ?? []
-      ) ?? []
+      data?.pages.flatMap(page => page.data?.map(adaptPostingDto) ?? []) ?? []
     return [...new Map(all.map(p => [p.id, p])).values()]
   }, [data])
 
-  const totalCount = data?.pages[0]?.data?.page?.totalCount ?? 0
+  const totalCount = data?.pages[0]?.page?.totalCount ?? 0
 
   return {
     postings,
diff --git a/src/features/manager/home/types/posting.ts b/src/features/manager/home/types/posting.ts
index fcd76bdc..ad9b2667 100644
--- a/src/features/manager/home/types/posting.ts
+++ b/src/features/manager/home/types/posting.ts
@@ -1,25 +1,24 @@
 import { PAYMENT_TYPE_LABEL as SHARED_PAYMENT_TYPE_LABEL } from '@/shared/constants/payment'
 import { WORKING_DAYS, WORKING_DAY_LABEL } from '@/shared/constants/workingDays'
+import { toTimeOfDay } from '@/shared/lib/toTimeOfDay'
+import type { CursorPage } from '@/shared/lib/cursorPage'
 import type { CommonApiResponse } from '@/shared/types/common'
 import type { JobPostingItem } from '@/shared/ui/manager/OngoingPostingCard'
 
 // ---- API DTOs ----
-export interface PostingKeywordDto {
-  id: number
-  name: string
-}
-
 export interface PostingScheduleDto {
   workingDays: string[]
   startTime: string
   endTime: string
   positionsNeeded: number
-  position: number
+  position?: string
 }
 
 export interface PostingWorkspaceDto {
   id: number
   businessName: string
+  businessType?: string
+  businessTypeDetail?: string
 }
 
 export interface PostingDto {
@@ -28,21 +27,13 @@ export interface PostingDto {
   payAmount: number
   paymentType: string
   createdAt: string
-  keywords: PostingKeywordDto[]
   schedules: PostingScheduleDto[]
   workspace: PostingWorkspaceDto
 }
 
-export interface PostingPageDto {
-  cursor: string | null
-  pageSize: number
-  totalCount: number
-}
-
-export type PostingListApiResponse = CommonApiResponse<{
-  page: PostingPageDto
-  data: PostingDto[]
-}>
+export type PostingListApiResponse =
+  | CursorPage<PostingDto>
+  | CommonApiResponse<CursorPage<PostingDto>>
 
 // ---- Query Params ----
 export interface ManagedPostingsQueryParams {
@@ -53,7 +44,6 @@ export interface ManagedPostingsQueryParams {
 }
 
 // ---- Mappers ----
-// 서버 응답의 paymentType/workingDays는 string이므로 안전한 폴백을 위해 넓은 타입으로 참조
 const PAYMENT_TYPE_LABEL: Record<string, string> = SHARED_PAYMENT_TYPE_LABEL
 
 const WORKING_DAY_KO: Record<string, string> = WORKING_DAY_LABEL
@@ -67,13 +57,12 @@ function formatWage(payAmount: number, paymentType: string): string {
 function formatWorkHours(schedules: PostingScheduleDto[]): string {
   if (schedules.length === 0) return '-'
   const first = schedules[0]
-  const base = `${first.startTime} ~ ${first.endTime}`
+  const base = `${toTimeOfDay(first.startTime)} ~ ${toTimeOfDay(first.endTime)}`
   return schedules.length > 1 ? `${base} 외 ${schedules.length - 1}개` : base
 }
 
 function formatWorkDays(schedules: PostingScheduleDto[]): string {
   if (schedules.length === 0) return '-'
-  // 모든 스케줄의 요일을 합산 후 중복 제거 + 요일 순서 정렬
   const daySet = new Set(schedules.flatMap(s => s.workingDays))
   return WORKING_DAYS.filter(d => daySet.has(d))
     .map(d => WORKING_DAY_KO[d] ?? d)

From b7f14d47e6d5627a43bc435c5e374a6f507dfbe5 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 29 Jul 2026 20:13:16 +0900
Subject: [PATCH 22/33] =?UTF-8?q?chore:=20=EB=A7=A4=EB=8B=88=EC=A0=80=20?=
 =?UTF-8?q?=EA=B3=B5=EA=B3=A0=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EC=8A=A4=20?=
 =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EC=A3=BC=EC=84=9D=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manager/posting/lib/applicationStatus.ts       |  8 --------
 .../manager/posting/ui/HiringActionBar.tsx         |  2 --
 .../posting/ui/ManagerApplicationStatusBadge.tsx   |  1 -
 .../posting/ui/ManagerPostingStatusBadge.tsx       |  1 -
 src/features/manager/posting/ui/ScheduleEditor.tsx | 14 ++------------
 5 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/src/features/manager/posting/lib/applicationStatus.ts b/src/features/manager/posting/lib/applicationStatus.ts
index 892e28db..b31d852c 100644
--- a/src/features/manager/posting/lib/applicationStatus.ts
+++ b/src/features/manager/posting/lib/applicationStatus.ts
@@ -6,11 +6,6 @@ interface ApplicationStatusBadgeStyle {
   textClassName: string
 }
 
-/**
- * 지원 상태 배지 (PDF ApplicationStatusBadge).
- * 기존 `shared/ui/home/ApplicationStatusBadge`는 유저 측 4상태 전용이므로
- * 매니저 측 6상태는 여기서 별도로 매핑합니다.
- */
 const APPLICATION_STATUS_BADGE: Record<
   ApplicationStatus,
   ApplicationStatusBadgeStyle
@@ -56,7 +51,6 @@ export function resolveApplicationStatusBadge(status: ApplicationStatus) {
   return APPLICATION_STATUS_BADGE[status]
 }
 
-/** 더 이상 상태를 변경할 수 없는(종료된) 지원서 — 채용 결정 액션을 숨깁니다 */
 const TERMINAL_STATUSES: ApplicationStatus[] = [
   'ACCEPTED',
   'REJECTED',
@@ -69,7 +63,6 @@ export function isTerminalApplicationStatus(status: ApplicationStatus) {
   return TERMINAL_STATUSES.includes(status)
 }
 
-/** 채용 결정 액션 — PDF 하단 ActionBar */
 export const HIRING_DECISIONS = [
   { status: 'SHORTLISTED', label: '서류합격' },
   { status: 'ACCEPTED', label: '최종합격' },
@@ -84,7 +77,6 @@ interface DecisionCopy {
   toast: string
 }
 
-/** 채용 결정 확인 모달 · 성공 Toast 문구 */
 export const DECISION_COPY: Record<HiringDecision, DecisionCopy> = {
   SHORTLISTED: {
     title: '서류합격 처리할까요?',
diff --git a/src/features/manager/posting/ui/HiringActionBar.tsx b/src/features/manager/posting/ui/HiringActionBar.tsx
index e4368f78..ee057282 100644
--- a/src/features/manager/posting/ui/HiringActionBar.tsx
+++ b/src/features/manager/posting/ui/HiringActionBar.tsx
@@ -6,7 +6,6 @@ import LockIcon from '@/assets/icons/posting/Lock.svg?react'
 import { cn } from '@/shared/lib/utils'
 
 interface HiringActionBarProps {
-  /** false면 '상태 변경 불가' 안내를 표시하고 액션을 숨깁니다 */
   canDecide: boolean
   onDecide: (decision: HiringDecision) => void
 }
@@ -17,7 +16,6 @@ const DECISION_CLASS: Record<HiringDecision, string> = {
   REJECTED: 'border border-error bg-white text-error',
 }
 
-/** 채용 결정 하단 고정 바 — [서류합격][최종합격][불합격] */
 export function HiringActionBar({ canDecide, onDecide }: HiringActionBarProps) {
   return (
     <div className="fixed bottom-0 left-1/2 z-10 w-full max-w-[428px] -translate-x-1/2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
diff --git a/src/features/manager/posting/ui/ManagerApplicationStatusBadge.tsx b/src/features/manager/posting/ui/ManagerApplicationStatusBadge.tsx
index 28df9128..5158c2d5 100644
--- a/src/features/manager/posting/ui/ManagerApplicationStatusBadge.tsx
+++ b/src/features/manager/posting/ui/ManagerApplicationStatusBadge.tsx
@@ -7,7 +7,6 @@ interface ManagerApplicationStatusBadgeProps {
   className?: string
 }
 
-/** 지원 상태 배지 — 지원완료 / 서류합격 / 최종합격 / 불합격 / 취소 / 만료 */
 export function ManagerApplicationStatusBadge({
   status,
   className,
diff --git a/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx b/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
index dbe10240..731e3078 100644
--- a/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
+++ b/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
@@ -7,7 +7,6 @@ interface ManagerPostingStatusBadgeProps {
   className?: string
 }
 
-/** 공고 상태 배지 — 모집중 / 모집완료 */
 export function ManagerPostingStatusBadge({
   status,
   className,
diff --git a/src/features/manager/posting/ui/ScheduleEditor.tsx b/src/features/manager/posting/ui/ScheduleEditor.tsx
index cc9106ca..c4ef517d 100644
--- a/src/features/manager/posting/ui/ScheduleEditor.tsx
+++ b/src/features/manager/posting/ui/ScheduleEditor.tsx
@@ -19,13 +19,11 @@ interface ScheduleEditorProps {
 
 type TimeTarget = 'start' | 'end'
 
-/** 'HH:MM' → { hour, minute }. 미입력이면 빈 문자열 */
 function splitTime(time: string) {
   const [hour = '', minute = ''] = time.split(':')
   return { hour, minute }
 }
 
-/** 시간 선택 버튼 — 미입력 시 플레이스홀더를 노출합니다 */
 function TimeField({
   label,
   value,
@@ -73,11 +71,8 @@ function ScheduleCard({
   const isExisting = schedule.id !== null
   const [pickerTarget, setPickerTarget] = useState<TimeTarget | null>(null)
 
-  /**
-   * 픽커는 휠 조작 시에만 onChange를 발생시키므로, 빈 값인 채로 열면
-   * 하이라이트된 '오전 12시 00분'을 그대로 닫아도 아무것도 기록되지 않습니다.
-   * 열기 전에 기본값(00:00)을 먼저 커밋해 보이는 값과 기록 값을 일치시킵니다.
-   */
+  // 픽커는 휠 조작 시에만 onChange가 발생하므로, 열기 전에 기본값을 먼저 커밋해야
+  // 보이는 값 그대로 닫아도 기록된다
   const openPicker = (target: TimeTarget) => {
     if (target === 'start' && schedule.startTime === '') {
       form.updateSchedule(schedule.key, { startTime: '00:00' })
@@ -91,10 +86,6 @@ function ScheduleCard({
   const start = splitTime(schedule.startTime)
   const end = splitTime(schedule.endTime)
 
-  /**
-   * 폼의 'HH:MM' 문자열을 픽커가 요구하는 시/분 단위 상태로 어댑트합니다.
-   * 한쪽만 선택된 경우 나머지는 '00'으로 채웁니다.
-   */
   const workTime: WorkTimeEditorState = {
     startHour: start.hour,
     startMinute: start.minute,
@@ -246,7 +237,6 @@ function ScheduleCard({
   )
 }
 
-/** 근무일정 편집기 — 일정 카드 추가/삭제, 요일 토글, 시간·포지션·인원 입력 */
 export function ScheduleEditor({ form }: ScheduleEditorProps) {
   const { schedules } = form.values
 

From f7c8516e956de99f3379dd0ee8e19aef32062675 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 29 Jul 2026 21:00:25 +0900
Subject: [PATCH 23/33] =?UTF-8?q?fix:=20=EC=A7=80=EC=9B=90=EC=9E=90=20?=
 =?UTF-8?q?=EC=84=B1=EB=B3=84=20=EB=88=84=EB=9D=BD=20=EC=8B=9C=20=EB=82=A8?=
 =?UTF-8?q?=EC=84=B1=EC=9C=BC=EB=A1=9C=20=ED=91=9C=EC=8B=9C=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/manager/posting/types/dto.ts     | 10 +++++++++-
 src/features/manager/posting/types/posting.ts |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/features/manager/posting/types/dto.ts b/src/features/manager/posting/types/dto.ts
index 480824b4..eeac64a5 100644
--- a/src/features/manager/posting/types/dto.ts
+++ b/src/features/manager/posting/types/dto.ts
@@ -228,12 +228,20 @@ function toCertificate(dto: PostingApplicantCertificateDto): Certificate {
   }
 }
 
+function toGender(
+  gender: PostingApplicantDetailDto['gender']
+): Applicant['gender'] {
+  if (gender === 'GENDER_MALE') return '남성'
+  if (gender === 'GENDER_FEMALE') return '여성'
+  return '-'
+}
+
 function adaptApplicant(dto: PostingApplicantDetailDto): Applicant {
   return {
     name: dto?.name ?? '',
     phoneNumber: dto?.contact ?? '-',
     birthDate: dto?.birthday ?? '-',
-    gender: dto?.gender === 'GENDER_FEMALE' ? '여성' : '남성',
+    gender: toGender(dto?.gender),
     email: dto?.email ?? '-',
     certificates: (dto?.userCertificates ?? []).map(toCertificate),
   }
diff --git a/src/features/manager/posting/types/posting.ts b/src/features/manager/posting/types/posting.ts
index 673464e2..6671f103 100644
--- a/src/features/manager/posting/types/posting.ts
+++ b/src/features/manager/posting/types/posting.ts
@@ -57,7 +57,7 @@ export interface Applicant {
   name: string
   phoneNumber: string
   birthDate: string
-  gender: '남성' | '여성'
+  gender: '남성' | '여성' | '-'
   email: string
   certificates: Certificate[]
 }

From 281984adcad8636af57905ea7b3e24730627992e Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Tue, 4 Aug 2026 18:16:06 +0900
Subject: [PATCH 24/33] =?UTF-8?q?feat:=20=EB=A7=A4=EB=8B=88=EC=A0=80=20?=
 =?UTF-8?q?=EA=B3=B5=EA=B3=A0=20=EC=83=81=ED=83=9C=EC=99=80=20=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=EC=9E=90=20=EC=A1=B0=ED=9A=8C=20=EB=B3=B4=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manager/posting/api/application.ts        |  4 ++
 .../query/usePostingApplicationsQuery.ts      |  9 ++-
 .../hooks/useApplicationListViewModel.ts      |  8 ++-
 .../posting/test/api/application.test.ts      | 49 +++++++++++++++
 .../manager/posting/test/types/dto.test.ts    | 61 ++++++++++++++++++
 src/features/manager/posting/types/dto.ts     |  4 ++
 src/features/manager/posting/types/posting.ts |  2 +
 src/features/manager/posting/ui/FilterBar.tsx | 18 +++---
 .../manager/posting/ui/PostingListCard.tsx    | 13 +++-
 src/pages/manager/application-list/index.tsx  | 11 +++-
 src/pages/manager/posting-detail/index.tsx    |  8 ++-
 src/shared/lib/queryKeys.ts                   |  1 +
 storybook/stories/PostingListCard.stories.tsx | 62 +++++++++++++++++++
 13 files changed, 234 insertions(+), 16 deletions(-)
 create mode 100644 src/features/manager/posting/test/api/application.test.ts
 create mode 100644 src/features/manager/posting/test/types/dto.test.ts
 create mode 100644 storybook/stories/PostingListCard.stories.tsx

diff --git a/src/features/manager/posting/api/application.ts b/src/features/manager/posting/api/application.ts
index 2d3f685a..03788598 100644
--- a/src/features/manager/posting/api/application.ts
+++ b/src/features/manager/posting/api/application.ts
@@ -9,6 +9,7 @@ import type {
 
 export interface PostingApplicationsQueryParams {
   pageSize: number
+  postingId?: number
   workspaceId?: number
   status?: ApplicationApiStatus[]
   cursor?: string
@@ -26,6 +27,9 @@ export async function fetchPostingApplications(
     {
       params: {
         pageSize: params.pageSize,
+        ...(params.postingId !== undefined && {
+          postingId: params.postingId,
+        }),
         ...(params.workspaceId !== undefined && {
           workspaceId: params.workspaceId,
         }),
diff --git a/src/features/manager/posting/hooks/query/usePostingApplicationsQuery.ts b/src/features/manager/posting/hooks/query/usePostingApplicationsQuery.ts
index 568c2e9c..eecd5a83 100644
--- a/src/features/manager/posting/hooks/query/usePostingApplicationsQuery.ts
+++ b/src/features/manager/posting/hooks/query/usePostingApplicationsQuery.ts
@@ -10,11 +10,15 @@ import { queryKeys } from '@/shared/lib/queryKeys'
 const PAGE_SIZE = 10
 
 interface UsePostingApplicationsQueryOptions {
+  enabled?: boolean
+  postingId?: number
   workspaceId?: number
   status?: ApplicationApiStatus
 }
 
 export function usePostingApplicationsQuery({
+  enabled = true,
+  postingId,
   workspaceId,
   status,
 }: UsePostingApplicationsQueryOptions) {
@@ -28,7 +32,9 @@ export function usePostingApplicationsQuery({
     isPending,
     isError,
   } = useInfiniteQuery({
+    enabled,
     queryKey: queryKeys.posting.applicationList({
+      postingId,
       workspaceId,
       status: statusFilter,
       pageSize: PAGE_SIZE,
@@ -36,6 +42,7 @@ export function usePostingApplicationsQuery({
     queryFn: ({ pageParam }) =>
       fetchPostingApplications({
         pageSize: PAGE_SIZE,
+        postingId,
         workspaceId,
         status: statusFilter,
         cursor: pageParam,
@@ -56,7 +63,7 @@ export function usePostingApplicationsQuery({
   return {
     applications,
     totalCount: data?.pages[0]?.page?.totalCount ?? applications.length,
-    isLoading: isPending,
+    isLoading: enabled && isPending,
     isError,
     hasNextPage: Boolean(hasNextPage),
     isFetchingNextPage,
diff --git a/src/features/manager/posting/hooks/useApplicationListViewModel.ts b/src/features/manager/posting/hooks/useApplicationListViewModel.ts
index de191103..54e0c6c6 100644
--- a/src/features/manager/posting/hooks/useApplicationListViewModel.ts
+++ b/src/features/manager/posting/hooks/useApplicationListViewModel.ts
@@ -8,8 +8,10 @@ import {
 } from '@/features/manager/posting/hooks/query/useWorkspaceFilterOptions'
 import type { ApplicationStatusFilter } from '@/features/manager/posting/lib/applicationStatus'
 
-// 서버에 postingId 필터가 없어 공고별로 좁힐 수 없음 (응답 DTO에도 postingId 없음)
-export function useApplicationListViewModel() {
+export function useApplicationListViewModel(
+  postingId?: number,
+  enabled: boolean = true
+) {
   const [workspaceFilter, setWorkspaceFilter] =
     useState<WorkspaceFilter>(ALL_WORKSPACES)
   const [statusFilter, setStatusFilter] =
@@ -26,6 +28,8 @@ export function useApplicationListViewModel() {
     isFetchingNextPage,
     fetchNextPage,
   } = usePostingApplicationsQuery({
+    enabled,
+    postingId,
     workspaceId:
       workspaceFilter === ALL_WORKSPACES ? undefined : workspaceFilter,
     status: statusFilter === 'ALL' ? undefined : statusFilter,
diff --git a/src/features/manager/posting/test/api/application.test.ts b/src/features/manager/posting/test/api/application.test.ts
new file mode 100644
index 00000000..2bc03484
--- /dev/null
+++ b/src/features/manager/posting/test/api/application.test.ts
@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import axiosInstance from '@/shared/lib/axiosInstance'
+import { queryKeys } from '@/shared/lib/queryKeys'
+
+import { fetchPostingApplications } from '../../api/application'
+
+vi.mock('@/shared/lib/axiosInstance', () => ({
+  default: { get: vi.fn() },
+}))
+
+const get = vi.mocked(axiosInstance.get)
+const emptyPage = {
+  page: { cursor: null, pageSize: 10, totalCount: 0 },
+  data: [],
+}
+
+describe('공고 지원자 목록 API', () => {
+  beforeEach(() => {
+    get.mockReset()
+    get.mockResolvedValue({ data: emptyPage })
+  })
+
+  it('공고별 목록 요청과 쿼리 키에 postingId를 포함한다', async () => {
+    await expect(
+      fetchPostingApplications({ pageSize: 10, postingId: 7 })
+    ).resolves.toEqual(emptyPage)
+
+    expect(get).toHaveBeenCalledWith('/manager/postings/applications', {
+      params: { pageSize: 10, postingId: 7 },
+    })
+    expect(
+      queryKeys.posting.applicationList({ postingId: 7, pageSize: 10 })
+    ).toEqual([
+      'posting',
+      'application',
+      'list',
+      { postingId: 7, pageSize: 10 },
+    ])
+  })
+
+  it('전체 목록 요청에는 postingId를 포함하지 않는다', async () => {
+    await fetchPostingApplications({ pageSize: 10 })
+
+    expect(get).toHaveBeenCalledWith('/manager/postings/applications', {
+      params: { pageSize: 10 },
+    })
+  })
+})
diff --git a/src/features/manager/posting/test/types/dto.test.ts b/src/features/manager/posting/test/types/dto.test.ts
new file mode 100644
index 00000000..53d3e8db
--- /dev/null
+++ b/src/features/manager/posting/test/types/dto.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  adaptPostingDetail,
+  adaptPostingListItem,
+  type ManagerPostingDetailDto,
+  type ManagerPostingListItemDto,
+} from '../../types/dto'
+import type { PostingStatus } from '../../types/posting'
+
+function listItem(status: PostingStatus): ManagerPostingListItemDto {
+  return {
+    id: 1,
+    title: '주말 홀서빙 모집',
+    payAmount: 12000,
+    paymentType: 'HOURLY',
+    status: { value: status, description: status },
+    createdAt: '2026-08-04T00:00:00',
+    schedules: [],
+    workspace: {
+      id: 10,
+      businessName: '알터 강남점',
+      businessType: '카페',
+    },
+  }
+}
+
+function detail(applicantCount: number): ManagerPostingDetailDto {
+  return {
+    id: 1,
+    workspace: { id: 10, name: '알터 강남점', businessType: '카페' },
+    title: '주말 홀서빙 모집',
+    description: '상세내용',
+    payAmount: 12000,
+    paymentType: 'HOURLY',
+    status: { value: 'OPEN', description: '모집중' },
+    applicantCount,
+    createdAt: '2026-08-04T00:00:00',
+    updatedAt: '2026-08-04T00:00:00',
+    schedules: [],
+  }
+}
+
+describe('매니저 공고 DTO 어댑터', () => {
+  it.each(['OPEN', 'CLOSED'] as const)(
+    '목록의 %s 상태를 화면 모델로 전달한다',
+    status => {
+      expect(adaptPostingListItem(listItem(status))).toMatchObject({
+        status,
+        schedules: [],
+      })
+    }
+  )
+
+  it('상세의 지원자 수와 빈 근무일정을 전달한다', () => {
+    expect(adaptPostingDetail(detail(6))).toMatchObject({
+      applicantCount: 6,
+      schedules: [],
+    })
+  })
+})
diff --git a/src/features/manager/posting/types/dto.ts b/src/features/manager/posting/types/dto.ts
index eeac64a5..f4aff297 100644
--- a/src/features/manager/posting/types/dto.ts
+++ b/src/features/manager/posting/types/dto.ts
@@ -40,6 +40,7 @@ export interface ManagerPostingListItemDto {
   title: string
   payAmount: number
   paymentType: PaymentType
+  status: DescribedEnumDto<PostingStatus>
   createdAt: string
   schedules: PostingScheduleDto[]
   workspace: ManagerPostingListWorkspaceDto
@@ -61,6 +62,7 @@ export interface ManagerPostingDetailDto {
   payAmount: number
   paymentType: PaymentType
   status: DescribedEnumDto<PostingStatus>
+  applicantCount: number
   createdAt: string
   updatedAt: string
   schedules: PostingScheduleDto[]
@@ -176,6 +178,7 @@ export function adaptPostingListItem(
     title: dto.title,
     paymentType: dto.paymentType,
     payAmount: dto.payAmount,
+    status: dto.status.value,
     schedules: (dto.schedules ?? []).map(toPostingSchedule),
     createdAt: dto.createdAt,
   }
@@ -192,6 +195,7 @@ export function adaptPostingDetail(dto: ManagerPostingDetailDto): Posting {
     paymentType: dto.paymentType,
     payAmount: dto.payAmount,
     status: dto.status?.value ?? 'OPEN',
+    applicantCount: dto.applicantCount,
     schedules: (dto.schedules ?? []).map(toPostingSchedule),
     createdAt: dto.createdAt,
   }
diff --git a/src/features/manager/posting/types/posting.ts b/src/features/manager/posting/types/posting.ts
index 6671f103..e4025430 100644
--- a/src/features/manager/posting/types/posting.ts
+++ b/src/features/manager/posting/types/posting.ts
@@ -29,6 +29,7 @@ export interface PostingListItem {
   title: string
   paymentType: PaymentType
   payAmount: number
+  status: PostingStatus
   schedules: PostingSchedule[]
   createdAt: string
 }
@@ -43,6 +44,7 @@ export interface Posting {
   paymentType: PaymentType
   payAmount: number
   status: PostingStatus
+  applicantCount: number
   schedules: PostingSchedule[]
   createdAt: string
 }
diff --git a/src/features/manager/posting/ui/FilterBar.tsx b/src/features/manager/posting/ui/FilterBar.tsx
index 434d78a1..f24abaac 100644
--- a/src/features/manager/posting/ui/FilterBar.tsx
+++ b/src/features/manager/posting/ui/FilterBar.tsx
@@ -10,6 +10,7 @@ interface FilterBarProps<TStatus extends string> {
   statusValue: TStatus
   onStatusChange: (value: TStatus) => void
   totalCount: number
+  showWorkspaceFilter?: boolean
 }
 
 export function FilterBar<TStatus extends string>({
@@ -20,17 +21,20 @@ export function FilterBar<TStatus extends string>({
   statusValue,
   onStatusChange,
   totalCount,
+  showWorkspaceFilter = true,
 }: FilterBarProps<TStatus>) {
   return (
     <div className="rounded-2xl bg-white p-4 shadow-sm">
       <div className="flex items-center gap-2">
-        <SelectDropdown
-          className="flex-1"
-          ariaLabel="업장 필터"
-          options={workspaceOptions}
-          value={workspaceValue}
-          onChange={onWorkspaceChange}
-        />
+        {showWorkspaceFilter ? (
+          <SelectDropdown
+            className="flex-1"
+            ariaLabel="업장 필터"
+            options={workspaceOptions}
+            value={workspaceValue}
+            onChange={onWorkspaceChange}
+          />
+        ) : null}
         <SelectDropdown
           className="flex-1"
           ariaLabel="상태 필터"
diff --git a/src/features/manager/posting/ui/PostingListCard.tsx b/src/features/manager/posting/ui/PostingListCard.tsx
index bd77462b..54c38beb 100644
--- a/src/features/manager/posting/ui/PostingListCard.tsx
+++ b/src/features/manager/posting/ui/PostingListCard.tsx
@@ -1,5 +1,6 @@
 import CalendarIcon from '@/assets/icons/posting/Calendar.svg?react'
 import ClockIcon from '@/assets/icons/posting/Clock.svg?react'
+import { ManagerPostingStatusBadge } from '@/features/manager/posting/ui/ManagerPostingStatusBadge'
 import {
   formatTimeRange,
   formatWorkingDays,
@@ -22,9 +23,15 @@ export function PostingListCard({ posting, onClick }: PostingListCardProps) {
       className="w-full overflow-hidden rounded-2xl bg-white text-left shadow-sm transition-colors hover:bg-bg-light/60"
     >
       <div className="flex flex-col gap-1.5 px-4 pb-3 pt-4">
-        <h3 className="line-clamp-1 typography-body01-semibold text-text-100">
-          {posting.title}
-        </h3>
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="line-clamp-1 typography-body01-semibold text-text-100">
+            {posting.title}
+          </h3>
+          <ManagerPostingStatusBadge
+            status={posting.status}
+            className="shrink-0"
+          />
+        </div>
 
         <p className="typography-body03-regular text-text-70">
           {posting.workspaceName} · {posting.businessType}
diff --git a/src/pages/manager/application-list/index.tsx b/src/pages/manager/application-list/index.tsx
index 310688b5..d0b02871 100644
--- a/src/pages/manager/application-list/index.tsx
+++ b/src/pages/manager/application-list/index.tsx
@@ -36,6 +36,11 @@ export function ManagerApplicationListPage() {
   const { postingId: postingIdParam } = useParams()
 
   const isFromPosting = postingIdParam !== undefined
+  const numericPostingId = Number(postingIdParam)
+  const postingId =
+    Number.isInteger(numericPostingId) && numericPostingId > 0
+      ? numericPostingId
+      : undefined
 
   const {
     applications,
@@ -51,7 +56,10 @@ export function ManagerApplicationListPage() {
     statusFilter,
     setStatusFilter,
     workspaceOptions,
-  } = useApplicationListViewModel()
+  } = useApplicationListViewModel(
+    postingId,
+    !isFromPosting || postingId !== undefined
+  )
 
   const sentinelRef = useRef<HTMLDivElement>(null)
   // sentinel은 로딩 후에야 마운트되므로 deps에 isLoading·개수가 있어야 관찰이 붙는다
@@ -88,6 +96,7 @@ export function ManagerApplicationListPage() {
           statusValue={statusFilter}
           onStatusChange={setStatusFilter}
           totalCount={totalCount}
+          showWorkspaceFilter={!isFromPosting}
         />
 
         {isLoading ? <ApplicantListSkeleton /> : null}
diff --git a/src/pages/manager/posting-detail/index.tsx b/src/pages/manager/posting-detail/index.tsx
index 0b8a8b55..049e1ae9 100644
--- a/src/pages/manager/posting-detail/index.tsx
+++ b/src/pages/manager/posting-detail/index.tsx
@@ -145,8 +145,12 @@ export function ManagerPostingDetailPage() {
               지원자 보기
             </span>
           </span>
-          {/* 지원자 수는 공고 상세 응답에 필드가 없어 노출하지 않습니다 (백엔드 추가 요청 중) */}
-          <ChevronRightIcon className="size-4 text-text-50" />
+          <span className="flex items-center gap-2">
+            <span className="flex min-w-6 items-center justify-center rounded-full bg-main px-1.5 py-1 typography-bg text-white">
+              {posting.applicantCount}
+            </span>
+            <ChevronRightIcon className="size-4 text-text-50" />
+          </span>
         </button>
       </main>
 
diff --git a/src/shared/lib/queryKeys.ts b/src/shared/lib/queryKeys.ts
index f1a6b9f3..4f90917c 100644
--- a/src/shared/lib/queryKeys.ts
+++ b/src/shared/lib/queryKeys.ts
@@ -56,6 +56,7 @@ export const queryKeys = {
     }) => ['posting', 'list', params] as const,
     detail: (postingId: number) => ['posting', 'detail', postingId] as const,
     applicationList: (params?: {
+      postingId?: number
       workspaceId?: number
       status?: string[]
       pageSize?: number
diff --git a/storybook/stories/PostingListCard.stories.tsx b/storybook/stories/PostingListCard.stories.tsx
new file mode 100644
index 00000000..9c827a70
--- /dev/null
+++ b/storybook/stories/PostingListCard.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+
+import { PostingListCard } from '../../src/features/manager/posting/ui/PostingListCard'
+import type { PostingListItem } from '../../src/features/manager/posting/types/posting'
+
+const posting: PostingListItem = {
+  id: 1,
+  workspaceId: 10,
+  workspaceName: '알터 강남점',
+  businessType: '카페',
+  title: '주말 홀서빙 · 오후 마감조',
+  paymentType: 'HOURLY',
+  payAmount: 12000,
+  status: 'OPEN',
+  schedules: [
+    {
+      id: 1,
+      workingDays: ['SATURDAY', 'SUNDAY'],
+      startTime: '17:00',
+      endTime: '22:00',
+      position: '홀서빙',
+      positionsNeeded: 2,
+    },
+  ],
+  createdAt: '2026-08-04T00:00:00',
+}
+
+const meta = {
+  title: 'features/manager/posting/PostingListCard',
+  component: PostingListCard,
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <div className="w-[360px] bg-bg-light p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    posting,
+    onClick: () => {},
+  },
+} satisfies Meta<typeof PostingListCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByText('모집중')).toBeVisible()
+  },
+}
+
+export const Closed: Story = {
+  args: {
+    posting: { ...posting, status: 'CLOSED' },
+  },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByText('모집완료')).toBeVisible()
+  },
+}

From 412014f9b579c7a3a1b826704f46be7ee4c20887 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Tue, 4 Aug 2026 18:16:39 +0900
Subject: [PATCH 25/33] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B3=A0=20=EC=9D=BC?=
 =?UTF-8?q?=EC=A0=95=20=EC=9E=90=EB=8F=99=20=EB=A7=88=EA=B0=90=EA=B3=BC=20?=
 =?UTF-8?q?=EC=84=9C=EB=B2=84=20=EA=B2=80=EC=A6=9D=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mutation/useCreatePostingMutation.ts      |   8 -
 .../mutation/useUpdatePostingMutation.ts      |   8 -
 .../manager/posting/hooks/usePostingForm.ts   | 150 ++++++++++++------
 .../posting/lib/postingErrorMessage.ts        |  47 ++++++
 .../test/lib/buildPostingRequest.test.ts      |  94 +++++++++++
 .../test/lib/postingErrorMessage.test.ts      |  51 ++++++
 src/features/manager/posting/types/posting.ts |   1 +
 .../manager/posting/ui/PostingFormFields.tsx  |   6 +-
 .../manager/posting/ui/ScheduleEditor.tsx     |  50 +++++-
 src/pages/manager/posting-create/index.tsx    |   9 ++
 src/pages/manager/posting-detail/index.tsx    |  60 +++----
 src/pages/manager/posting-edit/index.tsx      |  29 +++-
 src/shared/lib/utils/errorUtils.ts            |  28 +---
 src/shared/types/common.ts                    |  11 ++
 storybook/stories/ScheduleEditor.stories.tsx  |  73 +++++++++
 15 files changed, 502 insertions(+), 123 deletions(-)
 create mode 100644 src/features/manager/posting/test/lib/buildPostingRequest.test.ts
 create mode 100644 src/features/manager/posting/test/lib/postingErrorMessage.test.ts
 create mode 100644 storybook/stories/ScheduleEditor.stories.tsx

diff --git a/src/features/manager/posting/hooks/mutation/useCreatePostingMutation.ts b/src/features/manager/posting/hooks/mutation/useCreatePostingMutation.ts
index 974b99e0..f3e3fcdf 100644
--- a/src/features/manager/posting/hooks/mutation/useCreatePostingMutation.ts
+++ b/src/features/manager/posting/hooks/mutation/useCreatePostingMutation.ts
@@ -2,10 +2,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { postManagerPosting } from '@/features/manager/posting/api/posting'
 import { toCreatePostingRequest } from '@/features/manager/posting/lib/buildPostingRequest'
-import { resolvePostingErrorMessage } from '@/features/manager/posting/lib/postingErrorMessage'
 import type { PostingFormValues } from '@/features/manager/posting/types/posting'
 import { queryKeys } from '@/shared/lib/queryKeys'
-import { showToast } from '@/shared/stores/useToastStore'
 
 interface CreatePostingVariables {
   values: PostingFormValues
@@ -21,11 +19,5 @@ export function useCreatePostingMutation() {
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: queryKeys.posting.all })
     },
-    onError: (error: unknown) => {
-      showToast(
-        resolvePostingErrorMessage(error, '공고를 등록하지 못했어요.'),
-        'error'
-      )
-    },
   })
 }
diff --git a/src/features/manager/posting/hooks/mutation/useUpdatePostingMutation.ts b/src/features/manager/posting/hooks/mutation/useUpdatePostingMutation.ts
index 6eb64950..e8f328b8 100644
--- a/src/features/manager/posting/hooks/mutation/useUpdatePostingMutation.ts
+++ b/src/features/manager/posting/hooks/mutation/useUpdatePostingMutation.ts
@@ -2,10 +2,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { putManagerPosting } from '@/features/manager/posting/api/posting'
 import { toUpdatePostingRequest } from '@/features/manager/posting/lib/buildPostingRequest'
-import { resolvePostingErrorMessage } from '@/features/manager/posting/lib/postingErrorMessage'
 import type { PostingFormValues } from '@/features/manager/posting/types/posting'
 import { queryKeys } from '@/shared/lib/queryKeys'
-import { showToast } from '@/shared/stores/useToastStore'
 
 interface UpdatePostingVariables {
   values: PostingFormValues
@@ -24,11 +22,5 @@ export function useUpdatePostingMutation(postingId: number) {
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: queryKeys.posting.all })
     },
-    onError: (error: unknown) => {
-      showToast(
-        resolvePostingErrorMessage(error, '공고를 수정하지 못했어요.'),
-        'error'
-      )
-    },
   })
 }
diff --git a/src/features/manager/posting/hooks/usePostingForm.ts b/src/features/manager/posting/hooks/usePostingForm.ts
index 16f923da..ce5d6196 100644
--- a/src/features/manager/posting/hooks/usePostingForm.ts
+++ b/src/features/manager/posting/hooks/usePostingForm.ts
@@ -53,7 +53,10 @@ function createInitialValues(posting?: Posting | null): PostingFormValues {
   }
 }
 
-function validate(values: PostingFormValues): PostingFormErrors {
+export function validatePostingForm(
+  values: PostingFormValues,
+  isEditMode: boolean
+): PostingFormErrors {
   const errors: PostingFormErrors = {}
 
   if (values.workspaceId === null) {
@@ -68,7 +71,7 @@ function validate(values: PostingFormValues): PostingFormErrors {
       schedule.startTime === '' ||
       schedule.endTime === ''
   )
-  if (values.schedules.length === 0) {
+  if (!isEditMode && values.schedules.length === 0) {
     errors.schedules = '근무일정을 1개 이상 추가해 주세요'
   } else if (hasIncompleteSchedule) {
     errors.schedules = '근무요일과 시작·종료 시간을 모두 입력해 주세요'
@@ -97,51 +100,96 @@ export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
     createInitialValues(posting)
   )
   const [isSubmitAttempted, setIsSubmitAttempted] = useState(false)
+  const [serverErrors, setServerErrors] = useState<PostingFormErrors>({})
 
-  const errors = useMemo(() => validate(values), [values])
-  const isValid = Object.keys(errors).length === 0
-  const visibleErrors: PostingFormErrors = isSubmitAttempted ? errors : {}
-  const isSubmitDisabled = isSubmitAttempted && !isValid
-
-  const setWorkspaceId = useCallback((workspaceId: number) => {
-    setValues(prev => ({ ...prev, workspaceId }))
+  const clientErrors = useMemo(
+    () => validatePostingForm(values, isEditMode),
+    [isEditMode, values]
+  )
+  const hasServerErrors = Object.keys(serverErrors).length > 0
+  const isValid = Object.keys(clientErrors).length === 0 && !hasServerErrors
+  const errors = {
+    ...serverErrors,
+    ...(isSubmitAttempted ? clientErrors : {}),
+  }
+  const isSubmitDisabled =
+    hasServerErrors ||
+    (isSubmitAttempted && Object.keys(clientErrors).length > 0)
+
+  const clearServerError = useCallback((field: keyof PostingFormErrors) => {
+    setServerErrors(prev => {
+      if (!prev[field]) return prev
+      const next = { ...prev }
+      delete next[field]
+      return next
+    })
   }, [])
 
-  const setTitle = useCallback((title: string) => {
-    setValues(prev => ({ ...prev, title }))
-  }, [])
+  const setWorkspaceId = useCallback(
+    (workspaceId: number) => {
+      clearServerError('workspaceId')
+      setValues(prev => ({ ...prev, workspaceId }))
+    },
+    [clearServerError]
+  )
 
-  const setPaymentType = useCallback((paymentType: PaymentType) => {
-    setValues(prev => ({ ...prev, paymentType }))
-  }, [])
+  const setTitle = useCallback(
+    (title: string) => {
+      clearServerError('title')
+      setValues(prev => ({ ...prev, title }))
+    },
+    [clearServerError]
+  )
 
-  const setPayAmount = useCallback((payAmount: string) => {
-    setValues(prev => ({
-      ...prev,
-      payAmount: payAmount.replace(/[^0-9]/g, ''),
-    }))
-  }, [])
+  const setPaymentType = useCallback(
+    (paymentType: PaymentType) => {
+      clearServerError('paymentType')
+      setValues(prev => ({ ...prev, paymentType }))
+    },
+    [clearServerError]
+  )
 
-  const setDescription = useCallback((description: string) => {
-    setValues(prev => ({ ...prev, description }))
-  }, [])
+  const setPayAmount = useCallback(
+    (payAmount: string) => {
+      clearServerError('payAmount')
+      setValues(prev => ({
+        ...prev,
+        payAmount: payAmount.replace(/[^0-9]/g, ''),
+      }))
+    },
+    [clearServerError]
+  )
+
+  const setDescription = useCallback(
+    (description: string) => {
+      clearServerError('description')
+      setValues(prev => ({ ...prev, description }))
+    },
+    [clearServerError]
+  )
 
   const addSchedule = useCallback(() => {
+    clearServerError('schedules')
     setValues(prev => ({
       ...prev,
       schedules: [...prev.schedules, createEmptySchedule()],
     }))
-  }, [])
+  }, [clearServerError])
 
-  const removeSchedule = useCallback((key: string) => {
-    setValues(prev => ({
-      ...prev,
-      schedules: prev.schedules.filter(schedule => schedule.key !== key),
-    }))
-  }, [])
+  const removeSchedule = useCallback(
+    (key: string) => {
+      clearServerError('schedules')
+      setValues(prev => ({
+        ...prev,
+        schedules: prev.schedules.filter(schedule => schedule.key !== key),
+      }))
+    },
+    [clearServerError]
+  )
 
   const updateSchedule = useCallback(
     (key: string, patch: Partial<Omit<PostingFormSchedule, 'key'>>) => {
+      clearServerError('schedules')
       setValues(prev => ({
         ...prev,
         schedules: prev.schedules.map(schedule =>
@@ -149,30 +197,37 @@ export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
         ),
       }))
     },
-    []
+    [clearServerError]
   )
 
-  const toggleScheduleDay = useCallback((key: string, day: WorkingDay) => {
-    setValues(prev => ({
-      ...prev,
-      schedules: prev.schedules.map(schedule => {
-        if (schedule.key !== key) return schedule
-        const workingDays = schedule.workingDays.includes(day)
-          ? schedule.workingDays.filter(item => item !== day)
-          : [...schedule.workingDays, day]
-        return { ...schedule, workingDays }
-      }),
-    }))
-  }, [])
+  const toggleScheduleDay = useCallback(
+    (key: string, day: WorkingDay) => {
+      clearServerError('schedules')
+      setValues(prev => ({
+        ...prev,
+        schedules: prev.schedules.map(schedule => {
+          if (schedule.key !== key) return schedule
+          const workingDays = schedule.workingDays.includes(day)
+            ? schedule.workingDays.filter(item => item !== day)
+            : [...schedule.workingDays, day]
+          return { ...schedule, workingDays }
+        }),
+      }))
+    },
+    [clearServerError]
+  )
 
   const attemptSubmit = useCallback(() => {
     setIsSubmitAttempted(true)
-    return Object.keys(validate(values)).length === 0
-  }, [values])
+    return (
+      Object.keys(validatePostingForm(values, isEditMode)).length === 0 &&
+      Object.keys(serverErrors).length === 0
+    )
+  }, [isEditMode, serverErrors, values])
 
   return {
     values,
-    errors: visibleErrors,
+    errors,
     isValid,
     isSubmitDisabled,
     isEditMode,
@@ -186,6 +241,7 @@ export function usePostingForm({ posting }: UsePostingFormOptions = {}) {
     updateSchedule,
     toggleScheduleDay,
     attemptSubmit,
+    setServerErrors,
   }
 }
 
diff --git a/src/features/manager/posting/lib/postingErrorMessage.ts b/src/features/manager/posting/lib/postingErrorMessage.ts
index b1128bfe..d7fa8557 100644
--- a/src/features/manager/posting/lib/postingErrorMessage.ts
+++ b/src/features/manager/posting/lib/postingErrorMessage.ts
@@ -1,7 +1,9 @@
 import axios from 'axios'
 
 import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
+import { parseErrorResponse } from '@/shared/lib/utils/errorUtils'
 import type { ErrorResponse } from '@/shared/types/common'
+import type { PostingFormErrors } from '@/features/manager/posting/types/posting'
 
 const POSTING_ERROR_MESSAGES: Record<string, string> = {
   B007: '존재하지 않는 공고예요.',
@@ -24,3 +26,48 @@ export function resolvePostingErrorMessage(
   }
   return getAxiosErrorMessage(error, fallback)
 }
+
+const POSTING_FORM_FIELDS = new Set<keyof PostingFormErrors>([
+  'workspaceId',
+  'title',
+  'schedules',
+  'paymentType',
+  'payAmount',
+  'description',
+])
+
+export function resolvePostingFormError(
+  error: unknown,
+  fallback: string
+): { fieldErrors: PostingFormErrors; message: string | null } {
+  if (!axios.isAxiosError(error)) {
+    return {
+      fieldErrors: {},
+      message: resolvePostingErrorMessage(error, fallback),
+    }
+  }
+
+  const { fieldErrors: rawFieldErrors } = parseErrorResponse(
+    error.response?.data
+  )
+  const fieldErrors: PostingFormErrors = {}
+  let hasUnknownField = false
+
+  for (const [field, message] of Object.entries(rawFieldErrors)) {
+    const rootField = field.split(/[.[\]]/, 1)[0]
+    if (POSTING_FORM_FIELDS.has(rootField as keyof PostingFormErrors)) {
+      fieldErrors[rootField as keyof PostingFormErrors] = message
+    } else {
+      hasUnknownField = true
+    }
+  }
+
+  const hasKnownField = Object.keys(fieldErrors).length > 0
+  return {
+    fieldErrors,
+    message:
+      hasKnownField && !hasUnknownField
+        ? null
+        : resolvePostingErrorMessage(error, fallback),
+  }
+}
diff --git a/src/features/manager/posting/test/lib/buildPostingRequest.test.ts b/src/features/manager/posting/test/lib/buildPostingRequest.test.ts
new file mode 100644
index 00000000..99ed9342
--- /dev/null
+++ b/src/features/manager/posting/test/lib/buildPostingRequest.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest'
+
+import { validatePostingForm } from '@/features/manager/posting/hooks/usePostingForm'
+import type {
+  PostingFormSchedule,
+  PostingFormValues,
+} from '@/features/manager/posting/types/posting'
+
+import {
+  toCreatePostingRequest,
+  toUpdatePostingRequest,
+} from '../../lib/buildPostingRequest'
+
+function values(): PostingFormValues {
+  return {
+    workspaceId: 10,
+    title: '주말 홀서빙 모집',
+    schedules: [
+      {
+        key: 'existing-1',
+        id: 1,
+        workingDays: ['SATURDAY', 'SUNDAY'],
+        startTime: '17:00',
+        endTime: '22:00',
+        position: '홀서빙',
+        positionsNeeded: 2,
+      },
+    ],
+    paymentType: 'HOURLY',
+    payAmount: '12000',
+    description: '상세내용',
+  }
+}
+
+describe('공고 폼 검증과 요청 생성', () => {
+  it('등록에서는 근무일정이 최소 1개 필요하다', () => {
+    expect(
+      validatePostingForm({ ...values(), schedules: [] }, false).schedules
+    ).toBe('근무일정을 1개 이상 추가해 주세요')
+  })
+
+  it('수정에서는 근무일정 0개를 허용한다', () => {
+    expect(validatePostingForm({ ...values(), schedules: [] }, true)).toEqual(
+      {}
+    )
+  })
+
+  it('모든 기존 일정을 삭제 목록에 담는다', () => {
+    expect(
+      toUpdatePostingRequest({ ...values(), schedules: [] }, [1, 2])
+    ).toMatchObject({
+      createSchedules: [],
+      updateSchedules: [],
+      deleteScheduleIds: [1, 2],
+    })
+  })
+
+  it('기존 일정 삭제와 신규 일정 추가를 함께 직렬화한다', () => {
+    const newSchedule: PostingFormSchedule = {
+      ...values().schedules[0],
+      key: 'new-1',
+      id: null,
+      workingDays: ['MONDAY'],
+      startTime: '09:00',
+      endTime: '18:00',
+    }
+    const request = toUpdatePostingRequest(
+      { ...values(), schedules: [newSchedule] },
+      [1]
+    )
+
+    expect(request.deleteScheduleIds).toEqual([1])
+    expect(request.updateSchedules).toEqual([])
+    expect(request.createSchedules[0]).toMatchObject({
+      workingDays: ['MONDAY'],
+      startTime: '09:00',
+      endTime: '18:00',
+    })
+  })
+
+  it('등록 요청은 대문자 요일, HH:mm, 양수 급여를 유지한다', () => {
+    expect(toCreatePostingRequest(values(), 10)).toMatchObject({
+      workspaceId: 10,
+      payAmount: 12000,
+      schedules: [
+        {
+          workingDays: ['SATURDAY', 'SUNDAY'],
+          startTime: '17:00',
+          endTime: '22:00',
+        },
+      ],
+    })
+  })
+})
diff --git a/src/features/manager/posting/test/lib/postingErrorMessage.test.ts b/src/features/manager/posting/test/lib/postingErrorMessage.test.ts
new file mode 100644
index 00000000..200c3de0
--- /dev/null
+++ b/src/features/manager/posting/test/lib/postingErrorMessage.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolvePostingFormError } from '../../lib/postingErrorMessage'
+
+function axiosError(data: unknown) {
+  return {
+    isAxiosError: true,
+    message: 'Request failed with status code 400',
+    response: { status: 400, data },
+  }
+}
+
+describe('공고 폼 서버 오류', () => {
+  it('필드 오류 배열을 폼 오류로 매핑한다', () => {
+    expect(
+      resolvePostingFormError(
+        axiosError({
+          code: 'B001',
+          message: '잘못된 요청입니다.',
+          data: [
+            { field: 'workspaceId', message: '널이어서는 안됩니다' },
+            { field: 'schedules[0].workingDays', message: '필수입니다' },
+          ],
+        }),
+        '공고를 등록하지 못했어요.'
+      )
+    ).toEqual({
+      fieldErrors: {
+        workspaceId: '널이어서는 안됩니다',
+        schedules: '필수입니다',
+      },
+      message: null,
+    })
+  })
+
+  it('알 수 없는 필드가 있으면 일반 메시지도 반환한다', () => {
+    expect(
+      resolvePostingFormError(
+        axiosError({
+          code: 'B001',
+          message: '잘못된 요청입니다.',
+          data: [{ field: 'unknown', message: '잘못된 값입니다' }],
+        }),
+        '공고를 등록하지 못했어요.'
+      )
+    ).toEqual({
+      fieldErrors: {},
+      message: '잘못된 요청입니다.',
+    })
+  })
+})
diff --git a/src/features/manager/posting/types/posting.ts b/src/features/manager/posting/types/posting.ts
index e4025430..2444e1dc 100644
--- a/src/features/manager/posting/types/posting.ts
+++ b/src/features/manager/posting/types/posting.ts
@@ -107,6 +107,7 @@ export interface PostingFormErrors {
   workspaceId?: string
   title?: string
   schedules?: string
+  paymentType?: string
   payAmount?: string
   description?: string
 }
diff --git a/src/features/manager/posting/ui/PostingFormFields.tsx b/src/features/manager/posting/ui/PostingFormFields.tsx
index 15730af1..99bbed62 100644
--- a/src/features/manager/posting/ui/PostingFormFields.tsx
+++ b/src/features/manager/posting/ui/PostingFormFields.tsx
@@ -91,7 +91,11 @@ export function PostingFormFields({ form }: PostingFormFieldsProps) {
         <ScheduleEditor form={form} />
       </Section>
 
-      <Section label="급여" required error={errors.payAmount}>
+      <Section
+        label="급여"
+        required
+        error={errors.paymentType ?? errors.payAmount}
+      >
         <div className="mb-2 flex gap-1.5">
           {PAYMENT_TYPES.map(paymentType => {
             const isSelected = values.paymentType === paymentType
diff --git a/src/features/manager/posting/ui/ScheduleEditor.tsx b/src/features/manager/posting/ui/ScheduleEditor.tsx
index c4ef517d..721a9e5f 100644
--- a/src/features/manager/posting/ui/ScheduleEditor.tsx
+++ b/src/features/manager/posting/ui/ScheduleEditor.tsx
@@ -6,6 +6,7 @@ import type { PostingFormViewModel } from '@/features/manager/posting/hooks/useP
 import { formatKoreanTimePart } from '@/shared/lib/formatKoreanWorkTime'
 import type { WorkTimeEditorState } from '@/shared/types/workTime'
 import { WorkTimePickerDrawer } from '@/shared/ui/common/WorkTimePickerDrawer'
+import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
 import {
   WORKING_DAYS,
   WORKING_DAY_LABEL,
@@ -62,11 +63,13 @@ function ScheduleCard({
   index,
   form,
   canRemove,
+  onRemove,
 }: {
   schedule: PostingFormSchedule
   index: number
   form: PostingFormViewModel
   canRemove: boolean
+  onRemove: () => void
 }) {
   const isExisting = schedule.id !== null
   const [pickerTarget, setPickerTarget] = useState<TimeTarget | null>(null)
@@ -136,7 +139,7 @@ function ScheduleCard({
         {canRemove ? (
           <button
             type="button"
-            onClick={() => form.removeSchedule(schedule.key)}
+            onClick={onRemove}
             aria-label={`일정 ${index + 1} 삭제`}
             className="flex size-7 items-center justify-center rounded-lg text-text-50 transition-colors hover:bg-bg-light"
           >
@@ -239,16 +242,45 @@ function ScheduleCard({
 
 export function ScheduleEditor({ form }: ScheduleEditorProps) {
   const { schedules } = form.values
+  const [pendingRemovalKey, setPendingRemovalKey] = useState<string | null>(
+    null
+  )
+  const pendingRemoval = schedules.find(
+    schedule => schedule.key === pendingRemovalKey
+  )
+  const willRemoveLastSchedule = Boolean(
+    pendingRemoval && schedules.length === 1
+  )
+
+  const requestRemoval = (schedule: PostingFormSchedule) => {
+    if (schedule.id === null && schedules.length > 1) {
+      form.removeSchedule(schedule.key)
+      return
+    }
+    setPendingRemovalKey(schedule.key)
+  }
+
+  const confirmRemoval = () => {
+    if (pendingRemovalKey) form.removeSchedule(pendingRemovalKey)
+    setPendingRemovalKey(null)
+  }
 
   return (
     <div className="flex flex-col gap-3">
+      {schedules.length === 0 ? (
+        <p className="rounded-xl bg-bg-light px-3 py-4 text-center typography-body03-regular text-text-70">
+          등록된 근무일정이 없어요.
+        </p>
+      ) : null}
+
       {schedules.map((schedule, index) => (
         <ScheduleCard
           key={schedule.key}
           schedule={schedule}
           index={index}
           form={form}
-          canRemove={schedules.length > 1}
+          canRemove={form.isEditMode || schedules.length > 1}
+          onRemove={() => requestRemoval(schedule)}
         />
       ))}
 
@@ -260,6 +292,20 @@ export function ScheduleEditor({ form }: ScheduleEditorProps) {
         <PlusIcon className="size-4" />
         <span className="typography-bt">일정 추가</span>
       </button>
+
+      <ConfirmModal
+        isOpen={pendingRemoval !== undefined}
+        title="근무일정을 삭제할까요?"
+        description={
+          willRemoveLastSchedule
+            ? '모든 근무일정을 삭제한 상태로 수정 완료하면 공고가 자동으로 모집 마감됩니다.'
+            : '삭제한 일정은 수정 완료 후 복구할 수 없어요.'
+        }
+        confirmLabel="삭제"
+        cancelLabel="취소"
+        onConfirm={confirmRemoval}
+        onClose={() => setPendingRemovalKey(null)}
+      />
     </div>
   )
 }
diff --git a/src/pages/manager/posting-create/index.tsx b/src/pages/manager/posting-create/index.tsx
index aaa2aa63..3dd53453 100644
--- a/src/pages/manager/posting-create/index.tsx
+++ b/src/pages/manager/posting-create/index.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 
 import { useCreatePostingMutation } from '@/features/manager/posting/hooks/mutation/useCreatePostingMutation'
 import { usePostingForm } from '@/features/manager/posting/hooks/usePostingForm'
+import { resolvePostingFormError } from '@/features/manager/posting/lib/postingErrorMessage'
 import { PostingFormFields } from '@/features/manager/posting/ui/PostingFormFields'
 import { ROUTES } from '@/shared/constants/routes'
 import { showToast } from '@/shared/stores/useToastStore'
@@ -33,6 +34,14 @@ export function ManagerPostingCreatePage() {
           showToast('공고를 등록했어요')
           navigate(ROUTES.MANAGER.POSTINGS, { replace: true })
         },
+        onError: error => {
+          const { fieldErrors, message } = resolvePostingFormError(
+            error,
+            '공고를 등록하지 못했어요.'
+          )
+          form.setServerErrors(fieldErrors)
+          if (message) showToast(message, 'error')
+        },
       }
     )
   }
diff --git a/src/pages/manager/posting-detail/index.tsx b/src/pages/manager/posting-detail/index.tsx
index 049e1ae9..211965c1 100644
--- a/src/pages/manager/posting-detail/index.tsx
+++ b/src/pages/manager/posting-detail/index.tsx
@@ -92,33 +92,39 @@ export function ManagerPostingDetailPage() {
           <h2 className="mb-2 typography-body02-semibold text-text-100">
             근무일정
           </h2>
-          <ul className="flex flex-col gap-2">
-            {posting.schedules.map((schedule, index) => (
-              <li
-                key={schedule.id ?? index}
-                className="rounded-2xl bg-white p-4 shadow-sm"
-              >
-                <div className="mb-1.5 flex items-center justify-between gap-2">
-                  <span className="typography-body02-semibold text-text-100">
-                    {schedule.position || '포지션 미지정'}
-                  </span>
-                  <span className="typography-body03-regular text-text-70">
-                    모집 {schedule.positionsNeeded}명
-                  </span>
-                </div>
-                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 typography-body03-regular text-text-90">
-                  <span className="flex items-center gap-1.5">
-                    <CalendarIcon className="size-4 text-main" />
-                    {formatWorkingDays(schedule.workingDays)}
-                  </span>
-                  <span className="flex items-center gap-1.5">
-                    <ClockIcon className="size-4 text-main" />
-                    {formatTimeRange(schedule.startTime, schedule.endTime)}
-                  </span>
-                </div>
-              </li>
-            ))}
-          </ul>
+          {posting.schedules.length > 0 ? (
+            <ul className="flex flex-col gap-2">
+              {posting.schedules.map((schedule, index) => (
+                <li
+                  key={schedule.id ?? index}
+                  className="rounded-2xl bg-white p-4 shadow-sm"
+                >
+                  <div className="mb-1.5 flex items-center justify-between gap-2">
+                    <span className="typography-body02-semibold text-text-100">
+                      {schedule.position || '포지션 미지정'}
+                    </span>
+                    <span className="typography-body03-regular text-text-70">
+                      모집 {schedule.positionsNeeded}명
+                    </span>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 typography-body03-regular text-text-90">
+                    <span className="flex items-center gap-1.5">
+                      <CalendarIcon className="size-4 text-main" />
+                      {formatWorkingDays(schedule.workingDays)}
+                    </span>
+                    <span className="flex items-center gap-1.5">
+                      <ClockIcon className="size-4 text-main" />
+                      {formatTimeRange(schedule.startTime, schedule.endTime)}
+                    </span>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="rounded-2xl bg-white p-4 text-center typography-body02-regular text-text-70 shadow-sm">
+              등록된 근무일정이 없어요.
+            </p>
+          )}
         </section>
 
         {posting.description ? (
diff --git a/src/pages/manager/posting-edit/index.tsx b/src/pages/manager/posting-edit/index.tsx
index 2674488f..f0e272ed 100644
--- a/src/pages/manager/posting-edit/index.tsx
+++ b/src/pages/manager/posting-edit/index.tsx
@@ -3,6 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { useUpdatePostingMutation } from '@/features/manager/posting/hooks/mutation/useUpdatePostingMutation'
 import { useManagerPostingDetailQuery } from '@/features/manager/posting/hooks/query/useManagerPostingDetailQuery'
 import { usePostingForm } from '@/features/manager/posting/hooks/usePostingForm'
+import { resolvePostingFormError } from '@/features/manager/posting/lib/postingErrorMessage'
 import { PostingFormFields } from '@/features/manager/posting/ui/PostingFormFields'
 import type {
   Posting,
@@ -48,7 +49,10 @@ export function ManagerPostingEditPage() {
     )
   }
 
-  const handleSubmit = (values: PostingFormValues) => {
+  const handleSubmit = (
+    values: PostingFormValues,
+    onError: (error: unknown) => void
+  ) => {
     const originalScheduleIds = posting.schedules
       .map(schedule => schedule.id)
       .filter((id): id is number => id !== null)
@@ -57,9 +61,14 @@ export function ManagerPostingEditPage() {
       { values, originalScheduleIds },
       {
         onSuccess: () => {
-          showToast('공고를 수정했어요')
+          showToast(
+            values.schedules.length === 0
+              ? '공고를 수정하고 모집을 마감했어요'
+              : '공고를 수정했어요'
+          )
           navigate(-1)
         },
+        onError,
       }
     )
   }
@@ -78,7 +87,10 @@ export function ManagerPostingEditPage() {
 interface PostingEditContentProps {
   posting: Posting
   isSubmitting: boolean
-  onSubmit: (values: PostingFormValues) => void
+  onSubmit: (
+    values: PostingFormValues,
+    onError: (error: unknown) => void
+  ) => void
 }
 
 function PostingEditContent({
@@ -90,7 +102,16 @@ function PostingEditContent({
 
   const handleSubmit = () => {
     if (!form.attemptSubmit()) return
-    onSubmit(form.values)
+    onSubmit(form.values, handleError)
+  }
+
+  const handleError = (error: unknown) => {
+    const { fieldErrors, message } = resolvePostingFormError(
+      error,
+      '공고를 수정하지 못했어요.'
+    )
+    form.setServerErrors(fieldErrors)
+    if (message) showToast(message, 'error')
   }
 
   return (
diff --git a/src/shared/lib/utils/errorUtils.ts b/src/shared/lib/utils/errorUtils.ts
index 9b8f9078..b2eccb3c 100644
--- a/src/shared/lib/utils/errorUtils.ts
+++ b/src/shared/lib/utils/errorUtils.ts
@@ -1,24 +1,4 @@
-// 백엔드 필드 에러 항목 (data 배열 형태)
-interface FieldErrorItem {
-  field: string
-  message: string
-}
-
-interface FieldErrors {
-  [key: string]: string
-}
-
-// 백엔드 에러 응답 형식
-// { timestamp, code, message, data: [{field, message}, ...] }
-interface ErrorResponse {
-  code?: string
-  message?: string
-  data?: FieldErrorItem[] | Record<string, string>
-  // 이전 방식 호환 (key-value 형태 fieldErrors)
-  fieldErrors?: Record<string, string>
-  globalError?: string
-  error?: string
-}
+import type { ErrorResponse, FieldErrors } from '@/shared/types/common'
 
 export function parseErrorResponse(data: unknown): {
   fieldErrors: FieldErrors
@@ -30,23 +10,19 @@ export function parseErrorResponse(data: unknown): {
   if (typeof data === 'object' && data !== null) {
     const typedData = data as ErrorResponse
 
-    // 배열 형태: data: [{field: "...", message: "..."}, ...]
     if (Array.isArray(typedData.data)) {
       for (const item of typedData.data) {
         if (item.field && item.message) {
           fieldErrors[item.field] = item.message
         }
       }
-    }
-    // key-value 객체 형태: fieldErrors: { email: "...", ... }
-    else if (
+    } else if (
       typedData.fieldErrors &&
       typeof typedData.fieldErrors === 'object'
     ) {
       Object.assign(fieldErrors, typedData.fieldErrors)
     }
 
-    // 전역 에러 메시지
     if (typedData.globalError) {
       globalError = String(typedData.globalError)
     } else if (typedData.message) {
diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts
index 3d3fe292..419e0cb3 100644
--- a/src/shared/types/common.ts
+++ b/src/shared/types/common.ts
@@ -4,9 +4,20 @@ export interface CommonApiResponse<T> {
   data: T
 }
 
+export interface FieldErrorItem {
+  field: string
+  message: string
+}
+
+export type FieldErrors = Record<string, string>
+
 export interface ErrorResponse {
   code?: string
   message?: string
+  data?: FieldErrorItem[] | Record<string, string>
+  fieldErrors?: Record<string, string>
+  globalError?: string
+  error?: string
 }
 
 export interface ApiError {
diff --git a/storybook/stories/ScheduleEditor.stories.tsx b/storybook/stories/ScheduleEditor.stories.tsx
new file mode 100644
index 00000000..d389fe60
--- /dev/null
+++ b/storybook/stories/ScheduleEditor.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+
+import { usePostingForm } from '../../src/features/manager/posting/hooks/usePostingForm'
+import type { Posting } from '../../src/features/manager/posting/types/posting'
+import { ScheduleEditor } from '../../src/features/manager/posting/ui/ScheduleEditor'
+
+const posting: Posting = {
+  id: 1,
+  workspaceId: 10,
+  workspaceName: '알터 강남점',
+  businessType: '카페',
+  title: '주말 홀서빙 모집',
+  description: '상세내용',
+  paymentType: 'HOURLY',
+  payAmount: 12000,
+  status: 'OPEN',
+  applicantCount: 6,
+  schedules: [
+    {
+      id: 1,
+      workingDays: ['SATURDAY', 'SUNDAY'],
+      startTime: '17:00',
+      endTime: '22:00',
+      position: '홀서빙',
+      positionsNeeded: 2,
+    },
+  ],
+  createdAt: '2026-08-04T00:00:00',
+}
+
+function ScheduleEditorStory({ initialPosting }: { initialPosting: Posting }) {
+  const form = usePostingForm({ posting: initialPosting })
+  return <ScheduleEditor form={form} />
+}
+
+const meta = {
+  title: 'features/manager/posting/ScheduleEditor',
+  component: ScheduleEditorStory,
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <div className="w-[360px] bg-white p-4">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ScheduleEditorStory>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const LastExistingSchedule: Story = {
+  args: { initialPosting: posting },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole('button', { name: '일정 1 삭제' }))
+    await expect(
+      within(canvasElement.ownerDocument.body).getByText(
+        '모든 근무일정을 삭제한 상태로 수정 완료하면 공고가 자동으로 모집 마감됩니다.'
+      )
+    ).toBeVisible()
+  },
+}
+
+export const EmptySchedule: Story = {
+  args: { initialPosting: { ...posting, schedules: [] } },
+  play: async ({ canvasElement }) => {
+    await expect(
+      within(canvasElement).getByText('등록된 근무일정이 없어요.')
+    ).toBeVisible()
+  },
+}

From 84c06a9bd488b35daefad86555f566dc84e0be64 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Tue, 4 Aug 2026 18:17:01 +0900
Subject: [PATCH 26/33] =?UTF-8?q?fix:=20=EA=B3=B5=EA=B3=A0=20=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=20=EC=98=A4=EB=A5=98=EC=99=80=20=EC=9E=AC=EC=8B=9C?=
 =?UTF-8?q?=EB=8F=84=20=EC=B2=98=EB=A6=AC=20=EB=B3=B4=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../job-lookup-map/hooks/useApplyPosting.ts   |  1 +
 .../job-lookup-map/lib/applyPostingError.ts   | 31 ++++++++++++
 .../test/lib/applyPostingError.test.ts        | 48 +++++++++++++++++++
 src/pages/user/job-lookup-map-apply/index.tsx | 18 +++++--
 4 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 src/features/job-lookup-map/lib/applyPostingError.ts
 create mode 100644 src/features/job-lookup-map/test/lib/applyPostingError.test.ts

diff --git a/src/features/job-lookup-map/hooks/useApplyPosting.ts b/src/features/job-lookup-map/hooks/useApplyPosting.ts
index ce57999f..4e7af003 100644
--- a/src/features/job-lookup-map/hooks/useApplyPosting.ts
+++ b/src/features/job-lookup-map/hooks/useApplyPosting.ts
@@ -11,6 +11,7 @@ export function useApplyPosting() {
   const queryClient = useQueryClient()
 
   return useMutation({
+    retry: false,
     mutationFn: ({ postingId, body }: ApplyPostingVariables) =>
       applyPosting(postingId, body),
     onSuccess: (_, { postingId }) => {
diff --git a/src/features/job-lookup-map/lib/applyPostingError.ts b/src/features/job-lookup-map/lib/applyPostingError.ts
new file mode 100644
index 00000000..0943f676
--- /dev/null
+++ b/src/features/job-lookup-map/lib/applyPostingError.ts
@@ -0,0 +1,31 @@
+import axios from 'axios'
+
+import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
+import type { ErrorResponse } from '@/shared/types/common'
+
+export interface ApplyPostingError {
+  message: string
+  retryable: boolean
+}
+
+export function resolveApplyPostingError(error: unknown): ApplyPostingError {
+  if (axios.isAxiosError(error)) {
+    const response = error.response?.data as ErrorResponse | undefined
+    const retryable =
+      error.response?.status === 429 || response?.code === 'E001'
+
+    if (retryable) {
+      return {
+        message:
+          response?.message ??
+          '요청이 너무 많습니다. 잠시 후 다시 시도해 주세요.',
+        retryable: true,
+      }
+    }
+  }
+
+  return {
+    message: getAxiosErrorMessage(error, '지원에 실패했습니다.'),
+    retryable: false,
+  }
+}
diff --git a/src/features/job-lookup-map/test/lib/applyPostingError.test.ts b/src/features/job-lookup-map/test/lib/applyPostingError.test.ts
new file mode 100644
index 00000000..d0214fca
--- /dev/null
+++ b/src/features/job-lookup-map/test/lib/applyPostingError.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolveApplyPostingError } from '../../lib/applyPostingError'
+
+function axiosError(status: number, data: unknown) {
+  return {
+    isAxiosError: true,
+    message: `Request failed with status code ${status}`,
+    response: { status, data },
+  }
+}
+
+describe('공고 지원 오류', () => {
+  it.each([
+    '이미 지원한 공고입니다.',
+    '모집이 종료된 공고입니다.',
+    '삭제된 근무일정입니다.',
+  ])('서버 메시지 %s를 표시한다', message => {
+    expect(
+      resolveApplyPostingError(axiosError(400, { code: 'B001', message }))
+    ).toEqual({ message, retryable: false })
+  })
+
+  it('HTTP 429를 재시도 가능한 오류로 분류한다', () => {
+    expect(
+      resolveApplyPostingError(
+        axiosError(429, {
+          code: 'E001',
+          message: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요.',
+        })
+      )
+    ).toEqual({
+      message: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요.',
+      retryable: true,
+    })
+  })
+
+  it('E001 코드를 재시도 가능한 오류로 분류한다', () => {
+    expect(
+      resolveApplyPostingError(
+        axiosError(400, {
+          code: 'E001',
+          message: '잠시 후 다시 시도해 주세요.',
+        })
+      ).retryable
+    ).toBe(true)
+  })
+})
diff --git a/src/pages/user/job-lookup-map-apply/index.tsx b/src/pages/user/job-lookup-map-apply/index.tsx
index 20855771..91a22100 100644
--- a/src/pages/user/job-lookup-map-apply/index.tsx
+++ b/src/pages/user/job-lookup-map-apply/index.tsx
@@ -3,6 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 import ChevronLeftIcon from '@/assets/icons/nav/chevron-left.svg?react'
 import { useApplyPosting } from '@/features/job-lookup-map/hooks/useApplyPosting'
 import { usePostingDetail } from '@/features/job-lookup-map/hooks/usePostingDetail'
+import { resolveApplyPostingError } from '@/features/job-lookup-map/lib/applyPostingError'
 import type { Schedule } from '@/features/job-lookup-map/types/posting'
 import {
   formatPostedAgo,
@@ -122,8 +123,13 @@ export function JobLookupMapApplyPage() {
     mutate: submitApply,
     isPending: isSubmitting,
     isError: isSubmitError,
+    error: submitError,
   } = useApplyPosting()
 
+  const applyError = isSubmitError
+    ? resolveApplyPostingError(submitError)
+    : null
+
   const showLoading = idOk && isPending && !data
   const showError = idOk && isError && !data
   const showEmpty = !idOk
@@ -265,11 +271,11 @@ export function JobLookupMapApplyPage() {
           </section>
 
           <section className="px-4 pb-4 pt-3">
-            {isSubmitError && (
+            {applyError ? (
               <p className="mb-2 text-center typography-body03-regular text-sub">
-                지원에 실패했습니다. 다시 시도해 주세요.
+                {applyError.message}
               </p>
-            )}
+            ) : null}
             <button
               type="button"
               disabled={isSubmitting}
@@ -286,7 +292,11 @@ export function JobLookupMapApplyPage() {
               }}
               className="h-12 w-full rounded-2xl bg-main typography-body01-semibold text-text-100 disabled:opacity-50"
             >
-              {isSubmitting ? '제출 중…' : '제출하기'}
+              {isSubmitting
+                ? '제출 중…'
+                : applyError?.retryable
+                  ? '다시 시도'
+                  : '제출하기'}
             </button>
           </section>
         </main>

From 65ea55526367b4cd3cc074b8e6c13aaac0d338d9 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Tue, 4 Aug 2026 21:23:42 +0900
Subject: [PATCH 27/33] =?UTF-8?q?fix:=20=EA=B3=B5=EA=B3=A0=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A4=91=20=EC=9D=B4=EC=A0=84=20=EC=84=9C=EB=B2=84?=
 =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=EC=A0=81=EC=9A=A9=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/manager/posting-create/index.tsx |  4 ++-
 src/shared/ui/common/ConfirmModal.tsx      | 14 +++++---
 storybook/stories/ConfirmModal.stories.tsx | 37 ++++++++++++++++++++++
 3 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 storybook/stories/ConfirmModal.stories.tsx

diff --git a/src/pages/manager/posting-create/index.tsx b/src/pages/manager/posting-create/index.tsx
index 3dd53453..ba0d1155 100644
--- a/src/pages/manager/posting-create/index.tsx
+++ b/src/pages/manager/posting-create/index.tsx
@@ -26,11 +26,11 @@ export function ManagerPostingCreatePage() {
     const { workspaceId } = form.values
     if (workspaceId === null) return
 
-    setIsConfirmOpen(false)
     createPosting.mutate(
       { values: form.values, workspaceId },
       {
         onSuccess: () => {
+          setIsConfirmOpen(false)
           showToast('공고를 등록했어요')
           navigate(ROUTES.MANAGER.POSTINGS, { replace: true })
         },
@@ -40,6 +40,7 @@ export function ManagerPostingCreatePage() {
             '공고를 등록하지 못했어요.'
           )
           form.setServerErrors(fieldErrors)
+          setIsConfirmOpen(false)
           if (message) showToast(message, 'error')
         },
       }
@@ -69,6 +70,7 @@ export function ManagerPostingCreatePage() {
         description="등록 후에도 내 공고에서 수정하거나 마감할 수 있어요."
         confirmLabel="등록"
         cancelLabel="취소"
+        isPending={createPosting.isPending}
         onConfirm={handleConfirm}
         onClose={() => setIsConfirmOpen(false)}
       />
diff --git a/src/shared/ui/common/ConfirmModal.tsx b/src/shared/ui/common/ConfirmModal.tsx
index 03457940..502d53f6 100644
--- a/src/shared/ui/common/ConfirmModal.tsx
+++ b/src/shared/ui/common/ConfirmModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useScrollLock } from '@/shared/lib/useScrollLock'
 
 interface ConfirmModalProps {
@@ -22,14 +22,18 @@ export function ConfirmModal({
   onConfirm,
   onClose,
 }: ConfirmModalProps) {
+  const handleClose = useCallback(() => {
+    if (!isPending) onClose()
+  }, [isPending, onClose])
+
   useEffect(() => {
     if (!isOpen) return
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
+      if (e.key === 'Escape') handleClose()
     }
     window.addEventListener('keydown', onKeyDown)
     return () => window.removeEventListener('keydown', onKeyDown)
-  }, [isOpen, onClose])
+  }, [handleClose, isOpen])
 
   useScrollLock(isOpen)
 
@@ -44,7 +48,7 @@ export function ConfirmModal({
         type="button"
         className="absolute inset-0 bg-black/80 backdrop-blur-[2px]"
         aria-label="닫기"
-        onClick={onClose}
+        onClick={handleClose}
       />
       <div
         className="relative w-full max-w-[318px] overflow-hidden rounded-2xl bg-white shadow-lg"
@@ -71,7 +75,7 @@ export function ConfirmModal({
             <>
               <button
                 type="button"
-                onClick={onClose}
+                onClick={handleClose}
                 className="flex h-14 flex-1 items-center justify-center typography-body01-semibold text-text-70"
               >
                 {cancelLabel}
diff --git a/storybook/stories/ConfirmModal.stories.tsx b/storybook/stories/ConfirmModal.stories.tsx
new file mode 100644
index 00000000..b9ba13fb
--- /dev/null
+++ b/storybook/stories/ConfirmModal.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, fn, userEvent, within } from 'storybook/test'
+
+import { ConfirmModal } from '../../src/shared/ui/common/ConfirmModal'
+
+const meta = {
+  title: 'shared/ui/common/ConfirmModal',
+  component: ConfirmModal,
+  parameters: { layout: 'centered' },
+  args: {
+    isOpen: true,
+    title: '공고를 등록할까요?',
+    description: '등록 요청을 처리하고 있어요.',
+    confirmLabel: '등록',
+    cancelLabel: '취소',
+    onConfirm: fn(),
+    onClose: fn(),
+  },
+} satisfies Meta<typeof ConfirmModal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Pending: Story = {
+  args: { isPending: true },
+  play: async ({ args, canvasElement }) => {
+    const body = within(canvasElement.ownerDocument.body)
+
+    await expect(body.getByRole('button', { name: '처리 중…' })).toBeDisabled()
+    await userEvent.click(body.getByRole('button', { name: '취소' }))
+    await userEvent.click(body.getByRole('button', { name: '닫기' }))
+    await userEvent.keyboard('{Escape}')
+
+    await expect(args.onClose).not.toHaveBeenCalled()
+    await expect(args.onConfirm).not.toHaveBeenCalled()
+  },
+}

From cdf85d35fc80dd5001f77a99099f9145121c183c Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 5 Aug 2026 19:58:23 +0900
Subject: [PATCH 28/33] =?UTF-8?q?fix:=20=EC=A7=80=EC=9B=90=EC=9E=90=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=ED=98=95=EC=8B=9D=20=EB=B3=B4=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../posting/lib/applicationDetailFormat.ts    | 26 +++++++++++++
 .../test/lib/applicationDetailFormat.test.ts  | 38 +++++++++++++++++++
 .../manager/application-detail/index.tsx      | 17 +++++++--
 3 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 src/features/manager/posting/lib/applicationDetailFormat.ts
 create mode 100644 src/features/manager/posting/test/lib/applicationDetailFormat.test.ts

diff --git a/src/features/manager/posting/lib/applicationDetailFormat.ts b/src/features/manager/posting/lib/applicationDetailFormat.ts
new file mode 100644
index 00000000..c6c5fb03
--- /dev/null
+++ b/src/features/manager/posting/lib/applicationDetailFormat.ts
@@ -0,0 +1,26 @@
+export function formatApplicantBirthDate(value: string): string {
+  const digits = value.replace(/\D/g, '')
+  if (digits.length < 8) return value
+
+  return `${digits.slice(0, 4)}.${digits.slice(4, 6)}.${digits.slice(6, 8)}`
+}
+
+export function formatCertificateAcquiredMonth(value: string): string {
+  const digits = value.replace(/\D/g, '')
+  if (digits.length < 6) return value
+
+  return `${digits.slice(0, 4)}.${digits.slice(4, 6)}`
+}
+
+export function formatApplicantPhoneNumber(value: string): string {
+  const digits = value.replace(/\D/g, '')
+
+  if (digits.length === 11) {
+    return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7)}`
+  }
+  if (digits.length === 10) {
+    return `${digits.slice(0, 2)}-${digits.slice(2, 6)}-${digits.slice(6)}`
+  }
+
+  return value
+}
diff --git a/src/features/manager/posting/test/lib/applicationDetailFormat.test.ts b/src/features/manager/posting/test/lib/applicationDetailFormat.test.ts
new file mode 100644
index 00000000..a6a9c899
--- /dev/null
+++ b/src/features/manager/posting/test/lib/applicationDetailFormat.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  formatApplicantBirthDate,
+  formatApplicantPhoneNumber,
+  formatCertificateAcquiredMonth,
+} from '../../lib/applicationDetailFormat'
+
+describe('지원자 상세 정보 포맷', () => {
+  it.each([
+    ['1997-03-21', '1997.03.21'],
+    ['19970321', '1997.03.21'],
+  ])('생년월일 %s를 %s로 표시한다', (value, expected) => {
+    expect(formatApplicantBirthDate(value)).toBe(expected)
+  })
+
+  it.each([
+    ['01012345678', '010-1234-5678'],
+    ['010-1234-5678', '010-1234-5678'],
+    ['0212345678', '02-1234-5678'],
+    ['02-1234-5678', '02-1234-5678'],
+  ])('전화번호 %s를 %s로 표시한다', (value, expected) => {
+    expect(formatApplicantPhoneNumber(value)).toBe(expected)
+  })
+
+  it.each([
+    ['2024-07-15', '2024.07'],
+    ['202407', '2024.07'],
+  ])('자격증 취득일 %s를 %s로 표시한다', (value, expected) => {
+    expect(formatCertificateAcquiredMonth(value)).toBe(expected)
+  })
+
+  it('지원하지 않는 값은 원본을 유지한다', () => {
+    expect(formatApplicantBirthDate('-')).toBe('-')
+    expect(formatApplicantPhoneNumber('-')).toBe('-')
+    expect(formatCertificateAcquiredMonth('-')).toBe('-')
+  })
+})
diff --git a/src/pages/manager/application-detail/index.tsx b/src/pages/manager/application-detail/index.tsx
index 4f8d1a0a..56effe2e 100644
--- a/src/pages/manager/application-detail/index.tsx
+++ b/src/pages/manager/application-detail/index.tsx
@@ -10,6 +10,11 @@ import {
   type ApplicationStatus,
 } from '@/features/manager/posting/types/posting'
 import { resolveApplicationStatusBadge } from '@/features/manager/posting/lib/applicationStatus'
+import {
+  formatApplicantBirthDate,
+  formatApplicantPhoneNumber,
+  formatCertificateAcquiredMonth,
+} from '@/features/manager/posting/lib/applicationDetailFormat'
 import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
 import { Navbar } from '@/shared/ui/common/Navbar'
 import { Skeleton } from '@/shared/ui/common/Skeleton'
@@ -135,8 +140,14 @@ export function ManagerApplicationDetailPage() {
         {!canDecide ? <TerminalNotice status={application.status} /> : null}
 
         <section className="rounded-2xl bg-white px-4 shadow-sm">
-          <InfoRow label="연락처" value={applicant.phoneNumber} />
-          <InfoRow label="생년월일" value={applicant.birthDate} />
+          <InfoRow
+            label="연락처"
+            value={formatApplicantPhoneNumber(applicant.phoneNumber)}
+          />
+          <InfoRow
+            label="생년월일"
+            value={formatApplicantBirthDate(applicant.birthDate)}
+          />
           <InfoRow label="성별" value={applicant.gender} />
           <InfoRow label="이메일" value={applicant.email} isLast />
         </section>
@@ -165,7 +176,7 @@ export function ManagerApplicationDetailPage() {
                     </p>
                   </div>
                   <span className="typography-body03-regular text-text-70">
-                    {certificate.acquiredAt}
+                    {formatCertificateAcquiredMonth(certificate.acquiredAt)}
                   </span>
                 </li>
               ))}

From a3d38475006895f1768b2a85c43f17e9d132cd23 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 5 Aug 2026 20:10:05 +0900
Subject: [PATCH 29/33] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B3=A0=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=A0=9C=EB=AA=A9=20=EC=98=81=EC=97=AD=20UI=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../test/ui/PostingDetailHeader.stories.tsx   | 57 +++++++++++++++++++
 .../posting/ui/ManagerPostingStatusBadge.tsx  |  7 ++-
 .../posting/ui/PostingDetailHeader.tsx        | 28 +++++++++
 src/pages/manager/posting-detail/index.tsx    | 19 +++----
 4 files changed, 98 insertions(+), 13 deletions(-)
 create mode 100644 src/features/manager/posting/test/ui/PostingDetailHeader.stories.tsx
 create mode 100644 src/features/manager/posting/ui/PostingDetailHeader.tsx

diff --git a/src/features/manager/posting/test/ui/PostingDetailHeader.stories.tsx b/src/features/manager/posting/test/ui/PostingDetailHeader.stories.tsx
new file mode 100644
index 00000000..3c0a59ba
--- /dev/null
+++ b/src/features/manager/posting/test/ui/PostingDetailHeader.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+
+import { PostingDetailHeader } from '@/features/manager/posting/ui/PostingDetailHeader'
+
+const meta = {
+  title: 'features/manager/posting/PostingDetailHeader',
+  component: PostingDetailHeader,
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <div className="w-[360px] bg-bg-light px-4">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: '주말 홀서빙 · 오후 마감조 구합니다',
+    workspaceName: '알터 강남점',
+    businessType: '카페',
+    status: 'OPEN',
+  },
+} satisfies Meta<typeof PostingDetailHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const title = canvas.getByRole('heading', {
+      name: '주말 홀서빙 · 오후 마감조 구합니다',
+    })
+    const badge = canvas.getByText('모집중')
+    await expect(title).toBeVisible()
+    await expect(badge).toBeVisible()
+
+    const titleStyle = window.getComputedStyle(title)
+    await expect(titleStyle.fontSize).toBe('20px')
+
+    const badgeStyle = window.getComputedStyle(badge)
+    await expect(badgeStyle.fontSize).toBe('13px')
+    await expect(badgeStyle.paddingLeft).toBe('10px')
+    await expect(badgeStyle.paddingRight).toBe('10px')
+    await expect(badgeStyle.paddingTop).toBe('6px')
+    await expect(badgeStyle.paddingBottom).toBe('6px')
+
+    const section = canvasElement.querySelector('section')
+    await expect(section).not.toBeNull()
+
+    const style = window.getComputedStyle(section!)
+    await expect(style.paddingLeft).toBe('0px')
+    await expect(style.paddingRight).toBe('0px')
+    await expect(style.backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    await expect(style.boxShadow).toBe('none')
+  },
+}
diff --git a/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx b/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
index 731e3078..dd1c88a9 100644
--- a/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
+++ b/src/features/manager/posting/ui/ManagerPostingStatusBadge.tsx
@@ -5,18 +5,23 @@ import { cn } from '@/shared/lib/utils'
 interface ManagerPostingStatusBadgeProps {
   status: PostingStatus
   className?: string
+  size?: 'sm' | 'md'
 }
 
 export function ManagerPostingStatusBadge({
   status,
   className,
+  size = 'sm',
 }: ManagerPostingStatusBadgeProps) {
   const style = resolvePostingStatusBadge(status)
 
   return (
     <span
       className={cn(
-        'inline-flex shrink-0 items-center justify-center rounded-[50px] px-2 py-1 typography-bg',
+        'inline-flex shrink-0 items-center justify-center rounded-[50px]',
+        size === 'md'
+          ? 'px-2.5 py-1.5 typography-body03-semibold'
+          : 'px-2 py-1 typography-bg',
         style.containerClassName,
         style.textClassName,
         className
diff --git a/src/features/manager/posting/ui/PostingDetailHeader.tsx b/src/features/manager/posting/ui/PostingDetailHeader.tsx
new file mode 100644
index 00000000..b5ad20d0
--- /dev/null
+++ b/src/features/manager/posting/ui/PostingDetailHeader.tsx
@@ -0,0 +1,28 @@
+import { ManagerPostingStatusBadge } from '@/features/manager/posting/ui/ManagerPostingStatusBadge'
+import type { PostingStatus } from '@/features/manager/posting/types/posting'
+
+interface PostingDetailHeaderProps {
+  title: string
+  workspaceName: string
+  businessType: string
+  status: PostingStatus
+}
+
+export function PostingDetailHeader({
+  title,
+  workspaceName,
+  businessType,
+  status,
+}: PostingDetailHeaderProps) {
+  return (
+    <section className="py-4">
+      <h1 className="typography-headline02 text-text-100">{title}</h1>
+      <div className="mt-1.5 flex items-center justify-between gap-2">
+        <p className="typography-body02-regular text-text-70">
+          {workspaceName} · {businessType}
+        </p>
+        <ManagerPostingStatusBadge status={status} size="md" />
+      </div>
+    </section>
+  )
+}
diff --git a/src/pages/manager/posting-detail/index.tsx b/src/pages/manager/posting-detail/index.tsx
index 211965c1..8d8b8d45 100644
--- a/src/pages/manager/posting-detail/index.tsx
+++ b/src/pages/manager/posting-detail/index.tsx
@@ -5,12 +5,12 @@ import ChevronRightIcon from '@/assets/icons/posting/ChevronRight.svg?react'
 import ClockIcon from '@/assets/icons/posting/Clock.svg?react'
 import PersonIcon from '@/assets/icons/posting/Person.svg?react'
 import { usePostingDetailViewModel } from '@/features/manager/posting/hooks/usePostingDetailViewModel'
-import { ManagerPostingStatusBadge } from '@/features/manager/posting/ui/ManagerPostingStatusBadge'
 import {
   formatTimeRange,
   formatWorkingDays,
   PAYMENT_TYPE_LABEL,
 } from '@/features/manager/posting/types/posting'
+import { PostingDetailHeader } from '@/features/manager/posting/ui/PostingDetailHeader'
 import {
   managerPostingApplicationsPath,
   managerPostingEditPath,
@@ -68,17 +68,12 @@ export function ManagerPostingDetailPage() {
       <Navbar variant="detail" title="공고 상세" />
 
       <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-28 pt-4">
-        <section className="rounded-2xl bg-white p-4 shadow-sm">
-          <h1 className="typography-headline03 text-text-100">
-            {posting.title}
-          </h1>
-          <div className="mt-1.5 flex items-center justify-between gap-2">
-            <p className="typography-body02-regular text-text-70">
-              {posting.workspaceName} · {posting.businessType}
-            </p>
-            <ManagerPostingStatusBadge status={posting.status} />
-          </div>
-        </section>
+        <PostingDetailHeader
+          title={posting.title}
+          workspaceName={posting.workspaceName}
+          businessType={posting.businessType}
+          status={posting.status}
+        />
 
         <section className="flex items-center justify-between rounded-2xl bg-white p-4 shadow-sm">
           <span className="typography-body02-regular text-text-70">급여</span>

From 7df2499664b09d5b7e71e53ed0d43afc18bc2a5a Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 5 Aug 2026 20:30:06 +0900
Subject: [PATCH 30/33] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B3=A0=20=EA=B7=BC?=
 =?UTF-8?q?=EB=AC=B4=EC=9D=BC=EC=A0=95=20=EC=9E=85=EB=A0=A5=20UI=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manager/posting/ui/ScheduleEditor.tsx     | 13 +++--
 storybook/stories/ScheduleEditor.stories.tsx  | 51 +++++++++++++++++++
 2 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/features/manager/posting/ui/ScheduleEditor.tsx b/src/features/manager/posting/ui/ScheduleEditor.tsx
index 721a9e5f..3b2423b1 100644
--- a/src/features/manager/posting/ui/ScheduleEditor.tsx
+++ b/src/features/manager/posting/ui/ScheduleEditor.tsx
@@ -3,7 +3,6 @@ import PlusIcon from '@/assets/icons/posting/Plus.svg?react'
 import { useState } from 'react'
 
 import type { PostingFormViewModel } from '@/features/manager/posting/hooks/usePostingForm'
-import { formatKoreanTimePart } from '@/shared/lib/formatKoreanWorkTime'
 import type { WorkTimeEditorState } from '@/shared/types/workTime'
 import { WorkTimePickerDrawer } from '@/shared/ui/common/WorkTimePickerDrawer'
 import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
@@ -25,6 +24,11 @@ function splitTime(time: string) {
   return { hour, minute }
 }
 
+function formatTime(time: string) {
+  const { hour, minute } = splitTime(time)
+  return `${hour.padStart(2, '0')}:${minute.padStart(2, '0')}`
+}
+
 function TimeField({
   label,
   value,
@@ -34,7 +38,6 @@ function TimeField({
   value: string
   onOpen: () => void
 }) {
-  const { hour, minute } = splitTime(value)
   const isEmpty = value === ''
 
   return (
@@ -52,7 +55,7 @@ function TimeField({
           isEmpty ? 'text-text-50' : 'text-text-100'
         )}
       >
-        {isEmpty ? '시간 선택' : formatKoreanTimePart(hour, minute)}
+        {isEmpty ? '시간 선택' : formatTime(value)}
       </button>
     </div>
   )
@@ -141,7 +144,7 @@ function ScheduleCard({
             type="button"
             onClick={onRemove}
             aria-label={`일정 ${index + 1} 삭제`}
-            className="flex size-7 items-center justify-center rounded-lg text-text-50 transition-colors hover:bg-bg-light"
+            className="flex size-7 items-center justify-center rounded-lg border border-line-1 text-text-50 transition-colors hover:bg-bg-light"
           >
             <CloseIcon className="size-4" />
           </button>
@@ -162,7 +165,7 @@ function ScheduleCard({
                 'size-9 rounded-lg typography-body02-semibold transition-colors',
                 isSelected
                   ? 'bg-main text-white'
-                  : 'border border-line-1 bg-white text-text-70'
+                  : 'border border-bg-dark bg-transparent text-text-50'
               )}
             >
               {WORKING_DAY_LABEL[day]}
diff --git a/storybook/stories/ScheduleEditor.stories.tsx b/storybook/stories/ScheduleEditor.stories.tsx
index d389fe60..6016108c 100644
--- a/storybook/stories/ScheduleEditor.stories.tsx
+++ b/storybook/stories/ScheduleEditor.stories.tsx
@@ -54,6 +54,25 @@ export const LastExistingSchedule: Story = {
   args: { initialPosting: posting },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
+    await expect(
+      canvas.getByRole('button', { name: '시작 시간 선택' })
+    ).toHaveTextContent('17:00')
+    await expect(
+      canvas.getByRole('button', { name: '종료 시간 선택' })
+    ).toHaveTextContent('22:00')
+
+    const selectedDayStyle = window.getComputedStyle(
+      canvas.getByRole('button', { name: '토' })
+    )
+    const unselectedDayStyle = window.getComputedStyle(
+      canvas.getByRole('button', { name: '월' })
+    )
+    await expect(selectedDayStyle.backgroundColor).toBe('rgb(7, 192, 121)')
+    await expect(selectedDayStyle.color).toBe('rgb(255, 255, 255)')
+    await expect(unselectedDayStyle.backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    await expect(unselectedDayStyle.color).toBe('rgb(163, 163, 163)')
+    await expect(unselectedDayStyle.borderColor).toBe('rgb(239, 239, 239)')
+
     await userEvent.click(canvas.getByRole('button', { name: '일정 1 삭제' }))
     await expect(
       within(canvasElement.ownerDocument.body).getByText(
@@ -71,3 +90,35 @@ export const EmptySchedule: Story = {
     ).toBeVisible()
   },
 }
+
+export const MultipleSchedules: Story = {
+  args: {
+    initialPosting: {
+      ...posting,
+      schedules: [
+        ...posting.schedules,
+        {
+          id: 2,
+          workingDays: ['MONDAY', 'WEDNESDAY', 'FRIDAY'],
+          startTime: '09:00',
+          endTime: '15:00',
+          position: '마감 청소',
+          positionsNeeded: 1,
+        },
+      ],
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const removeButtons = within(canvasElement).getAllByRole('button', {
+      name: /일정 \d+ 삭제/,
+    })
+    await expect(removeButtons).toHaveLength(2)
+
+    for (const button of removeButtons) {
+      const style = window.getComputedStyle(button)
+      await expect(style.borderWidth).toBe('1px')
+      await expect(style.borderStyle).toBe('solid')
+      await expect(style.borderColor).toBe('rgb(229, 229, 229)')
+    }
+  },
+}

From 4b12f6e3ab8e5e9d59bb0293b9868f7b6fddb950 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 5 Aug 2026 20:30:25 +0900
Subject: [PATCH 31/33] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B3=A0=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=82=B4=EC=9A=A9=20=EC=9E=85=EB=A0=A5=20=EB=86=92?=
 =?UTF-8?q?=EC=9D=B4=20=EC=9E=90=EB=8F=99=20=EC=A1=B0=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/PostingDescriptionTextarea.stories.tsx | 54 +++++++++++++++++++
 .../posting/ui/PostingDescriptionTextarea.tsx | 40 ++++++++++++++
 .../manager/posting/ui/PostingFormFields.tsx  | 14 ++---
 3 files changed, 98 insertions(+), 10 deletions(-)
 create mode 100644 src/features/manager/posting/test/ui/PostingDescriptionTextarea.stories.tsx
 create mode 100644 src/features/manager/posting/ui/PostingDescriptionTextarea.tsx

diff --git a/src/features/manager/posting/test/ui/PostingDescriptionTextarea.stories.tsx b/src/features/manager/posting/test/ui/PostingDescriptionTextarea.stories.tsx
new file mode 100644
index 00000000..e7679e21
--- /dev/null
+++ b/src/features/manager/posting/test/ui/PostingDescriptionTextarea.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { expect, userEvent, within } from 'storybook/test'
+
+import { PostingDescriptionTextarea } from '@/features/manager/posting/ui/PostingDescriptionTextarea'
+
+function PostingDescriptionTextareaStory() {
+  const [value, setValue] = useState('주말 근무 가능자를 우대합니다.')
+
+  return (
+    <PostingDescriptionTextarea
+      value={value}
+      hasError={false}
+      onChange={setValue}
+    />
+  )
+}
+
+const meta = {
+  title: 'features/manager/posting/PostingDescriptionTextarea',
+  component: PostingDescriptionTextareaStory,
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <div className="w-[328px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof PostingDescriptionTextareaStory>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const AutoResize: Story = {
+  play: async ({ canvasElement }) => {
+    const textarea = within(canvasElement).getByRole('textbox')
+    const initialHeight = textarea.clientHeight
+
+    await userEvent.type(
+      textarea,
+      '\n첫 번째 추가 조건\n두 번째 추가 조건\n세 번째 추가 조건\n네 번째 추가 조건\n다섯 번째 추가 조건\n여섯 번째 추가 조건'
+    )
+
+    await expect(textarea.clientHeight).toBeGreaterThan(initialHeight)
+    await expect(textarea.scrollHeight).toBeLessThanOrEqual(
+      textarea.clientHeight
+    )
+    await expect(window.getComputedStyle(textarea).overflowY).toBe('hidden')
+
+    await userEvent.clear(textarea)
+    await expect(textarea.clientHeight).toBe(initialHeight)
+  },
+}
diff --git a/src/features/manager/posting/ui/PostingDescriptionTextarea.tsx b/src/features/manager/posting/ui/PostingDescriptionTextarea.tsx
new file mode 100644
index 00000000..a41771fa
--- /dev/null
+++ b/src/features/manager/posting/ui/PostingDescriptionTextarea.tsx
@@ -0,0 +1,40 @@
+import { useLayoutEffect, useRef } from 'react'
+
+import { cn } from '@/shared/lib/utils'
+
+interface PostingDescriptionTextareaProps {
+  value: string
+  hasError: boolean
+  onChange: (value: string) => void
+}
+
+export function PostingDescriptionTextarea({
+  value,
+  hasError,
+  onChange,
+}: PostingDescriptionTextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+
+    const borderHeight = textarea.offsetHeight - textarea.clientHeight
+    textarea.style.height = 'auto'
+    textarea.style.height = `${textarea.scrollHeight + borderHeight}px`
+  }, [value])
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      rows={5}
+      placeholder="근무 조건, 우대 사항 등을 자유롭게 작성해 주세요"
+      onChange={event => onChange(event.target.value)}
+      className={cn(
+        'w-full resize-none overflow-hidden rounded-xl border bg-white p-3.5 typography-body02-regular text-text-100 placeholder:text-text-50 focus:outline-none',
+        hasError ? 'border-error' : 'border-line-1 focus:border-main'
+      )}
+    />
+  )
+}
diff --git a/src/features/manager/posting/ui/PostingFormFields.tsx b/src/features/manager/posting/ui/PostingFormFields.tsx
index 99bbed62..a9cfde06 100644
--- a/src/features/manager/posting/ui/PostingFormFields.tsx
+++ b/src/features/manager/posting/ui/PostingFormFields.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react'
 import type { PostingFormViewModel } from '@/features/manager/posting/hooks/usePostingForm'
 import { useWorkspaceSelectOptions } from '@/features/manager/posting/hooks/query/useWorkspaceFilterOptions'
 import AlertIcon from '@/assets/icons/posting/Alert.svg?react'
+import { PostingDescriptionTextarea } from '@/features/manager/posting/ui/PostingDescriptionTextarea'
 import { ScheduleEditor } from '@/features/manager/posting/ui/ScheduleEditor'
 import {
   PAYMENT_TYPES,
@@ -143,17 +144,10 @@ export function PostingFormFields({ form }: PostingFormFieldsProps) {
       </Section>
 
       <Section label="상세내용" required error={errors.description}>
-        <textarea
+        <PostingDescriptionTextarea
           value={values.description}
-          rows={5}
-          placeholder="근무 조건, 우대 사항 등을 자유롭게 작성해 주세요"
-          onChange={e => form.setDescription(e.target.value)}
-          className={cn(
-            'w-full resize-none rounded-xl border bg-white p-3.5 typography-body02-regular text-text-100 placeholder:text-text-50 focus:outline-none',
-            errors.description
-              ? 'border-error'
-              : 'border-line-1 focus:border-main'
-          )}
+          hasError={Boolean(errors.description)}
+          onChange={form.setDescription}
         />
       </Section>
     </div>

From e318fca406f55957bf10702927e68b6a52cc74a0 Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 5 Aug 2026 20:38:37 +0900
Subject: [PATCH 32/33] =?UTF-8?q?feat:=20=EB=A7=88=EA=B0=90=20=EA=B3=B5?=
 =?UTF-8?q?=EA=B3=A0=20=EC=88=98=EC=A0=95=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/PostingDetailActionBar.stories.tsx     | 50 +++++++++++++++++++
 .../posting/ui/PostingDetailActionBar.tsx     | 40 +++++++++++++++
 src/pages/manager/posting-detail/index.tsx    | 26 +++-------
 3 files changed, 97 insertions(+), 19 deletions(-)
 create mode 100644 src/features/manager/posting/test/ui/PostingDetailActionBar.stories.tsx
 create mode 100644 src/features/manager/posting/ui/PostingDetailActionBar.tsx

diff --git a/src/features/manager/posting/test/ui/PostingDetailActionBar.stories.tsx b/src/features/manager/posting/test/ui/PostingDetailActionBar.stories.tsx
new file mode 100644
index 00000000..2f5cc4c2
--- /dev/null
+++ b/src/features/manager/posting/test/ui/PostingDetailActionBar.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+
+import { PostingDetailActionBar } from '@/features/manager/posting/ui/PostingDetailActionBar'
+
+const meta = {
+  title: 'features/manager/posting/PostingDetailActionBar',
+  component: PostingDetailActionBar,
+  parameters: { layout: 'fullscreen' },
+  args: {
+    status: 'OPEN',
+    isClosing: false,
+    onEdit: () => {},
+    onClosePosting: () => {},
+  },
+} satisfies Meta<typeof PostingDetailActionBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await expect(canvas.getByRole('button', { name: '수정' })).toBeVisible()
+    await expect(
+      canvas.getByRole('button', { name: '모집 마감' })
+    ).toBeEnabled()
+  },
+}
+
+export const Closed: Story = {
+  args: { status: 'CLOSED' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await expect(
+      canvas.queryByRole('button', { name: '수정' })
+    ).not.toBeInTheDocument()
+    await expect(canvas.getAllByRole('button')).toHaveLength(1)
+    await expect(canvas.getByRole('button', { name: '마감됨' })).toBeDisabled()
+  },
+}
+
+export const Cancelled: Story = {
+  args: { status: 'CANCELLED' },
+  play: async ({ canvasElement }) => {
+    await expect(
+      within(canvasElement).getByRole('button', { name: '수정' })
+    ).toBeVisible()
+  },
+}
diff --git a/src/features/manager/posting/ui/PostingDetailActionBar.tsx b/src/features/manager/posting/ui/PostingDetailActionBar.tsx
new file mode 100644
index 00000000..42a66e91
--- /dev/null
+++ b/src/features/manager/posting/ui/PostingDetailActionBar.tsx
@@ -0,0 +1,40 @@
+import type { PostingStatus } from '@/features/manager/posting/types/posting'
+
+interface PostingDetailActionBarProps {
+  status: PostingStatus
+  isClosing: boolean
+  onEdit: () => void
+  onClosePosting: () => void
+}
+
+export function PostingDetailActionBar({
+  status,
+  isClosing,
+  onEdit,
+  onClosePosting,
+}: PostingDetailActionBarProps) {
+  const isClosed = status === 'CLOSED'
+  const isInactive = status !== 'OPEN'
+
+  return (
+    <div className="fixed bottom-0 left-1/2 z-10 flex w-full max-w-[428px] -translate-x-1/2 gap-2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
+      {isClosed ? null : (
+        <button
+          type="button"
+          onClick={onEdit}
+          className="h-12 flex-1 rounded-xl bg-main typography-bt text-white transition-all hover:brightness-[0.94] active:brightness-[0.88]"
+        >
+          수정
+        </button>
+      )}
+      <button
+        type="button"
+        onClick={onClosePosting}
+        disabled={isInactive || isClosing}
+        className="h-12 flex-1 rounded-xl border border-line-1 bg-white typography-bt text-text-90 transition-colors hover:bg-bg-light disabled:cursor-not-allowed disabled:text-text-50"
+      >
+        {isInactive ? '마감됨' : '모집 마감'}
+      </button>
+    </div>
+  )
+}
diff --git a/src/pages/manager/posting-detail/index.tsx b/src/pages/manager/posting-detail/index.tsx
index 8d8b8d45..98f24412 100644
--- a/src/pages/manager/posting-detail/index.tsx
+++ b/src/pages/manager/posting-detail/index.tsx
@@ -10,6 +10,7 @@ import {
   formatWorkingDays,
   PAYMENT_TYPE_LABEL,
 } from '@/features/manager/posting/types/posting'
+import { PostingDetailActionBar } from '@/features/manager/posting/ui/PostingDetailActionBar'
 import { PostingDetailHeader } from '@/features/manager/posting/ui/PostingDetailHeader'
 import {
   managerPostingApplicationsPath,
@@ -61,8 +62,6 @@ export function ManagerPostingDetailPage() {
     )
   }
 
-  const isClosed = posting.status !== 'OPEN'
-
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
       <Navbar variant="detail" title="공고 상세" />
@@ -155,23 +154,12 @@ export function ManagerPostingDetailPage() {
         </button>
       </main>
 
-      <div className="fixed bottom-0 left-1/2 z-10 flex w-full max-w-[428px] -translate-x-1/2 gap-2 border-t border-line-1 bg-white px-4 pb-8 pt-3">
-        <button
-          type="button"
-          onClick={() => navigate(managerPostingEditPath(numericPostingId))}
-          className="h-12 flex-1 rounded-xl bg-main typography-bt text-white transition-all hover:brightness-[0.94] active:brightness-[0.88]"
-        >
-          수정
-        </button>
-        <button
-          type="button"
-          onClick={openCloseModal}
-          disabled={isClosed || isClosing}
-          className="h-12 flex-1 rounded-xl border border-line-1 bg-white typography-bt text-text-90 transition-colors hover:bg-bg-light disabled:cursor-not-allowed disabled:text-text-50"
-        >
-          {isClosed ? '마감됨' : '모집 마감'}
-        </button>
-      </div>
+      <PostingDetailActionBar
+        status={posting.status}
+        isClosing={isClosing}
+        onEdit={() => navigate(managerPostingEditPath(numericPostingId))}
+        onClosePosting={openCloseModal}
+      />
 
       <ConfirmModal
         isOpen={isCloseModalOpen}

From 7c97a516b0c39e27eee638eb3bc5b482fdc348df Mon Sep 17 00:00:00 2001
From: SeongHwan <epaktldk0203@gmail.com>
Date: Wed, 5 Aug 2026 21:00:00 +0900
Subject: [PATCH 33/33] =?UTF-8?q?feat:=20=EB=82=B4=20=EA=B3=B5=EA=B3=A0=20?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EC=98=81=EC=97=AD=20=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/PostingListStickyHeader.stories.tsx    | 65 +++++++++++++++++++
 .../posting/ui/PostingListStickyHeader.tsx    | 50 ++++++++++++++
 src/pages/manager/posting-list/index.tsx      | 27 +++-----
 3 files changed, 125 insertions(+), 17 deletions(-)
 create mode 100644 src/features/manager/posting/test/ui/PostingListStickyHeader.stories.tsx
 create mode 100644 src/features/manager/posting/ui/PostingListStickyHeader.tsx

diff --git a/src/features/manager/posting/test/ui/PostingListStickyHeader.stories.tsx b/src/features/manager/posting/test/ui/PostingListStickyHeader.stories.tsx
new file mode 100644
index 00000000..1d4a580c
--- /dev/null
+++ b/src/features/manager/posting/test/ui/PostingListStickyHeader.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { MemoryRouter } from 'react-router-dom'
+import { expect, within } from 'storybook/test'
+
+import { PostingListStickyHeader } from '@/features/manager/posting/ui/PostingListStickyHeader'
+
+const meta = {
+  title: 'features/manager/posting/PostingListStickyHeader',
+  component: PostingListStickyHeader,
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    Story => (
+      <MemoryRouter>
+        <div className="min-h-[2000px] bg-bg-light">
+          <Story />
+        </div>
+      </MemoryRouter>
+    ),
+  ],
+  args: {
+    rightAction: <button type="button">작성</button>,
+    workspaceOptions: [
+      { value: 'ALL', label: '전체 업장' },
+      { value: 1, label: '알터 강남점' },
+    ],
+    workspaceValue: 'ALL',
+    onWorkspaceChange: () => {},
+    statusOptions: [
+      { value: 'ALL', label: '전체 상태' },
+      { value: 'OPEN', label: '모집중' },
+      { value: 'CLOSED', label: '모집완료' },
+    ],
+    statusValue: 'ALL',
+    onStatusChange: () => {},
+    totalCount: 12,
+  },
+} satisfies Meta<typeof PostingListStickyHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await expect(canvas.getByText('내 공고')).toBeVisible()
+    await expect(
+      canvas.getByRole('button', { name: '업장 필터' })
+    ).toBeVisible()
+    await expect(
+      canvas.getByRole('button', { name: '상태 필터' })
+    ).toBeVisible()
+
+    const header = canvas.getByText('내 공고').closest('header')?.parentElement
+    await expect(header).not.toBeNull()
+    await expect(window.getComputedStyle(header!).position).toBe('sticky')
+    await expect(window.getComputedStyle(header!).top).toBe('0px')
+
+    window.scrollTo(0, 500)
+    await new Promise<void>(resolve => {
+      window.requestAnimationFrame(() => resolve())
+    })
+    await expect(Math.round(header!.getBoundingClientRect().top)).toBe(0)
+    window.scrollTo(0, 0)
+  },
+}
diff --git a/src/features/manager/posting/ui/PostingListStickyHeader.tsx b/src/features/manager/posting/ui/PostingListStickyHeader.tsx
new file mode 100644
index 00000000..fbd7cf70
--- /dev/null
+++ b/src/features/manager/posting/ui/PostingListStickyHeader.tsx
@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+
+import type { WorkspaceFilter } from '@/features/manager/posting/hooks/query/useWorkspaceFilterOptions'
+import { FilterBar } from '@/features/manager/posting/ui/FilterBar'
+import type { SelectOption } from '@/shared/ui/common/SelectDropdown'
+import { Navbar } from '@/shared/ui/common/Navbar'
+
+interface PostingListStickyHeaderProps<TStatus extends string> {
+  rightAction: ReactNode
+  workspaceOptions: SelectOption<WorkspaceFilter>[]
+  workspaceValue: WorkspaceFilter
+  onWorkspaceChange: (value: WorkspaceFilter) => void
+  statusOptions: readonly SelectOption<TStatus>[]
+  statusValue: TStatus
+  onStatusChange: (value: TStatus) => void
+  totalCount: number
+}
+
+export function PostingListStickyHeader<TStatus extends string>({
+  rightAction,
+  workspaceOptions,
+  workspaceValue,
+  onWorkspaceChange,
+  statusOptions,
+  statusValue,
+  onStatusChange,
+  totalCount,
+}: PostingListStickyHeaderProps<TStatus>) {
+  return (
+    <div className="sticky top-0 z-40 bg-bg-light">
+      <Navbar
+        variant="detail"
+        title="내 공고"
+        showBack={false}
+        rightAction={rightAction}
+      />
+      <div className="mx-auto w-full max-w-[400px] px-4 pt-4">
+        <FilterBar
+          workspaceOptions={workspaceOptions}
+          workspaceValue={workspaceValue}
+          onWorkspaceChange={onWorkspaceChange}
+          statusOptions={statusOptions}
+          statusValue={statusValue}
+          onStatusChange={onStatusChange}
+          totalCount={totalCount}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/manager/posting-list/index.tsx b/src/pages/manager/posting-list/index.tsx
index 684f8a13..2c4618ff 100644
--- a/src/pages/manager/posting-list/index.tsx
+++ b/src/pages/manager/posting-list/index.tsx
@@ -4,10 +4,9 @@ import { useNavigate } from 'react-router-dom'
 import WriteIcon from '@/assets/icons/posting/Write.svg?react'
 import { usePostingListViewModel } from '@/features/manager/posting/hooks/usePostingListViewModel'
 import { POSTING_STATUS_FILTER_OPTIONS } from '@/features/manager/posting/lib/postingStatus'
-import { FilterBar } from '@/features/manager/posting/ui/FilterBar'
 import { PostingListCard } from '@/features/manager/posting/ui/PostingListCard'
+import { PostingListStickyHeader } from '@/features/manager/posting/ui/PostingListStickyHeader'
 import { managerPostingDetailPath, ROUTES } from '@/shared/constants/routes'
-import { Navbar } from '@/shared/ui/common/Navbar'
 import { Skeleton } from '@/shared/ui/common/Skeleton'
 import { Spinner } from '@/shared/ui/Spinner'
 
@@ -70,10 +69,7 @@ export function ManagerPostingListPage() {
 
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
-      <Navbar
-        variant="detail"
-        title="내 공고"
-        showBack={false}
+      <PostingListStickyHeader
         rightAction={
           <button
             type="button"
@@ -84,20 +80,17 @@ export function ManagerPostingListPage() {
             <WriteIcon className="h-6 w-6" />
           </button>
         }
+        workspaceOptions={workspaceOptions}
+        workspaceValue={workspaceFilter}
+        onWorkspaceChange={setWorkspaceFilter}
+        statusOptions={POSTING_STATUS_FILTER_OPTIONS}
+        statusValue={statusFilter}
+        onStatusChange={setStatusFilter}
+        totalCount={totalCount}
       />
 
       {/* 하단 Docbar(h-14)에 가리지 않도록 여유 패딩 */}
-      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-24 pt-4">
-        <FilterBar
-          workspaceOptions={workspaceOptions}
-          workspaceValue={workspaceFilter}
-          onWorkspaceChange={setWorkspaceFilter}
-          statusOptions={POSTING_STATUS_FILTER_OPTIONS}
-          statusValue={statusFilter}
-          onStatusChange={setStatusFilter}
-          totalCount={totalCount}
-        />
-
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col gap-3 px-4 pb-24 pt-3">
         {isLoading ? <PostingListSkeleton /> : null}
 
         {isError ? (