# 라우팅 버그 리포트: 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 접근 (실패)
1. 브라우저 주소창에 `https://dev.codebridge-x.com/accounting/purchase-management` 입력
2. Enter 키 또는 페이지 이동
3. **결과**: "페이지를 찾을 수 없습니다" 404 에러

### 메뉴 접근 (성공)
1. 로그인 후 메인 페이지에서 시작
2. 사이드바에서 "회계관리" 메뉴 클릭 (확장)
3. 하위 메뉴에서 "매입관리" 클릭
4. **결과**: 매입관리 페이지 정상 표시 (70건)

---

## 원인 분석 (추정)

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

---

## 예상 영향

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

---

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

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

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

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

### 2. React Router 설정 확인
```typescript
// BrowserRouter vs HashRouter 설정
// 서버 사이드 라우팅 설정 확인 필요

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

### 3. 서버 설정 확인
```nginx
# 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 - 메뉴 접근 시 정상 표시

---

## 권장 조치

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

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

---

## 관련 문서

- SAM 정책: `C:\Users\codeb\.claude\skills\sam_policy\SKILL.md`
- 문서 인덱스: `C:\Users\codeb\docs\INDEX.md`
- 시스템 아키텍처: `C:\Users\codeb\docs\architecture\system-overview.md`

---

**테스트 실행자**: Claude Code (QA Reporter)
**리포트 생성 시간**: 2026-01-22 06:31:00 (KST)
