feat(worker): 근로자 상세 딥링크 연결 (/workers/:workerId)

src/pages/WorkerListPage/WorkerListPage.test.tsx

@@ -1,14 +1,17 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { MemoryRouter } from 'react-router-dom'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import { describe, expect, it } from 'vitest'
 import { WorkerListPage } from './WorkerListPage'
 import { WORKERS } from './workerListData'
 
-function renderPage(demoState = 'success') {
+function renderPage(demoState = 'success', initialPath = `/workers?demoState=${demoState}`) {
   render(
-    <MemoryRouter initialEntries={[`/workers?demoState=${demoState}`]}>
-      <WorkerListPage />
+    <MemoryRouter initialEntries={[initialPath]}>
+      <Routes>
+        <Route path="/workers" element={<WorkerListPage />} />
+        <Route path="/workers/:workerId" element={<WorkerListPage />} />
+      </Routes>
     </MemoryRouter>,
   )
 }
@@ -71,6 +74,18 @@ describe('WorkerListPage', () => {
     expect(screen.getByRole('button', { name: '다시 시도' })).toBeInTheDocument()
   })
 
+  it('renders the deep-linked worker as selected when visiting /workers/:workerId', () => {
+    renderPage('success', `/workers/${WORKERS[1].id}?demoState=success`)
+
+    expect(screen.getByRole('heading', { name: WORKERS[1].name })).toBeInTheDocument()
+  })
+
+  it('falls back to the first worker when the workerId is invalid', () => {
+    renderPage('success', '/workers/does-not-exist?demoState=success')
+
+    expect(screen.getByRole('heading', { name: WORKERS[0].name })).toBeInTheDocument()
+  })
+
   it('changes the deadline filter selection via the dropdown', async () => {
     const user = userEvent.setup()
     renderPage()

src/pages/WorkerListPage/WorkerListPage.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { Dropdown } from '../../components/ui/Dropdown/Dropdown'
 import { EmptyState } from '../../components/ui/EmptyState/EmptyState'
 import { StatusLabel } from '../../components/ui/StatusLabel/StatusLabel'
@@ -20,10 +20,11 @@ const DEADLINE_OPTIONS = [
 
 export function WorkerListPage() {
   const navigate = useNavigate()
+  const location = useLocation()
+  const { workerId } = useParams()
   const status = useAsyncDemoData(WORKERS.length === 0)
   const [query, setQuery] = useState('')
   const [deadlineFilter, setDeadlineFilter] = useState('90')
-  const [selectedId, setSelectedId] = useState(WORKERS[0].id)
 
   const visibleWorkers = useMemo(() => {
     const normalized = query.trim().toLowerCase()
@@ -35,7 +36,7 @@ export function WorkerListPage() {
     )
   }, [query])
 
-  const selectedWorker = WORKERS.find((worker) => worker.id === selectedId) ?? WORKERS[0]
+  const selectedWorker = WORKERS.find((worker) => worker.id === workerId) ?? WORKERS[0]
 
   function handleViewAllWorkers() {
     // TODO(backend): GET /api/workers?page= -> 전체 근로자 페이지네이션
@@ -113,9 +114,9 @@ export function WorkerListPage() {
                   key={worker.id}
                   type="button"
                   className={`${styles.workerRow} ${
-                    worker.id === selectedId ? styles.workerRowActive : ''
+                    worker.id === selectedWorker.id ? styles.workerRowActive : ''
                   }`}
-                  onClick={() => setSelectedId(worker.id)}
+                  onClick={() => navigate({ pathname: `/workers/${worker.id}`, search: location.search })}
                 >
                   <div className={styles.workerRowTop}>
                     <p className={styles.workerName}>{worker.name}</p>

src/routes.tsx

@@ -30,12 +30,7 @@ export const router = createBrowserRouter([
         children: [
           { path: '/dashboard', element: <DashboardPage /> },
           { path: '/workers', element: <WorkerListPage /> },
-          {
-            path: '/workers/:workerId',
-            element: (
-              <PlaceholderPage title="근로자 상세 / 계약 및 체류 관리" issueUrl={`${REPO}/8`} />
-            ),
-          },
+          { path: '/workers/:workerId', element: <WorkerListPage /> },
           {
             path: '/documents',
             element: <PlaceholderPage title="서류관리 / OCR" issueUrl={`${REPO}/1`} />,