[feat] 업장 등록 요청 기능 구현

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 />}

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_REQUEST_COMMENT). */
+export async function uploadWorkspaceRequestCommentFile(
+  file: File,
+  scope?: 'MANAGER' | 'USER' | null
+): Promise<string> {
+  return uploadAppFile({
+    file,
+    targetType: 'WORKSPACE_REQUEST_COMMENT',
+    bucketType: WORKSPACE_REGISTRATION_BUCKET,
+    scope,
   })
 }

src/features/store-register/api/workspaceRequests.ts

@@ -1,39 +1,85 @@
 import axiosInstance from '@/shared/lib/axiosInstance'
+import { getAuthApiBasePath } from '@/shared/lib/authApiPath'
 import type { CommonApiResponse } from '@/shared/types/common'
 import type {
+  CreateWorkspaceRequestCommentBody,
+  WorkspaceRequestCommentDto,
+  WorkspaceRequestCommentsApiResponse,
   WorkspaceRequestDetailApiResponse,
   WorkspaceRequestDetailDto,
   WorkspaceRegistrationCreateBody,
   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}/comments */
+export async function fetchWorkspaceRequestComments(
+  scope: AuthScope,
+  workspaceRequestId: number
+): Promise<WorkspaceRequestCommentDto[]> {
+  const response = await axiosInstance.get<WorkspaceRequestCommentsApiResponse>(
+    `${requestsBasePath(scope)}/${workspaceRequestId}/comments`
+  )
+  return response.data.data
+}
+
+/** POST /{scope}/workspace-requests/{id}/comments */
+export async function createWorkspaceRequestComment(
+  scope: AuthScope,
+  workspaceRequestId: number,
+  body: CreateWorkspaceRequestCommentBody
+): Promise<void> {
+  await axiosInstance.post<CommonApiResponse<Record<string, never>>>(
+    `${requestsBasePath(scope)}/${workspaceRequestId}/comments`,
     body
   )
 }

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,
+  }
+}

src/features/store-register/hooks/useStoreRegisterRequestDetailViewModel.ts

@@ -0,0 +1,77 @@
+import { useCallback, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import useAuthStore from '@/shared/stores/useAuthStore'
+import { queryKeys } from '@/shared/lib/queryKeys'
+import { getAxiosErrorMessage } from '@/shared/lib/getAxiosErrorMessage'
+import {
+  cancelWorkspaceRequest,
+  fetchWorkspaceRequestDetail,
+} from '@/features/store-register/api/workspaceRequests'
+
+/** 업장 등록 신청 상세 ViewModel — 상세 조회 + 취소 */
+export function useStoreRegisterRequestDetailViewModel(requestId: number) {
+  const queryClient = useQueryClient()
+  const isLoggedIn = useAuthStore(state => state.isLoggedIn)
+  const scope = useAuthStore(state => state.scope)
+
+  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])
+
+  return {
+    scope,
+    requestId,
+    detail: query.data ?? null,
+    isLoading: query.isPending && query.fetchStatus !== 'idle',
+    isError: query.isError,
+    isConfirmOpen,
+    isCanceling: cancelMutation.isPending,
+    cancelError,
+    openCancelConfirm,
+    closeCancelConfirm,
+    confirmCancel,
+  }
+}

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,
+  }
+}