ivada-infra/DOCS

Fork 0

happybell80 84f84a0a1f Docs: Update IR Valuation SPA routing fix with verification

2025-11-28 17:03:26 +09:00

4.4 KiB

Raw Blame History

IR Deck 평가 프론트엔드 초기 설정

날짜: 2025-11-28
작성자: Claude (AI)
관련 파일:

frontend-ir-valuation/src/pages/ir-valuation.tsx
nginx-infra/server-nginx-default
https://git.ro-being.com/ivada_Ro-being/frontend-ir-valuation.git

목적

Sequoia Capital IR 공식 기준으로 IR Deck을 평가하는 프론트엔드 페이지 구축. ChatGPT 스타일 UI로 PDF 업로드 및 분석 결과 표시.

구현 내용

1. 프로젝트 생성

기술 스택: frontend-customer와 동일

Vite + React + TypeScript
TailwindCSS
wouter (라우팅)
@tanstack/react-query

프로젝트 위치: /home/admin/frontend-ir-valuation

2. 주요 기능

파일: src/pages/ir-valuation.tsx

ChatGPT 스타일 채팅 인터페이스
PDF 파일 업로드 (드래그 앤 드롭 또는 버튼 클릭)
업로드 진행률 표시
분석 중 상태 표시
페이지별 평가 결과 표시 (잘된 점/부족한 점)
종합 점수 및 등급 (S/A/B/C) 표시

3. nginx 설정

파일: nginx-infra/server-nginx-default:91-95, 228-232

# IR Valuation Frontend
location /ir-valuation {
    alias /home/admin/frontend-ir-valuation/dist/;
    try_files $uri /ir-valuation/index.html;
}

4. Git 저장소

저장소: https://git.ro-being.com/ivada_Ro-being/frontend-ir-valuation.git

초기 커밋: 8235e25 - Initial commit: IR Deck valuation frontend with ChatGPT-style UI

배포

빌드

cd /home/admin/frontend-ir-valuation
npm run build

nginx 배포

sudo cp /home/admin/nginx-infra/server-nginx-default /etc/nginx/sites-enabled/default
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-30

function Router() {
  const [location] = useLocation();
  const basePath = "/ir-valuation";
  
  // Remove base path from location for routing
  // Handle both /ir-valuation and /ir-valuation/ cases
  let normalizedLocation = location;
  if (location.startsWith(basePath + "/") || location === basePath) {
    normalizedLocation = location.slice(basePath.length) || "/";
    // Remove trailing slash if present (except root)
    if (normalizedLocation !== "/" && normalizedLocation.endsWith("/")) {
      normalizedLocation = normalizedLocation.slice(0, -1);
    }
  }

  return (
    <Switch location={normalizedLocation}>
      <Route path="/" component={IRValuationPage} />
      <Route component={() => <div>404 Not Found - Location: {location}, Normalized: {normalizedLocation}</div>} />
    </Switch>
  );
}

검증:

https://ro-being.com/ir-valuation/ 접근 시 IR 평가 페이지 정상 표시 확인
네트워크 요청 모두 200 OK 확인
ChatGPT 스타일 UI 정상 렌더링 (헤더, 업로드 버튼, 채팅 입력창)

다음 단계

백엔드 연동: rb8001 API 엔드포인트 구현
- /rb8001/api/ir-deck/upload - PDF 업로드
- /rb8001/api/ir-deck/chat - 채팅 응답
- /rb8001/api/ir-deck/evaluate - 평가 결과 조회
실제 분석 로직: Sequoia Capital 10가지 스토리 기준 평가
- 페이지별 분석
- 점수 계산
- 등급 분류 (베이지안 학습 준비)
베이지안 학습: 피드백 수집 및 학습 데이터 구성

교훈

frontend-customer 구조를 참고하여 빠르게 프로젝트 생성 가능
nginx 설정은 두 서버 블록(HTTP/HTTPS) 모두에 추가 필요
빌드 산출물은 /home/admin/frontend-ir-valuation/dist/에 저장
SPA 라우팅: nginx base path(/ir-valuation)와 React 라우터 경로를 일치시켜야 함
wouter는 base path를 자동 처리하지 않으므로 useLocation으로 수동 처리 필요

문서 규칙: DOCS/book/300_architecture/312_문서_작성_원칙.md 준수

4.4 KiB Raw Blame History