diff --git a/src/pages/WorkerListPage/WorkerListPage.test.tsx b/src/pages/WorkerListPage/WorkerListPage.test.tsx index cbe7498..014e690 100644 --- a/src/pages/WorkerListPage/WorkerListPage.test.tsx +++ b/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( - - + + + } /> + } /> + , ) } @@ -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() diff --git a/src/pages/WorkerListPage/WorkerListPage.tsx b/src/pages/WorkerListPage/WorkerListPage.tsx index 7cd9cc0..bc24cf0 100644 --- a/src/pages/WorkerListPage/WorkerListPage.tsx +++ b/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 })} >

{worker.name}

diff --git a/src/routes.tsx b/src/routes.tsx index 3fc5723..fde946e 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -30,12 +30,7 @@ export const router = createBrowserRouter([ children: [ { path: '/dashboard', element: }, { path: '/workers', element: }, - { - path: '/workers/:workerId', - element: ( - - ), - }, + { path: '/workers/:workerId', element: }, { path: '/documents', element: ,