From 2c9e31f2714267b231f7ba50e319875480fb934c Mon Sep 17 00:00:00 2001
From: happybell80 <happybell80@naver.com>
Date: Fri, 28 Nov 2025 17:01:32 +0900
Subject: [PATCH] Docs: Add SPA routing fix for IR Valuation frontend

---
 .../251128_ir_valuation_frontend_setup.md     | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/journey/troubleshooting/251128_ir_valuation_frontend_setup.md b/journey/troubleshooting/251128_ir_valuation_frontend_setup.md
index b658488..9d04653 100644
--- a/journey/troubleshooting/251128_ir_valuation_frontend_setup.md
+++ b/journey/troubleshooting/251128_ir_valuation_frontend_setup.md
@@ -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`으로 수동 처리 필요
 
 ---