From ab2f531fe3738739a0030352ea0e7d598b19bd68 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Thu, 11 Jun 2026 18:00:15 +0900
Subject: [PATCH 01/24] =?UTF-8?q?feat:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=8B=A0=EC=B2=AD=20=EB=82=B4=EC=97=AD/=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EB=B0=8F=20=EC=BF=BC?=
 =?UTF-8?q?=EB=A6=AC=ED=82=A4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/App.tsx                | 10 ++++++++++
 src/shared/constants/routes.ts | 11 +++++++++++
 src/shared/lib/queryKeys.ts    | 14 ++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 956f4956..2799f6c5 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -26,6 +26,8 @@ import { AppliedStoresPage } from '@/pages/user/applied-stores'
 import { SubstituteRequestPage } from '@/pages/user/substitute-request'
 import { ManagerSubstituteRequestPage } from '@/pages/manager/substitute-request'
 import { StoreRegisterPage } from '@/pages/manager/store-register'
+import { StoreRegisterRequestsPage } from '@/pages/store-register/requests'
+import { StoreRegisterRequestDetailPage } from '@/pages/store-register/request-detail'
 import { ManagerWorkerInvitePage } from '@/pages/manager/worker-invite'
 import { WorkerListPage } from '@/pages/manager/worker-list'
 import { WorkspaceJoinPage } from '@/pages/user/workspace-join'
@@ -143,6 +145,14 @@ export function App() {
             path={ROUTES.MANAGER.STORE_REGISTER}
             element={<StoreRegisterPage />}
           />
+          <Route
+            path={ROUTES.STORE_REGISTER.REQUESTS}
+            element={<StoreRegisterRequestsPage />}
+          />
+          <Route
+            path={ROUTES.STORE_REGISTER.REQUEST_DETAIL_PATTERN}
+            element={<StoreRegisterRequestDetailPage />}
+          />
           <Route
             path={ROUTES.MANAGER.WORKER_INVITE}
             element={<ManagerWorkerInvitePage />}
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
index 235a735c..0421918e 100644
--- a/src/shared/constants/routes.ts
+++ b/src/shared/constants/routes.ts
@@ -46,10 +46,21 @@ export const ROUTES = {
     PROFILE_SOCIAL: '/my/profile/social',
     WITHDRAW: '/my/withdraw',
   },
+  /** 업장 등록 신청(승급 신청) — USER·MANAGER 공용, MANAGER 전용 가드 없음 */
+  STORE_REGISTER: {
+    /** 신청 내역 목록 */
+    REQUESTS: '/store-register/requests',
+    /** 신청 상세 (파라미터) */
+    REQUEST_DETAIL_PATTERN: '/store-register/requests/:requestId',
+  },
   NOTIFICATIONS: '/notifications',
   NOTIFICATION_SETTINGS: '/notifications/settings',
 } as const
 
