Docs: Add SPA routing fix for IR Valuation frontend

This commit is contained in:
happybell80 2025-11-28 17:01:32 +09:00
parent d728623947
commit 2c9e31f271

View File

@ -72,6 +72,41 @@ sudo systemctl reload nginx
- `http://ro-being.com/ir-valuation`
- `http://124.55.18.179/ir-valuation`
## SPA 라우팅 문제 해결
**문제**: `/ir-valuation` 경로 접근 시 nginx는 200 OK를 반환하지만 브라우저에서 404 표시
**원인**:
- nginx는 정상적으로 `dist/index.html`을 서빙 (curl/Network 탭 모두 200 OK)
- 하지만 `App.tsx`의 wouter 라우터가 `path="/"`만 정의되어 있어 `/ir-valuation` 경로에서 매칭 실패
- SPA 내부 라우터가 404 컴포넌트를 렌더링
**해결**:
- `App.tsx`에 base path 처리 로직 추가
- `useLocation` hook으로 `/ir-valuation` base path를 제거하고 라우팅
**파일**: `src/App.tsx:14-25`
```typescript
function Router() {
const [location] = useLocation();
const basePath = "/ir-valuation";
const normalizedLocation = location.startsWith(basePath)
? location.slice(basePath.length) || "/"
: location;
return (
<Switch location={normalizedLocation}>
<Route path="/" component={IRValuationPage} />
<Route component={() => <div>404 Not Found</div>} />
</Switch>
);
}
```
**검증**:
- `https://ro-being.com/ir-valuation/` 접근 시 IR 평가 페이지 정상 표시
- 네트워크 요청 모두 200 OK 확인
## 다음 단계
1. **백엔드 연동**: rb8001 API 엔드포인트 구현
@ -91,6 +126,8 @@ sudo systemctl reload nginx
- frontend-customer 구조를 참고하여 빠르게 프로젝트 생성 가능
- nginx 설정은 두 서버 블록(HTTP/HTTPS) 모두에 추가 필요
- 빌드 산출물은 `/home/admin/frontend-ir-valuation/dist/`에 저장
- **SPA 라우팅**: nginx base path(`/ir-valuation`)와 React 라우터 경로를 일치시켜야 함
- wouter는 base path를 자동 처리하지 않으므로 `useLocation`으로 수동 처리 필요
---