145 lines
4.4 KiB
Markdown
145 lines
4.4 KiB
Markdown
# 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`
|
|
|
|
```nginx
|
|
# 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
|
|
|
|
## 배포
|
|
|
|
### 빌드
|
|
```bash
|
|
cd /home/admin/frontend-ir-valuation
|
|
npm run build
|
|
```
|
|
|
|
### nginx 배포
|
|
```bash
|
|
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`
|
|
```typescript
|
|
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 정상 렌더링 (헤더, 업로드 버튼, 채팅 입력창)
|
|
|
|
## 다음 단계
|
|
|
|
1. **백엔드 연동**: rb8001 API 엔드포인트 구현
|
|
- `/rb8001/api/ir-deck/upload` - PDF 업로드
|
|
- `/rb8001/api/ir-deck/chat` - 채팅 응답
|
|
- `/rb8001/api/ir-deck/evaluate` - 평가 결과 조회
|
|
|
|
2. **실제 분석 로직**: Sequoia Capital 10가지 스토리 기준 평가
|
|
- 페이지별 분석
|
|
- 점수 계산
|
|
- 등급 분류 (베이지안 학습 준비)
|
|
|
|
3. **베이지안 학습**: 피드백 수집 및 학습 데이터 구성
|
|
|
|
## 교훈
|
|
|
|
- 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` 준수
|
|
|