+export function storeRegisterRequestDetailPath(requestId: number) {
+  return `/store-register/requests/${requestId}`
+}
+
 export function managerWorkerSchedulePath(
   workspaceId: number,
   workerId: number
diff --git a/src/shared/lib/queryKeys.ts b/src/shared/lib/queryKeys.ts
index 46936b0d..2b1b0840 100644
--- a/src/shared/lib/queryKeys.ts
+++ b/src/shared/lib/queryKeys.ts
@@ -90,6 +90,20 @@ export const queryKeys = {
     list: (workspaceId: number) =>
       ['fixedWorkerSchedule', 'list', workspaceId] as const,
   },
+  storeRegisterRequest: {
+    list: (scope: 'MANAGER' | 'USER' | null) =>
+      ['storeRegisterRequest', 'list', scope] as const,
+    detail: (scope: 'MANAGER' | 'USER' | null, requestId: number) =>
+      ['storeRegisterRequest', 'detail', scope, requestId] as const,
+    reasons: (scope: 'MANAGER' | 'USER' | null, requestId: number) =>
+      ['storeRegisterRequest', 'reasons', scope, requestId] as const,
+    comments: (
+      scope: 'MANAGER' | 'USER' | null,
+      requestId: number,
+      reasonId: number
+    ) =>
+      ['storeRegisterRequest', 'comments', scope, requestId, reasonId] as const,
+  },
   notification: {
     list: (scope: 'MANAGER' | 'USER' | null, type?: string) =>
       ['notifications', scope, type] as const,

From a9838ea43f8f5a183ad1840edf10009c6d2aca88 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Thu, 11 Jun 2026 18:00:16 +0900
Subject: [PATCH 02/24] =?UTF-8?q?feat:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=9A=94=EC=B2=AD=20API=EB=A5=BC=20scope=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B0=98=EC=9C=BC=EB=A1=9C=20=EC=A0=84=ED=99=98?=
 =?UTF-8?q?=ED=95=98=EA=B3=A0=20=EC=B7=A8=EC=86=8C/=EB=B0=98=EB=A0=A4?=
 =?UTF-8?q?=EC=82=AC=EC=9C=A0/=EB=8C=93=EA=B8=80=20=EC=97=B0=EB=8F=99=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store-register/api/workspaceFileUpload.ts | 17 +++-
 .../store-register/api/workspaceRequests.ts   | 79 ++++++++++++++++---
 .../store-register/types/workspaceRequests.ts | 59 +++++++++++++-
 src/shared/api/appFileUpload.ts               | 12 ++-
 4 files changed, 151 insertions(+), 16 deletions(-)

diff --git a/src/features/store-register/api/workspaceFileUpload.ts b/src/features/store-register/api/workspaceFileUpload.ts
index b7c88be7..a2c28906 100644
--- a/src/features/store-register/api/workspaceFileUpload.ts
+++ b/src/features/store-register/api/workspaceFileUpload.ts
@@ -27,11 +27,26 @@ const KIND_TO_TARGET: Record<
 /** 업장 등록 신청용 파일 업로드 (targetType·bucket 고정 조합). */
 export async function uploadWorkspaceRegistrationFile(
   file: File,
-  kind: WorkspaceRegistrationAttachmentKind
+  kind: WorkspaceRegistrationAttachmentKind,
+  scope?: 'MANAGER' | 'USER' | null
 ): Promise<string> {
   return uploadAppFile({
     file,
     targetType: KIND_TO_TARGET[kind],
     bucketType: WORKSPACE_REGISTRATION_BUCKET,
+    scope,
+  })
+}
+
+/** 반려 사유 댓글 첨부 파일 업로드 (targetType=WORKSPACE_REASON_COMMENT). */
+export async function uploadWorkspaceReasonCommentFile(
+  file: File,
+  scope?: 'MANAGER' | 'USER' | null
+): Promise<string> {
+  return uploadAppFile({
+    file,
+    targetType: 'WORKSPACE_REASON_COMMENT',
+    bucketType: WORKSPACE_REGISTRATION_BUCKET,
+    scope,
   })
 }
diff --git a/src/features/store-register/api/workspaceRequests.ts b/src/features/store-register/api/workspaceRequests.ts
index 85733f1b..cb03b4cb 100644
--- a/src/features/store-register/api/workspaceRequests.ts
+++ b/src/features/store-register/api/workspaceRequests.ts
@@ -1,39 +1,100 @@
 import axiosInstance from '@/shared/lib/axiosInstance'
+import { getAuthApiBasePath } from '@/shared/lib/authApiPath'
 import type { CommonApiResponse } from '@/shared/types/common'
 import type {
+  CreateWorkspaceReasonCommentBody,
+  WorkspaceReasonCommentDto,
+  WorkspaceReasonCommentsApiResponse,
   WorkspaceRequestDetailApiResponse,
   WorkspaceRequestDetailDto,
   WorkspaceRegistrationCreateBody,
+  WorkspaceRequestReasonDto,
+  WorkspaceRequestReasonsApiResponse,
   WorkspaceRequestsListApiResponse,
   WorkspaceRequestListItemDto,
 } from '@/features/store-register/types/workspaceRequests'
 
-/** GET /app/workspace-requests */
-export async function fetchWorkspaceRequests(): Promise<
-  WorkspaceRequestListItemDto[]
-> {
+type AuthScope = 'MANAGER' | 'USER' | null | undefined
+
+/** `/app/workspace-requests` | `/manager/workspace-requests` */
+function requestsBasePath(scope: AuthScope): string {
+  return `/${getAuthApiBasePath(scope)}/workspace-requests`
+}
+
+/** GET /{scope}/workspace-requests */
+export async function fetchWorkspaceRequests(
+  scope: AuthScope
+): Promise<WorkspaceRequestListItemDto[]> {
   const response = await axiosInstance.get<WorkspaceRequestsListApiResponse>(
-    '/app/workspace-requests'
+    requestsBasePath(scope)
   )
   return response.data.data
 }
 
-/** GET /app/workspace-requests/{workspaceRequestId} */
+/** GET /{scope}/workspace-requests/{workspaceRequestId} */
 export async function fetchWorkspaceRequestDetail(
+  scope: AuthScope,
   workspaceRequestId: number
 ): Promise<WorkspaceRequestDetailDto> {
   const response = await axiosInstance.get<WorkspaceRequestDetailApiResponse>(
-    `/app/workspace-requests/${workspaceRequestId}`
+    `${requestsBasePath(scope)}/${workspaceRequestId}`
   )
   return response.data.data
 }
 
-/** POST /app/workspace-requests */
+/** POST /{scope}/workspace-requests */
 export async function createWorkspaceRegistrationRequest(
+  scope: AuthScope,
   body: WorkspaceRegistrationCreateBody
 ): Promise<void> {
   await axiosInstance.post<CommonApiResponse<Record<string, never>>>(
-    '/app/workspace-requests',
+    requestsBasePath(scope),
+    body
+  )
+}
+
+/** POST /{scope}/workspace-requests/{id}/cancel — PENDING/REVOKED 에서만 성공 */
+export async function cancelWorkspaceRequest(
+  scope: AuthScope,
+  workspaceRequestId: number
+): Promise<void> {
+  await axiosInstance.post<CommonApiResponse<Record<string, never>>>(
+    `${requestsBasePath(scope)}/${workspaceRequestId}/cancel`
+  )
+}
+
+/** GET /{scope}/workspace-requests/{id}/reasons */
+export async function fetchWorkspaceRequestReasons(
+  scope: AuthScope,
+  workspaceRequestId: number
+): Promise<WorkspaceRequestReasonDto[]> {
+  const response = await axiosInstance.get<WorkspaceRequestReasonsApiResponse>(
+    `${requestsBasePath(scope)}/${workspaceRequestId}/reasons`
+  )
+  return response.data.data
+}
+
+/** GET /{scope}/workspace-requests/{id}/reasons/{reasonId}/comments */
+export async function fetchWorkspaceReasonComments(
+  scope: AuthScope,
+  workspaceRequestId: number,
+  reasonId: number
+): Promise<WorkspaceReasonCommentDto[]> {
+  const response = await axiosInstance.get<WorkspaceReasonCommentsApiResponse>(
+    `${requestsBasePath(scope)}/${workspaceRequestId}/reasons/${reasonId}/comments`
+  )
+  return response.data.data
+}
+
+/** POST /{scope}/workspace-requests/{id}/reasons/{reasonId}/comments */
+export async function createWorkspaceReasonComment(
+  scope: AuthScope,
+  workspaceRequestId: number,
+  reasonId: number,
+  body: CreateWorkspaceReasonCommentBody
+): Promise<void> {
+  await axiosInstance.post<CommonApiResponse<Record<string, never>>>(
+    `${requestsBasePath(scope)}/${workspaceRequestId}/reasons/${reasonId}/comments`,
     body
   )
 }
diff --git a/src/features/store-register/types/workspaceRequests.ts b/src/features/store-register/types/workspaceRequests.ts
index a5ebebac..5a69875f 100644
--- a/src/features/store-register/types/workspaceRequests.ts
+++ b/src/features/store-register/types/workspaceRequests.ts
@@ -5,6 +5,13 @@ export interface WorkspaceRequestStatusDto {
   description: string
 }
 
+/** 신청 상태 — PENDING(검토 중) → ACTIVATED | REVOKED | CANCELED */
+export type WorkspaceRequestStatusValue =
+  | 'PENDING'
+  | 'ACTIVATED'
+  | 'REVOKED'
+  | 'CANCELED'
+
 export interface WorkspaceRequestListItemDto {
   id: number
   businessName: string
@@ -21,15 +28,19 @@ export interface WorkspaceRequestDetailDto {
   id: number
   businessRegistrationNo: string
   businessName: string
+  /** 대표자 성명 */
+  ownerName: string
   businessType: string
   contact: string
   status: WorkspaceRequestStatusDto
   fullAddress: string
   latitude: number
   longitude: number
+  /** 서버가 presigned URL로 변환해 줌 → 그대로 열기만 함 */
   workspaceCertFileUrl: string
   workspaceOwnIdentityFileUrl: string
-  workspaceWarrantFileUrl: string
+  /** 위임장은 선택 — 미첨부 시 null */
+  workspaceWarrantFileUrl: string | null
   createdAt: string
   updatedAt: string
 }
@@ -37,9 +48,11 @@ export interface WorkspaceRequestDetailDto {
 export type WorkspaceRequestDetailApiResponse =
   CommonApiResponse<WorkspaceRequestDetailDto>
 
-/** POST `/app/workspace-requests` JSON 본문 (위·경도는 백엔드 요건에 따라 생략 가능) */
+/** POST `/{scope}/workspace-requests` JSON 본문 */
 export type WorkspaceRegistrationCreateBody = {
   bizName: string
+  /** 대표자 성명 (신규·필수) */
+  ownerName: string
   brn: string
   address: string
   province: string
@@ -49,5 +62,45 @@ export type WorkspaceRegistrationCreateBody = {
   contact: string
   workspaceCertFileId: string
   workspaceOwnIdentityFileId: string
-  workspaceWarrantFileId: string
+  /** 위임장 — 선택/nullable */
+  workspaceWarrantFileId: string | null
 } & Partial<{ latitude: number; longitude: number }>
+
+/** 반려 사유 */
+export interface WorkspaceRequestReasonDto {
+  id: number
+  reason: string
+  createdAt: string
+}
+
+export type WorkspaceRequestReasonsApiResponse = CommonApiResponse<
+  WorkspaceRequestReasonDto[]
+>
+
+export interface WorkspaceReasonCommentFileDto {
+  fileId: string
+  url: string
+}
+
+export type WorkspaceReasonCommentOwner = 'USER' | 'ADMIN'
+
+/** 반려 사유에 달린 댓글 (게시판 글-댓글 스타일) */
+export interface WorkspaceReasonCommentDto {
+  id: number
+  workspaceReasonId: number
+  userId: number
+  commentOwner: WorkspaceReasonCommentOwner
+  comment: string
+  files: WorkspaceReasonCommentFileDto[]
+  createdAt: string
+}
+
+export type WorkspaceReasonCommentsApiResponse = CommonApiResponse<
+  WorkspaceReasonCommentDto[]
+>
+
+/** POST 댓글 본문 — comment ≤ 255자, fileIds 선택 */
+export interface CreateWorkspaceReasonCommentBody {
+  comment: string
+  fileIds?: string[]
+}
diff --git a/src/shared/api/appFileUpload.ts b/src/shared/api/appFileUpload.ts
index be9701e7..09eb6806 100644
--- a/src/shared/api/appFileUpload.ts
+++ b/src/shared/api/appFileUpload.ts
@@ -1,4 +1,5 @@
 import axiosInstance from '@/shared/lib/axiosInstance'
+import { getAuthApiBasePath } from '@/shared/lib/authApiPath'
 import type { CommonApiResponse } from '@/shared/types/common'
 
 /** POST /app/files — query `targetType` (Swagger) */
@@ -15,7 +16,10 @@ export type AppFileUploadTargetType =
 
 export type AppFileBucketType = 'PUBLIC' | 'PRIVATE'
 
-const APP_FILES_PATH = '/app/files'
+/** scope 별 파일 업로드 경로 — MANAGER → /manager/files, 그 외 → /app/files */
+function getFilesPath(scope?: 'MANAGER' | 'USER' | null): string {
+  return `/${getAuthApiBasePath(scope)}/files`
+}
 
 function extractUploadedFileId(data: unknown): string {
   if (typeof data !== 'object' || data === null) {
@@ -32,21 +36,23 @@ function extractUploadedFileId(data: unknown): string {
 }
 
 /**
- * POST /app/files
+ * POST /{app|manager}/files
  * multipart 파트 이름 `file` + query targetType, bucketType
  * (Swagger 의 application/json 예시는 실제 업로드와 다를 수 있음)
+ * scope 미지정 시 기존 동작(`/app/files`) 유지
  */
 export async function uploadAppFile(options: {
   file: File
   targetType: AppFileUploadTargetType
   bucketType: AppFileBucketType
+  scope?: 'MANAGER' | 'USER' | null
 }): Promise<string> {
   const formData = new FormData()
   formData.append('file', options.file)
 
   const response = await axiosInstance.post<
     CommonApiResponse<{ fileId?: string; id?: string } | unknown>
-  >(APP_FILES_PATH, formData, {
+  >(getFilesPath(options.scope), formData, {
     params: {
       targetType: options.targetType,
       bucketType: options.bucketType,

From 31d5dcecb17f40259027ca7ffffcb47569b8efcb Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Thu, 11 Jun 2026 18:00:51 +0900
Subject: [PATCH 03/24] =?UTF-8?q?feat:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=8B=A0=EC=B2=AD=20=EB=82=B4=EC=97=AD/=EC=83=81?=
 =?UTF-8?q?=EC=84=B8/=EB=B0=98=EB=A0=A4=EC=82=AC=EC=9C=A0=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useReasonCommentThreadViewModel.ts  | 100 ++++++++++++++
 .../hooks/useStoreRegisterReasonsViewModel.ts |  29 ++++
 .../useStoreRegisterRequestDetailViewModel.ts |  95 +++++++++++++
 .../useStoreRegisterRequestsViewModel.ts      |  24 ++++
 src/features/store-register/lib/formatDate.ts |  21 +++
 .../store-register/lib/requestStatus.ts       |  46 +++++++
 src/features/store-register/ui/ReasonCard.tsx |  62 +++++++++
 .../ui/ReasonCommentComposer.tsx              |  94 +++++++++++++
 .../store-register/ui/ReasonCommentItem.tsx   |  50 +++++++
 .../store-register/ui/ReasonSection.tsx       |  42 ++++++
 .../ui/RequestDocumentsSection.tsx            |  75 +++++++++++
 .../store-register/ui/RequestInfoSection.tsx  |  37 +++++
 .../ui/StoreRequestListCard.tsx               |  32 +++++
 .../ui/StoreRequestStatusBadge.tsx            |  17 +++
 .../store-register/request-detail/index.tsx   | 127 ++++++++++++++++++
 src/pages/store-register/requests/index.tsx   |  91 +++++++++++++
 tailwind.config.js                            |   5 +
 17 files changed, 947 insertions(+)
 create mode 100644 src/features/store-register/hooks/useReasonCommentThreadViewModel.ts
 create mode 100644 src/features/store-register/hooks/useStoreRegisterReasonsViewModel.ts
 create mode 100644 src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts
 create mode 100644 src/features/store-register/hooks/useStoreRegisterRequestsViewModel.ts
 create mode 100644 src/features/store-register/lib/formatDate.ts
 create mode 100644 src/features/store-register/lib/requestStatus.ts
 create mode 100644 src/features/store-register/ui/ReasonCard.tsx
 create mode 100644 src/features/store-register/ui/ReasonCommentComposer.tsx
 create mode 100644 src/features/store-register/ui/ReasonCommentItem.tsx
 create mode 100644 src/features/store-register/ui/ReasonSection.tsx
 create mode 100644 src/features/store-register/ui/RequestDocumentsSection.tsx
 create mode 100644 src/features/store-register/ui/RequestInfoSection.tsx
 create mode 100644 src/features/store-register/ui/StoreRequestListCard.tsx
 create mode 100644 src/features/store-register/ui/StoreRequestStatusBadge.tsx
 create mode 100644 src/pages/store-register/request-detail/index.tsx
 create mode 100644 src/pages/store-register/requests/index.tsx

diff --git a/src/features/store-register/hooks/useReasonCommentThreadViewModel.ts b/src/features/store-register/hooks/useReasonCommentThreadViewModel.ts
new file mode 100644
index 00000000..6f978f2b
--- /dev/null
+++ b/src/features/store-register/hooks/useReasonCommentThreadViewModel.ts
@@ -0,0 +1,100 @@
+import { useCallback, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import useAuthStore from '@/shared/stores/useAuthStore'
+import { useCertificateFilePick } from '@/shared/hooks/useCertificateFilePick'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
+import {
+  createWorkspaceReasonComment,
+  fetchWorkspaceReasonComments,
+} from '@/features/store-register/api/workspaceRequests'
+import { uploadWorkspaceReasonCommentFile } from '@/features/store-register/api/workspaceFileUpload'
+
+export const COMMENT_MAX_LENGTH = 255
+
+/** 첨부 파일 ≤ 5MB */
+const ATTACHMENT_MAX_BYTES = 5 * 1024 * 1024
+
+/** 반려 사유 한 건의 댓글 스레드 + 작성 ViewModel */
+export function useReasonCommentThreadViewModel(
+  requestId: number,
+  reasonId: number,
+  enabled: boolean
+) {
+  const queryClient = useQueryClient()
+  const scope = useAuthStore(state => state.scope)
+  const attachment = useCertificateFilePick({ maxBytes: ATTACHMENT_MAX_BYTES })
+
+  const [comment, setComment] = useState('')
+  const [submitError, setSubmitError] = useState<string | null>(null)
+
+  const commentsKey = queryKeys.storeRegisterRequest.comments(
+    scope,
+    requestId,
+    reasonId
+  )
+
+  const query = useQuery({
+    queryKey: commentsKey,
+    queryFn: () => fetchWorkspaceReasonComments(scope, requestId, reasonId),
+    enabled: enabled && Number.isFinite(requestId) && Number.isFinite(reasonId),
+  })
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const trimmed = comment.trim()
+      let fileIds: string[] | undefined
+      if (attachment.file) {
+        const fileId = await uploadWorkspaceReasonCommentFile(
+          attachment.file,
+          scope
+        )
+        fileIds = [fileId]
+      }
+      await createWorkspaceReasonComment(scope, requestId, reasonId, {
+        comment: trimmed,
+        fileIds,
+      })
+    },
+    onSuccess: async () => {
+      setComment('')
+      attachment.clear()
+      await queryClient.invalidateQueries({ queryKey: commentsKey })
+    },
+    onError: (e: unknown) => {
+      setSubmitError(
+        getAxiosErrorMessage(
+          e,
+          '댓글을 등록하지 못했습니다. 잠시 후 다시 시도해 주세요.'
+        )
+      )
+    },
+  })
+
+  const onCommentChange = useCallback((value: string) => {
+    setSubmitError(null)
+    setComment(value.slice(0, COMMENT_MAX_LENGTH))
+  }, [])
+
+  const canSubmit =
+    comment.trim().length > 0 && !mutation.isPending && !attachment.error
+
+  const submit = useCallback(() => {
+    if (!canSubmit) return
+    setSubmitError(null)
+    mutation.mutate()
+  }, [canSubmit, mutation])
+
+  return {
+    comments: query.data ?? [],
+    isLoading: query.isPending && query.fetchStatus !== 'idle',
+    isError: query.isError,
+    comment,
+    onCommentChange,
+    attachment,
+    submitError,
+    isSubmitting: mutation.isPending,
+    canSubmit,
+    submit,
+  }
+}
diff --git a/src/features/store-register/hooks/useStoreRegisterReasonsViewModel.ts b/src/features/store-register/hooks/useStoreRegisterReasonsViewModel.ts
new file mode 100644
index 00000000..9150dd36
--- /dev/null
+++ b/src/features/store-register/hooks/useStoreRegisterReasonsViewModel.ts
@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query'
+import useAuthStore from '@/shared/stores/useAuthStore'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { fetchWorkspaceRequestReasons } from '@/features/store-register/api/workspaceRequests'
+
+/** 신청 상세의 반려 사유 목록 (최신순) */
+export function useStoreRegisterReasonsViewModel(
+  requestId: number,
+  enabled: boolean
+) {
+  const scope = useAuthStore(state => state.scope)
+
+  const query = useQuery({
+    queryKey: queryKeys.storeRegisterRequest.reasons(scope, requestId),
+    queryFn: () => fetchWorkspaceRequestReasons(scope, requestId),
+    enabled: enabled && Number.isFinite(requestId),
+  })
+
+  // 최신순 정렬 (createdAt 내림차순)
+  const reasons = [...(query.data ?? [])].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  )
+
+  return {
+    reasons,
+    isLoading: query.isPending && query.fetchStatus !== 'idle',
+    isError: query.isError,
+  }
+}
diff --git a/src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts b/src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts
new file mode 100644
index 00000000..159f0e92
--- /dev/null
+++ b/src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts
@@ -0,0 +1,95 @@
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import useAuthStore from '@/shared/stores/useAuthStore'
+import { logoutSession } from '@/shared/api/auth'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
+import { ROUTES } from '@/shared/constants/routes'
+import {
+  cancelWorkspaceRequest,
+  fetchWorkspaceRequestDetail,
+} from '@/features/store-register/api/workspaceRequests'
+
+/** 업장 등록 신청 상세 ViewModel — 상세 조회 + 취소 + 재로그인 */
+export function useStoreRegisterRequestDetailViewModel(requestId: number) {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const isLoggedIn = useAuthStore(state => state.isLoggedIn)
+  const scope = useAuthStore(state => state.scope)
+  const logout = useAuthStore(state => state.logout)
+
+  const [cancelError, setCancelError] = useState<string | null>(null)
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false)
+
+  const query = useQuery({
+    queryKey: queryKeys.storeRegisterRequest.detail(scope, requestId),
+    queryFn: () => fetchWorkspaceRequestDetail(scope, requestId),
+    enabled: isLoggedIn && Number.isFinite(requestId),
+  })
+
+  const cancelMutation = useMutation({
+    mutationFn: () => cancelWorkspaceRequest(scope, requestId),
+    onSuccess: async () => {
+      setIsConfirmOpen(false)
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.storeRegisterRequest.list(scope),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.storeRegisterRequest.detail(scope, requestId),
+        }),
+      ])
+    },
+    onError: (e: unknown) => {
+      setCancelError(
+        getAxiosErrorMessage(
+          e,
+          '신청을 취소하지 못했습니다. 잠시 후 다시 시도해 주세요.'
+        )
+      )
+    },
+  })
+
+  const openCancelConfirm = useCallback(() => {
+    setCancelError(null)
+    setIsConfirmOpen(true)
+  }, [])
+
+  const closeCancelConfirm = useCallback(() => {
+    if (cancelMutation.isPending) return
+    setIsConfirmOpen(false)
+  }, [cancelMutation.isPending])
+
+  const confirmCancel = useCallback(() => {
+    setCancelError(null)
+    cancelMutation.mutate()
+  }, [cancelMutation])
+
+  /** 승인 완료 시 사장님 계정으로 다시 로그인 — 세션 정리 후 로그인 화면 */
+  const reLogin = useCallback(async () => {
+    try {
+      await logoutSession(scope, isLoggedIn)
+    } catch {
+      // 서버 로그아웃 실패해도 로컬 세션은 정리
+    } finally {
+      logout()
+      navigate(ROUTES.AUTH.LOGIN, { replace: true })
+    }
+  }, [isLoggedIn, logout, navigate, scope])
+
+  return {
+    scope,
+    requestId,
+    detail: query.data ?? null,
+    isLoading: query.isPending && query.fetchStatus !== 'idle',
+    isError: query.isError,
+    isConfirmOpen,
+    isCanceling: cancelMutation.isPending,
+    cancelError,
+    openCancelConfirm,
+    closeCancelConfirm,
+    confirmCancel,
+    reLogin,
+  }
+}
diff --git a/src/features/store-register/hooks/useStoreRegisterRequestsViewModel.ts b/src/features/store-register/hooks/useStoreRegisterRequestsViewModel.ts
new file mode 100644
index 00000000..68205a5c
--- /dev/null
+++ b/src/features/store-register/hooks/useStoreRegisterRequestsViewModel.ts
@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query'
+import useAuthStore from '@/shared/stores/useAuthStore'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { fetchWorkspaceRequests } from '@/features/store-register/api/workspaceRequests'
+
+/** 업장 등록 신청 내역 목록 ViewModel */
+export function useStoreRegisterRequestsViewModel() {
+  const isLoggedIn = useAuthStore(state => state.isLoggedIn)
+  const scope = useAuthStore(state => state.scope)
+
+  const query = useQuery({
+    queryKey: queryKeys.storeRegisterRequest.list(scope),
+    queryFn: () => fetchWorkspaceRequests(scope),
+    enabled: isLoggedIn,
+    staleTime: 30_000,
+  })
+
+  return {
+    requests: query.data ?? [],
+    isLoading: query.isPending && query.fetchStatus !== 'idle',
+    isError: query.isError,
+    refetch: query.refetch,
+  }
+}
diff --git a/src/features/store-register/lib/formatDate.ts b/src/features/store-register/lib/formatDate.ts
new file mode 100644
index 00000000..f5497922
--- /dev/null
+++ b/src/features/store-register/lib/formatDate.ts
@@ -0,0 +1,21 @@
+/** ISO 문자열 → YYYY.MM.DD (유효하지 않으면 '-') */
+export function formatRequestDate(iso?: string | null): string {
+  if (!iso) return '-'
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return '-'
+  const yyyy = date.getFullYear()
+  const mm = String(date.getMonth() + 1).padStart(2, '0')
+  const dd = String(date.getDate()).padStart(2, '0')
+  return `${yyyy}.${mm}.${dd}`
+}
+
+/** ISO 문자열 → YYYY.MM.DD HH:mm (유효하지 않으면 '-') */
+export function formatRequestDateTime(iso?: string | null): string {
+  if (!iso) return '-'
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return '-'
+  const base = formatRequestDate(iso)
+  const hh = String(date.getHours()).padStart(2, '0')
+  const min = String(date.getMinutes()).padStart(2, '0')
+  return `${base} ${hh}:${min}`
+}
diff --git a/src/features/store-register/lib/requestStatus.ts b/src/features/store-register/lib/requestStatus.ts
new file mode 100644
index 00000000..c9120be2
--- /dev/null
+++ b/src/features/store-register/lib/requestStatus.ts
@@ -0,0 +1,46 @@
+import type { WorkspaceRequestStatusValue } from '@/features/store-register/types/workspaceRequests'
+
+export interface StatusBadgeStyle {
+  label: string
+  /** 배지 className (테두리·배경·글자색) */
+  badgeClass: string
+}
+
+const FALLBACK: StatusBadgeStyle = {
+  label: '확인 중',
+  badgeClass: 'border-line-1 bg-bg-dark text-text-70',
+}
+
+/** 4상태 배지 스타일 (SubstituteApprovalCard 패턴 참고) */
+const STATUS_STYLE: Record<WorkspaceRequestStatusValue, StatusBadgeStyle> = {
+  PENDING: {
+    label: '검토 중',
+    badgeClass: 'border-warning bg-warning-100 text-warning',
+  },
+  ACTIVATED: {
+    label: '승인 완료',
+    badgeClass: 'border-main bg-main-100 text-main',
+  },
+  REVOKED: {
+    label: '반려',
+    badgeClass: 'border-error bg-error/10 text-error',
+  },
+  CANCELED: {
+    label: '취소',
+    badgeClass: 'border-line-1 bg-bg-dark text-text-50',
+  },
+}
+
+/** status.value(서버) → 배지 스타일. description 이 있으면 라벨로 우선 사용 */
+export function resolveStatusBadge(status: {
+  value: string
+  description?: string
+}): StatusBadgeStyle {
+  const style = STATUS_STYLE[status.value as WorkspaceRequestStatusValue]
+  if (!style) {
+    return status.description
+      ? { ...FALLBACK, label: status.description }
+      : FALLBACK
+  }
+  return style
+}
diff --git a/src/features/store-register/ui/ReasonCard.tsx b/src/features/store-register/ui/ReasonCard.tsx
new file mode 100644
index 00000000..1173f747
--- /dev/null
+++ b/src/features/store-register/ui/ReasonCard.tsx
@@ -0,0 +1,62 @@
+import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
+import { useReasonCommentThreadViewModel } from '@/features/store-register/hooks/useReasonCommentThreadViewModel'
+import { ReasonCommentItem } from '@/features/store-register/ui/ReasonCommentItem'
+import { ReasonCommentComposer } from '@/features/store-register/ui/ReasonCommentComposer'
+import type { WorkspaceRequestReasonDto } from '@/features/store-register/types/workspaceRequests'
+
+type Props = {
+  requestId: number
+  reason: WorkspaceRequestReasonDto
+}
+
+/** 반려 사유 카드 + 댓글 스레드 + 입력창 */
+export function ReasonCard({ requestId, reason }: Props) {
+  const thread = useReasonCommentThreadViewModel(requestId, reason.id, true)
+
+  return (
+    <article className="rounded-2xl bg-white p-4 shadow-sm">
+      <div className="rounded-xl bg-error/5 px-3 py-3">
+        <p className="mb-1 typography-body02-semibold text-error">반려 사유</p>
+        <p className="whitespace-pre-wrap break-words typography-body02-regular text-text-100">
+          {reason.reason}
+        </p>
+        <p className="mt-1.5 typography-body02-regular text-text-50">
+          {formatRequestDateTime(reason.createdAt)}
+        </p>
+      </div>
+
+      <div className="mt-3 flex flex-col gap-3">
+        {thread.isLoading ? (
+          <p className="typography-body02-regular text-text-50">
+            댓글을 불러오는 중입니다.
+          </p>
+        ) : null}
+        {thread.isError ? (
+          <p className="typography-body02-regular text-error">
+            댓글을 불러오지 못했습니다.
+          </p>
+        ) : null}
+        {!thread.isLoading &&
+        !thread.isError &&
+        thread.comments.length === 0 ? (
+          <p className="typography-body02-regular text-text-50">
+            보강 자료를 댓글로 남기면 운영자가 재검토합니다.
+          </p>
+        ) : null}
+        {thread.comments.map(comment => (
+          <ReasonCommentItem key={comment.id} comment={comment} />
+        ))}
+      </div>
+
+      <ReasonCommentComposer
+        comment={thread.comment}
+        onCommentChange={thread.onCommentChange}
+        attachment={thread.attachment}
+        submitError={thread.submitError}
+        isSubmitting={thread.isSubmitting}
+        canSubmit={thread.canSubmit}
+        onSubmit={thread.submit}
+      />
+    </article>
+  )
+}
diff --git a/src/features/store-register/ui/ReasonCommentComposer.tsx b/src/features/store-register/ui/ReasonCommentComposer.tsx
new file mode 100644
index 00000000..d2d217a7
--- /dev/null
+++ b/src/features/store-register/ui/ReasonCommentComposer.tsx
@@ -0,0 +1,94 @@
+import { CERTIFICATE_ACCEPT_ATTR } from '@/shared/lib/certificateFileValidation'
+import type { CertificatePickState } from '@/features/store-register/ui/CertificateUploader'
+import { COMMENT_MAX_LENGTH } from '@/features/store-register/hooks/useReasonCommentThreadViewModel'
+
+type Props = {
+  comment: string
+  onCommentChange: (v: string) => void
+  attachment: CertificatePickState
+  submitError: string | null
+  isSubmitting: boolean
+  canSubmit: boolean
+  onSubmit: () => void
+}
+
+/** 댓글 입력창 — 255자 카운터 + 파일 첨부 + 전송 */
+export function ReasonCommentComposer({
+  comment,
+  onCommentChange,
+  attachment,
+  submitError,
+  isSubmitting,
+  canSubmit,
+  onSubmit,
+}: Props) {
+  const { file, error, inputRef, onInputChange, openPicker, clear } = attachment
+
+  return (
+    <div className="mt-4 rounded-2xl border border-line-1 bg-white p-3">
+      <input
+        ref={inputRef}
+        type="file"
+        className="sr-only"
+        accept={CERTIFICATE_ACCEPT_ATTR}
+        onChange={onInputChange}
+      />
+
+      <textarea
+        value={comment}
+        onChange={e => onCommentChange(e.target.value)}
+        placeholder="보강 자료에 대한 설명을 남겨 주세요."
+        rows={3}
+        maxLength={COMMENT_MAX_LENGTH}
+        className="w-full resize-none bg-transparent outline-none typography-body02-regular text-text-100 placeholder:text-text-50"
+      />
+
+      <div className="mt-1 flex items-center justify-between">
+        <button
+          type="button"
+          onClick={openPicker}
+          className="typography-body02-semibold text-main underline"
+        >
+          파일 첨부
+        </button>
+        <span className="typography-body02-regular text-text-50">
+          {comment.length}/{COMMENT_MAX_LENGTH}
+        </span>
+      </div>
+
+      {file ? (
+        <div className="mt-2 flex items-center gap-2 rounded-xl bg-bg-light px-3 py-2">
+          <span className="min-w-0 flex-1 truncate typography-body02-regular text-text-90">
+            {file.name}
+          </span>
+          <button
+            type="button"
+            onClick={clear}
+            className="shrink-0 typography-body02-semibold text-text-70 underline"
+          >
+            삭제
+          </button>
+        </div>
+      ) : null}
+
+      {error ? (
+        <p className="mt-2 typography-body02-regular text-error">{error}</p>
+      ) : null}
+
+      {submitError ? (
+        <p className="mt-2 typography-body02-regular text-error">
+          {submitError}
+        </p>
+      ) : null}
+
+      <button
+        type="button"
+        onClick={onSubmit}
+        disabled={!canSubmit}
+        className="mt-3 h-11 w-full rounded-xl bg-main typography-body01-semibold text-white disabled:cursor-not-allowed disabled:bg-text-50"
+      >
+        {isSubmitting ? '전송 중…' : '전송'}
+      </button>
+    </div>
+  )
+}
diff --git a/src/features/store-register/ui/ReasonCommentItem.tsx b/src/features/store-register/ui/ReasonCommentItem.tsx
new file mode 100644
index 00000000..fc06e173
--- /dev/null
+++ b/src/features/store-register/ui/ReasonCommentItem.tsx
@@ -0,0 +1,50 @@
+import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
+import type { WorkspaceReasonCommentDto } from '@/features/store-register/types/workspaceRequests'
+
+type Props = {
+  comment: WorkspaceReasonCommentDto
+}
+
+/** 댓글 한 건 — ADMIN 좌측 회색 / 본인 USER 우측 main 톤 */
+export function ReasonCommentItem({ comment }: Props) {
+  const isAdmin = comment.commentOwner === 'ADMIN'
+
+  return (
+    <div className={`flex flex-col ${isAdmin ? 'items-start' : 'items-end'}`}>
+      <div
+        className={`max-w-[80%] rounded-2xl px-3.5 py-2.5 ${
+          isAdmin
+            ? 'rounded-tl-sm bg-bg-dark text-text-100'
+            : 'rounded-tr-sm bg-main-100 text-text-100'
+        }`}
+      >
+        <span className="mb-1 block typography-body02-semibold text-text-70">
+          {isAdmin ? '운영자' : '나'}
+        </span>
+        {comment.comment ? (
+          <p className="whitespace-pre-wrap break-words typography-body02-regular">
+            {comment.comment}
+          </p>
+        ) : null}
+        {comment.files.length > 0 ? (
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {comment.files.map((file, index) => (
+              <a
+                key={file.fileId}
+                href={file.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center rounded-full border border-line-1 bg-white px-2.5 py-1 typography-body02-semibold text-main"
+              >
+                첨부 {comment.files.length > 1 ? index + 1 : ''}
+              </a>
+            ))}
+          </div>
+        ) : null}
+      </div>
+      <span className="mt-1 px-1 typography-body02-regular text-text-50">
+        {formatRequestDateTime(comment.createdAt)}
+      </span>
+    </div>
+  )
+}
diff --git a/src/features/store-register/ui/ReasonSection.tsx b/src/features/store-register/ui/ReasonSection.tsx
new file mode 100644
index 00000000..79fce208
--- /dev/null
+++ b/src/features/store-register/ui/ReasonSection.tsx
@@ -0,0 +1,42 @@
+import { useStoreRegisterReasonsViewModel } from '@/features/store-register/hooks/useStoreRegisterReasonsViewModel'
+import { ReasonCard } from '@/features/store-register/ui/ReasonCard'
+
+type Props = {
+  requestId: number
+}
+
+/** REVOKED 상태에서 노출되는 반려 사유 + 댓글 스레드 섹션 */
+export function ReasonSection({ requestId }: Props) {
+  const { reasons, isLoading, isError } = useStoreRegisterReasonsViewModel(
+    requestId,
+    true
+  )
+
+  return (
+    <section className="flex flex-col gap-3">
+      <h2 className="px-1 typography-headline03 text-text-100">반려 사유</h2>
+
+      {isLoading ? (
+        <p className="px-1 typography-body02-regular text-text-50">
+          반려 사유를 불러오는 중입니다.
+        </p>
+      ) : null}
+
+      {isError ? (
+        <p className="px-1 typography-body02-regular text-error">
+          반려 사유를 불러오지 못했습니다.
+        </p>
+      ) : null}
+
+      {!isLoading && !isError && reasons.length === 0 ? (
+        <p className="px-1 typography-body02-regular text-text-50">
+          등록된 반려 사유가 없습니다.
+        </p>
+      ) : null}
+
+      {reasons.map(reason => (
+        <ReasonCard key={reason.id} requestId={requestId} reason={reason} />
+      ))}
+    </section>
+  )
+}
diff --git a/src/features/store-register/ui/RequestDocumentsSection.tsx b/src/features/store-register/ui/RequestDocumentsSection.tsx
new file mode 100644
index 00000000..ff496285
--- /dev/null
+++ b/src/features/store-register/ui/RequestDocumentsSection.tsx
@@ -0,0 +1,75 @@
+import type { WorkspaceRequestDetailDto } from '@/features/store-register/types/workspaceRequests'
+
+type DocItem = {
+  label: string
+  url: string | null
+}
+
+/** presigned URL 의 경로 확장자가 이미지인지 (쿼리스트링 제외) */
+function looksLikeImage(url: string): boolean {
+  const path = url.split('?')[0].toLowerCase()
+  return /\.(jpg|jpeg|png|webp|heic|gif)$/.test(path)
+}
+
+function DocCard({ label, url }: DocItem) {
+  if (!url) {
+    return (
+      <div className="flex flex-col gap-2 rounded-2xl bg-white p-3 shadow-sm">
+        <p className="typography-body02-semibold text-text-100">{label}</p>
+        <div className="flex h-[120px] items-center justify-center rounded-xl bg-bg-light">
+          <span className="typography-body02-regular text-text-50">미첨부</span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex flex-col gap-2 rounded-2xl bg-white p-3 shadow-sm"
+    >
+      <p className="typography-body02-semibold text-text-100">{label}</p>
+      {looksLikeImage(url) ? (
+        <img
+          src={url}
+          alt={`${label} 미리보기`}
+          className="h-[120px] w-full rounded-xl object-cover"
+        />
+      ) : (
+        <div className="flex h-[120px] flex-col items-center justify-center gap-1 rounded-xl bg-bg-light">
+          <span className="typography-body01-semibold text-text-90">파일</span>
+          <span className="typography-body02-regular text-text-50">
+            탭하면 새 탭에서 열려요
+          </span>
+        </div>
+      )}
+      <span className="typography-body02-semibold text-main underline">
+        새 탭에서 열기
+      </span>
+    </a>
+  )
+}
+
+type Props = {
+  detail: WorkspaceRequestDetailDto
+}
+
+/** 증빙 서류 — presigned URL 그대로 새 탭/이미지로 열기 */
+export function RequestDocumentsSection({ detail }: Props) {
+  const docs: DocItem[] = [
+    { label: '사업자등록증명원', url: detail.workspaceCertFileUrl },
+    { label: '대표자 신분증', url: detail.workspaceOwnIdentityFileUrl },
+    { label: '위임장', url: detail.workspaceWarrantFileUrl },
+  ]
+
+  return (
+    <section className="flex flex-col gap-3">
+      <h2 className="px-1 typography-headline03 text-text-100">증빙 서류</h2>
+      {docs.map(doc => (
+        <DocCard key={doc.label} label={doc.label} url={doc.url} />
+      ))}
+    </section>
+  )
+}
diff --git a/src/features/store-register/ui/RequestInfoSection.tsx b/src/features/store-register/ui/RequestInfoSection.tsx
new file mode 100644
index 00000000..968ac428
--- /dev/null
+++ b/src/features/store-register/ui/RequestInfoSection.tsx
@@ -0,0 +1,37 @@
+import type { WorkspaceRequestDetailDto } from '@/features/store-register/types/workspaceRequests'
+
+type Props = {
+  detail: WorkspaceRequestDetailDto
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-start justify-between gap-4 py-2.5">
+      <span className="shrink-0 typography-body02-regular text-text-70">
+        {label}
+      </span>
+      <span className="min-w-0 flex-1 text-right typography-body02-semibold text-text-100">
+        {value || '-'}
+      </span>
+    </div>
+  )
+}
+
+/** 업장 정보 — 업장명·대표자성명·사업자번호·형태·연락처·주소 */
+export function RequestInfoSection({ detail }: Props) {
+  return (
+    <section className="rounded-2xl bg-white px-5 py-2 shadow-sm">
+      <InfoRow label="업장명" value={detail.businessName} />
+      <div className="border-t border-line-1" />
+      <InfoRow label="대표자 성명" value={detail.ownerName} />
+      <div className="border-t border-line-1" />
+      <InfoRow label="사업자등록번호" value={detail.businessRegistrationNo} />
+      <div className="border-t border-line-1" />
+      <InfoRow label="업종 형태" value={detail.businessType} />
+      <div className="border-t border-line-1" />
+      <InfoRow label="연락처" value={detail.contact} />
+      <div className="border-t border-line-1" />
+      <InfoRow label="주소" value={detail.fullAddress} />
+    </section>
+  )
+}
diff --git a/src/features/store-register/ui/StoreRequestListCard.tsx b/src/features/store-register/ui/StoreRequestListCard.tsx
new file mode 100644
index 00000000..30ef31c5
--- /dev/null
+++ b/src/features/store-register/ui/StoreRequestListCard.tsx
@@ -0,0 +1,32 @@
+import { formatRequestDate } from '@/features/store-register/lib/formatDate'
+import { StoreRequestStatusBadge } from '@/features/store-register/ui/StoreRequestStatusBadge'
+import type { WorkspaceRequestListItemDto } from '@/features/store-register/types/workspaceRequests'
+
+type Props = {
+  item: WorkspaceRequestListItemDto
+  onClick: () => void
+}
+
+/** 신청 내역 목록의 카드 한 건 */
+export function StoreRequestListCard({ item, onClick }: Props) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full flex-col gap-3 rounded-2xl bg-white px-5 py-4 text-left shadow-sm"
+    >
+      <div className="flex items-start justify-between gap-3">
+        <p className="min-w-0 flex-1 truncate typography-body01-semibold text-text-100">
+          {item.businessName}
+        </p>
+        <StoreRequestStatusBadge status={item.status} />
+      </div>
+      <p className="line-clamp-2 typography-body02-regular text-text-70">
+        {item.fullAddress}
+      </p>
+      <p className="typography-body02-regular text-text-50">
+        신청일 {formatRequestDate(item.createdAt)}
+      </p>
+    </button>
+  )
+}
diff --git a/src/features/store-register/ui/StoreRequestStatusBadge.tsx b/src/features/store-register/ui/StoreRequestStatusBadge.tsx
new file mode 100644
index 00000000..9df391e9
--- /dev/null
+++ b/src/features/store-register/ui/StoreRequestStatusBadge.tsx
@@ -0,0 +1,17 @@
+import { resolveStatusBadge } from '@/features/store-register/lib/requestStatus'
+
+type Props = {
+  status: { value: string; description?: string }
+}
+
+/** 신청 상태 배지 — 4상태(PENDING/ACTIVATED/REVOKED/CANCELED) */
+export function StoreRequestStatusBadge({ status }: Props) {
+  const { label, badgeClass } = resolveStatusBadge(status)
+  return (
+    <span
+      className={`inline-flex h-7 shrink-0 items-center justify-center rounded-[60px] border px-3 typography-body02-semibold ${badgeClass}`}
+    >
+      {label}
+    </span>
+  )
+}
diff --git a/src/pages/store-register/request-detail/index.tsx b/src/pages/store-register/request-detail/index.tsx
new file mode 100644
index 00000000..5160195c
--- /dev/null
+++ b/src/pages/store-register/request-detail/index.tsx
@@ -0,0 +1,127 @@
+import { useParams } from 'react-router-dom'
+import { Navbar } from '@/shared/ui/common/Navbar'
+import { AuthButton } from '@/shared/ui/common/AuthButton'
+import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
+import { useStoreRegisterRequestDetailViewModel } from '@/features/store-register/hooks/useStoreRegisterRequestDetailViewModel'
+import { StoreRequestStatusBadge } from '@/features/store-register/ui/StoreRequestStatusBadge'
+import { RequestInfoSection } from '@/features/store-register/ui/RequestInfoSection'
+import { RequestDocumentsSection } from '@/features/store-register/ui/RequestDocumentsSection'
+import { ReasonSection } from '@/features/store-register/ui/ReasonSection'
+import { formatRequestDate } from '@/features/store-register/lib/formatDate'
+
+function CancelButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="h-12 w-full rounded-xl border border-line-2 bg-white typography-body01-semibold text-text-70"
+    >
+      신청 취소
+    </button>
+  )
+}
+
+export function StoreRegisterRequestDetailPage() {
+  const params = useParams<{ requestId: string }>()
+  const requestId = Number(params.requestId)
+  const vm = useStoreRegisterRequestDetailViewModel(requestId)
+  const detail = vm.detail
+  const statusValue = detail?.status.value
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <Navbar variant="detail" title="신청 상세" />
+
+      <div className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-10 pt-4">
+        {vm.isLoading ? (
+          <p
+            className="mt-10 text-center typography-body02-regular text-text-70"
+            role="status"
+          >
+            신청 정보를 불러오는 중입니다.
+          </p>
+        ) : null}
+
+        {vm.isError ? (
+          <p
+            className="mt-10 text-center typography-body02-regular text-error"
+            role="alert"
+          >
+            신청 정보를 불러오지 못했습니다. 잠시 후 다시 시도해 주세요.
+          </p>
+        ) : null}
+
+        {detail ? (
+          <div className="flex flex-col gap-5">
+            <div className="flex items-center justify-between">
+              <StoreRequestStatusBadge status={detail.status} />
+              <span className="typography-body02-regular text-text-50">
+                신청일 {formatRequestDate(detail.createdAt)}
+              </span>
+            </div>
+
+            <RequestInfoSection detail={detail} />
+            <RequestDocumentsSection detail={detail} />
+
+            {statusValue === 'PENDING' ? (
+              <div className="flex flex-col gap-3">
+                <p className="rounded-2xl bg-white px-5 py-4 typography-body02-regular text-text-70 shadow-sm">
+                  운영자 검토 중입니다. 영업일 1일 이내 결과를 알려드려요.
+                </p>
+                <CancelButton onClick={vm.openCancelConfirm} />
+              </div>
+            ) : null}
+
+            {statusValue === 'ACTIVATED' ? (
+              <div className="flex flex-col gap-3">
+                <p className="rounded-2xl bg-main-100 px-5 py-4 typography-body02-regular text-sub shadow-sm">
+                  승인이 완료됐어요. 사장님 계정으로 다시 로그인하면 매장 관리를
+                  시작할 수 있어요.
+                </p>
+                <AuthButton
+                  type="button"
+                  style={{ width: '100%' }}
+                  onClick={() => vm.reLogin()}
+                >
+                  사장님 계정으로 다시 로그인
+                </AuthButton>
+              </div>
+            ) : null}
+
+            {statusValue === 'REVOKED' ? (
+              <div className="flex flex-col gap-5">
+                <ReasonSection requestId={requestId} />
+                <CancelButton onClick={vm.openCancelConfirm} />
+              </div>
+            ) : null}
+
+            {statusValue === 'CANCELED' ? (
+              <p className="rounded-2xl bg-white px-5 py-4 typography-body02-regular text-text-70 shadow-sm">
+                취소된 신청입니다.
+              </p>
+            ) : null}
+
+            {vm.cancelError ? (
+              <p className="typography-body02-regular text-error" role="alert">
+                {vm.cancelError}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+
+      <ConfirmModal
+        isOpen={vm.isConfirmOpen}
+        title="신청을 취소할까요?"
+        description="취소하면 되돌릴 수 없어요. 다시 신청하려면 새로 작성해야 해요."
+        confirmLabel="신청 취소"
+        cancelLabel="닫기"
+        isPending={vm.isCanceling}
+        onConfirm={vm.confirmCancel}
+        onClose={vm.closeCancelConfirm}
+      />
+    </div>
+  )
+}
+
+export default StoreRegisterRequestDetailPage
diff --git a/src/pages/store-register/requests/index.tsx b/src/pages/store-register/requests/index.tsx
new file mode 100644
index 00000000..1fc69642
--- /dev/null
+++ b/src/pages/store-register/requests/index.tsx
@@ -0,0 +1,91 @@
+import { useNavigate } from 'react-router-dom'
+import { Navbar } from '@/shared/ui/common/Navbar'
+import { AuthButton } from '@/shared/ui/common/AuthButton'
+import {
+  ROUTES,
+  storeRegisterRequestDetailPath,
+} from '@/shared/constants/routes'
+import { useStoreRegisterRequestsViewModel } from '@/features/store-register/hooks/useStoreRegisterRequestsViewModel'
+import { StoreRequestListCard } from '@/features/store-register/ui/StoreRequestListCard'
+
+export function StoreRegisterRequestsPage() {
+  const navigate = useNavigate()
+  const { requests, isLoading, isError } = useStoreRegisterRequestsViewModel()
+
+  const goNewRequest = () => navigate(ROUTES.MANAGER.STORE_REGISTER)
+  const isEmpty = !isLoading && !isError && requests.length === 0
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <Navbar variant="detail" title="업장 등록 신청 내역" />
+
+      <div className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-10 pt-4">
+        {isLoading ? (
+          <p
+            className="mt-10 text-center typography-body02-regular text-text-70"
+            role="status"
+          >
+            신청 내역을 불러오는 중입니다.
+          </p>
+        ) : null}
+
+        {isError ? (
+          <p
+            className="mt-10 text-center typography-body02-regular text-error"
+            role="alert"
+          >
+            신청 내역을 불러오지 못했습니다. 잠시 후 다시 시도해 주세요.
+          </p>
+        ) : null}
+
+        {isEmpty ? (
+          <div className="mt-16 flex flex-1 flex-col items-center justify-center gap-6 text-center">
+            <div>
+              <p className="mb-2 typography-headline03 text-text-100">
+                아직 신청한 업장이 없어요
+              </p>
+              <p className="typography-body02-regular text-text-70">
+                업장 등록을 신청하고 승인되면 사장님 계정으로 전환돼요.
+              </p>
+            </div>
+            <AuthButton
+              type="button"
+              style={{ width: '100%' }}
+              onClick={goNewRequest}
+            >
+              새 업장 등록 신청
+            </AuthButton>
+          </div>
+        ) : null}
+
+        {!isLoading && !isError && requests.length > 0 ? (
+          <>
+            <ul className="flex flex-col gap-3">
+              {requests.map(item => (
+                <li key={item.id}>
+                  <StoreRequestListCard
+                    item={item}
+                    onClick={() =>
+                      navigate(storeRegisterRequestDetailPath(item.id))
+                    }
+                  />
+                </li>
+              ))}
+            </ul>
+            <div className="mt-8">
+              <AuthButton
+                type="button"
+                style={{ width: '100%' }}
+                onClick={goNewRequest}
+              >
+                새 업장 등록 신청
+              </AuthButton>
+            </div>
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default StoreRegisterRequestsPage
diff --git a/tailwind.config.js b/tailwind.config.js
index 6a9fc3a3..c0d6bc01 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,6 +16,11 @@ export default {
       colors: {
         // 오류
         error: '#dc0000',
+        // 경고(검토 중 등)
+        warning: {
+          DEFAULT: '#e8920b',
+          100: '#fdf3e2',
+        },
         // 배경색
         'bg-light': '#f4f4f4',
         'bg-dark': '#efefef',

From cbbef5ef48867de82ded8314f88a7399a32619c4 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Thu, 11 Jun 2026 18:01:05 +0900
Subject: [PATCH 04/24] =?UTF-8?q?feat:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=9C=84=EC=A0=80=EB=93=9C=EC=97=90=20=EB=8C=80?=
 =?UTF-8?q?=ED=91=9C=EC=9E=90=20=EC=84=B1=EB=AA=85/=EC=9C=84=EC=9E=84?=
 =?UTF-8?q?=EC=9E=A5=20=EC=84=A0=ED=83=9D/=EC=9E=85=EB=A0=A5=20=EA=B2=80?=
 =?UTF-8?q?=EC=A6=9D=20=EB=B3=B4=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useStoreRegisterWizard.ts           | 73 +++++++++++++------
 src/features/store-register/lib/inputMask.ts  | 29 ++++++++
 .../store-register/ui/CertificateUploader.tsx | 17 ++++-
 .../ui/StoreBasicInfoFields.tsx               | 19 +++++
 src/pages/manager/store-register/index.tsx    | 38 +++++++---
 5 files changed, 140 insertions(+), 36 deletions(-)
 create mode 100644 src/features/store-register/lib/inputMask.ts

diff --git a/src/features/store-register/hooks/useStoreRegisterWizard.ts b/src/features/store-register/hooks/useStoreRegisterWizard.ts
index 2f4f1d0c..ca00722b 100644
--- a/src/features/store-register/hooks/useStoreRegisterWizard.ts
+++ b/src/features/store-register/hooks/useStoreRegisterWizard.ts
@@ -2,22 +2,31 @@ import { useCallback, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useQueryClient } from '@tanstack/react-query'
 import { useCertificateFilePick } from '@/shared/hooks/useCertificateFilePick'
+import useAuthStore from '@/shared/stores/useAuthStore'
 import { createWorkspaceRegistrationRequest } from '@/features/store-register/api/workspaceRequests'
 import { uploadWorkspaceRegistrationFile } from '@/features/store-register/api/workspaceFileUpload'
+import { maskBrn, maskContact } from '@/features/store-register/lib/inputMask'
 import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
+import { queryKeys } from '@/shared/lib/queryKeys'
 import { ROUTES } from '@/shared/constants/routes'
 
 type Step = 'info' | 'certificate' | 'done'
 
+/** 증명원: JPG/PNG/PDF ≤10MB, 신분증·위임장: ≤5MB */
+const CERTIFICATE_MAX_BYTES = 10 * 1024 * 1024
+const IDENTITY_MAX_BYTES = 5 * 1024 * 1024
+
 export function useStoreRegisterWizard() {
   const navigate = useNavigate()
   const queryClient = useQueryClient()
-  const certFile = useCertificateFilePick()
-  const identityFile = useCertificateFilePick()
-  const warrantFile = useCertificateFilePick()
+  const scope = useAuthStore(state => state.scope)
+  const certFile = useCertificateFilePick({ maxBytes: CERTIFICATE_MAX_BYTES })
+  const identityFile = useCertificateFilePick({ maxBytes: IDENTITY_MAX_BYTES })
+  const warrantFile = useCertificateFilePick({ maxBytes: IDENTITY_MAX_BYTES })
 
   const [step, setStep] = useState<Step>('info')
   const [bizName, setBizName] = useState('')
+  const [ownerName, setOwnerName] = useState('')
   const [brn, setBrn] = useState('')
   const [province, setProvince] = useState('')
   const [district, setDistrict] = useState('')
@@ -28,8 +37,15 @@ export function useStoreRegisterWizard() {
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
+  const setBrnMasked = useCallback((v: string) => setBrn(maskBrn(v)), [])
+  const setContactMasked = useCallback(
+    (v: string) => setContact(maskContact(v)),
+    []
+  )
+
   const infoValid =
     bizName.trim().length > 0 &&
+    ownerName.trim().length > 0 &&
     brn.trim().length > 0 &&
     province.trim().length > 0 &&
     district.trim().length > 0 &&
@@ -38,19 +54,14 @@ export function useStoreRegisterWizard() {
     type.trim().length > 0 &&
     contact.trim().length > 0
 
-  const certificateValid =
-    !!certFile.file && !!identityFile.file && !!warrantFile.file
+  // 위임장은 선택 — 증명원·신분증만 필수
+  const certificateValid = !!certFile.file && !!identityFile.file
 
   const goInfo = () => setStep('info')
   const goCertificate = () => setStep('certificate')
 
   const submit = useCallback(async () => {
-    if (
-      !certFile.file ||
-      !identityFile.file ||
-      !warrantFile.file ||
-      !infoValid
-    ) {
+    if (!certFile.file || !identityFile.file || !infoValid) {
       return
     }
 
@@ -59,17 +70,23 @@ export function useStoreRegisterWizard() {
     try {
       let workspaceCertFileId: string
       let workspaceOwnIdentityFileId: string
-      let workspaceWarrantFileId: string
+      let workspaceWarrantFileId: string | null = null
       try {
-        ;[
-          workspaceCertFileId,
-          workspaceOwnIdentityFileId,
-          workspaceWarrantFileId,
-        ] = await Promise.all([
-          uploadWorkspaceRegistrationFile(certFile.file, 'CERTIFICATE'),
-          uploadWorkspaceRegistrationFile(identityFile.file, 'OWN_IDENTITY'),
-          uploadWorkspaceRegistrationFile(warrantFile.file, 'WARRANT'),
+        ;[workspaceCertFileId, workspaceOwnIdentityFileId] = await Promise.all([
+          uploadWorkspaceRegistrationFile(certFile.file, 'CERTIFICATE', scope),
+          uploadWorkspaceRegistrationFile(
+            identityFile.file,
+            'OWN_IDENTITY',
+            scope
+          ),
         ])
+        if (warrantFile.file) {
+          workspaceWarrantFileId = await uploadWorkspaceRegistrationFile(
+            warrantFile.file,
+            'WARRANT',
+            scope
+          )
+        }
       } catch (e) {
         setSubmitError(
           getAxiosErrorMessage(
@@ -81,8 +98,9 @@ export function useStoreRegisterWizard() {
       }
 
       try {
-        await createWorkspaceRegistrationRequest({
+        await createWorkspaceRegistrationRequest(scope, {
           bizName,
+          ownerName,
           brn,
           province,
           district,
@@ -108,6 +126,9 @@ export function useStoreRegisterWizard() {
 
       await queryClient.invalidateQueries({ queryKey: ['managerWorkspace'] })
       await queryClient.invalidateQueries({ queryKey: ['workspace'] })
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.storeRegisterRequest.list(scope),
+      })
 
       setStep('done')
     } finally {
@@ -121,7 +142,9 @@ export function useStoreRegisterWizard() {
     district,
     identityFile.file,
     infoValid,
+    ownerName,
     province,
+    scope,
     town,
     type,
     warrantFile.file,
@@ -130,10 +153,12 @@ export function useStoreRegisterWizard() {
   ])
 
   const exitToHome = () => navigate(ROUTES.MANAGER.HOME)
+  const goRequests = () => navigate(ROUTES.STORE_REGISTER.REQUESTS)
 
   return {
     step,
     bizName,
+    ownerName,
     brn,
     province,
     district,
@@ -142,13 +167,14 @@ export function useStoreRegisterWizard() {
     type,
     contact,
     setBizName,
-    setBrn,
+    setOwnerName,
+    setBrn: setBrnMasked,
     setProvince,
     setDistrict,
     setTown,
     setAddress,
     setType,
-    setContact,
+    setContact: setContactMasked,
     certFile,
     identityFile,
     warrantFile,
@@ -160,5 +186,6 @@ export function useStoreRegisterWizard() {
     goCertificate,
     submit,
     exitToHome,
+    goRequests,
   }
 }
diff --git a/src/features/store-register/lib/inputMask.ts b/src/features/store-register/lib/inputMask.ts
new file mode 100644
index 00000000..d2b7f2b0
--- /dev/null
+++ b/src/features/store-register/lib/inputMask.ts
@@ -0,0 +1,29 @@
+/** 사업자등록번호 마스킹 — 000-00-00000 (숫자 10자리) */
+export function maskBrn(value: string): string {
+  const digits = value.replace(/\D/g, '').slice(0, 10)
+  const parts: string[] = []
+  parts.push(digits.slice(0, 3))
+  if (digits.length > 3) parts.push(digits.slice(3, 5))
+  if (digits.length > 5) parts.push(digits.slice(5, 10))
+  return parts.filter(Boolean).join('-')
+}
+
+/** 연락처 마스킹 — 숫자만, 하이픈 포함 최대 13자 (휴대폰·유선 공용) */
+export function maskContact(value: string): string {
+  const digits = value.replace(/\D/g, '').slice(0, 11)
+  if (digits.length < 4) return digits
+
+  // 02 지역번호(서울) 처리
+  if (digits.startsWith('02')) {
+    if (digits.length <= 5) return `${digits.slice(0, 2)}-${digits.slice(2)}`
+    if (digits.length <= 9)
+      return `${digits.slice(0, 2)}-${digits.slice(2, 5)}-${digits.slice(5)}`
+    return `${digits.slice(0, 2)}-${digits.slice(2, 6)}-${digits.slice(6, 10)}`
+  }
+
+  // 휴대폰·일반 지역번호(3자리)
+  if (digits.length <= 7) return `${digits.slice(0, 3)}-${digits.slice(3)}`
+  if (digits.length <= 10)
+    return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`
+  return `${digits.slice(0, 3)}-${digits.slice(3, 7)}-${digits.slice(7, 11)}`
+}
diff --git a/src/features/store-register/ui/CertificateUploader.tsx b/src/features/store-register/ui/CertificateUploader.tsx
index ea0d47f9..bd9a89c8 100644
--- a/src/features/store-register/ui/CertificateUploader.tsx
+++ b/src/features/store-register/ui/CertificateUploader.tsx
@@ -17,12 +17,23 @@ type Props = {
   certificate: CertificatePickState
   headline: string
   hint?: string
+  /** true면 헤드라인 옆에 "선택" 배지 노출 */
+  optional?: boolean
+}
+
+function OptionalBadge() {
+  return (
+    <span className="ml-2 inline-flex shrink-0 items-center rounded-full bg-bg-dark px-2 py-0.5 typography-body02-semibold text-text-70">
+      선택
+    </span>
+  )
 }
 
 export function CertificateUploader({
   certificate,
   headline,
   hint = '촬영·스캔 이미지(JPG·PNG 등) 또는 PDF · 최대 15MB',
+  optional = false,
 }: Props) {
   const {
     file,
@@ -51,8 +62,9 @@ export function CertificateUploader({
           onClick={openPicker}
           className="flex min-h-[140px] w-full flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-line-2 bg-white px-4 py-6"
         >
-          <span className="typography-headline03 text-center text-text-100">
+          <span className="flex items-center justify-center typography-headline03 text-center text-text-100">
             {headline}
+            {optional ? <OptionalBadge /> : null}
           </span>
           <span className="typography-body02-regular text-center text-text-70">
             {hint}
@@ -78,8 +90,9 @@ export function CertificateUploader({
               </div>
             )}
             <div className="flex min-w-0 flex-1 flex-col justify-center gap-2">
-              <p className="truncate typography-body01-semibold text-text-100">
+              <p className="flex items-center truncate typography-body01-semibold text-text-100">
                 {headline}
+                {optional ? <OptionalBadge /> : null}
               </p>
               <p className="truncate typography-body02-regular text-text-70">
                 {file.name}
diff --git a/src/features/store-register/ui/StoreBasicInfoFields.tsx b/src/features/store-register/ui/StoreBasicInfoFields.tsx
index dfd8501c..f07da4ac 100644
--- a/src/features/store-register/ui/StoreBasicInfoFields.tsx
+++ b/src/features/store-register/ui/StoreBasicInfoFields.tsx
@@ -2,6 +2,7 @@ import { AuthInput } from '@/shared/ui/common/AuthInput'
 
 type Props = {
   bizName: string
+  ownerName: string
   brn: string
   province: string
   district: string
@@ -10,6 +11,7 @@ type Props = {
   type: string
   contact: string
   onBizNameChange: (v: string) => void
+  onOwnerNameChange: (v: string) => void
   onBrnChange: (v: string) => void
   onProvinceChange: (v: string) => void
   onDistrictChange: (v: string) => void
@@ -21,6 +23,7 @@ type Props = {
 
 export function StoreBasicInfoFields({
   bizName,
+  ownerName,
   brn,
   province,
   district,
@@ -29,6 +32,7 @@ export function StoreBasicInfoFields({
   type,
   contact,
   onBizNameChange,
+  onOwnerNameChange,
   onBrnChange,
   onProvinceChange,
   onDistrictChange,
@@ -46,12 +50,25 @@ export function StoreBasicInfoFields({
         onChange={e => onBizNameChange(e.target.value)}
         autoComplete="organization"
       />
+      <div className="flex flex-col gap-1">
+        <AuthInput
+          type="text"
+          placeholder="대표자 성명"
+          value={ownerName}
+          onChange={e => onOwnerNameChange(e.target.value)}
+          autoComplete="name"
+        />
+        <p className="px-1 typography-body02-regular text-text-70">
+          제출하는 신분증의 성명과 동일하게 입력해 주세요.
+        </p>
+      </div>
       <AuthInput
         type="text"
         placeholder="사업자등록번호 (예: 123-45-67890)"
         value={brn}
         onChange={e => onBrnChange(e.target.value)}
         inputMode="numeric"
+        maxLength={12}
       />
       <AuthInput
         type="text"
@@ -64,6 +81,8 @@ export function StoreBasicInfoFields({
         placeholder="매장 연락처 (유선 또는 휴대폰)"
         value={contact}
         onChange={e => onContactChange(e.target.value)}
+        inputMode="numeric"
+        maxLength={13}
         autoComplete="tel"
       />
       <AuthInput
diff --git a/src/pages/manager/store-register/index.tsx b/src/pages/manager/store-register/index.tsx
index 9ef9896a..856807c5 100644
--- a/src/pages/manager/store-register/index.tsx
+++ b/src/pages/manager/store-register/index.tsx
@@ -57,6 +57,7 @@ export function StoreRegisterPage() {
             </header>
             <StoreBasicInfoFields
               bizName={w.bizName}
+              ownerName={w.ownerName}
               brn={w.brn}
               province={w.province}
               district={w.district}
@@ -65,6 +66,7 @@ export function StoreRegisterPage() {
               type={w.type}
               contact={w.contact}
               onBizNameChange={w.setBizName}
+              onOwnerNameChange={w.setOwnerName}
               onBrnChange={w.setBrn}
               onProvinceChange={w.setProvince}
               onDistrictChange={w.setDistrict}
@@ -98,21 +100,26 @@ export function StoreRegisterPage() {
               </h1>
               <p className="typography-body02-regular text-text-70">
                 각 서류를 선택하면 먼저 서버에 올린 뒤, 신청 정보와 함께
-                제출돼요.
+                제출돼요. 증명원은 발급 7일 이내 원본을 올려 주세요. 모바일
+                신분증은 인정되지 않아요. 운영자 검토는 1영업일 이내 진행돼요.
               </p>
             </header>
             <div className="flex flex-col gap-8">
               <CertificateUploader
                 certificate={w.certFile}
                 headline="사업자등록증명원"
+                hint="JPG·PNG 이미지 또는 PDF · 최대 10MB"
               />
               <CertificateUploader
                 certificate={w.identityFile}
                 headline="대표자 신분증"
+                hint="JPG·PNG 이미지 · 최대 5MB · 모바일 신분증 불가"
               />
               <CertificateUploader
                 certificate={w.warrantFile}
-                headline="위임장(해당되는 경우)"
+                headline="위임장"
+                hint="대리 신청 시에만 · JPG·PNG·PDF · 최대 5MB"
+                optional
               />
             </div>
             {w.submitError ? (
@@ -154,17 +161,26 @@ export function StoreRegisterPage() {
                 신청을 접수했어요
               </h1>
               <p className="typography-body02-regular text-text-70">
-                운영자 검토 후 승인되면 사장님 홈에서 매장이 연결돼요.
+                운영자 검토 후 승인되면 사장님 계정으로 전환돼요. 진행 상태는
+                신청 내역에서 확인할 수 있어요.
               </p>
             </div>
-            <AuthButton
-              type="button"
-              className="mt-8"
-              style={{ width: '100%' }}
-              onClick={() => w.exitToHome()}
-            >
-              확인
-            </AuthButton>
+            <div className="mt-8 flex flex-col gap-3">
+              <AuthButton
+                type="button"
+                style={{ width: '100%' }}
+                onClick={() => w.goRequests()}
+              >
+                신청 내역 보기
+              </AuthButton>
+              <button
+                type="button"
+                className="typography-body02-semibold text-text-70 underline"
+                onClick={() => w.exitToHome()}
+              >
+                홈으로
+              </button>
+            </div>
           </>
         ) : null}
       </div>

From 882a4abdddbb5b1fc659925c5bfd6144ff24e37a Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Thu, 11 Jun 2026 18:01:08 +0900
Subject: [PATCH 05/24] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=82=AC=EC=9E=A5=EB=8B=98=20?=
 =?UTF-8?q?=EA=B3=84=EC=A0=95=20=EC=A0=84=ED=99=98(=EC=97=85=EC=9E=A5=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EC=8B=A0=EC=B2=AD=20=EB=82=B4=EC=97=AD)?=
 =?UTF-8?q?=20=EC=A7=84=EC=9E=85=EC=A0=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/my/index.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/pages/my/index.tsx b/src/pages/my/index.tsx
index b46f5dbf..9ec0abb2 100644
--- a/src/pages/my/index.tsx
+++ b/src/pages/my/index.tsx
@@ -28,7 +28,13 @@ const MENU_ITEMS: MenuItem[] = [
     key: 'store-apply',
     label: '업장 등록 신청',
     icon: StoreIcon,
-    path: '/my/store-apply',
+    path: ROUTES.MANAGER.STORE_REGISTER,
+  },
+  {
+    key: 'manager-switch',
+    label: '사장님 계정으로 전환',
+    icon: StoreIcon,
+    path: ROUTES.STORE_REGISTER.REQUESTS,
   },
   {
     key: 'support',
@@ -136,6 +142,12 @@ export function MyPage() {
           ))}
         </nav>
 
+        {!isManager && (
+          <p className="mt-2 px-1 typography-body03-regular text-text-70">
+            승인 완료 후 사장님 계정 전환이 활성화됩니다.
+          </p>
+        )}
+
         <div className="mt-6 flex items-center gap-4 pb-6">
           <button
             type="button"

From dbb39fa3e321b7a22fcf340bdf1353da0fd73e62 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Tue, 16 Jun 2026 19:34:12 +0900
Subject: [PATCH 06/24] =?UTF-8?q?feat:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=8B=A0=EC=B2=AD=20=ED=94=8C=EB=A1=9C=EC=9A=B0=20?=
 =?UTF-8?q?=EA=B3=B5=EC=9A=A9=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=88=20=EB=B0=8F=20=ED=8C=8C=EC=9D=BC=20=ED=81=AC=EA=B8=B0?=
 =?UTF-8?q?=20=ED=8F=AC=EB=A7=A4=ED=8C=85=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

---
 .../store-register/lib/formatFileSize.ts      |  10 +
 src/features/store-register/ui/icons.tsx      | 222 ++++++++++++++++++
 2 files changed, 232 insertions(+)
 create mode 100644 src/features/store-register/lib/formatFileSize.ts
 create mode 100644 src/features/store-register/ui/icons.tsx

diff --git a/src/features/store-register/lib/formatFileSize.ts b/src/features/store-register/lib/formatFileSize.ts
new file mode 100644
index 00000000..29b6ad44
--- /dev/null
+++ b/src/features/store-register/lib/formatFileSize.ts
@@ -0,0 +1,10 @@
+/** 바이트 → 사람이 읽는 크기 (예: 1.2MB / 820KB) */
+export function formatFileSize(bytes: number): string {
+  if (bytes >= 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`
+  }
+  if (bytes >= 1024) {
+    return `${Math.round(bytes / 1024)}KB`
+  }
+  return `${bytes}B`
+}
diff --git a/src/features/store-register/ui/icons.tsx b/src/features/store-register/ui/icons.tsx
new file mode 100644
index 00000000..c424affb
--- /dev/null
+++ b/src/features/store-register/ui/icons.tsx
@@ -0,0 +1,222 @@
+/**
+ * 업장 등록 신청 플로우 전용 라인 아이콘 — viewBox 24, stroke 1.5px(currentColor).
+ * 색상은 부모의 text-* 클래스로 제어한다.
+ */
+import type { ReactNode } from 'react'
+
+type IconProps = {
+  width?: number
+  height?: number
+  className?: string
+}
+
+function Svg({
+  width = 24,
+  height = 24,
+  className,
+  children,
+}: IconProps & { children: ReactNode }) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      aria-hidden="true"
+      focusable="false"
+      className={className}
+    >
+      {children}
+    </svg>
+  )
+}
+
+/** 업로드(트레이로 향하는 화살표) */
+export function UploadIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path
+        d="M12 16V4M12 4l-4 4M12 4l4 4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M5 16v3a1 1 0 001 1h12a1 1 0 001-1v-3" strokeLinecap="round" />
+    </Svg>
+  )
+}
+
+/** 문서 */
+export function FileIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path
+        d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5z"
+        strokeLinejoin="round"
+      />
+      <path d="M14 3v5h5" strokeLinejoin="round" />
+    </Svg>
+  )
+}
+
+/** 신분증 */
+export function IdCardIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="3" y="6" width="18" height="12" rx="2" />
+      <circle cx="8.5" cy="12" r="2" />
+      <path d="M14 10.5h4M14 13.5h4" strokeLinecap="round" />
+    </Svg>
+  )
+}
+
+/** 전송(종이비행기) */
+export function SendIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path
+        d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}
+
+/** 클립(파일 첨부) */
+export function PaperclipIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path
+        d="M20.5 11.5l-8 8a4.5 4.5 0 01-6.4-6.4l8.5-8.5a3 3 0 014.2 4.2l-8.5 8.5a1.5 1.5 0 01-2.1-2.1l7.8-7.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}
+
+/** 체크 표시가 든 원(승인·완료) */
+export function CheckCircleIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path
+        d="M8.5 12l2.2 2.2L15.5 9.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}
+
+/** 시계(검토 중·소요 안내) */
+export function ClockIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 8v4l2.5 2" strokeLinecap="round" strokeLinejoin="round" />
+    </Svg>
+  )
+}
+
+/** 경고 삼각형(반려 사유) */
+export function WarningTriangleIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M12 4l9 16H3l9-16z" strokeLinejoin="round" />
+      <path d="M12 10v4M12 17h.01" strokeLinecap="round" />
+    </Svg>
+  )
+}
+
+/** X가 든 원(취소) */
+export function XCircleIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M8.5 8.5l7 7M15.5 8.5l-7 7" strokeLinecap="round" />
+    </Svg>
+  )
+}
+
+/** 느낌표가 든 원(오류·검증) */
+export function AlertCircleIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v6M12 16h.01" strokeLinecap="round" />
+    </Svg>
+  )
+}
+
+/** 새로고침(다시 시도) */
+export function RefreshIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path
+        d="M20 12a8 8 0 11-2.3-5.6M20 4v4h-4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}
+
+/** 문서 + 플러스(빈 신청 내역) */
+export function DocPlusIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path
+        d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5z"
+        strokeLinejoin="round"
+      />
+      <path d="M14 3v5h5" strokeLinejoin="round" />
+      <path d="M12 11v6M9 14h6" strokeLinecap="round" />
+    </Svg>
+  )
+}
+
+/** 말풍선(재심사 문의 안내) */
+export function ChatIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M8 10h8M8 14h5" strokeLinecap="round" />
+      <path
+        d="M21 12a9 9 0 11-3.5-7.1L21 4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}
+
+/** 닫기(파일 삭제) */
+export function CloseIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
+    </Svg>
+  )
+}
+
+/** 더하기(새 신청) — 굵은 1.8 */
+export function PlusIcon({ width = 20, height = 20, className }: IconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      aria-hidden="true"
+      focusable="false"
+      className={className}
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  )
+}

From 1370f0daa9ff12f7e56320528624a3a9afca7732 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Tue, 16 Jun 2026 19:34:14 +0900
Subject: [PATCH 07/24] =?UTF-8?q?feat:=20=EC=8B=A0=EC=B2=AD=20=EB=82=B4?=
 =?UTF-8?q?=EC=97=AD=20=EB=AA=A9=EB=A1=9D=20=ED=99=94=EB=A9=B4=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A0=95=EB=A0=AC=20(=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC,=20=EC=8A=A4=EC=BC=88?=
 =?UTF-8?q?=EB=A0=88=ED=86=A4=20=EB=A1=9C=EB=94=A9,=20=EC=97=90=EB=9F=AC/?=
 =?UTF-8?q?=EB=B9=88=20=EC=83=81=ED=83=9C,=20=EA=B3=A0=EC=A0=95=20CTA)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store-register/ui/RequestListSkeleton.tsx |  25 ++++
 .../ui/StoreRequestListCard.tsx               |  10 +-
 src/pages/store-register/requests/index.tsx   | 124 ++++++++++--------
 3 files changed, 99 insertions(+), 60 deletions(-)
 create mode 100644 src/features/store-register/ui/RequestListSkeleton.tsx

diff --git a/src/features/store-register/ui/RequestListSkeleton.tsx b/src/features/store-register/ui/RequestListSkeleton.tsx
new file mode 100644
index 00000000..32c92dd6
--- /dev/null
+++ b/src/features/store-register/ui/RequestListSkeleton.tsx
@@ -0,0 +1,25 @@
+/** 신청 내역 목록 로딩 스켈레톤 — 카드 3개 */
+function SkeletonCard() {
+  return (
+    <div className="rounded-xl border border-line-1 bg-white p-4">
+      <div className="flex items-center justify-between gap-2">
+        <span className="h-[18px] w-[120px] rounded-md bg-bg-dark" />
+        <span className="h-7 w-16 rounded-full bg-bg-dark" />
+      </div>
+      <span className="mt-3 block h-[14px] w-4/5 rounded-md bg-bg-dark" />
+      <span className="mt-2 block h-3 w-2/5 rounded-md bg-bg-dark" />
+    </div>
+  )
+}
+
+export function RequestListSkeleton() {
+  return (
+    <ul className="flex animate-pulse flex-col gap-3" aria-hidden>
+      {[0, 1, 2].map(i => (
+        <li key={i}>
+          <SkeletonCard />
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/src/features/store-register/ui/StoreRequestListCard.tsx b/src/features/store-register/ui/StoreRequestListCard.tsx
index 30ef31c5..664ec4fd 100644
--- a/src/features/store-register/ui/StoreRequestListCard.tsx
+++ b/src/features/store-register/ui/StoreRequestListCard.tsx
@@ -13,19 +13,19 @@ export function StoreRequestListCard({ item, onClick }: Props) {
     <button
       type="button"
       onClick={onClick}
-      className="flex w-full flex-col gap-3 rounded-2xl bg-white px-5 py-4 text-left shadow-sm"
+      className="block w-full rounded-xl border border-line-1 bg-white p-4 text-left transition-transform active:scale-[0.99]"
     >
-      <div className="flex items-start justify-between gap-3">
+      <div className="flex items-center justify-between gap-2">
         <p className="min-w-0 flex-1 truncate typography-body01-semibold text-text-100">
           {item.businessName}
         </p>
         <StoreRequestStatusBadge status={item.status} />
       </div>
-      <p className="line-clamp-2 typography-body02-regular text-text-70">
+      <p className="mt-2 truncate typography-body02-regular text-text-70">
         {item.fullAddress}
       </p>
-      <p className="typography-body02-regular text-text-50">
-        신청일 {formatRequestDate(item.createdAt)}
+      <p className="mt-1.5 typography-body03-regular text-text-50">
+        {formatRequestDate(item.createdAt)} 신청
       </p>
     </button>
   )
diff --git a/src/pages/store-register/requests/index.tsx b/src/pages/store-register/requests/index.tsx
index 1fc69642..c256e27a 100644
--- a/src/pages/store-register/requests/index.tsx
+++ b/src/pages/store-register/requests/index.tsx
@@ -7,83 +7,97 @@ import {
 } from '@/shared/constants/routes'
 import { useStoreRegisterRequestsViewModel } from '@/features/store-register/hooks/useStoreRegisterRequestsViewModel'
 import { StoreRequestListCard } from '@/features/store-register/ui/StoreRequestListCard'
+import { RequestListSkeleton } from '@/features/store-register/ui/RequestListSkeleton'
+import {
+  AlertCircleIcon,
+  DocPlusIcon,
+  PlusIcon,
+  RefreshIcon,
+} from '@/features/store-register/ui/icons'
 
 export function StoreRegisterRequestsPage() {
   const navigate = useNavigate()
-  const { requests, isLoading, isError } = useStoreRegisterRequestsViewModel()
+  const { requests, isLoading, isError, refetch } =
+    useStoreRegisterRequestsViewModel()
 
   const goNewRequest = () => navigate(ROUTES.MANAGER.STORE_REGISTER)
   const isEmpty = !isLoading && !isError && requests.length === 0
+  const hasRequests = !isLoading && !isError && requests.length > 0
 
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
       <Navbar variant="detail" title="업장 등록 신청 내역" />
 
-      <div className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-10 pt-4">
-        {isLoading ? (
-          <p
-            className="mt-10 text-center typography-body02-regular text-text-70"
-            role="status"
-          >
-            신청 내역을 불러오는 중입니다.
-          </p>
-        ) : null}
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-28 pt-4">
+        {isLoading ? <RequestListSkeleton /> : null}
 
         {isError ? (
-          <p
-            className="mt-10 text-center typography-body02-regular text-error"
+          <div
+            className="flex flex-1 flex-col items-center justify-center gap-2 text-center"
             role="alert"
           >
-            신청 내역을 불러오지 못했습니다. 잠시 후 다시 시도해 주세요.
-          </p>
+            <span className="mb-2 flex h-20 w-20 items-center justify-center rounded-full bg-bg-dark text-text-70">
+              <AlertCircleIcon className="size-[34px]" />
+            </span>
+            <p className="typography-body01-semibold text-text-100">
+              목록을 불러오지 못했어요
+            </p>
+            <p className="max-w-[240px] typography-body02-regular text-text-70">
+              네트워크 연결을 확인한 뒤 다시 시도해 주세요.
+            </p>
+            <button
+              type="button"
+              onClick={() => refetch()}
+              className="mt-3.5 flex h-12 items-center justify-center gap-2 rounded-xl border border-line-2 bg-white px-6 typography-body02-semibold text-text-90"
+            >
+              <RefreshIcon className="size-[18px]" />
+              다시 시도
+            </button>
+          </div>
         ) : null}
 
         {isEmpty ? (
-          <div className="mt-16 flex flex-1 flex-col items-center justify-center gap-6 text-center">
-            <div>
-              <p className="mb-2 typography-headline03 text-text-100">
-                아직 신청한 업장이 없어요
-              </p>
-              <p className="typography-body02-regular text-text-70">
-                업장 등록을 신청하고 승인되면 사장님 계정으로 전환돼요.
-              </p>
-            </div>
-            <AuthButton
-              type="button"
-              style={{ width: '100%' }}
-              onClick={goNewRequest}
-            >
-              새 업장 등록 신청
-            </AuthButton>
+          <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center">
+            <span className="mb-2 flex h-20 w-20 items-center justify-center rounded-full bg-main-100 text-main">
+              <DocPlusIcon className="size-9" />
+            </span>
+            <p className="typography-body01-semibold text-text-100">
+              아직 등록 신청 내역이 없어요
+            </p>
+            <p className="max-w-[240px] typography-body02-regular text-text-70">
+              업장을 등록하고 운영자 승인 후 사장님 계정으로 전환해 보세요.
+            </p>
           </div>
         ) : null}
 
-        {!isLoading && !isError && requests.length > 0 ? (
-          <>
-            <ul className="flex flex-col gap-3">
-              {requests.map(item => (
-                <li key={item.id}>
-                  <StoreRequestListCard
-                    item={item}
-                    onClick={() =>
-                      navigate(storeRegisterRequestDetailPath(item.id))
-                    }
-                  />
-                </li>
-              ))}
-            </ul>
-            <div className="mt-8">
-              <AuthButton
-                type="button"
-                style={{ width: '100%' }}
-                onClick={goNewRequest}
-              >
-                새 업장 등록 신청
-              </AuthButton>
-            </div>
-          </>
+        {hasRequests ? (
+          <ul className="flex flex-col gap-3">
+            {requests.map(item => (
+              <li key={item.id}>
+                <StoreRequestListCard
+                  item={item}
+                  onClick={() =>
+                    navigate(storeRegisterRequestDetailPath(item.id))
+                  }
+                />
+              </li>
+            ))}
+          </ul>
         ) : null}
-      </div>
+      </main>
+
+      {isEmpty || hasRequests ? (
+        <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
+            type="button"
+            className="flex items-center justify-center gap-2"
+            onClick={goNewRequest}
+          >
+            {hasRequests ? <PlusIcon /> : null}
+            {hasRequests ? '새 업장 등록 신청' : '업장 등록 신청하기'}
+          </AuthButton>
+        </div>
+      ) : null}
     </div>
   )
 }

From f11f3935acf689148b0fde1736455845ce538ae4 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Tue, 16 Jun 2026 19:34:15 +0900
Subject: [PATCH 08/24] =?UTF-8?q?feat:=20=EC=8B=A0=EC=B2=AD=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=99=94=EB=A9=B4=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=A0=95=EB=A0=AC=20(=EC=83=81=ED=83=9C=EB=B3=84?=
 =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EB=B0=95=EC=8A=A4,=20=EC=84=9C?=
 =?UTF-8?q?=EB=A5=98=20=EC=8D=B8=EB=84=A4=EC=9D=BC=20=ED=96=89,=20Spinner?=
 =?UTF-8?q?=20=EB=A1=9C=EB=8D=94)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/RequestDocumentsSection.tsx            | 114 ++++++++++------
 .../store-register/ui/RequestInfoSection.tsx  |  29 ++--
 .../store-register/request-detail/index.tsx   | 128 +++++++++++-------
 3 files changed, 163 insertions(+), 108 deletions(-)

diff --git a/src/features/store-register/ui/RequestDocumentsSection.tsx b/src/features/store-register/ui/RequestDocumentsSection.tsx
index ff496285..e258fde2 100644
--- a/src/features/store-register/ui/RequestDocumentsSection.tsx
+++ b/src/features/store-register/ui/RequestDocumentsSection.tsx
@@ -1,75 +1,99 @@
+import type { ReactNode } from 'react'
+import { FileIcon, IdCardIcon } from '@/features/store-register/ui/icons'
 import type { WorkspaceRequestDetailDto } from '@/features/store-register/types/workspaceRequests'
 
 type DocItem = {
   label: string
   url: string | null
+  icon: ReactNode
 }
 
-/** presigned URL 의 경로 확장자가 이미지인지 (쿼리스트링 제외) */
-function looksLikeImage(url: string): boolean {
-  const path = url.split('?')[0].toLowerCase()
-  return /\.(jpg|jpeg|png|webp|heic|gif)$/.test(path)
-}
-
-function DocCard({ label, url }: DocItem) {
-  if (!url) {
-    return (
-      <div className="flex flex-col gap-2 rounded-2xl bg-white p-3 shadow-sm">
-        <p className="typography-body02-semibold text-text-100">{label}</p>
-        <div className="flex h-[120px] items-center justify-center rounded-xl bg-bg-light">
-          <span className="typography-body02-regular text-text-50">미첨부</span>
-        </div>
-      </div>
-    )
-  }
-
+/** 첨부된 서류 — 탭하면 presigned URL 을 새 탭에서 연다 */
+function AttachedDoc({
+  label,
+  url,
+  icon,
+}: {
+  label: string
+  url: string
+  icon: ReactNode
+}) {
   return (
     <a
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex flex-col gap-2 rounded-2xl bg-white p-3 shadow-sm"
+      className="flex items-center gap-3 rounded-xl border border-line-1 bg-white p-3"
     >
-      <p className="typography-body02-semibold text-text-100">{label}</p>
-      {looksLikeImage(url) ? (
-        <img
-          src={url}
-          alt={`${label} 미리보기`}
-          className="h-[120px] w-full rounded-xl object-cover"
-        />
-      ) : (
-        <div className="flex h-[120px] flex-col items-center justify-center gap-1 rounded-xl bg-bg-light">
-          <span className="typography-body01-semibold text-text-90">파일</span>
-          <span className="typography-body02-regular text-text-50">
-            탭하면 새 탭에서 열려요
-          </span>
-        </div>
-      )}
-      <span className="typography-body02-semibold text-main underline">
-        새 탭에서 열기
+      <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-main-100 text-main">
+        {icon}
       </span>
+      <div className="min-w-0 flex-1">
+        <p className="typography-body02-semibold text-text-100">{label}</p>
+        <p className="truncate typography-body03-regular text-text-50">
+          탭하여 새 탭에서 열기
+        </p>
+      </div>
     </a>
   )
 }
 
+/** 미첨부 서류 — 점선 보더 + 회색 아이콘 */
+function MissingDoc({ label, icon }: { label: string; icon: ReactNode }) {
+  return (
+    <div className="flex items-center gap-3 rounded-xl border border-dashed border-line-2 p-3">
+      <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-bg-light text-text-50">
+        {icon}
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="typography-body02-semibold text-text-70">{label}</p>
+        <p className="typography-body03-regular text-text-50">미첨부</p>
+      </div>
+    </div>
+  )
+}
+
 type Props = {
   detail: WorkspaceRequestDetailDto
 }
 
-/** 증빙 서류 — presigned URL 그대로 새 탭/이미지로 열기 */
+/** 증빙 서류 — 사업자등록증명원 / 대표자 신분증 / 위임장 */
 export function RequestDocumentsSection({ detail }: Props) {
   const docs: DocItem[] = [
-    { label: '사업자등록증명원', url: detail.workspaceCertFileUrl },
-    { label: '대표자 신분증', url: detail.workspaceOwnIdentityFileUrl },
-    { label: '위임장', url: detail.workspaceWarrantFileUrl },
+    {
+      label: '사업자등록증명원',
+      url: detail.workspaceCertFileUrl,
+      icon: <FileIcon className="size-5" />,
+    },
+    {
+      label: '대표자 신분증',
+      url: detail.workspaceOwnIdentityFileUrl,
+      icon: <IdCardIcon className="size-5" />,
+    },
+    {
+      label: '위임장',
+      url: detail.workspaceWarrantFileUrl,
+      icon: <FileIcon className="size-5" />,
+    },
   ]
 
   return (
-    <section className="flex flex-col gap-3">
-      <h2 className="px-1 typography-headline03 text-text-100">증빙 서류</h2>
-      {docs.map(doc => (
-        <DocCard key={doc.label} label={doc.label} url={doc.url} />
-      ))}
+    <section className="flex flex-col gap-2.5">
+      <h2 className="typography-headline03 text-text-100">증빙 서류</h2>
+      <div className="flex flex-col gap-2.5">
+        {docs.map(doc =>
+          doc.url ? (
+            <AttachedDoc
+              key={doc.label}
+              label={doc.label}
+              url={doc.url}
+              icon={doc.icon}
+            />
+          ) : (
+            <MissingDoc key={doc.label} label={doc.label} icon={doc.icon} />
+          )
+        )}
+      </div>
     </section>
   )
 }
diff --git a/src/features/store-register/ui/RequestInfoSection.tsx b/src/features/store-register/ui/RequestInfoSection.tsx
index 968ac428..8d18a666 100644
--- a/src/features/store-register/ui/RequestInfoSection.tsx
+++ b/src/features/store-register/ui/RequestInfoSection.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 function InfoRow({ label, value }: { label: string; value: string }) {
   return (
-    <div className="flex items-start justify-between gap-4 py-2.5">
+    <div className="flex items-start justify-between gap-4 py-3">
       <span className="shrink-0 typography-body02-regular text-text-70">
         {label}
       </span>
@@ -20,18 +20,21 @@ function InfoRow({ label, value }: { label: string; value: string }) {
 /** 업장 정보 — 업장명·대표자성명·사업자번호·형태·연락처·주소 */
 export function RequestInfoSection({ detail }: Props) {
   return (
-    <section className="rounded-2xl bg-white px-5 py-2 shadow-sm">
-      <InfoRow label="업장명" value={detail.businessName} />
-      <div className="border-t border-line-1" />
-      <InfoRow label="대표자 성명" value={detail.ownerName} />
-      <div className="border-t border-line-1" />
-      <InfoRow label="사업자등록번호" value={detail.businessRegistrationNo} />
-      <div className="border-t border-line-1" />
-      <InfoRow label="업종 형태" value={detail.businessType} />
-      <div className="border-t border-line-1" />
-      <InfoRow label="연락처" value={detail.contact} />
-      <div className="border-t border-line-1" />
-      <InfoRow label="주소" value={detail.fullAddress} />
+    <section className="flex flex-col gap-2.5">
+      <h2 className="typography-headline03 text-text-100">업장 정보</h2>
+      <div className="rounded-xl border border-line-1 bg-white px-4 py-1">
+        <InfoRow label="업장명" value={detail.businessName} />
+        <div className="border-t border-line-1" />
+        <InfoRow label="대표자 성명" value={detail.ownerName} />
+        <div className="border-t border-line-1" />
+        <InfoRow label="사업자등록번호" value={detail.businessRegistrationNo} />
+        <div className="border-t border-line-1" />
+        <InfoRow label="업종" value={detail.businessType} />
+        <div className="border-t border-line-1" />
+        <InfoRow label="연락처" value={detail.contact} />
+        <div className="border-t border-line-1" />
+        <InfoRow label="주소" value={detail.fullAddress} />
+      </div>
     </section>
   )
 }
diff --git a/src/pages/store-register/request-detail/index.tsx b/src/pages/store-register/request-detail/index.tsx
index 5160195c..41a4d4d4 100644
--- a/src/pages/store-register/request-detail/index.tsx
+++ b/src/pages/store-register/request-detail/index.tsx
@@ -2,19 +2,25 @@ import { useParams } from 'react-router-dom'
 import { Navbar } from '@/shared/ui/common/Navbar'
 import { AuthButton } from '@/shared/ui/common/AuthButton'
 import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
+import { Spinner } from '@/shared/ui/Spinner'
 import { useStoreRegisterRequestDetailViewModel } from '@/features/store-register/hooks/useStoreRegisterRequestDetailViewModel'
 import { StoreRequestStatusBadge } from '@/features/store-register/ui/StoreRequestStatusBadge'
 import { RequestInfoSection } from '@/features/store-register/ui/RequestInfoSection'
 import { RequestDocumentsSection } from '@/features/store-register/ui/RequestDocumentsSection'
 import { ReasonSection } from '@/features/store-register/ui/ReasonSection'
-import { formatRequestDate } from '@/features/store-register/lib/formatDate'
+import {
+  CheckCircleIcon,
+  ClockIcon,
+  XCircleIcon,
+} from '@/features/store-register/ui/icons'
+import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
 
 function CancelButton({ onClick }: { onClick: () => void }) {
   return (
     <button
       type="button"
       onClick={onClick}
-      className="h-12 w-full rounded-xl border border-line-2 bg-white typography-body01-semibold text-text-70"
+      className="h-14 w-full shrink-0 rounded-xl border border-line-2 bg-white typography-body01-semibold text-text-90"
     >
       신청 취소
     </button>
@@ -27,19 +33,17 @@ export function StoreRegisterRequestDetailPage() {
   const vm = useStoreRegisterRequestDetailViewModel(requestId)
   const detail = vm.detail
   const statusValue = detail?.status.value
+  const isCanceled = statusValue === 'CANCELED'
 
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
       <Navbar variant="detail" title="신청 상세" />
 
-      <div className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-10 pt-4">
+      <div className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-10 pt-5">
         {vm.isLoading ? (
-          <p
-            className="mt-10 text-center typography-body02-regular text-text-70"
-            role="status"
-          >
-            신청 정보를 불러오는 중입니다.
-          </p>
+          <div className="flex flex-1 items-center justify-center">
+            <Spinner />
+          </div>
         ) : null}
 
         {vm.isError ? (
@@ -53,53 +57,77 @@ export function StoreRegisterRequestDetailPage() {
 
         {detail ? (
           <div className="flex flex-col gap-5">
-            <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-2">
               <StoreRequestStatusBadge status={detail.status} />
-              <span className="typography-body02-regular text-text-50">
-                신청일 {formatRequestDate(detail.createdAt)}
+              <span className="typography-body03-regular text-text-50">
+                {formatRequestDateTime(detail.createdAt)} 신청
               </span>
             </div>
 
-            <RequestInfoSection detail={detail} />
-            <RequestDocumentsSection detail={detail} />
-
-            {statusValue === 'PENDING' ? (
-              <div className="flex flex-col gap-3">
-                <p className="rounded-2xl bg-white px-5 py-4 typography-body02-regular text-text-70 shadow-sm">
-                  운영자 검토 중입니다. 영업일 1일 이내 결과를 알려드려요.
-                </p>
-                <CancelButton onClick={vm.openCancelConfirm} />
-              </div>
-            ) : null}
+            {isCanceled ? (
+              <>
+                <div className="flex items-center gap-2.5 rounded-xl bg-bg-dark px-4 py-3.5">
+                  <XCircleIcon className="size-5 shrink-0 text-text-50" />
+                  <p className="typography-body02-regular text-text-70">
+                    취소된 신청입니다. 별도 조치가 필요하지 않아요.
+                  </p>
+                </div>
+                <div className="flex flex-col gap-5 opacity-60">
+                  <RequestInfoSection detail={detail} />
+                  <RequestDocumentsSection detail={detail} />
+                </div>
+              </>
+            ) : (
+              <>
+                <RequestInfoSection detail={detail} />
+                <RequestDocumentsSection detail={detail} />
 
-            {statusValue === 'ACTIVATED' ? (
-              <div className="flex flex-col gap-3">
-                <p className="rounded-2xl bg-main-100 px-5 py-4 typography-body02-regular text-sub shadow-sm">
-                  승인이 완료됐어요. 사장님 계정으로 다시 로그인하면 매장 관리를
-                  시작할 수 있어요.
-                </p>
-                <AuthButton
-                  type="button"
-                  style={{ width: '100%' }}
-                  onClick={() => vm.reLogin()}
-                >
-                  사장님 계정으로 다시 로그인
-                </AuthButton>
-              </div>
-            ) : null}
+                {statusValue === 'PENDING' ? (
+                  <div className="flex flex-col gap-3">
+                    <div className="flex items-start gap-2.5 rounded-xl bg-warning-100 px-4 py-3.5">
+                      <ClockIcon className="size-5 mt-px shrink-0 text-warning" />
+                      <p className="typography-body02-regular text-text-100">
+                        운영자가 검토 중이에요.{' '}
+                        <span className="typography-body02-semibold text-warning">
+                          영업일 1일 이내
+                        </span>
+                        에 결과를 알려드릴게요.
+                      </p>
+                    </div>
+                    <CancelButton onClick={vm.openCancelConfirm} />
+                  </div>
+                ) : null}
 
-            {statusValue === 'REVOKED' ? (
-              <div className="flex flex-col gap-5">
-                <ReasonSection requestId={requestId} />
-                <CancelButton onClick={vm.openCancelConfirm} />
-              </div>
-            ) : null}
+                {statusValue === 'ACTIVATED' ? (
+                  <div className="flex flex-col gap-3">
+                    <div className="flex items-start gap-2.5 rounded-xl bg-main-100 px-4 py-3.5">
+                      <CheckCircleIcon className="size-5 mt-px shrink-0 text-main" />
+                      <p className="typography-body02-regular text-text-100">
+                        승인이 완료됐어요.{' '}
+                        <span className="typography-body02-semibold text-main">
+                          사장님 계정
+                        </span>
+                        으로 다시 로그인해 주세요.
+                      </p>
+                    </div>
+                    <AuthButton
+                      type="button"
+                      style={{ width: '100%' }}
+                      onClick={() => vm.reLogin()}
+                    >
+                      사장님 계정으로 로그인
+                    </AuthButton>
+                  </div>
+                ) : null}
 
-            {statusValue === 'CANCELED' ? (
-              <p className="rounded-2xl bg-white px-5 py-4 typography-body02-regular text-text-70 shadow-sm">
-                취소된 신청입니다.
-              </p>
-            ) : null}
+                {statusValue === 'REVOKED' ? (
+                  <div className="flex flex-col gap-5">
+                    <ReasonSection requestId={requestId} />
+                    <CancelButton onClick={vm.openCancelConfirm} />
+                  </div>
+                ) : null}
+              </>
+            )}
 
             {vm.cancelError ? (
               <p className="typography-body02-regular text-error" role="alert">
@@ -113,7 +141,7 @@ export function StoreRegisterRequestDetailPage() {
       <ConfirmModal
         isOpen={vm.isConfirmOpen}
         title="신청을 취소할까요?"
-        description="취소하면 되돌릴 수 없어요. 다시 신청하려면 새로 작성해야 해요."
+        description="취소하면 검토가 중단되며, 다시 신청하려면 처음부터 작성해야 해요."
         confirmLabel="신청 취소"
         cancelLabel="닫기"
         isPending={vm.isCanceling}

From ec0b28f63db28bfe53834801f10071729a7dedd1 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Tue, 16 Jun 2026 19:34:16 +0900
Subject: [PATCH 09/24] =?UTF-8?q?feat:=20=EB=B0=98=EB=A0=A4=20=EC=82=AC?=
 =?UTF-8?q?=EC=9C=A0=20+=20=EB=8C=93=EA=B8=80=20=EC=8A=A4=EB=A0=88?=
 =?UTF-8?q?=EB=93=9C=20UI=20=EC=A0=95=EB=A0=AC=20(=EA=B2=BD=EA=B3=A0=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=82=AC=EC=9C=A0=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C,=20=EB=B9=84=EB=8C=80=EC=B9=AD=20=EB=8C=93=EA=B8=80?=
 =?UTF-8?q?=20=EB=B2=84=EB=B8=94,=20=ED=95=98=EB=8B=A8=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EB=B0=94,=20255=EC=9E=90=20=EC=B9=B4=EC=9A=B4?=
 =?UTF-8?q?=ED=84=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/store-register/ui/ReasonCard.tsx | 38 +++++---
 .../ui/ReasonCommentComposer.tsx              | 87 ++++++++++---------
 .../store-register/ui/ReasonCommentItem.tsx   | 85 +++++++++++-------
 3 files changed, 128 insertions(+), 82 deletions(-)

diff --git a/src/features/store-register/ui/ReasonCard.tsx b/src/features/store-register/ui/ReasonCard.tsx
index 1173f747..a7336b37 100644
--- a/src/features/store-register/ui/ReasonCard.tsx
+++ b/src/features/store-register/ui/ReasonCard.tsx
@@ -2,6 +2,10 @@ import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
 import { useReasonCommentThreadViewModel } from '@/features/store-register/hooks/useReasonCommentThreadViewModel'
 import { ReasonCommentItem } from '@/features/store-register/ui/ReasonCommentItem'
 import { ReasonCommentComposer } from '@/features/store-register/ui/ReasonCommentComposer'
+import {
+  ChatIcon,
+  WarningTriangleIcon,
+} from '@/features/store-register/ui/icons'
 import type { WorkspaceRequestReasonDto } from '@/features/store-register/types/workspaceRequests'
 
 type Props = {
@@ -9,23 +13,35 @@ type Props = {
   reason: WorkspaceRequestReasonDto
 }
 
-/** 반려 사유 카드 + 댓글 스레드 + 입력창 */
+/** 반려 사유 카드 + 재심사 안내 + 댓글 스레드 + 입력창 */
 export function ReasonCard({ requestId, reason }: Props) {
   const thread = useReasonCommentThreadViewModel(requestId, reason.id, true)
 
   return (
-    <article className="rounded-2xl bg-white p-4 shadow-sm">
-      <div className="rounded-xl bg-error/5 px-3 py-3">
-        <p className="mb-1 typography-body02-semibold text-error">반려 사유</p>
-        <p className="whitespace-pre-wrap break-words typography-body02-regular text-text-100">
-          {reason.reason}
-        </p>
-        <p className="mt-1.5 typography-body02-regular text-text-50">
-          {formatRequestDateTime(reason.createdAt)}
+    <article className="flex flex-col gap-4">
+      <div className="flex gap-3 rounded-xl border border-line-1 bg-white p-4">
+        <WarningTriangleIcon className="size-[22px] mt-px shrink-0 text-warning" />
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <p className="whitespace-pre-wrap break-words typography-body01-regular text-text-100">
+            {reason.reason}
+          </p>
+          <p className="typography-body03-regular text-text-50">
+            {formatRequestDateTime(reason.createdAt)} · 운영자
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 rounded-xl bg-main-100 px-4 py-3.5">
+        <ChatIcon className="size-[18px] shrink-0 text-main" />
+        <p className="typography-body02-regular text-text-100">
+          댓글로 자료를 보강해{' '}
+          <span className="typography-body02-semibold text-main">재심사</span>를
+          요청할 수 있어요.
         </p>
       </div>
 
-      <div className="mt-3 flex flex-col gap-3">
+      <div className="flex flex-col gap-3.5">
+        <h3 className="typography-headline03 text-text-100">재심사 문의</h3>
         {thread.isLoading ? (
           <p className="typography-body02-regular text-text-50">
             댓글을 불러오는 중입니다.
@@ -40,7 +56,7 @@ export function ReasonCard({ requestId, reason }: Props) {
         !thread.isError &&
         thread.comments.length === 0 ? (
           <p className="typography-body02-regular text-text-50">
-            보강 자료를 댓글로 남기면 운영자가 재검토합니다.
+            보강 자료나 설명을 댓글로 남기면 운영자가 재검토해요.
           </p>
         ) : null}
         {thread.comments.map(comment => (
diff --git a/src/features/store-register/ui/ReasonCommentComposer.tsx b/src/features/store-register/ui/ReasonCommentComposer.tsx
index d2d217a7..37b72c8a 100644
--- a/src/features/store-register/ui/ReasonCommentComposer.tsx
+++ b/src/features/store-register/ui/ReasonCommentComposer.tsx
@@ -1,6 +1,11 @@
 import { CERTIFICATE_ACCEPT_ATTR } from '@/shared/lib/certificateFileValidation'
 import type { CertificatePickState } from '@/features/store-register/ui/CertificateUploader'
 import { COMMENT_MAX_LENGTH } from '@/features/store-register/hooks/useReasonCommentThreadViewModel'
+import {
+  CloseIcon,
+  PaperclipIcon,
+  SendIcon,
+} from '@/features/store-register/ui/icons'
 
 type Props = {
   comment: string
@@ -12,7 +17,7 @@ type Props = {
   onSubmit: () => void
 }
 
-/** 댓글 입력창 — 255자 카운터 + 파일 첨부 + 전송 */
+/** 댓글 입력바 — 파일 첨부 + 단일 입력 + 전송, 255자 카운터 */
 export function ReasonCommentComposer({
   comment,
   onCommentChange,
@@ -25,7 +30,7 @@ export function ReasonCommentComposer({
   const { file, error, inputRef, onInputChange, openPicker, clear } = attachment
 
   return (
-    <div className="mt-4 rounded-2xl border border-line-1 bg-white p-3">
+    <div className="flex flex-col gap-1.5 rounded-xl border border-line-1 bg-white p-3">
       <input
         ref={inputRef}
         type="file"
@@ -34,61 +39,61 @@ export function ReasonCommentComposer({
         onChange={onInputChange}
       />
 
-      <textarea
-        value={comment}
-        onChange={e => onCommentChange(e.target.value)}
-        placeholder="보강 자료에 대한 설명을 남겨 주세요."
-        rows={3}
-        maxLength={COMMENT_MAX_LENGTH}
-        className="w-full resize-none bg-transparent outline-none typography-body02-regular text-text-100 placeholder:text-text-50"
-      />
-
-      <div className="mt-1 flex items-center justify-between">
-        <button
-          type="button"
-          onClick={openPicker}
-          className="typography-body02-semibold text-main underline"
-        >
-          파일 첨부
-        </button>
-        <span className="typography-body02-regular text-text-50">
-          {comment.length}/{COMMENT_MAX_LENGTH}
-        </span>
-      </div>
-
       {file ? (
-        <div className="mt-2 flex items-center gap-2 rounded-xl bg-bg-light px-3 py-2">
-          <span className="min-w-0 flex-1 truncate typography-body02-regular text-text-90">
+        <div className="flex items-center gap-2 rounded-lg bg-bg-light px-3 py-2">
+          <span className="min-w-0 flex-1 truncate typography-body03-regular text-text-90">
             {file.name}
           </span>
           <button
             type="button"
             onClick={clear}
-            className="shrink-0 typography-body02-semibold text-text-70 underline"
+            aria-label="첨부 삭제"
+            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-70"
           >
-            삭제
+            <CloseIcon className="size-4" />
           </button>
         </div>
       ) : null}
 
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={openPicker}
+          aria-label="파일 첨부"
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] border border-line-1 bg-white text-text-70"
+        >
+          <PaperclipIcon className="size-5" />
+        </button>
+        <input
+          type="text"
+          value={comment}
+          onChange={e => onCommentChange(e.target.value)}
+          placeholder="추가 자료나 설명을 남겨 재심사를 요청하세요"
+          maxLength={COMMENT_MAX_LENGTH}
+          className="h-11 min-w-0 flex-1 rounded-xl border border-line-2 px-3.5 outline-none typography-body02-regular text-text-100 placeholder:text-text-50 focus:border-main"
+        />
+        <button
+          type="button"
+          onClick={onSubmit}
+          disabled={!canSubmit}
+          aria-label={isSubmitting ? '전송 중' : '전송'}
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] bg-main text-white disabled:cursor-not-allowed disabled:opacity-45"
+        >
+          <SendIcon className="size-5" />
+        </button>
+      </div>
+
+      <span className="self-end typography-body03-regular text-text-50">
+        {comment.length}/{COMMENT_MAX_LENGTH}
+      </span>
+
       {error ? (
-        <p className="mt-2 typography-body02-regular text-error">{error}</p>
+        <p className="typography-body03-regular text-error">{error}</p>
       ) : null}
 
       {submitError ? (
-        <p className="mt-2 typography-body02-regular text-error">
-          {submitError}
-        </p>
+        <p className="typography-body03-regular text-error">{submitError}</p>
       ) : null}
-
-      <button
-        type="button"
-        onClick={onSubmit}
-        disabled={!canSubmit}
-        className="mt-3 h-11 w-full rounded-xl bg-main typography-body01-semibold text-white disabled:cursor-not-allowed disabled:bg-text-50"
-      >
-        {isSubmitting ? '전송 중…' : '전송'}
-      </button>
     </div>
   )
 }
diff --git a/src/features/store-register/ui/ReasonCommentItem.tsx b/src/features/store-register/ui/ReasonCommentItem.tsx
index fc06e173..6c6d6233 100644
--- a/src/features/store-register/ui/ReasonCommentItem.tsx
+++ b/src/features/store-register/ui/ReasonCommentItem.tsx
@@ -1,49 +1,74 @@
 import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
-import type { WorkspaceReasonCommentDto } from '@/features/store-register/types/workspaceRequests'
+import { FileIcon } from '@/features/store-register/ui/icons'
+import type {
+  WorkspaceReasonCommentDto,
+  WorkspaceReasonCommentFileDto,
+} from '@/features/store-register/types/workspaceRequests'
 
 type Props = {
   comment: WorkspaceReasonCommentDto
 }
 
+function FileChip({
+  file,
+  isAdmin,
+}: {
+  file: WorkspaceReasonCommentFileDto
+  isAdmin: boolean
+}) {
+  return (
+    <a
+      href={file.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`inline-flex max-w-[80%] items-center gap-1.5 rounded-lg border bg-white px-2.5 py-1.5 ${
+        isAdmin ? 'border-line-1 text-text-90' : 'border-main-300 text-sub'
+      }`}
+    >
+      <FileIcon className="size-3.5 shrink-0" />
+      <span className="truncate typography-body03-regular">첨부파일</span>
+    </a>
+  )
+}
+
 /** 댓글 한 건 — ADMIN 좌측 회색 / 본인 USER 우측 main 톤 */
 export function ReasonCommentItem({ comment }: Props) {
   const isAdmin = comment.commentOwner === 'ADMIN'
+  const time = formatRequestDateTime(comment.createdAt)
 
-  return (
-    <div className={`flex flex-col ${isAdmin ? 'items-start' : 'items-end'}`}>
-      <div
-        className={`max-w-[80%] rounded-2xl px-3.5 py-2.5 ${
-          isAdmin
-            ? 'rounded-tl-sm bg-bg-dark text-text-100'
-            : 'rounded-tr-sm bg-main-100 text-text-100'
-        }`}
-      >
-        <span className="mb-1 block typography-body02-semibold text-text-70">
-          {isAdmin ? '운영자' : '나'}
+  if (isAdmin) {
+    return (
+      <div className="flex flex-col items-start gap-1">
+        <span className="px-1 typography-body03-regular text-text-70">
+          운영자
         </span>
         {comment.comment ? (
-          <p className="whitespace-pre-wrap break-words typography-body02-regular">
+          <p className="max-w-[80%] whitespace-pre-wrap break-words rounded-[14px] rounded-tl-[4px] bg-bg-dark px-3.5 py-3 typography-body02-regular text-text-100">
             {comment.comment}
           </p>
         ) : null}
-        {comment.files.length > 0 ? (
-          <div className="mt-2 flex flex-wrap gap-1.5">
-            {comment.files.map((file, index) => (
-              <a
-                key={file.fileId}
-                href={file.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center rounded-full border border-line-1 bg-white px-2.5 py-1 typography-body02-semibold text-main"
-              >
-                첨부 {comment.files.length > 1 ? index + 1 : ''}
-              </a>
-            ))}
-          </div>
-        ) : null}
+        {comment.files.map(file => (
+          <FileChip key={file.fileId} file={file} isAdmin />
+        ))}
+        <span className="px-1 typography-body03-regular text-text-50">
+          {time}
+        </span>
       </div>
-      <span className="mt-1 px-1 typography-body02-regular text-text-50">
-        {formatRequestDateTime(comment.createdAt)}
+    )
+  }
+
+  return (
+    <div className="flex flex-col items-end gap-1">
+      {comment.files.map(file => (
+        <FileChip key={file.fileId} file={file} isAdmin={false} />
+      ))}
+      {comment.comment ? (
+        <p className="max-w-[80%] whitespace-pre-wrap break-words rounded-[14px] rounded-tr-[4px] bg-main-100 px-3.5 py-3 typography-body02-regular text-text-100">
+          {comment.comment}
+        </p>
+      ) : null}
+      <span className="px-1 typography-body03-regular text-text-50">
+        {time}
       </span>
     </div>
   )

From b0d888d597a311c2799338cfed28fa83c481c9c3 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Tue, 16 Jun 2026 19:34:17 +0900
Subject: [PATCH 10/24] =?UTF-8?q?feat:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=9C=84=EC=A0=80=EB=93=9C=20UI=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC=20(=EB=9D=BC=EB=B2=A8=20=ED=95=84=EB=93=9C,=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8C=A9=ED=8A=B8=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=8D=94,=20=EC=8A=A4=ED=85=9D=20=EC=9D=B8=EB=94=94?=
 =?UTF-8?q?=EC=BC=80=EC=9D=B4=ED=84=B0,=20=EA=B3=A0=EC=A0=95=20=ED=91=B8?=
 =?UTF-8?q?=ED=84=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store-register/ui/CertificateUploader.tsx | 144 ++++----
 .../ui/StoreBasicInfoFields.tsx               | 176 ++++++----
 src/pages/manager/store-register/index.tsx    | 319 +++++++++---------
 3 files changed, 338 insertions(+), 301 deletions(-)

diff --git a/src/features/store-register/ui/CertificateUploader.tsx b/src/features/store-register/ui/CertificateUploader.tsx
index bd9a89c8..538801b2 100644
--- a/src/features/store-register/ui/CertificateUploader.tsx
+++ b/src/features/store-register/ui/CertificateUploader.tsx
@@ -1,30 +1,40 @@
+import type { ReactNode } from 'react'
 import { CERTIFICATE_ACCEPT_ATTR } from '@/shared/lib/certificateFileValidation'
 import { useCertificateFilePick } from '@/shared/hooks/useCertificateFilePick'
+import { formatFileSize } from '@/features/store-register/lib/formatFileSize'
+import {
+  CloseIcon,
+  FileIcon,
+  UploadIcon,
+  WarningTriangleIcon,
+} from '@/features/store-register/ui/icons'
 
 export type CertificatePickState = Pick<
   ReturnType<typeof useCertificateFilePick>,
-  | 'file'
-  | 'previewUrl'
-  | 'error'
-  | 'isPdf'
-  | 'inputRef'
-  | 'onInputChange'
-  | 'openPicker'
-  | 'clear'
+  'file' | 'error' | 'inputRef' | 'onInputChange' | 'openPicker' | 'clear'
 >
 
 type Props = {
   certificate: CertificatePickState
   headline: string
   hint?: string
-  /** true면 헤드라인 옆에 "선택" 배지 노출 */
+  /** 선택 항목이면 "선택" 배지, 아니면 "필수" 배지 */
   optional?: boolean
+  /** 선택된 파일 칩의 썸네일 아이콘 — 기본 문서 아이콘 */
+  icon?: ReactNode
 }
 
-function OptionalBadge() {
+function FieldBadge({ optional }: { optional: boolean }) {
+  if (optional) {
+    return (
+      <span className="inline-flex h-[22px] shrink-0 items-center rounded-full bg-bg-dark px-2 typography-body03-semibold text-text-70">
+        선택
+      </span>
+    )
+  }
   return (
-    <span className="ml-2 inline-flex shrink-0 items-center rounded-full bg-bg-dark px-2 py-0.5 typography-body02-semibold text-text-70">
-      선택
+    <span className="inline-flex h-[22px] shrink-0 items-center rounded-full bg-main-100 px-2 typography-body03-semibold text-main">
+      필수
     </span>
   )
 }
@@ -32,22 +42,25 @@ function OptionalBadge() {
 export function CertificateUploader({
   certificate,
   headline,
-  hint = '촬영·스캔 이미지(JPG·PNG 등) 또는 PDF · 최대 15MB',
+  hint,
   optional = false,
+  icon,
 }: Props) {
-  const {
-    file,
-    previewUrl,
-    error,
-    isPdf,
-    inputRef,
-    onInputChange,
-    openPicker,
-    clear,
-  } = certificate
+  const { file, error, inputRef, onInputChange, openPicker, clear } =
+    certificate
 
   return (
-    <div className="w-full">
+    <div className="flex w-full flex-col gap-2.5">
+      <div className="flex items-center gap-2">
+        <span className="typography-body01-semibold text-text-100">
+          {headline}
+        </span>
+        <FieldBadge optional={optional} />
+      </div>
+      {hint ? (
+        <span className="typography-body03-regular text-text-70">{hint}</span>
+      ) : null}
+
       <input
         ref={inputRef}
         type="file"
@@ -60,71 +73,42 @@ export function CertificateUploader({
         <button
           type="button"
           onClick={openPicker}
-          className="flex min-h-[140px] w-full flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-line-2 bg-white px-4 py-6"
+          className="flex flex-col items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed border-line-2 px-4 py-6 text-text-70"
         >
-          <span className="flex items-center justify-center typography-headline03 text-center text-text-100">
-            {headline}
-            {optional ? <OptionalBadge /> : null}
-          </span>
-          <span className="typography-body02-regular text-center text-text-70">
-            {hint}
-          </span>
-          <span className="mt-2 rounded-xl bg-main px-4 py-2 typography-body02-semibold text-white">
-            파일 선택
+          <UploadIcon className="size-7" />
+          <span className="typography-body02-regular">
+            파일을 선택해 주세요
           </span>
         </button>
       ) : (
-        <div className="overflow-hidden rounded-2xl border border-line-2 bg-white">
-          <div className="flex items-stretch gap-3 p-3">
-            {previewUrl ? (
-              <img
-                src={previewUrl}
-                alt={`${file.name} 미리보기`}
-                className="h-[100px] w-[100px] shrink-0 rounded-lg object-cover"
-              />
-            ) : (
-              <div className="flex h-[100px] w-[100px] shrink-0 flex-col items-center justify-center rounded-lg bg-bg-light">
-                <span className="typography-body02-semibold text-text-90">
-                  PDF
-                </span>
-              </div>
-            )}
-            <div className="flex min-w-0 flex-1 flex-col justify-center gap-2">
-              <p className="flex items-center truncate typography-body01-semibold text-text-100">
-                {headline}
-                {optional ? <OptionalBadge /> : null}
-              </p>
-              <p className="truncate typography-body02-regular text-text-70">
-                {file.name}
-              </p>
-              <p className="typography-body02-regular text-text-70">
-                {isPdf
-                  ? 'PDF 파일입니다. 운영자 검토까지 그대로 제출됩니다.'
-                  : '이미지 파일입니다.'}
-              </p>
-              <div className="flex flex-wrap gap-2">
-                <button
-                  type="button"
-                  className="typography-body02-semibold text-main underline"
-                  onClick={openPicker}
-                >
-                  다른 파일로 바꾸기
-                </button>
-                <button
-                  type="button"
-                  className="typography-body02-semibold text-text-70 underline"
-                  onClick={clear}
-                >
-                  삭제
-                </button>
-              </div>
-            </div>
+        <div className="flex items-center gap-3 rounded-xl border border-main p-3">
+          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-main-100 text-main">
+            {icon ?? <FileIcon className="size-5" />}
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="truncate typography-body02-semibold text-text-100">
+              {file.name}
+            </p>
+            <p className="typography-body03-regular text-text-50">
+              {formatFileSize(file.size)}
+            </p>
           </div>
+          <button
+            type="button"
+            onClick={clear}
+            aria-label="파일 삭제"
+            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-bg-light text-text-70"
+          >
+            <CloseIcon className="size-4" />
+          </button>
         </div>
       )}
 
       {error ? (
-        <p className="mt-3 typography-body02-regular text-red-600">{error}</p>
+        <div className="flex items-center gap-2 rounded-xl border border-error bg-error/5 p-3">
+          <WarningTriangleIcon className="size-[18px] shrink-0 text-error" />
+          <span className="typography-body03-regular text-error">{error}</span>
+        </div>
       ) : null}
     </div>
   )
diff --git a/src/features/store-register/ui/StoreBasicInfoFields.tsx b/src/features/store-register/ui/StoreBasicInfoFields.tsx
index f07da4ac..ab4761e1 100644
--- a/src/features/store-register/ui/StoreBasicInfoFields.tsx
+++ b/src/features/store-register/ui/StoreBasicInfoFields.tsx
@@ -1,4 +1,6 @@
+import type { ReactNode } from 'react'
 import { AuthInput } from '@/shared/ui/common/AuthInput'
+import { AlertCircleIcon } from '@/features/store-register/ui/icons'
 
 type Props = {
   bizName: string
@@ -21,6 +23,29 @@ type Props = {
   onContactChange: (v: string) => void
 }
 
+/** 라벨 + 입력 한 묶음 */
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint?: string
+  children: ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="typography-body02-semibold text-text-100">
+        {label}
+      </label>
+      {children}
+      {hint ? (
+        <p className="typography-body03-regular text-text-70">{hint}</p>
+      ) : null}
+    </div>
+  )
+}
+
 export function StoreBasicInfoFields({
   bizName,
   ownerName,
@@ -41,16 +66,22 @@ export function StoreBasicInfoFields({
   onTypeChange,
   onContactChange,
 }: Props) {
+  const brnDigits = brn.replace(/\D/g, '').length
+  const brnError = brnDigits > 0 && brnDigits < 10
+
   return (
-    <div className="flex w-full flex-col gap-4">
-      <AuthInput
-        type="text"
-        placeholder="상호·매장 이름"
-        value={bizName}
-        onChange={e => onBizNameChange(e.target.value)}
-        autoComplete="organization"
-      />
-      <div className="flex flex-col gap-1">
+    <div className="flex w-full flex-col gap-[18px]">
+      <Field label="업장명">
+        <AuthInput
+          type="text"
+          placeholder="예) 알터 강남점"
+          value={bizName}
+          onChange={e => onBizNameChange(e.target.value)}
+          autoComplete="organization"
+        />
+      </Field>
+
+      <Field label="대표자 성명" hint="신분증 성명과 동일하게 입력해 주세요.">
         <AuthInput
           type="text"
           placeholder="대표자 성명"
@@ -58,58 +89,81 @@ export function StoreBasicInfoFields({
           onChange={e => onOwnerNameChange(e.target.value)}
           autoComplete="name"
         />
-        <p className="px-1 typography-body02-regular text-text-70">
-          제출하는 신분증의 성명과 동일하게 입력해 주세요.
-        </p>
-      </div>
-      <AuthInput
-        type="text"
-        placeholder="사업자등록번호 (예: 123-45-67890)"
-        value={brn}
-        onChange={e => onBrnChange(e.target.value)}
-        inputMode="numeric"
-        maxLength={12}
-      />
-      <AuthInput
-        type="text"
-        placeholder="업종 유형 (예: 음식점)"
-        value={type}
-        onChange={e => onTypeChange(e.target.value)}
-      />
-      <AuthInput
-        type="tel"
-        placeholder="매장 연락처 (유선 또는 휴대폰)"
-        value={contact}
-        onChange={e => onContactChange(e.target.value)}
-        inputMode="numeric"
-        maxLength={13}
-        autoComplete="tel"
-      />
-      <AuthInput
-        type="text"
-        placeholder="시·도 (예: 서울특별시)"
-        value={province}
-        onChange={e => onProvinceChange(e.target.value)}
-      />
-      <AuthInput
-        type="text"
-        placeholder="시·군·구 (예: 강남구)"
-        value={district}
-        onChange={e => onDistrictChange(e.target.value)}
-      />
-      <AuthInput
-        type="text"
-        placeholder="읍·면·동 (예: 역삼동)"
-        value={town}
-        onChange={e => onTownChange(e.target.value)}
-      />
-      <AuthInput
-        type="text"
-        placeholder="나머지 주소 (도로명·지번 등 상세 주소 전체)"
-        value={address}
-        onChange={e => onAddressChange(e.target.value)}
-        autoComplete="street-address"
-      />
+      </Field>
+
+      <Field label="사업자등록번호">
+        <AuthInput
+          type="text"
+          placeholder="000-00-00000"
+          value={brn}
+          onChange={e => onBrnChange(e.target.value)}
+          inputMode="numeric"
+          maxLength={12}
+        />
+        {brnError ? (
+          <p className="flex items-center gap-1 typography-body03-regular text-error">
+            <AlertCircleIcon className="size-3.5 shrink-0" />
+            10자리 사업자등록번호를 정확히 입력해 주세요.
+          </p>
+        ) : null}
+      </Field>
+
+      <Field label="업종">
+        <AuthInput
+          type="text"
+          placeholder="예) 카페 · 음료"
+          value={type}
+          onChange={e => onTypeChange(e.target.value)}
+        />
+      </Field>
+
+      <Field label="업장 연락처">
+        <AuthInput
+          type="tel"
+          placeholder="숫자만 입력 (자동 하이픈)"
+          value={contact}
+          onChange={e => onContactChange(e.target.value)}
+          inputMode="numeric"
+          maxLength={13}
+          autoComplete="tel"
+        />
+      </Field>
+
+      <Field label="주소">
+        <div className="flex gap-2">
+          <div className="min-w-0 flex-1">
+            <AuthInput
+              type="text"
+              placeholder="시/도"
+              value={province}
+              onChange={e => onProvinceChange(e.target.value)}
+            />
+          </div>
+          <div className="w-[84px]">
+            <AuthInput
+              type="text"
+              placeholder="구"
+              value={district}
+              onChange={e => onDistrictChange(e.target.value)}
+            />
+          </div>
+          <div className="w-[84px]">
+            <AuthInput
+              type="text"
+              placeholder="동"
+              value={town}
+              onChange={e => onTownChange(e.target.value)}
+            />
+          </div>
+        </div>
+        <AuthInput
+          type="text"
+          placeholder="상세 주소"
+          value={address}
+          onChange={e => onAddressChange(e.target.value)}
+          autoComplete="street-address"
+        />
+      </Field>
     </div>
   )
 }
diff --git a/src/pages/manager/store-register/index.tsx b/src/pages/manager/store-register/index.tsx
index 856807c5..2171d020 100644
--- a/src/pages/manager/store-register/index.tsx
+++ b/src/pages/manager/store-register/index.tsx
@@ -1,187 +1,186 @@
+import type { ReactNode } from 'react'
 import { Navbar } from '@/shared/ui/common/Navbar'
-import { AuthButton } from '@/shared/ui/common/AuthButton'
 import { useStoreRegisterWizard } from '@/features/store-register/hooks/useStoreRegisterWizard'
 import { StoreBasicInfoFields } from '@/features/store-register/ui/StoreBasicInfoFields'
 import { CertificateUploader } from '@/features/store-register/ui/CertificateUploader'
+import {
+  CheckCircleIcon,
+  ClockIcon,
+  IdCardIcon,
+} from '@/features/store-register/ui/icons'
+
+/** ① 정보 ② 증빙 — 2단계 인디케이터 (완료 화면에서는 숨김) */
+function StepIndicator({ step }: { step: 'info' | 'certificate' }) {
+  const onInfo = step === 'info'
+  return (
+    <div className="mx-auto w-full max-w-[400px] px-4 pb-1 pt-4">
+      <ol className="flex items-center gap-2" aria-label="등록 신청 진행 단계">
+        <li className="flex flex-1 items-center gap-2">
+          <span
+            className={`whitespace-nowrap rounded-full px-3.5 py-1.5 typography-body02-semibold ${
+              onInfo ? 'bg-main text-white' : 'bg-main-100 text-main'
+            }`}
+          >
+            ① 정보
+          </span>
+          <div className="h-px flex-1 bg-line-2" aria-hidden />
+        </li>
+        <li className="flex items-center">
+          <span
+            className={`whitespace-nowrap rounded-full px-3.5 py-1.5 typography-body02-semibold ${
+              onInfo ? 'bg-bg-dark text-text-50' : 'bg-main text-white'
+            }`}
+          >
+            ② 증빙
+          </span>
+        </li>
+      </ol>
+    </div>
+  )
+}
+
+/** 위저드 공용 기본 CTA — 비활성 시 main 유지 + opacity 0.45 (디자인 토큰) */
+function PrimaryCta({
+  children,
+  disabled,
+  onClick,
+}: {
+  children: ReactNode
+  disabled?: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className="flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-main typography-body01-semibold text-white disabled:cursor-not-allowed disabled:opacity-45"
+    >
+      {children}
+    </button>
+  )
+}
 
 export function StoreRegisterPage() {
   const w = useStoreRegisterWizard()
 
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
-      <Navbar variant="detail" title="업장 등록 신청" />
+      <Navbar
+        variant="detail"
+        title="업장 등록 신청"
+        onBackClick={w.step === 'certificate' ? w.goInfo : undefined}
+      />
 
-      <div className="mx-auto w-full max-w-[400px] flex-1 px-4 pb-10 pt-4">
-        <ol
-          className="mb-6 flex items-center gap-2"
-          aria-label="등록 신청 진행 단계"
-        >
-          <li className="flex flex-1 items-center gap-2">
-            <span
-              className={`whitespace-nowrap rounded-full px-3 py-1 typography-body02-semibold ${
-                w.step === 'info'
-                  ? 'bg-main text-white'
-                  : 'bg-main/15 text-main'
-              }`}
-            >
-              ① 정보
-            </span>
-            <div className="h-px flex-1 bg-line-2" aria-hidden />
-          </li>
-          <li className="flex flex-[1.2] items-center gap-2">
-            <span
-              className={`whitespace-nowrap rounded-full px-3 py-1 typography-body02-semibold ${
-                w.step === 'certificate'
-                  ? 'bg-main text-white'
-                  : w.step === 'done'
-                    ? 'bg-main/15 text-main'
-                    : 'bg-line-2 text-text-50'
-              }`}
-            >
-              ② 증빙
-            </span>
-          </li>
-        </ol>
+      {w.step !== 'done' ? <StepIndicator step={w.step} /> : null}
 
+      <main className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-28 pt-4">
         {w.step === 'info' ? (
-          <>
-            <header className="mb-6">
-              <h1 className="mb-2 typography-headline01 text-text-100">
-                업장 기본 정보
-              </h1>
-              <p className="typography-body02-regular text-text-70">
-                사업자 등록번호, 연락처와 주소(시도·구·동·상세 주소)를 입력해
-                주세요. 증명 서류를 올린 뒤 운영자 검토까지 1~2영업일이 걸릴 수
-                있어요.
-              </p>
-            </header>
-            <StoreBasicInfoFields
-              bizName={w.bizName}
-              ownerName={w.ownerName}
-              brn={w.brn}
-              province={w.province}
-              district={w.district}
-              town={w.town}
-              address={w.address}
-              type={w.type}
-              contact={w.contact}
-              onBizNameChange={w.setBizName}
-              onOwnerNameChange={w.setOwnerName}
-              onBrnChange={w.setBrn}
-              onProvinceChange={w.setProvince}
-              onDistrictChange={w.setDistrict}
-              onTownChange={w.setTown}
-              onAddressChange={w.setAddress}
-              onTypeChange={w.setType}
-              onContactChange={w.setContact}
-            />
-            <div className="mt-8 flex flex-col gap-3">
-              <AuthButton
-                type="button"
-                disabled={!w.infoValid}
-                style={{
-                  opacity: w.infoValid ? 1 : 0.45,
-                  width: '100%',
-                  cursor: w.infoValid ? 'pointer' : 'not-allowed',
-                }}
-                onClick={() => w.goCertificate()}
-              >
-                다음
-              </AuthButton>
-            </div>
-          </>
+          <StoreBasicInfoFields
+            bizName={w.bizName}
+            ownerName={w.ownerName}
+            brn={w.brn}
+            province={w.province}
+            district={w.district}
+            town={w.town}
+            address={w.address}
+            type={w.type}
+            contact={w.contact}
+            onBizNameChange={w.setBizName}
+            onOwnerNameChange={w.setOwnerName}
+            onBrnChange={w.setBrn}
+            onProvinceChange={w.setProvince}
+            onDistrictChange={w.setDistrict}
+            onTownChange={w.setTown}
+            onAddressChange={w.setAddress}
+            onTypeChange={w.setType}
+            onContactChange={w.setContact}
+          />
         ) : null}
 
         {w.step === 'certificate' ? (
-          <>
-            <header className="mb-6">
-              <h1 className="mb-2 typography-headline01 text-text-100">
-                증빙 파일
-              </h1>
-              <p className="typography-body02-regular text-text-70">
-                각 서류를 선택하면 먼저 서버에 올린 뒤, 신청 정보와 함께
-                제출돼요. 증명원은 발급 7일 이내 원본을 올려 주세요. 모바일
-                신분증은 인정되지 않아요. 운영자 검토는 1영업일 이내 진행돼요.
-              </p>
-            </header>
-            <div className="flex flex-col gap-8">
-              <CertificateUploader
-                certificate={w.certFile}
-                headline="사업자등록증명원"
-                hint="JPG·PNG 이미지 또는 PDF · 최대 10MB"
-              />
-              <CertificateUploader
-                certificate={w.identityFile}
-                headline="대표자 신분증"
-                hint="JPG·PNG 이미지 · 최대 5MB · 모바일 신분증 불가"
-              />
-              <CertificateUploader
-                certificate={w.warrantFile}
-                headline="위임장"
-                hint="대리 신청 시에만 · JPG·PNG·PDF · 최대 5MB"
-                optional
-              />
+          <div className="flex flex-col gap-5">
+            <CertificateUploader
+              certificate={w.certFile}
+              headline="사업자등록증명원"
+              hint="7일 이내 발급본, JPG·PNG·PDF 10MB 이하"
+            />
+            <CertificateUploader
+              certificate={w.identityFile}
+              headline="대표자 신분증"
+              hint="JPG·PNG 5MB 이하, 모바일 신분증 불가"
+              icon={<IdCardIcon className="size-5" />}
+            />
+            <CertificateUploader
+              certificate={w.warrantFile}
+              headline="위임장"
+              hint="위탁 관리 시에만 첨부"
+              optional
+            />
+            <div className="flex items-center gap-2 rounded-xl bg-warning-100 px-4 py-3.5">
+              <ClockIcon className="size-[18px] shrink-0 text-warning" />
+              <span className="typography-body02-regular text-text-100">
+                운영자 검토까지 영업일 1일 정도 걸려요.
+              </span>
             </div>
             {w.submitError ? (
-              <p className="mt-4 typography-body02-regular text-red-600">
+              <p className="typography-body02-regular text-error" role="alert">
                 {w.submitError}
               </p>
             ) : null}
-            <div className="mt-8 flex flex-col gap-3">
-              <AuthButton
-                type="button"
-                disabled={!w.certificateValid || w.isSubmitting}
-                style={{
-                  opacity: w.certificateValid && !w.isSubmitting ? 1 : 0.45,
-                  width: '100%',
-                  cursor:
-                    w.certificateValid && !w.isSubmitting
-                      ? 'pointer'
-                      : 'not-allowed',
-                }}
-                onClick={() => w.submit()}
-              >
-                {w.isSubmitting ? '제출 중...' : '검토 요청 보내기'}
-              </AuthButton>
-              <button
-                type="button"
-                className="typography-body02-semibold text-text-70 underline"
-                onClick={() => w.goInfo()}
-              >
-                이전 단계
-              </button>
-            </div>
-          </>
+          </div>
         ) : null}
 
         {w.step === 'done' ? (
-          <>
-            <div className="rounded-2xl bg-white px-5 py-8 text-center shadow-sm">
-              <h1 className="mb-3 typography-headline01 text-text-100">
-                신청을 접수했어요
-              </h1>
-              <p className="typography-body02-regular text-text-70">
-                운영자 검토 후 승인되면 사장님 계정으로 전환돼요. 진행 상태는
-                신청 내역에서 확인할 수 있어요.
-              </p>
-            </div>
-            <div className="mt-8 flex flex-col gap-3">
-              <AuthButton
-                type="button"
-                style={{ width: '100%' }}
-                onClick={() => w.goRequests()}
-              >
-                신청 내역 보기
-              </AuthButton>
-              <button
-                type="button"
-                className="typography-body02-semibold text-text-70 underline"
-                onClick={() => w.exitToHome()}
-              >
-                홈으로
-              </button>
-            </div>
-          </>
+          <div className="flex flex-1 flex-col items-center justify-center gap-2.5 px-2 text-center">
+            <span className="mb-2 flex h-24 w-24 items-center justify-center rounded-full bg-main-100 text-main">
+              <CheckCircleIcon className="size-11" />
+            </span>
+            <h1 className="typography-headline01 text-text-100">
+              신청을 접수했어요
+            </h1>
+            <p className="max-w-[260px] typography-body02-regular text-text-70">
+              운영자 검토 후 승인되면 사장님 계정으로 전환할 수 있어요. 영업일
+              1일 이내에 결과를 알려드릴게요.
+            </p>
+          </div>
+        ) : null}
+      </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">
+        {w.step === 'info' ? (
+          <PrimaryCta disabled={!w.infoValid} onClick={() => w.goCertificate()}>
+            다음
+          </PrimaryCta>
+        ) : null}
+
+        {w.step === 'certificate' ? (
+          <div className="flex flex-col gap-2.5">
+            <PrimaryCta
+              disabled={!w.certificateValid || w.isSubmitting}
+              onClick={() => w.submit()}
+            >
+              {w.isSubmitting ? (
+                <>
+                  <span className="h-5 w-5 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+                  제출 중...
+                </>
+              ) : (
+                '검토 요청 보내기'
+              )}
+            </PrimaryCta>
+            <button
+              type="button"
+              className="self-center typography-body02-semibold text-text-70 underline"
+              onClick={() => w.goInfo()}
+            >
+              이전 단계
+            </button>
+          </div>
+        ) : null}
+
+        {w.step === 'done' ? (
+          <PrimaryCta onClick={() => w.goRequests()}>신청 내역 보기</PrimaryCta>
         ) : null}
       </div>
     </div>

From e00ceff01edd96fe9c3aba5fa787ab1f006b1cac Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 00:12:19 +0900
Subject: [PATCH 11/24] =?UTF-8?q?feat:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=8B=A0=EC=B2=AD=20=EC=B9=B4=EB=93=9C=20UI=20?=
 =?UTF-8?q?=EC=84=B8=EB=B6=80=20=EC=A0=95=EB=A0=AC=20(=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC,=20=EB=B0=B0=EC=A7=80?=
 =?UTF-8?q?=20=EB=84=88=EB=B9=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/store-register/ui/StoreRequestListCard.tsx    | 4 ++--
 src/features/store-register/ui/StoreRequestStatusBadge.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/store-register/ui/StoreRequestListCard.tsx b/src/features/store-register/ui/StoreRequestListCard.tsx
index 664ec4fd..3544d731 100644
--- a/src/features/store-register/ui/StoreRequestListCard.tsx
+++ b/src/features/store-register/ui/StoreRequestListCard.tsx
@@ -24,8 +24,8 @@ export function StoreRequestListCard({ item, onClick }: Props) {
       <p className="mt-2 truncate typography-body02-regular text-text-70">
         {item.fullAddress}
       </p>
-      <p className="mt-1.5 typography-body03-regular text-text-50">
-        {formatRequestDate(item.createdAt)} 신청
+      <p className="mt-1.5 typography-body03-semibold text-text-50">
+        신청일 {formatRequestDate(item.createdAt)}
       </p>
     </button>
   )
diff --git a/src/features/store-register/ui/StoreRequestStatusBadge.tsx b/src/features/store-register/ui/StoreRequestStatusBadge.tsx
index 9df391e9..bacf442a 100644
--- a/src/features/store-register/ui/StoreRequestStatusBadge.tsx
+++ b/src/features/store-register/ui/StoreRequestStatusBadge.tsx
@@ -9,7 +9,7 @@ export function StoreRequestStatusBadge({ status }: Props) {
   const { label, badgeClass } = resolveStatusBadge(status)
   return (
     <span
-      className={`inline-flex h-7 shrink-0 items-center justify-center rounded-[60px] border px-3 typography-body02-semibold ${badgeClass}`}
+      className={`inline-flex h-7 w-fit shrink-0 items-center justify-center rounded-[60px] border px-3 typography-body02-semibold ${badgeClass}`}
     >
       {label}
     </span>

From c96dde03f949bc28409bdae9dd144189f7941135 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 00:12:23 +0900
Subject: [PATCH 12/24] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A9=94=EB=89=B4=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=20=ED=95=AD=EB=AA=A9=20=EC=A0=9C=EA=B1=B0=20?=
 =?UTF-8?q?(=EC=82=AC=EC=9E=A5=EB=8B=98=20=EA=B3=84=EC=A0=95=20=EC=A0=84?=
 =?UTF-8?q?=ED=99=98)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/my/index.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/pages/my/index.tsx b/src/pages/my/index.tsx
index 9ec0abb2..3abd7a3c 100644
--- a/src/pages/my/index.tsx
+++ b/src/pages/my/index.tsx
@@ -28,12 +28,6 @@ const MENU_ITEMS: MenuItem[] = [
     key: 'store-apply',
     label: '업장 등록 신청',
     icon: StoreIcon,
-    path: ROUTES.MANAGER.STORE_REGISTER,
-  },
-  {
-    key: 'manager-switch',
-    label: '사장님 계정으로 전환',
-    icon: StoreIcon,
     path: ROUTES.STORE_REGISTER.REQUESTS,
   },
   {

From 5c760c22d4b5118a2c62daa8130b801369ad00bc Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 12:06:16 +0900
Subject: [PATCH 13/24] =?UTF-8?q?refactor:=20=EB=B0=98=EB=A0=A4=20?=
 =?UTF-8?q?=EC=82=AC=EC=9C=A0=20=EA=B4=80=EB=A0=A8=20=EA=B5=AC=EC=84=B1?=
 =?UTF-8?q?=EC=9A=94=EC=86=8C=20=EC=A0=9C=EA=B1=B0=20(Reason*=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=8F=20=ED=9B=85)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useReasonCommentThreadViewModel.ts  | 100 ------------------
 .../hooks/useStoreRegisterReasonsViewModel.ts |  29 -----
 src/features/store-register/ui/ReasonCard.tsx |  78 --------------
 .../ui/ReasonCommentComposer.tsx              |  99 -----------------
 .../store-register/ui/ReasonCommentItem.tsx   |  75 -------------
 .../store-register/ui/ReasonSection.tsx       |  42 --------
 6 files changed, 423 deletions(-)
 delete mode 100644 src/features/store-register/hooks/useReasonCommentThreadViewModel.ts
 delete mode 100644 src/features/store-register/hooks/useStoreRegisterReasonsViewModel.ts
 delete mode 100644 src/features/store-register/ui/ReasonCard.tsx
 delete mode 100644 src/features/store-register/ui/ReasonCommentComposer.tsx
 delete mode 100644 src/features/store-register/ui/ReasonCommentItem.tsx
 delete mode 100644 src/features/store-register/ui/ReasonSection.tsx

diff --git a/src/features/store-register/hooks/useReasonCommentThreadViewModel.ts b/src/features/store-register/hooks/useReasonCommentThreadViewModel.ts
deleted file mode 100644
index 6f978f2b..00000000
--- a/src/features/store-register/hooks/useReasonCommentThreadViewModel.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { useCallback, useState } from 'react'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import useAuthStore from '@/shared/stores/useAuthStore'
-import { useCertificateFilePick } from '@/shared/hooks/useCertificateFilePick'
-import { queryKeys } from '@/shared/lib/queryKeys'
-import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
-import {
-  createWorkspaceReasonComment,
-  fetchWorkspaceReasonComments,
-} from '@/features/store-register/api/workspaceRequests'
-import { uploadWorkspaceReasonCommentFile } from '@/features/store-register/api/workspaceFileUpload'
-
-export const COMMENT_MAX_LENGTH = 255
-
-/** 첨부 파일 ≤ 5MB */
-const ATTACHMENT_MAX_BYTES = 5 * 1024 * 1024
-
-/** 반려 사유 한 건의 댓글 스레드 + 작성 ViewModel */
-export function useReasonCommentThreadViewModel(
-  requestId: number,
-  reasonId: number,
-  enabled: boolean
-) {
-  const queryClient = useQueryClient()
-  const scope = useAuthStore(state => state.scope)
-  const attachment = useCertificateFilePick({ maxBytes: ATTACHMENT_MAX_BYTES })
-
-  const [comment, setComment] = useState('')
-  const [submitError, setSubmitError] = useState<string | null>(null)
-
-  const commentsKey = queryKeys.storeRegisterRequest.comments(
-    scope,
-    requestId,
-    reasonId
-  )
-
-  const query = useQuery({
-    queryKey: commentsKey,
-    queryFn: () => fetchWorkspaceReasonComments(scope, requestId, reasonId),
-    enabled: enabled && Number.isFinite(requestId) && Number.isFinite(reasonId),
-  })
-
-  const mutation = useMutation({
-    mutationFn: async () => {
-      const trimmed = comment.trim()
-      let fileIds: string[] | undefined
-      if (attachment.file) {
-        const fileId = await uploadWorkspaceReasonCommentFile(
-          attachment.file,
-          scope
-        )
-        fileIds = [fileId]
-      }
-      await createWorkspaceReasonComment(scope, requestId, reasonId, {
-        comment: trimmed,
-        fileIds,
-      })
-    },
-    onSuccess: async () => {
-      setComment('')
-      attachment.clear()
-      await queryClient.invalidateQueries({ queryKey: commentsKey })
-    },
-    onError: (e: unknown) => {
-      setSubmitError(
-        getAxiosErrorMessage(
-          e,
-          '댓글을 등록하지 못했습니다. 잠시 후 다시 시도해 주세요.'
-        )
-      )
-    },
-  })
-
-  const onCommentChange = useCallback((value: string) => {
-    setSubmitError(null)
-    setComment(value.slice(0, COMMENT_MAX_LENGTH))
-  }, [])
-
-  const canSubmit =
-    comment.trim().length > 0 && !mutation.isPending && !attachment.error
-
-  const submit = useCallback(() => {
-    if (!canSubmit) return
-    setSubmitError(null)
-    mutation.mutate()
-  }, [canSubmit, mutation])
-
-  return {
-    comments: query.data ?? [],
-    isLoading: query.isPending && query.fetchStatus !== 'idle',
-    isError: query.isError,
-    comment,
-    onCommentChange,
-    attachment,
-    submitError,
-    isSubmitting: mutation.isPending,
-    canSubmit,
-    submit,
-  }
-}
diff --git a/src/features/store-register/hooks/useStoreRegisterReasonsViewModel.ts b/src/features/store-register/hooks/useStoreRegisterReasonsViewModel.ts
deleted file mode 100644
index 9150dd36..00000000
--- a/src/features/store-register/hooks/useStoreRegisterReasonsViewModel.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import useAuthStore from '@/shared/stores/useAuthStore'
-import { queryKeys } from '@/shared/lib/queryKeys'
-import { fetchWorkspaceRequestReasons } from '@/features/store-register/api/workspaceRequests'
-
-/** 신청 상세의 반려 사유 목록 (최신순) */
-export function useStoreRegisterReasonsViewModel(
-  requestId: number,
-  enabled: boolean
-) {
-  const scope = useAuthStore(state => state.scope)
-
-  const query = useQuery({
-    queryKey: queryKeys.storeRegisterRequest.reasons(scope, requestId),
-    queryFn: () => fetchWorkspaceRequestReasons(scope, requestId),
-    enabled: enabled && Number.isFinite(requestId),
-  })
-
-  // 최신순 정렬 (createdAt 내림차순)
-  const reasons = [...(query.data ?? [])].sort(
-    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-  )
-
-  return {
-    reasons,
-    isLoading: query.isPending && query.fetchStatus !== 'idle',
-    isError: query.isError,
-  }
-}
diff --git a/src/features/store-register/ui/ReasonCard.tsx b/src/features/store-register/ui/ReasonCard.tsx
deleted file mode 100644
index a7336b37..00000000
--- a/src/features/store-register/ui/ReasonCard.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
-import { useReasonCommentThreadViewModel } from '@/features/store-register/hooks/useReasonCommentThreadViewModel'
-import { ReasonCommentItem } from '@/features/store-register/ui/ReasonCommentItem'
-import { ReasonCommentComposer } from '@/features/store-register/ui/ReasonCommentComposer'
-import {
-  ChatIcon,
-  WarningTriangleIcon,
-} from '@/features/store-register/ui/icons'
-import type { WorkspaceRequestReasonDto } from '@/features/store-register/types/workspaceRequests'
-
-type Props = {
-  requestId: number
-  reason: WorkspaceRequestReasonDto
-}
-
-/** 반려 사유 카드 + 재심사 안내 + 댓글 스레드 + 입력창 */
-export function ReasonCard({ requestId, reason }: Props) {
-  const thread = useReasonCommentThreadViewModel(requestId, reason.id, true)
-
-  return (
-    <article className="flex flex-col gap-4">
-      <div className="flex gap-3 rounded-xl border border-line-1 bg-white p-4">
-        <WarningTriangleIcon className="size-[22px] mt-px shrink-0 text-warning" />
-        <div className="flex min-w-0 flex-col gap-1.5">
-          <p className="whitespace-pre-wrap break-words typography-body01-regular text-text-100">
-            {reason.reason}
-          </p>
-          <p className="typography-body03-regular text-text-50">
-            {formatRequestDateTime(reason.createdAt)} · 운영자
-          </p>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2 rounded-xl bg-main-100 px-4 py-3.5">
-        <ChatIcon className="size-[18px] shrink-0 text-main" />
-        <p className="typography-body02-regular text-text-100">
-          댓글로 자료를 보강해{' '}
-          <span className="typography-body02-semibold text-main">재심사</span>를
-          요청할 수 있어요.
-        </p>
-      </div>
-
-      <div className="flex flex-col gap-3.5">
-        <h3 className="typography-headline03 text-text-100">재심사 문의</h3>
-        {thread.isLoading ? (
-          <p className="typography-body02-regular text-text-50">
-            댓글을 불러오는 중입니다.
-          </p>
-        ) : null}
-        {thread.isError ? (
-          <p className="typography-body02-regular text-error">
-            댓글을 불러오지 못했습니다.
-          </p>
-        ) : null}
-        {!thread.isLoading &&
-        !thread.isError &&
-        thread.comments.length === 0 ? (
-          <p className="typography-body02-regular text-text-50">
-            보강 자료나 설명을 댓글로 남기면 운영자가 재검토해요.
-          </p>
-        ) : null}
-        {thread.comments.map(comment => (
-          <ReasonCommentItem key={comment.id} comment={comment} />
-        ))}
-      </div>
-
-      <ReasonCommentComposer
-        comment={thread.comment}
-        onCommentChange={thread.onCommentChange}
-        attachment={thread.attachment}
-        submitError={thread.submitError}
-        isSubmitting={thread.isSubmitting}
-        canSubmit={thread.canSubmit}
-        onSubmit={thread.submit}
-      />
-    </article>
-  )
-}
diff --git a/src/features/store-register/ui/ReasonCommentComposer.tsx b/src/features/store-register/ui/ReasonCommentComposer.tsx
deleted file mode 100644
index 37b72c8a..00000000
--- a/src/features/store-register/ui/ReasonCommentComposer.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { CERTIFICATE_ACCEPT_ATTR } from '@/shared/lib/certificateFileValidation'
-import type { CertificatePickState } from '@/features/store-register/ui/CertificateUploader'
-import { COMMENT_MAX_LENGTH } from '@/features/store-register/hooks/useReasonCommentThreadViewModel'
-import {
-  CloseIcon,
-  PaperclipIcon,
-  SendIcon,
-} from '@/features/store-register/ui/icons'
-
-type Props = {
-  comment: string
-  onCommentChange: (v: string) => void
-  attachment: CertificatePickState
-  submitError: string | null
-  isSubmitting: boolean
-  canSubmit: boolean
-  onSubmit: () => void
-}
-
-/** 댓글 입력바 — 파일 첨부 + 단일 입력 + 전송, 255자 카운터 */
-export function ReasonCommentComposer({
-  comment,
-  onCommentChange,
-  attachment,
-  submitError,
-  isSubmitting,
-  canSubmit,
-  onSubmit,
-}: Props) {
-  const { file, error, inputRef, onInputChange, openPicker, clear } = attachment
-
-  return (
-    <div className="flex flex-col gap-1.5 rounded-xl border border-line-1 bg-white p-3">
-      <input
-        ref={inputRef}
-        type="file"
-        className="sr-only"
-        accept={CERTIFICATE_ACCEPT_ATTR}
-        onChange={onInputChange}
-      />
-
-      {file ? (
-        <div className="flex items-center gap-2 rounded-lg bg-bg-light px-3 py-2">
-          <span className="min-w-0 flex-1 truncate typography-body03-regular text-text-90">
-            {file.name}
-          </span>
-          <button
-            type="button"
-            onClick={clear}
-            aria-label="첨부 삭제"
-            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-70"
-          >
-            <CloseIcon className="size-4" />
-          </button>
-        </div>
-      ) : null}
-
-      <div className="flex items-center gap-2">
-        <button
-          type="button"
-          onClick={openPicker}
-          aria-label="파일 첨부"
-          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] border border-line-1 bg-white text-text-70"
-        >
-          <PaperclipIcon className="size-5" />
-        </button>
-        <input
-          type="text"
-          value={comment}
-          onChange={e => onCommentChange(e.target.value)}
-          placeholder="추가 자료나 설명을 남겨 재심사를 요청하세요"
-          maxLength={COMMENT_MAX_LENGTH}
-          className="h-11 min-w-0 flex-1 rounded-xl border border-line-2 px-3.5 outline-none typography-body02-regular text-text-100 placeholder:text-text-50 focus:border-main"
-        />
-        <button
-          type="button"
-          onClick={onSubmit}
-          disabled={!canSubmit}
-          aria-label={isSubmitting ? '전송 중' : '전송'}
-          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] bg-main text-white disabled:cursor-not-allowed disabled:opacity-45"
-        >
-          <SendIcon className="size-5" />
-        </button>
-      </div>
-
-      <span className="self-end typography-body03-regular text-text-50">
-        {comment.length}/{COMMENT_MAX_LENGTH}
-      </span>
-
-      {error ? (
-        <p className="typography-body03-regular text-error">{error}</p>
-      ) : null}
-
-      {submitError ? (
-        <p className="typography-body03-regular text-error">{submitError}</p>
-      ) : null}
-    </div>
-  )
-}
diff --git a/src/features/store-register/ui/ReasonCommentItem.tsx b/src/features/store-register/ui/ReasonCommentItem.tsx
deleted file mode 100644
index 6c6d6233..00000000
--- a/src/features/store-register/ui/ReasonCommentItem.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
-import { FileIcon } from '@/features/store-register/ui/icons'
-import type {
-  WorkspaceReasonCommentDto,
-  WorkspaceReasonCommentFileDto,
-} from '@/features/store-register/types/workspaceRequests'
-
-type Props = {
-  comment: WorkspaceReasonCommentDto
-}
-
-function FileChip({
-  file,
-  isAdmin,
-}: {
-  file: WorkspaceReasonCommentFileDto
-  isAdmin: boolean
-}) {
-  return (
-    <a
-      href={file.url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={`inline-flex max-w-[80%] items-center gap-1.5 rounded-lg border bg-white px-2.5 py-1.5 ${
-        isAdmin ? 'border-line-1 text-text-90' : 'border-main-300 text-sub'
-      }`}
-    >
-      <FileIcon className="size-3.5 shrink-0" />
-      <span className="truncate typography-body03-regular">첨부파일</span>
-    </a>
-  )
-}
-
-/** 댓글 한 건 — ADMIN 좌측 회색 / 본인 USER 우측 main 톤 */
-export function ReasonCommentItem({ comment }: Props) {
-  const isAdmin = comment.commentOwner === 'ADMIN'
-  const time = formatRequestDateTime(comment.createdAt)
-
-  if (isAdmin) {
-    return (
-      <div className="flex flex-col items-start gap-1">
-        <span className="px-1 typography-body03-regular text-text-70">
-          운영자
-        </span>
-        {comment.comment ? (
-          <p className="max-w-[80%] whitespace-pre-wrap break-words rounded-[14px] rounded-tl-[4px] bg-bg-dark px-3.5 py-3 typography-body02-regular text-text-100">
-            {comment.comment}
-          </p>
-        ) : null}
-        {comment.files.map(file => (
-          <FileChip key={file.fileId} file={file} isAdmin />
-        ))}
-        <span className="px-1 typography-body03-regular text-text-50">
-          {time}
-        </span>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col items-end gap-1">
-      {comment.files.map(file => (
-        <FileChip key={file.fileId} file={file} isAdmin={false} />
-      ))}
-      {comment.comment ? (
-        <p className="max-w-[80%] whitespace-pre-wrap break-words rounded-[14px] rounded-tr-[4px] bg-main-100 px-3.5 py-3 typography-body02-regular text-text-100">
-          {comment.comment}
-        </p>
-      ) : null}
-      <span className="px-1 typography-body03-regular text-text-50">
-        {time}
-      </span>
-    </div>
-  )
-}
diff --git a/src/features/store-register/ui/ReasonSection.tsx b/src/features/store-register/ui/ReasonSection.tsx
deleted file mode 100644
index 79fce208..00000000
--- a/src/features/store-register/ui/ReasonSection.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useStoreRegisterReasonsViewModel } from '@/features/store-register/hooks/useStoreRegisterReasonsViewModel'
-import { ReasonCard } from '@/features/store-register/ui/ReasonCard'
-
-type Props = {
-  requestId: number
-}
-
-/** REVOKED 상태에서 노출되는 반려 사유 + 댓글 스레드 섹션 */
-export function ReasonSection({ requestId }: Props) {
-  const { reasons, isLoading, isError } = useStoreRegisterReasonsViewModel(
-    requestId,
-    true
-  )
-
-  return (
-    <section className="flex flex-col gap-3">
-      <h2 className="px-1 typography-headline03 text-text-100">반려 사유</h2>
-
-      {isLoading ? (
-        <p className="px-1 typography-body02-regular text-text-50">
-          반려 사유를 불러오는 중입니다.
-        </p>
-      ) : null}
-
-      {isError ? (
-        <p className="px-1 typography-body02-regular text-error">
-          반려 사유를 불러오지 못했습니다.
-        </p>
-      ) : null}
-
-      {!isLoading && !isError && reasons.length === 0 ? (
-        <p className="px-1 typography-body02-regular text-text-50">
-          등록된 반려 사유가 없습니다.
-        </p>
-      ) : null}
-
-      {reasons.map(reason => (
-        <ReasonCard key={reason.id} requestId={requestId} reason={reason} />
-      ))}
-    </section>
-  )
-}

From 3147d9613d699810ba53c15f7098e05bdd4b670d Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 12:06:22 +0900
Subject: [PATCH 14/24] =?UTF-8?q?fix:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=8B=A0=EC=B2=AD=20=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=8A=B9=EC=9D=B8=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EC=83=81=ED=83=9C=20=EC=8B=9C=20=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EB=B0=95=EC=8A=A4=20=EB=B0=8F=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../useStoreRegisterRequestDetailViewModel.ts | 20 +----
 .../store-register/request-detail/index.tsx   | 88 +++++++------------
 2 files changed, 33 insertions(+), 75 deletions(-)

diff --git a/src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts b/src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts
index 159f0e92..c661b9d2 100644
--- a/src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts
+++ b/src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts
@@ -1,23 +1,18 @@
 import { useCallback, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import useAuthStore from '@/shared/stores/useAuthStore'
-import { logoutSession } from '@/shared/api/auth'
 import { queryKeys } from '@/shared/lib/queryKeys'
 import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
-import { ROUTES } from '@/shared/constants/routes'
 import {
   cancelWorkspaceRequest,
   fetchWorkspaceRequestDetail,
 } from '@/features/store-register/api/workspaceRequests'
 
-/** 업장 등록 신청 상세 ViewModel — 상세 조회 + 취소 + 재로그인 */
+/** 업장 등록 신청 상세 ViewModel — 상세 조회 + 취소 */
 export function useStoreRegisterRequestDetailViewModel(requestId: number) {
-  const navigate = useNavigate()
   const queryClient = useQueryClient()
   const isLoggedIn = useAuthStore(state => state.isLoggedIn)
   const scope = useAuthStore(state => state.scope)
-  const logout = useAuthStore(state => state.logout)
 
   const [cancelError, setCancelError] = useState<string | null>(null)
   const [isConfirmOpen, setIsConfirmOpen] = useState(false)
@@ -66,18 +61,6 @@ export function useStoreRegisterRequestDetailViewModel(requestId: number) {
     cancelMutation.mutate()
   }, [cancelMutation])
 
-  /** 승인 완료 시 사장님 계정으로 다시 로그인 — 세션 정리 후 로그인 화면 */
-  const reLogin = useCallback(async () => {
-    try {
-      await logoutSession(scope, isLoggedIn)
-    } catch {
-      // 서버 로그아웃 실패해도 로컬 세션은 정리
-    } finally {
-      logout()
-      navigate(ROUTES.AUTH.LOGIN, { replace: true })
-    }
-  }, [isLoggedIn, logout, navigate, scope])
-
   return {
     scope,
     requestId,
@@ -90,6 +73,5 @@ export function useStoreRegisterRequestDetailViewModel(requestId: number) {
     openCancelConfirm,
     closeCancelConfirm,
     confirmCancel,
-    reLogin,
   }
 }
diff --git a/src/pages/store-register/request-detail/index.tsx b/src/pages/store-register/request-detail/index.tsx
index 41a4d4d4..113d451c 100644
--- a/src/pages/store-register/request-detail/index.tsx
+++ b/src/pages/store-register/request-detail/index.tsx
@@ -1,39 +1,23 @@
 import { useParams } from 'react-router-dom'
 import { Navbar } from '@/shared/ui/common/Navbar'
-import { AuthButton } from '@/shared/ui/common/AuthButton'
 import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
 import { Spinner } from '@/shared/ui/Spinner'
 import { useStoreRegisterRequestDetailViewModel } from '@/features/store-register/hooks/useStoreRegisterRequestDetailViewModel'
 import { StoreRequestStatusBadge } from '@/features/store-register/ui/StoreRequestStatusBadge'
 import { RequestInfoSection } from '@/features/store-register/ui/RequestInfoSection'
 import { RequestDocumentsSection } from '@/features/store-register/ui/RequestDocumentsSection'
-import { ReasonSection } from '@/features/store-register/ui/ReasonSection'
-import {
-  CheckCircleIcon,
-  ClockIcon,
-  XCircleIcon,
-} from '@/features/store-register/ui/icons'
+import { RequestThreadSection } from '@/features/store-register/ui/RequestThreadSection'
+import { ClockIcon, XCircleIcon } from '@/features/store-register/ui/icons'
 import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
 
-function CancelButton({ onClick }: { onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="h-14 w-full shrink-0 rounded-xl border border-line-2 bg-white typography-body01-semibold text-text-90"
-    >
-      신청 취소
-    </button>
-  )
-}
-
 export function StoreRegisterRequestDetailPage() {
   const params = useParams<{ requestId: string }>()
   const requestId = Number(params.requestId)
   const vm = useStoreRegisterRequestDetailViewModel(requestId)
   const detail = vm.detail
   const statusValue = detail?.status.value
-  const isCanceled = statusValue === 'CANCELED'
+  const isCanceled = statusValue === 'CANCELLED'
+  const canCancel = statusValue === 'PENDING' || statusValue === 'REVOKED'
 
   return (
     <div className="flex min-h-[100dvh] flex-col bg-bg-light">
@@ -57,11 +41,22 @@ export function StoreRegisterRequestDetailPage() {
 
         {detail ? (
           <div className="flex flex-col gap-5">
-            <div className="flex flex-col gap-2">
-              <StoreRequestStatusBadge status={detail.status} />
-              <span className="typography-body03-regular text-text-50">
-                {formatRequestDateTime(detail.createdAt)} 신청
-              </span>
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex flex-col gap-2">
+                <StoreRequestStatusBadge status={detail.status} />
+                <span className="typography-body03-regular text-text-50">
+                  {formatRequestDateTime(detail.createdAt)} 신청
+                </span>
+              </div>
+              {canCancel ? (
+                <button
+                  type="button"
+                  onClick={vm.openCancelConfirm}
+                  className="h-8 shrink-0 rounded-lg border border-line-2 bg-white px-3 typography-body03-semibold text-text-90"
+                >
+                  신청 취소
+                </button>
+              ) : null}
             </div>
 
             {isCanceled ? (
@@ -83,48 +78,29 @@ export function StoreRegisterRequestDetailPage() {
                 <RequestDocumentsSection detail={detail} />
 
                 {statusValue === 'PENDING' ? (
-                  <div className="flex flex-col gap-3">
+                  <div className="flex flex-col gap-5">
                     <div className="flex items-start gap-2.5 rounded-xl bg-warning-100 px-4 py-3.5">
                       <ClockIcon className="size-5 mt-px shrink-0 text-warning" />
                       <p className="typography-body02-regular text-text-100">
-                        운영자가 검토 중이에요.{' '}
+                        관리자가 검토 중이에요.{' '}
                         <span className="typography-body02-semibold text-warning">
-                          영업일 1일 이내
-                        </span>
-                        에 결과를 알려드릴게요.
-                      </p>
-                    </div>
-                    <CancelButton onClick={vm.openCancelConfirm} />
-                  </div>
-                ) : null}
-
-                {statusValue === 'ACTIVATED' ? (
-                  <div className="flex flex-col gap-3">
-                    <div className="flex items-start gap-2.5 rounded-xl bg-main-100 px-4 py-3.5">
-                      <CheckCircleIcon className="size-5 mt-px shrink-0 text-main" />
-                      <p className="typography-body02-regular text-text-100">
-                        승인이 완료됐어요.{' '}
-                        <span className="typography-body02-semibold text-main">
-                          사장님 계정
+                          영업일 3일 이내
                         </span>
-                        으로 다시 로그인해 주세요.
+                        에 결과를 푸시 알림으로 알려드릴게요.
                       </p>
                     </div>
-                    <AuthButton
-                      type="button"
-                      style={{ width: '100%' }}
-                      onClick={() => vm.reLogin()}
-                    >
-                      사장님 계정으로 로그인
-                    </AuthButton>
+                    <RequestThreadSection
+                      requestId={requestId}
+                      variant="PENDING"
+                    />
                   </div>
                 ) : null}
 
                 {statusValue === 'REVOKED' ? (
-                  <div className="flex flex-col gap-5">
-                    <ReasonSection requestId={requestId} />
-                    <CancelButton onClick={vm.openCancelConfirm} />
-                  </div>
+                  <RequestThreadSection
+                    requestId={requestId}
+                    variant="REVOKED"
+                  />
                 ) : null}
               </>
             )}

From d1b627a79c7c93a00cf209b0b47ca75f1f74f98c Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 13:24:57 +0900
Subject: [PATCH 15/24] =?UTF-8?q?feat:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=8B=A0=EC=B2=AD=20=EB=8C=93=EA=B8=80=20=EC=8A=A4?=
 =?UTF-8?q?=EB=A0=88=EB=93=9C=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/RequestCommentComposer.tsx             | 108 ++++++++++++++++
 .../store-register/ui/RequestCommentItem.tsx  |  75 +++++++++++
 .../ui/RequestThreadSection.tsx               | 116 ++++++++++++++++++
 3 files changed, 299 insertions(+)
 create mode 100644 src/features/store-register/ui/RequestCommentComposer.tsx
 create mode 100644 src/features/store-register/ui/RequestCommentItem.tsx
 create mode 100644 src/features/store-register/ui/RequestThreadSection.tsx

diff --git a/src/features/store-register/ui/RequestCommentComposer.tsx b/src/features/store-register/ui/RequestCommentComposer.tsx
new file mode 100644
index 00000000..1cbacb38
--- /dev/null
+++ b/src/features/store-register/ui/RequestCommentComposer.tsx
@@ -0,0 +1,108 @@
+import { CERTIFICATE_ACCEPT_ATTR } from '@/shared/lib/certificateFileValidation'
+import type { CertificatePickState } from '@/features/store-register/ui/CertificateUploader'
+import { COMMENT_MAX_LENGTH } from '@/features/store-register/hooks/useRequestCommentThreadViewModel'
+import {
+  CloseIcon,
+  PaperclipIcon,
+  SendIcon,
+} from '@/features/store-register/ui/icons'
+
+type Props = {
+  comment: string
+  onCommentChange: (v: string) => void
+  attachment: CertificatePickState
+  submitError: string | null
+  isSubmitting: boolean
+  canSubmit: boolean
+  onSubmit: () => void
+  placeholder?: string
+  /** 스레드 로딩·실패 시 입력 비활성화 */
+  disabled?: boolean
+}
+
+/** 댓글 입력바 — 파일 첨부 + 단일 입력 + 전송, 255자 카운터 */
+export function RequestCommentComposer({
+  comment,
+  onCommentChange,
+  attachment,
+  submitError,
+  isSubmitting,
+  canSubmit,
+  onSubmit,
+  placeholder = '추가 자료나 설명을 남겨 재심사를 요청하세요',
+  disabled = false,
+}: Props) {
+  const { file, error, inputRef, onInputChange, openPicker, clear } = attachment
+
+  return (
+    <div className="flex flex-col gap-1.5 rounded-xl border border-line-1 bg-white p-3">
+      <input
+        ref={inputRef}
+        type="file"
+        className="sr-only"
+        accept={CERTIFICATE_ACCEPT_ATTR}
+        onChange={onInputChange}
+      />
+
+      {file ? (
+        <div className="flex items-center gap-2 rounded-lg bg-bg-light px-3 py-2">
+          <span className="min-w-0 flex-1 truncate typography-body03-regular text-text-90">
+            {file.name}
+          </span>
+          <button
+            type="button"
+            onClick={clear}
+            aria-label="첨부 삭제"
+            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-70"
+          >
+            <CloseIcon className="size-4" />
+          </button>
+        </div>
+      ) : null}
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={openPicker}
+          disabled={disabled}
+          aria-label="파일 첨부"
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] border border-line-1 bg-white text-text-70 disabled:cursor-not-allowed disabled:opacity-45"
+        >
+          <PaperclipIcon className="size-5" />
+        </button>
+        <input
+          type="text"
+          value={comment}
+          onChange={e => onCommentChange(e.target.value)}
+          placeholder={placeholder}
+          maxLength={COMMENT_MAX_LENGTH}
+          disabled={disabled}
+          className="h-11 min-w-0 flex-1 rounded-xl border border-line-2 px-3.5 outline-none typography-body02-regular text-text-100 placeholder:text-text-50 focus:border-main disabled:cursor-not-allowed disabled:bg-bg-light disabled:text-text-50"
+        />
+        <button
+          type="button"
+          onClick={onSubmit}
+          disabled={disabled || !canSubmit}
+          aria-label={isSubmitting ? '전송 중' : '전송'}
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] bg-main text-white disabled:cursor-not-allowed disabled:opacity-45"
+        >
+          <SendIcon className="size-5" />
+        </button>
+      </div>
+
+      {!disabled ? (
+        <span className="self-end typography-body03-regular text-text-50">
+          {comment.length}/{COMMENT_MAX_LENGTH}
+        </span>
+      ) : null}
+
+      {error ? (
+        <p className="typography-body03-regular text-error">{error}</p>
+      ) : null}
+
+      {submitError ? (
+        <p className="typography-body03-regular text-error">{submitError}</p>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/features/store-register/ui/RequestCommentItem.tsx b/src/features/store-register/ui/RequestCommentItem.tsx
new file mode 100644
index 00000000..31444766
--- /dev/null
+++ b/src/features/store-register/ui/RequestCommentItem.tsx
@@ -0,0 +1,75 @@
+import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
+import { FileIcon } from '@/features/store-register/ui/icons'
+import type {
+  WorkspaceRequestCommentDto,
+  WorkspaceRequestCommentFileDto,
+} from '@/features/store-register/types/workspaceRequests'
+
+type Props = {
+  comment: WorkspaceRequestCommentDto
+}
+
+function FileChip({
+  file,
+  isAdmin,
+}: {
+  file: WorkspaceRequestCommentFileDto
+  isAdmin: boolean
+}) {
+  return (
+    <a
+      href={file.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`inline-flex max-w-[80%] items-center gap-1.5 rounded-lg border bg-white px-2.5 py-1.5 ${
+        isAdmin ? 'border-line-1 text-text-90' : 'border-main-300 text-sub'
+      }`}
+    >
+      <FileIcon className="size-3.5 shrink-0" />
+      <span className="truncate typography-body03-regular">첨부파일</span>
+    </a>
+  )
+}
+
+/** 댓글 한 건 — 관리자(ADMIN) 좌측 회색 / 본인(USER) 우측 main 톤 */
+export function RequestCommentItem({ comment }: Props) {
+  const isAdmin = comment.commentOwner === 'ADMIN'
+  const time = formatRequestDateTime(comment.createdAt)
+
+  if (isAdmin) {
+    return (
+      <div className="flex flex-col items-start gap-1">
+        <span className="px-1 typography-body03-regular text-text-70">
+          관리자
+        </span>
+        {comment.comment ? (
+          <p className="max-w-[80%] whitespace-pre-wrap break-words rounded-[14px] rounded-tl-[4px] bg-bg-dark px-3.5 py-3 typography-body02-regular text-text-100">
+            {comment.comment}
+          </p>
+        ) : null}
+        {comment.files.map(file => (
+          <FileChip key={file.fileId} file={file} isAdmin />
+        ))}
+        <span className="px-1 typography-body03-regular text-text-50">
+          {time}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col items-end gap-1">
+      {comment.files.map(file => (
+        <FileChip key={file.fileId} file={file} isAdmin={false} />
+      ))}
+      {comment.comment ? (
+        <p className="max-w-[80%] whitespace-pre-wrap break-words rounded-[14px] rounded-tr-[4px] bg-main-100 px-3.5 py-3 typography-body02-regular text-text-100">
+          {comment.comment}
+        </p>
+      ) : null}
+      <span className="px-1 typography-body03-regular text-text-50">
+        {time}
+      </span>
+    </div>
+  )
+}
diff --git a/src/features/store-register/ui/RequestThreadSection.tsx b/src/features/store-register/ui/RequestThreadSection.tsx
new file mode 100644
index 00000000..6abd35ba
--- /dev/null
+++ b/src/features/store-register/ui/RequestThreadSection.tsx
@@ -0,0 +1,116 @@
+import { useRequestCommentThreadViewModel } from '@/features/store-register/hooks/useRequestCommentThreadViewModel'
+import { RequestCommentItem } from '@/features/store-register/ui/RequestCommentItem'
+import { RequestCommentComposer } from '@/features/store-register/ui/RequestCommentComposer'
+
+type ThreadVariant = 'PENDING' | 'REVOKED'
+
+type Props = {
+  requestId: number
+  variant: ThreadVariant
+}
+
+type VariantCopy = {
+  emptyTitle: string
+  emptyDescription: string
+  placeholder: string
+}
+
+const VARIANT_COPY: Record<ThreadVariant, VariantCopy> = {
+  PENDING: {
+    emptyTitle: '아직 주고받은 메시지가 없어요',
+    emptyDescription:
+      '검토 관련 문의나 보완 자료를 미리 남기면 관리자가 답변해 드려요.',
+    placeholder: '관리자에게 메시지를 남겨 보세요',
+  },
+  REVOKED: {
+    emptyTitle: '아직 관리자가 남긴 코멘트가 없어요',
+    emptyDescription:
+      '반려 사유가 등록되면 여기에서 바로 확인하고 답글을 남길 수 있어요. 먼저 궁금한 점을 남겨도 좋아요.',
+    placeholder: '추가 자료나 설명을 남겨 재심사를 요청하세요',
+  },
+}
+
+/** 신청 1건의 단일 댓글 스레드 섹션 — 헤더 + 안내 + 말풍선 목록 + 입력바 */
+export function RequestThreadSection({ requestId, variant }: Props) {
+  const thread = useRequestCommentThreadViewModel(requestId, true)
+  const copy = VARIANT_COPY[variant]
+  const isEmpty =
+    !thread.isLoading && !thread.isError && thread.messageCount === 0
+  const composerDisabled = thread.isLoading || thread.isError
+
+  return (
+    <section className="flex flex-col gap-3.5">
+      <div className="flex items-center gap-2">
+        <h2 className="typography-headline03 text-text-100">스레드</h2>
+        <span className="inline-flex h-[22px] items-center rounded-full bg-bg-dark px-2 typography-body03-semibold text-text-70">
+          메시지 {thread.messageCount}개
+        </span>
+      </div>
+
+      {variant === 'REVOKED' ? (
+        <p className="rounded-xl bg-main-100 px-4 py-3.5 typography-body02-regular text-text-100">
+          댓글로 자료를 보강해{' '}
+          <span className="typography-body02-semibold text-main">재심사</span>를
+          요청할 수 있어요. 관리자 첫 댓글이 곧 반려 사유예요.
+        </p>
+      ) : null}
+
+      {thread.isLoading ? (
+        <p className="typography-body02-regular text-text-50">불러오는 중…</p>
+      ) : null}
+
+      {thread.isError ? (
+        <div className="flex flex-col items-start gap-2.5 rounded-xl bg-bg-dark px-4 py-3.5">
+          <div className="flex flex-col gap-1">
+            <p className="typography-body02-semibold text-text-100">
+              문의 내용을 불러오지 못했어요
+            </p>
+            <p className="typography-body03-regular text-text-70">
+              네트워크 연결을 확인한 뒤 다시 시도해 주세요.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => thread.refetch()}
+            className="h-9 rounded-lg border border-line-2 bg-white px-3.5 typography-body03-semibold text-text-90"
+          >
+            다시 시도
+          </button>
+        </div>
+      ) : null}
+
+      {isEmpty ? (
+        <div className="flex flex-col gap-1 rounded-xl bg-bg-dark px-4 py-5 text-center">
+          <p className="typography-body02-semibold text-text-100">
+            {copy.emptyTitle}
+          </p>
+          <p className="typography-body03-regular text-text-70">
+            {copy.emptyDescription}
+          </p>
+        </div>
+      ) : null}
+
+      {thread.messageCount > 0 ? (
+        <div className="flex flex-col gap-3.5">
+          {thread.comments.map(comment => (
+            <RequestCommentItem key={comment.id} comment={comment} />
+          ))}
+        </div>
+      ) : null}
+
+      <RequestCommentComposer
+        comment={thread.comment}
+        onCommentChange={thread.onCommentChange}
+        attachment={thread.attachment}
+        submitError={thread.submitError}
+        isSubmitting={thread.isSubmitting}
+        canSubmit={thread.canSubmit}
+        onSubmit={thread.submit}
+        placeholder={
+          composerDisabled ? '불러온 뒤 입력할 수 있어요' : copy.placeholder
+        }
+        disabled={composerDisabled}
+      />
+    </section>
+  )
+}

From cfbd41b291aaaae589844fbd2241114569a2bfa4 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 13:25:05 +0900
Subject: [PATCH 16/24] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=8A=A4?=
 =?UTF-8?q?=EB=A0=88=EB=93=9C=20ViewModel=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useRequestCommentThreadViewModel.ts | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 src/features/store-register/hooks/useRequestCommentThreadViewModel.ts

diff --git a/src/features/store-register/hooks/useRequestCommentThreadViewModel.ts b/src/features/store-register/hooks/useRequestCommentThreadViewModel.ts
new file mode 100644
index 00000000..7888400f
--- /dev/null
+++ b/src/features/store-register/hooks/useRequestCommentThreadViewModel.ts
@@ -0,0 +1,102 @@
+import { useCallback, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import useAuthStore from '@/shared/stores/useAuthStore'
+import { useCertificateFilePick } from '@/shared/hooks/useCertificateFilePick'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
+import {
+  createWorkspaceRequestComment,
+  fetchWorkspaceRequestComments,
+} from '@/features/store-register/api/workspaceRequests'
+import { uploadWorkspaceRequestCommentFile } from '@/features/store-register/api/workspaceFileUpload'
+
+export const COMMENT_MAX_LENGTH = 255
+
+/** 첨부 파일 ≤ 5MB */
+const ATTACHMENT_MAX_BYTES = 5 * 1024 * 1024
+
+/** 신청 1건의 단일 댓글 스레드 + 작성 ViewModel */
+export function useRequestCommentThreadViewModel(
+  requestId: number,
+  enabled: boolean
+) {
+  const queryClient = useQueryClient()
+  const scope = useAuthStore(state => state.scope)
+  const attachment = useCertificateFilePick({ maxBytes: ATTACHMENT_MAX_BYTES })
+
+  const [comment, setComment] = useState('')
+  const [submitError, setSubmitError] = useState<string | null>(null)
+
+  const commentsKey = queryKeys.storeRegisterRequest.comments(scope, requestId)
+
+  const query = useQuery({
+    queryKey: commentsKey,
+    queryFn: () => fetchWorkspaceRequestComments(scope, requestId),
+    enabled: enabled && Number.isFinite(requestId),
+  })
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const trimmed = comment.trim()
+      let fileIds: string[] | undefined
+      if (attachment.file) {
+        const fileId = await uploadWorkspaceRequestCommentFile(
+          attachment.file,
+          scope
+        )
+        fileIds = [fileId]
+      }
+      await createWorkspaceRequestComment(scope, requestId, {
+        comment: trimmed,
+        fileIds,
+      })
+    },
+    onSuccess: async () => {
+      setComment('')
+      attachment.clear()
+      await queryClient.invalidateQueries({ queryKey: commentsKey })
+    },
+    onError: (e: unknown) => {
+      setSubmitError(
+        getAxiosErrorMessage(
+          e,
+          '댓글을 등록하지 못했습니다. 잠시 후 다시 시도해 주세요.'
+        )
+      )
+    },
+  })
+
+  const onCommentChange = useCallback((value: string) => {
+    setSubmitError(null)
+    setComment(value.slice(0, COMMENT_MAX_LENGTH))
+  }, [])
+
+  const canSubmit =
+    comment.trim().length > 0 && !mutation.isPending && !attachment.error
+
+  const submit = useCallback(() => {
+    if (!canSubmit) return
+    setSubmitError(null)
+    mutation.mutate()
+  }, [canSubmit, mutation])
+
+  // 오래된 → 최신 정렬 (createdAt 오름차순, 대화 흐름)
+  const comments = [...(query.data ?? [])].sort(
+    (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+  )
+
+  return {
+    comments,
+    messageCount: comments.length,
+    isLoading: query.isPending && query.fetchStatus !== 'idle',
+    isError: query.isError,
+    refetch: query.refetch,
+    comment,
+    onCommentChange,
+    attachment,
+    submitError,
+    isSubmitting: mutation.isPending,
+    canSubmit,
+    submit,
+  }
+}

From f4f3e826af231d6be7b525b6cc0e728ee08b9b62 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 13:25:11 +0900
Subject: [PATCH 17/24] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=8A=A4?=
 =?UTF-8?q?=EB=A0=88=EB=93=9C=20API=20=EC=B6=94=EA=B0=80=20(=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1,=20=EC=A1=B0=ED=9A=8C,=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store-register/api/workspaceFileUpload.ts |  6 +--
 .../store-register/api/workspaceRequests.ts   | 39 ++++++-------------
 2 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/src/features/store-register/api/workspaceFileUpload.ts b/src/features/store-register/api/workspaceFileUpload.ts
index a2c28906..b38028d3 100644
--- a/src/features/store-register/api/workspaceFileUpload.ts
+++ b/src/features/store-register/api/workspaceFileUpload.ts
@@ -38,14 +38,14 @@ export async function uploadWorkspaceRegistrationFile(
   })
 }
 
-/** 반려 사유 댓글 첨부 파일 업로드 (targetType=WORKSPACE_REASON_COMMENT). */
-export async function uploadWorkspaceReasonCommentFile(
+/** 신청 댓글 첨부 파일 업로드 (targetType=WORKSPACE_REQUEST_COMMENT). */
+export async function uploadWorkspaceRequestCommentFile(
   file: File,
   scope?: 'MANAGER' | 'USER' | null
 ): Promise<string> {
   return uploadAppFile({
     file,
-    targetType: 'WORKSPACE_REASON_COMMENT',
+    targetType: 'WORKSPACE_REQUEST_COMMENT',
     bucketType: WORKSPACE_REGISTRATION_BUCKET,
     scope,
   })
diff --git a/src/features/store-register/api/workspaceRequests.ts b/src/features/store-register/api/workspaceRequests.ts
index cb03b4cb..febe56f4 100644
--- a/src/features/store-register/api/workspaceRequests.ts
+++ b/src/features/store-register/api/workspaceRequests.ts
@@ -2,14 +2,12 @@ import axiosInstance from '@/shared/lib/axiosInstance'
 import { getAuthApiBasePath } from '@/shared/lib/authApiPath'
 import type { CommonApiResponse } from '@/shared/types/common'
 import type {
-  CreateWorkspaceReasonCommentBody,
-  WorkspaceReasonCommentDto,
-  WorkspaceReasonCommentsApiResponse,
+  CreateWorkspaceRequestCommentBody,
+  WorkspaceRequestCommentDto,
+  WorkspaceRequestCommentsApiResponse,
   WorkspaceRequestDetailApiResponse,
   WorkspaceRequestDetailDto,
   WorkspaceRegistrationCreateBody,
-  WorkspaceRequestReasonDto,
-  WorkspaceRequestReasonsApiResponse,
   WorkspaceRequestsListApiResponse,
   WorkspaceRequestListItemDto,
 } from '@/features/store-register/types/workspaceRequests'
@@ -63,38 +61,25 @@ export async function cancelWorkspaceRequest(
   )
 }
 
-/** GET /{scope}/workspace-requests/{id}/reasons */
-export async function fetchWorkspaceRequestReasons(
+/** GET /{scope}/workspace-requests/{id}/comments */
+export async function fetchWorkspaceRequestComments(
   scope: AuthScope,
   workspaceRequestId: number
-): Promise<WorkspaceRequestReasonDto[]> {
-  const response = await axiosInstance.get<WorkspaceRequestReasonsApiResponse>(
-    `${requestsBasePath(scope)}/${workspaceRequestId}/reasons`
+): Promise<WorkspaceRequestCommentDto[]> {
+  const response = await axiosInstance.get<WorkspaceRequestCommentsApiResponse>(
+    `${requestsBasePath(scope)}/${workspaceRequestId}/comments`
   )
   return response.data.data
 }
 
-/** GET /{scope}/workspace-requests/{id}/reasons/{reasonId}/comments */
-export async function fetchWorkspaceReasonComments(
+/** POST /{scope}/workspace-requests/{id}/comments */
+export async function createWorkspaceRequestComment(
   scope: AuthScope,
   workspaceRequestId: number,
-  reasonId: number
-): Promise<WorkspaceReasonCommentDto[]> {
-  const response = await axiosInstance.get<WorkspaceReasonCommentsApiResponse>(
-    `${requestsBasePath(scope)}/${workspaceRequestId}/reasons/${reasonId}/comments`
-  )
-  return response.data.data
-}
-
-/** POST /{scope}/workspace-requests/{id}/reasons/{reasonId}/comments */
-export async function createWorkspaceReasonComment(
-  scope: AuthScope,
-  workspaceRequestId: number,
-  reasonId: number,
-  body: CreateWorkspaceReasonCommentBody
+  body: CreateWorkspaceRequestCommentBody
 ): Promise<void> {
   await axiosInstance.post<CommonApiResponse<Record<string, never>>>(
-    `${requestsBasePath(scope)}/${workspaceRequestId}/reasons/${reasonId}/comments`,
+    `${requestsBasePath(scope)}/${workspaceRequestId}/comments`,
     body
   )
 }

From fe0206c6cbd22bbfe744bfd4ac7bcb1a4e1ca263 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 13:25:17 +0900
Subject: [PATCH 18/24] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=8A=A4?=
 =?UTF-8?q?=EB=A0=88=EB=93=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B0=8F=20=EC=BF=BC=EB=A6=AC=ED=82=A4=20=EC=A0=95?=
 =?UTF-8?q?=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store-register/lib/requestStatus.ts       |  2 +-
 .../store-register/types/workspaceRequests.ts | 34 ++++++-------------
 src/shared/lib/queryKeys.ts                   | 10 ++----
 3 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/src/features/store-register/lib/requestStatus.ts b/src/features/store-register/lib/requestStatus.ts
index c9120be2..17348adf 100644
--- a/src/features/store-register/lib/requestStatus.ts
+++ b/src/features/store-register/lib/requestStatus.ts
@@ -25,7 +25,7 @@ const STATUS_STYLE: Record<WorkspaceRequestStatusValue, StatusBadgeStyle> = {
     label: '반려',
     badgeClass: 'border-error bg-error/10 text-error',
   },
-  CANCELED: {
+  CANCELLED: {
     label: '취소',
     badgeClass: 'border-line-1 bg-bg-dark text-text-50',
   },
diff --git a/src/features/store-register/types/workspaceRequests.ts b/src/features/store-register/types/workspaceRequests.ts
index 5a69875f..9abaeba4 100644
--- a/src/features/store-register/types/workspaceRequests.ts
+++ b/src/features/store-register/types/workspaceRequests.ts
@@ -5,12 +5,12 @@ export interface WorkspaceRequestStatusDto {
   description: string
 }
 
-/** 신청 상태 — PENDING(검토 중) → ACTIVATED | REVOKED | CANCELED */
+/** 신청 상태 — PENDING(검토 중) → ACTIVATED | REVOKED | CANCELLED */
 export type WorkspaceRequestStatusValue =
   | 'PENDING'
   | 'ACTIVATED'
   | 'REVOKED'
-  | 'CANCELED'
+  | 'CANCELLED'
 
 export interface WorkspaceRequestListItemDto {
   id: number
@@ -66,41 +66,29 @@ export type WorkspaceRegistrationCreateBody = {
   workspaceWarrantFileId: string | null
 } & Partial<{ latitude: number; longitude: number }>
 
-/** 반려 사유 */
-export interface WorkspaceRequestReasonDto {
-  id: number
-  reason: string
-  createdAt: string
-}
-
-export type WorkspaceRequestReasonsApiResponse = CommonApiResponse<
-  WorkspaceRequestReasonDto[]
->
-
-export interface WorkspaceReasonCommentFileDto {
+export interface WorkspaceRequestCommentFileDto {
   fileId: string
   url: string
 }
 
-export type WorkspaceReasonCommentOwner = 'USER' | 'ADMIN'
+export type WorkspaceRequestCommentOwner = 'USER' | 'ADMIN'
 
-/** 반려 사유에 달린 댓글 (게시판 글-댓글 스타일) */
-export interface WorkspaceReasonCommentDto {
+/** 신청 1건에 매달리는 단일 스레드 댓글 (관리자 첫 댓글 = 반려 사유) */
+export interface WorkspaceRequestCommentDto {
   id: number
-  workspaceReasonId: number
   userId: number
-  commentOwner: WorkspaceReasonCommentOwner
+  commentOwner: WorkspaceRequestCommentOwner
   comment: string
-  files: WorkspaceReasonCommentFileDto[]
+  files: WorkspaceRequestCommentFileDto[]
   createdAt: string
 }
 
-export type WorkspaceReasonCommentsApiResponse = CommonApiResponse<
-  WorkspaceReasonCommentDto[]
+export type WorkspaceRequestCommentsApiResponse = CommonApiResponse<
+  WorkspaceRequestCommentDto[]
 >
 
 /** POST 댓글 본문 — comment ≤ 255자, fileIds 선택 */
-export interface CreateWorkspaceReasonCommentBody {
+export interface CreateWorkspaceRequestCommentBody {
   comment: string
   fileIds?: string[]
 }
diff --git a/src/shared/lib/queryKeys.ts b/src/shared/lib/queryKeys.ts
index 2b1b0840..e4cadb31 100644
--- a/src/shared/lib/queryKeys.ts
+++ b/src/shared/lib/queryKeys.ts
@@ -95,14 +95,8 @@ export const queryKeys = {
       ['storeRegisterRequest', 'list', scope] as const,
     detail: (scope: 'MANAGER' | 'USER' | null, requestId: number) =>
       ['storeRegisterRequest', 'detail', scope, requestId] as const,
-    reasons: (scope: 'MANAGER' | 'USER' | null, requestId: number) =>
-      ['storeRegisterRequest', 'reasons', scope, requestId] as const,
-    comments: (
-      scope: 'MANAGER' | 'USER' | null,
-      requestId: number,
-      reasonId: number
-    ) =>
-      ['storeRegisterRequest', 'comments', scope, requestId, reasonId] as const,
+    comments: (scope: 'MANAGER' | 'USER' | null, requestId: number) =>
+      ['storeRegisterRequest', 'comments', scope, requestId] as const,
   },
   notification: {
     list: (scope: 'MANAGER' | 'USER' | null, type?: string) =>

From f4a9a3451c33386411033e49ffd8e56ac0cc2b29 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 13:25:23 +0900
Subject: [PATCH 19/24] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=20=EB=8C=93=EA=B8=80=20=EC=8A=A4=EB=A0=88=EB=93=9C=20?=
 =?UTF-8?q?=ED=86=B5=ED=95=A9=20=EB=B0=8F=20=EC=A7=80=EC=9B=90=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/store-register/ui/icons.tsx    | 14 --------------
 src/pages/manager/store-register/index.tsx  | 11 ++++++-----
 src/pages/store-register/requests/index.tsx |  2 +-
 src/shared/api/appFileUpload.ts             |  2 +-
 4 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/features/store-register/ui/icons.tsx b/src/features/store-register/ui/icons.tsx
index c424affb..88d77847 100644
--- a/src/features/store-register/ui/icons.tsx
+++ b/src/features/store-register/ui/icons.tsx
@@ -178,20 +178,6 @@ export function DocPlusIcon(props: IconProps) {
   )
 }
 
-/** 말풍선(재심사 문의 안내) */
-export function ChatIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M8 10h8M8 14h5" strokeLinecap="round" />
-      <path
-        d="M21 12a9 9 0 11-3.5-7.1L21 4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </Svg>
-  )
-}
-
 /** 닫기(파일 삭제) */
 export function CloseIcon(props: IconProps) {
   return (
diff --git a/src/pages/manager/store-register/index.tsx b/src/pages/manager/store-register/index.tsx
index 2171d020..770fd688 100644
--- a/src/pages/manager/store-register/index.tsx
+++ b/src/pages/manager/store-register/index.tsx
@@ -117,10 +117,11 @@ export function StoreRegisterPage() {
               hint="위탁 관리 시에만 첨부"
               optional
             />
-            <div className="flex items-center gap-2 rounded-xl bg-warning-100 px-4 py-3.5">
-              <ClockIcon className="size-[18px] shrink-0 text-warning" />
+            <div className="flex items-start gap-2 rounded-xl bg-warning-100 px-4 py-3.5">
+              <ClockIcon className="size-[18px] mt-px shrink-0 text-warning" />
               <span className="typography-body02-regular text-text-100">
-                운영자 검토까지 영업일 1일 정도 걸려요.
+                관리자 검토까지 영업일 3일 정도 걸려요. 결과는 푸시 알림으로
+                안내드려요.
               </span>
             </div>
             {w.submitError ? (
@@ -140,8 +141,8 @@ export function StoreRegisterPage() {
               신청을 접수했어요
             </h1>
             <p className="max-w-[260px] typography-body02-regular text-text-70">
-              운영자 검토 후 승인되면 사장님 계정으로 전환할 수 있어요. 영업일
-              1일 이내에 결과를 알려드릴게요.
+              관리자 검토 후 승인되면 사장님 계정으로 전환할 수 있어요. 영업일
+              3일 이내에 결과를 푸시 알림으로 알려드릴게요.
             </p>
           </div>
         ) : null}
diff --git a/src/pages/store-register/requests/index.tsx b/src/pages/store-register/requests/index.tsx
index c256e27a..7e0dc29a 100644
--- a/src/pages/store-register/requests/index.tsx
+++ b/src/pages/store-register/requests/index.tsx
@@ -65,7 +65,7 @@ export function StoreRegisterRequestsPage() {
               아직 등록 신청 내역이 없어요
             </p>
             <p className="max-w-[240px] typography-body02-regular text-text-70">
-              업장을 등록하고 운영자 승인 후 사장님 계정으로 전환해 보세요.
+              업장을 등록하고 관리자 승인 후 사장님 계정으로 전환해 보세요.
             </p>
           </div>
         ) : null}
diff --git a/src/shared/api/appFileUpload.ts b/src/shared/api/appFileUpload.ts
index 09eb6806..d30b73e9 100644
--- a/src/shared/api/appFileUpload.ts
+++ b/src/shared/api/appFileUpload.ts
@@ -11,7 +11,7 @@ export type AppFileUploadTargetType =
   | 'WORKSPACE_CERTIFICATE'
   | 'WORKSPACE_OWN_IDENTITY'
   | 'WORKSPACE_WARRANT'
-  | 'WORKSPACE_REASON_COMMENT'
+  | 'WORKSPACE_REQUEST_COMMENT'
   | 'CHAT_MESSAGE'
 
 export type AppFileBucketType = 'PUBLIC' | 'PRIVATE'

From bb5ecb4ae2c0f6b84e9ab107ee39279f22716fb0 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 14:05:51 +0900
Subject: [PATCH 20/24] =?UTF-8?q?feat:=20=EC=8A=B9=EC=9D=B8=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=EC=9A=94=EC=B2=AD=EC=97=90=EC=84=9C=EB=8F=84=20?=
 =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=8A=A4=EB=A0=88=EB=93=9C=20=EB=85=B8?=
 =?UTF-8?q?=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- RequestThreadSection에 ACTIVATED 상태 지원 추가
- 승인 완료된 요청도 과거 대화 이력을 읽기 전용으로 표시
- 메시지가 없으면 스레드 섹션 자체를 숨김 (어색한 빈 안내문 방지)
- 입력바는 ACTIVATED 상태에서만 숨김 (PENDING/REVOKED는 기존 동작 유지)
---
 .../ui/RequestThreadSection.tsx               | 44 ++++++++++++-------
 .../store-register/request-detail/index.tsx   |  7 +++
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/features/store-register/ui/RequestThreadSection.tsx b/src/features/store-register/ui/RequestThreadSection.tsx
index 6abd35ba..67d7d19d 100644
--- a/src/features/store-register/ui/RequestThreadSection.tsx
+++ b/src/features/store-register/ui/RequestThreadSection.tsx
@@ -2,7 +2,7 @@ import { useRequestCommentThreadViewModel } from '@/features/store-register/hook
 import { RequestCommentItem } from '@/features/store-register/ui/RequestCommentItem'
 import { RequestCommentComposer } from '@/features/store-register/ui/RequestCommentComposer'
 
-type ThreadVariant = 'PENDING' | 'REVOKED'
+type ThreadVariant = 'PENDING' | 'REVOKED' | 'ACTIVATED'
 
 type Props = {
   requestId: number
@@ -15,7 +15,8 @@ type VariantCopy = {
   placeholder: string
 }
 
-const VARIANT_COPY: Record<ThreadVariant, VariantCopy> = {
+/** 입력바/빈 상태 안내는 상호작용 variant(PENDING·REVOKED)에서만 사용 */
+const VARIANT_COPY: Record<'PENDING' | 'REVOKED', VariantCopy> = {
   PENDING: {
     emptyTitle: '아직 주고받은 메시지가 없어요',
     emptyDescription:
@@ -33,7 +34,14 @@ const VARIANT_COPY: Record<ThreadVariant, VariantCopy> = {
 /** 신청 1건의 단일 댓글 스레드 섹션 — 헤더 + 안내 + 말풍선 목록 + 입력바 */
 export function RequestThreadSection({ requestId, variant }: Props) {
   const thread = useRequestCommentThreadViewModel(requestId, true)
-  const copy = VARIANT_COPY[variant]
+  const readOnly = variant === 'ACTIVATED'
+
+  // 승인 완료(읽기 전용): 주고받은 메시지가 없으면 섹션 자체를 숨김.
+  // comments 는 로딩 중·에러 시에도 []라 messageCount === 0 이므로
+  // "메시지 없음 / 불러오는 중 / 불러오기 실패" 세 경우 모두 여기서 감춰진다.
+  if (readOnly && thread.messageCount === 0) return null
+
+  const copy = readOnly ? null : VARIANT_COPY[variant]
   const isEmpty =
     !thread.isLoading && !thread.isError && thread.messageCount === 0
   const composerDisabled = thread.isLoading || thread.isError
@@ -79,7 +87,7 @@ export function RequestThreadSection({ requestId, variant }: Props) {
         </div>
       ) : null}
 
-      {isEmpty ? (
+      {copy && isEmpty ? (
         <div className="flex flex-col gap-1 rounded-xl bg-bg-dark px-4 py-5 text-center">
           <p className="typography-body02-semibold text-text-100">
             {copy.emptyTitle}
@@ -98,19 +106,21 @@ export function RequestThreadSection({ requestId, variant }: Props) {
         </div>
       ) : null}
 
-      <RequestCommentComposer
-        comment={thread.comment}
-        onCommentChange={thread.onCommentChange}
-        attachment={thread.attachment}
-        submitError={thread.submitError}
-        isSubmitting={thread.isSubmitting}
-        canSubmit={thread.canSubmit}
-        onSubmit={thread.submit}
-        placeholder={
-          composerDisabled ? '불러온 뒤 입력할 수 있어요' : copy.placeholder
-        }
-        disabled={composerDisabled}
-      />
+      {copy ? (
+        <RequestCommentComposer
+          comment={thread.comment}
+          onCommentChange={thread.onCommentChange}
+          attachment={thread.attachment}
+          submitError={thread.submitError}
+          isSubmitting={thread.isSubmitting}
+          canSubmit={thread.canSubmit}
+          onSubmit={thread.submit}
+          placeholder={
+            composerDisabled ? '불러온 뒤 입력할 수 있어요' : copy.placeholder
+          }
+          disabled={composerDisabled}
+        />
+      ) : null}
     </section>
   )
 }
diff --git a/src/pages/store-register/request-detail/index.tsx b/src/pages/store-register/request-detail/index.tsx
index 113d451c..f6c6ea2d 100644
--- a/src/pages/store-register/request-detail/index.tsx
+++ b/src/pages/store-register/request-detail/index.tsx
@@ -102,6 +102,13 @@ export function StoreRegisterRequestDetailPage() {
                     variant="REVOKED"
                   />
                 ) : null}
+
+                {statusValue === 'ACTIVATED' ? (
+                  <RequestThreadSection
+                    requestId={requestId}
+                    variant="ACTIVATED"
+                  />
+                ) : null}
               </>
             )}
 

From b0242c782fda867074485d9f71933da0c131b769 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 15:45:12 +0900
Subject: [PATCH 21/24] =?UTF-8?q?fix:=20BRN=20=EA=B2=80=EC=A6=9D=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B0=95=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

사업자등록번호 제출 게이트를 UI 검증과 일치시킴.
infoValid가 brn.trim().length > 0만 검사해 1자리 입력으로도
다음/제출 버튼이 눌리던 버그를 brn.replace(/\D/g, '').length === 10으로 수정.
---
 src/features/store-register/hooks/useStoreRegisterWizard.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/store-register/hooks/useStoreRegisterWizard.ts b/src/features/store-register/hooks/useStoreRegisterWizard.ts
index ca00722b..c4ca8293 100644
--- a/src/features/store-register/hooks/useStoreRegisterWizard.ts
+++ b/src/features/store-register/hooks/useStoreRegisterWizard.ts
@@ -46,7 +46,7 @@ export function useStoreRegisterWizard() {
   const infoValid =
     bizName.trim().length > 0 &&
     ownerName.trim().length > 0 &&
-    brn.trim().length > 0 &&
+    brn.replace(/\D/g, '').length === 10 &&
     province.trim().length > 0 &&
     district.trim().length > 0 &&
     town.trim().length > 0 &&

From 8372da14512b9903333ceb3dcb2be89bc1b7c65d Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 15:45:20 +0900
Subject: [PATCH 22/24] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=ED=86=A0?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=ED=82=A4=20=EC=9A=B0=ED=9A=8C=20=EB=B0=A9?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

resolveStatusBadge에서 타입 단언 후 직접 인덱싱 시
__proto__, toString 등 프로토타입 키가 fallback을 우회할 수 있는 문제 해결.
Object.prototype.hasOwnProperty.call로 own property를 사전에 검사.
---
 src/features/store-register/lib/requestStatus.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/features/store-register/lib/requestStatus.ts b/src/features/store-register/lib/requestStatus.ts
index 17348adf..7d46cc3e 100644
--- a/src/features/store-register/lib/requestStatus.ts
+++ b/src/features/store-register/lib/requestStatus.ts
@@ -36,11 +36,14 @@ export function resolveStatusBadge(status: {
   value: string
   description?: string
 }): StatusBadgeStyle {
-  const style = STATUS_STYLE[status.value as WorkspaceRequestStatusValue]
-  if (!style) {
+  const hasStyle = Object.prototype.hasOwnProperty.call(
+    STATUS_STYLE,
+    status.value
+  )
+  if (!hasStyle) {
     return status.description
       ? { ...FALLBACK, label: status.description }
       : FALLBACK
   }
-  return style
+  return STATUS_STYLE[status.value as WorkspaceRequestStatusValue]
 }

From 9f0ff4b16c865ce2195ecbb87f075c2da9d7f9e7 Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 15:45:28 +0900
Subject: [PATCH 23/24] =?UTF-8?q?fix:=20=EC=97=85=EC=9E=A5=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20requestId=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?=
 =?UTF-8?q?=EC=82=AC=20=EB=B0=8F=20a11y=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- request-detail: Number(requestId) NaN 시 빈 화면 문제 해결
  isValidRequestId 플래그 추가 후 유효하지 않은 경로 안내 메시지 렌더링
  loading/error 분기를 플래그로 게이트

- StoreBasicInfoFields: 폼 라벨-입력 연결 개선
  Field 컴포넌트에 htmlFor prop 추가
  단일 입력 5개 필드(업장명·대표자 성명·사업자등록번호·업종·연락처)에
  label htmlFor ↔ input id 연결으로 보조기기 지원 개선
---
 .../ui/StoreBasicInfoFields.tsx               | 26 ++++++++++++++-----
 .../store-register/request-detail/index.tsx   | 18 ++++++++++---
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/features/store-register/ui/StoreBasicInfoFields.tsx b/src/features/store-register/ui/StoreBasicInfoFields.tsx
index ab4761e1..ec25aa2f 100644
--- a/src/features/store-register/ui/StoreBasicInfoFields.tsx
+++ b/src/features/store-register/ui/StoreBasicInfoFields.tsx
@@ -27,15 +27,20 @@ type Props = {
 function Field({
   label,
   hint,
+  htmlFor,
   children,
 }: {
   label: string
   hint?: string
+  htmlFor?: string
   children: ReactNode
 }) {
   return (
     <div className="flex flex-col gap-2">
-      <label className="typography-body02-semibold text-text-100">
+      <label
+        htmlFor={htmlFor}
+        className="typography-body02-semibold text-text-100"
+      >
         {label}
       </label>
       {children}
@@ -71,8 +76,9 @@ export function StoreBasicInfoFields({
 
   return (
     <div className="flex w-full flex-col gap-[18px]">
-      <Field label="업장명">
+      <Field label="업장명" htmlFor="bizName">
         <AuthInput
+          id="bizName"
           type="text"
           placeholder="예) 알터 강남점"
           value={bizName}
@@ -81,8 +87,13 @@ export function StoreBasicInfoFields({
         />
       </Field>
 
-      <Field label="대표자 성명" hint="신분증 성명과 동일하게 입력해 주세요.">
+      <Field
+        label="대표자 성명"
+        hint="신분증 성명과 동일하게 입력해 주세요."
+        htmlFor="ownerName"
+      >
         <AuthInput
+          id="ownerName"
           type="text"
           placeholder="대표자 성명"
           value={ownerName}
@@ -91,8 +102,9 @@ export function StoreBasicInfoFields({
         />
       </Field>
 
-      <Field label="사업자등록번호">
+      <Field label="사업자등록번호" htmlFor="brn">
         <AuthInput
+          id="brn"
           type="text"
           placeholder="000-00-00000"
           value={brn}
@@ -108,8 +120,9 @@ export function StoreBasicInfoFields({
         ) : null}
       </Field>
 
-      <Field label="업종">
+      <Field label="업종" htmlFor="type">
         <AuthInput
+          id="type"
           type="text"
           placeholder="예) 카페 · 음료"
           value={type}
@@ -117,8 +130,9 @@ export function StoreBasicInfoFields({
         />
       </Field>
 
-      <Field label="업장 연락처">
+      <Field label="업장 연락처" htmlFor="contact">
         <AuthInput
+          id="contact"
           type="tel"
           placeholder="숫자만 입력 (자동 하이픈)"
           value={contact}
diff --git a/src/pages/store-register/request-detail/index.tsx b/src/pages/store-register/request-detail/index.tsx
index f6c6ea2d..a3d9b863 100644
--- a/src/pages/store-register/request-detail/index.tsx
+++ b/src/pages/store-register/request-detail/index.tsx
@@ -13,7 +13,10 @@ import { formatRequestDateTime } from '@/features/store-register/lib/formatDate'
 export function StoreRegisterRequestDetailPage() {
   const params = useParams<{ requestId: string }>()
   const requestId = Number(params.requestId)
-  const vm = useStoreRegisterRequestDetailViewModel(requestId)
+  const isValidRequestId = Number.isInteger(requestId) && requestId > 0
+  const vm = useStoreRegisterRequestDetailViewModel(
+    isValidRequestId ? requestId : Number.NaN
+  )
   const detail = vm.detail
   const statusValue = detail?.status.value
   const isCanceled = statusValue === 'CANCELLED'
@@ -24,13 +27,22 @@ export function StoreRegisterRequestDetailPage() {
       <Navbar variant="detail" title="신청 상세" />
 
       <div className="mx-auto flex w-full max-w-[400px] flex-1 flex-col px-4 pb-10 pt-5">
-        {vm.isLoading ? (
+        {!isValidRequestId ? (
+          <p
+            className="mt-10 text-center typography-body02-regular text-error"
+            role="alert"
+          >
+            유효하지 않은 신청 상세 경로입니다.
+          </p>
+        ) : null}
+
+        {isValidRequestId && vm.isLoading ? (
           <div className="flex flex-1 items-center justify-center">
             <Spinner />
           </div>
         ) : null}
 
-        {vm.isError ? (
+        {isValidRequestId && vm.isError ? (
           <p
             className="mt-10 text-center typography-body02-regular text-error"
             role="alert"

From af4ee0510b6d9549e42751ef02362ec0bc6aee3f Mon Sep 17 00:00:00 2001
From: Seungwan Yoo <ysw99@kakao.com>
Date: Wed, 17 Jun 2026 15:57:56 +0900
Subject: [PATCH 24/24] =?UTF-8?q?fix:=20=EC=8A=B9=EC=9D=B8=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=EC=83=81=ED=83=9C=EC=97=90=EC=84=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9/=EC=97=90=EB=9F=AC=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=85=B8=EC=B6=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store-register/ui/RequestThreadSection.tsx     | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/features/store-register/ui/RequestThreadSection.tsx b/src/features/store-register/ui/RequestThreadSection.tsx
index 67d7d19d..bef0611d 100644
--- a/src/features/store-register/ui/RequestThreadSection.tsx
+++ b/src/features/store-register/ui/RequestThreadSection.tsx
@@ -36,10 +36,16 @@ export function RequestThreadSection({ requestId, variant }: Props) {
   const thread = useRequestCommentThreadViewModel(requestId, true)
   const readOnly = variant === 'ACTIVATED'
 
-  // 승인 완료(읽기 전용): 주고받은 메시지가 없으면 섹션 자체를 숨김.
-  // comments 는 로딩 중·에러 시에도 []라 messageCount === 0 이므로
-  // "메시지 없음 / 불러오는 중 / 불러오기 실패" 세 경우 모두 여기서 감춰진다.
-  if (readOnly && thread.messageCount === 0) return null
+  // 승인 완료(읽기 전용): 실제로 주고받은 메시지가 없을 때만 섹션 자체를 숨김.
+  // 로딩 중·에러 시에도 messageCount === 0 이므로, 이 두 경우까지 숨기지 않도록
+  // 명시적으로 제외해 아래 로딩/에러 피드백(L66~88)이 노출되게 한다.
+  if (
+    readOnly &&
+    !thread.isLoading &&
+    !thread.isError &&
+    thread.messageCount === 0
+  )
+    return null
 
   const copy = readOnly ? null : VARIANT_COPY[variant]
   const isEmpty =