라우팅 버그 리포트: Direct URL 접근 시 404 에러

Report ID: ROUTING-BUG-2026-01-22 Priority: High 영향 범위: react (프론트엔드 라우팅)

버그 요약

Direct URL로 페이지에 접근하면 404 에러가 발생하지만, 사이드바 메뉴를 클릭하면 정상적으로 페이지가 표시됩니다.

영향받는 페이지 목록 (11개)

#	페이지명	Direct URL	메뉴 접근
1	매입관리	/accounting/purchase-management ❌	✅ 70건 표시
2	입금관리	/accounting/deposit-management ❌	✅ 60건 표시
3	출금관리	/accounting/withdrawal-management ❌	✅ 60건 표시
4	결제내역	/accounting/payment-history ❌	✅ 13건 표시
5	품목관리	/production/item-management ❌	✅ 10,429건 표시
6	작업지시 관리	/production/work-order-management ❌	✅ 2건 표시
7	기안함	/approval/draft-box ❌	✅ 18건 표시
8	참조함	/approval/reference-box ❌	✅ 6건 표시
9	회사정보	/settings/company-info ❌	✅ 정상 표시
10	자유게시판	/board/free ❌	✅ 정상 표시
11	게시판 관리	/settings/board-management ❌	✅ 2건 표시

재현 단계

Direct URL 접근 (실패)

브라우저 주소창에 https://dev.codebridge-x.com/accounting/purchase-management 입력
Enter 키 또는 페이지 이동
결과: "페이지를 찾을 수 없습니다" 404 에러

메뉴 접근 (성공)

로그인 후 메인 페이지에서 시작
사이드바에서 "회계관리" 메뉴 클릭 (확장)
하위 메뉴에서 "매입관리" 클릭
결과: 매입관리 페이지 정상 표시 (70건)

원인 분석 (추정)

Lazy Loading 문제: 페이지 컴포넌트가 상위 메뉴 클릭 시에만 로드되는 구조
라우트 설정 문제: 중첩 라우트 설정에서 부모 라우트가 먼저 활성화되어야 하는 구조
상태 의존성: 페이지 렌더링이 사이드바 메뉴 상태(expand/collapse)에 의존

예상 영향

북마크 사용 불가: 사용자가 특정 페이지를 북마크해도 직접 접근 불가
URL 공유 불가: 동료에게 URL을 공유해도 404 발생
브라우저 새로고침 문제: 페이지에서 F5(새로고침) 시 404 발생 가능
SEO 영향: 검색 엔진 크롤러가 페이지 인덱싱 불가

수정 제안 (개발자 참고용)

1. 라우트 설정 확인

// react/src/routes/index.tsx 또는 App.tsx
// 중첩 라우트 설정 확인 필요

// 예상되는 문제 패턴:
<Route path="/accounting" element={<AccountingLayout />}>
  <Route path="purchase-management" element={<PurchaseManagement />} />
</Route>

// AccountingLayout이 먼저 마운트되어야 하위 라우트가 동작하는 구조

2. React Router 설정 확인

// BrowserRouter vs HashRouter 설정
// 서버 사이드 라우팅 설정 확인 필요

// vite.config.ts 또는 서버 설정에서
// SPA fallback 설정 확인

3. 서버 설정 확인

# Nginx 설정 예시
location / {
  try_files $uri $uri/ /index.html;
}

테스트 검증 결과

테스트 항목	결과
Direct URL 접근	❌ 11개 페이지 모두 404
사이드바 메뉴 클릭 접근	✅ 11개 페이지 모두 정상
페이지 기능 동작	✅ 모든 페이지 기능 정상

스크린샷

purchase_management_via_menu.png - 메뉴 접근 시 정상 표시
deposit_management_via_menu.png - 메뉴 접근 시 정상 표시
withdrawal_management_via_menu.png - 메뉴 접근 시 정상 표시
payment_history_via_menu.png - 메뉴 접근 시 정상 표시
item_management_via_menu.png - 메뉴 접근 시 정상 표시
work_order_management_via_menu.png - 메뉴 접근 시 정상 표시
draft_box_via_menu.png - 메뉴 접근 시 정상 표시
reference_box_via_menu.png - 메뉴 접근 시 정상 표시
company_info_via_menu.png - 메뉴 접근 시 정상 표시
free_board_via_menu.png - 메뉴 접근 시 정상 표시
board_management_via_menu.png - 메뉴 접근 시 정상 표시

권장 조치

즉시 수정 필요: 라우팅 설정 검토 및 수정
서버 설정 확인: SPA fallback 설정 확인
테스트 추가: Direct URL 접근 테스트 케이스 추가

변경 승인 정책: ⚠️ 컨펌 필요 (라우팅 로직 변경)

4.8 KiB Raw Blame History

라우팅 버그 리포트: Direct URL 접근 시 404 에러

버그 요약

영향받는 페이지 목록 (11개)

재현 단계

Direct URL 접근 (실패)

메뉴 접근 (성공)

원인 분석 (추정)

예상 영향

수정 제안 (개발자 참고용)

1. 라우트 설정 확인

2. React Router 설정 확인

3. 서버 설정 확인

테스트 검증 결과

스크린샷

권장 조치

관련 문서

4.8 KiB

Raw Blame History