DOCS/journey/troubleshooting/251128_ir_valuation_frontend_setup.md

# 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).

## 구현 요약
- **스택**: Vite + React + TypeScript, TailwindCSS, wouter, @tanstack/react-query.
- **주요 기능**: PDF 업로드, 진행률·분석 상태 표시, 페이지별 강점·약점, 종합 점수·등급 (S/A/B/C).
- **SPA 라우팅** (`src/App.tsx`): base‑path `/ir-valuation` 제거 후 라우팅 처리.

```tsx
function Router() {
  const [location] = useLocation();
  const base = "/ir-valuation";
  const normalized = (location.startsWith(base) ? location.slice(base.length) : location) || "/";
  return (
    <Switch location={normalized}>
      <Route path="/" component={IRValuationPage} />
      <Route component={() => <div>404 Not Found</div>} />
    </Switch>
  );
}
```

## Nginx 설정 (`nginx-infra/server-nginx-default`)
```nginx
location /ir-valuation {
    alias /home/admin/frontend-ir-valuation/dist/;
    try_files $uri /ir-valuation/index.html;
}
location ^~ /rb8001/ {
    proxy_pass http://192.168.219.52:8001/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_read_timeout 300s;
    proxy_connect_timeout 75s;
    proxy_send_timeout 300s;
}
```

## API 사용 예시
```bash
curl -X POST http://localhost/rb8001/api/ir-deck/evaluate \
  -H "Content-Type: application/json" \
  -H "X-Team-Id: <team_id>" \
  -H "X-User-Id: <user_id>" \
  -d '{"document_id":"<id>","team_id":"<team_id>"}'
```

## 교훈
- **핵심만**: 중복·불필요한 설명 제거, 링크로 대체.
- **헤더 필수**: `X-Team-Id`, `X-User-Id` 없으면 API 동작 안 함.
- **SPA 라우팅**: Nginx base‑path와 React 라우터 일치 필요.

## 다음 작업
- 피드백 UI 구현 (`src/pages/ir-valuation.tsx`).
- 백엔드 피드백 API 연동 (`/rb8001/api/ir-deck/feedback`).
- Sequoia 10가지 기준 실제 평가 로직 구현.

## ChatGPT 스타일 디자인 개선 항목 (2025-11-29)

### Critical 수정 필요
1. **헤더 제거** - `ir-valuation.tsx:380-405`: ChatGPT는 헤더 없음
2. **본문 텍스트 크기** - `index.css:52`: 14px → 16px
3. **입력 박스** - `ir-valuation.tsx:571-584`: 높이 52px → 56-60px, border-radius 증가
4. **메시지 버블** - `ir-valuation.tsx:459-465`: `rounded-lg` → `rounded-xl/2xl`, 패딩 증가
5. **사용자 메시지 색상** - `ir-valuation.tsx:463`: `bg-blue-500` → `bg-gray-700/800`

### High 개선
6. **행간 설정** - `index.css`: `line-height: 1.6-1.8`
7. **컨텐츠 최대 너비** - `ir-valuation.tsx:410`: `max-w-2xl` (672px) → `max-w-3xl` (768px)
8. **색상 팔레트** - 배경색: `bg-gray-50` → `#F7F7F8` 유사 색상

---

## React 구조 원칙 리팩토링 (2025-11-29)

### 변경 사항
- **API 통신 분리**: `services/irDeckService.ts` - 모든 API 호출 중앙화
- **비즈니스 로직 분리**: `hooks/useFileUpload.ts`, `hooks/useEvaluation.ts` - 커스텀 훅으로 로직 추출
- **UI 컴포넌트 분리**: `components/features/FileMessage.tsx` - 파일 메시지 전용 컴포넌트
- **타입 정의**: `types/message.ts` - Message 인터페이스 확장 (파일 정보 포함)

### 교훈
- React 구조 원칙 준수: 계층 분리 (UI → Hooks → Services)
- 컴포넌트 단일 책임: 897줄 파일을 기능별로 분리
- 사용자 제어권: 파일 업로드 후 즉시 평가가 아닌 사용자 확인 후 진행

## 추가 개선 사항 (2025-11-29)

### UX 개선
- 파일 업로드 완료 후 추천 질문 버튼 표시, 파일과 메시지 버블 통합
- 로딩 상태 통합 (`isEvaluating` + `isLoading`), 파일 없이 채팅 불가 처리

### 코드 품질
- `console.log` 개발 환경 조건 처리, 코드 중복 제거 (`sendMessage` 통합)
- 상수 분리 (`constants/questions.ts`), 변수명 개선

### API 스펙 준수
- 타입 정의 수정: `UploadResponse`(filename, message), `ChatResponse`(answer), `FeedbackResponse` 추가
- 파일 없이 채팅 시 오류 메시지 표시

## 파비콘 추가 및 에러 로깅 개선 (2025-12-01)

### 변경 사항
- **파비콘 추가**: `public/favicon.svg` 생성, `index.html:6-7` 링크 추가
- **로깅 유틸리티**: `src/utils/logger.ts` 생성 (환경별 일관된 로깅)
- **에러 로깅 교체**: `src/pages/ir-valuation.tsx` - `console.error` → `logger.error()`
- **프로덕션 환경 개선**: `ir-valuation.tsx:640-668` - 테스트 파일 업로드 버튼을 `process.env.NODE_ENV === "development"` 조건으로 개발 환경에서만 표시
- **입력창 하단 고정**: `ir-valuation.tsx:915-950` - 입력 영역을 `sticky bottom-0 z-10`로 고정, 메시지 영역 여백 확보

### 교훈
- 프로덕션 환경에서도 에러 로그 기록 필요: `logger.error()`는 모든 환경에서 동작
- 브라우저 기본 요청(favicon.ico)은 미리 처리하여 404 오류 방지
- 개발용 기능은 프로덕션에서 숨김 처리 필수: `process.env.NODE_ENV` 조건 사용
- ChatGPT 스타일 UI 구현 시 입력창은 항상 하단 고정 (`sticky` 또는 `fixed`)

## 평가 결과 표시 형식 (2025-12-02)

### 현재 구현 상태
- **백엔드 API 응답 구조** (`/rb8001/api/ir-deck/evaluation/{id}`):
  - `total_score`: 종합 점수 (0-100)
  - `grade`: 등급 (S/A/B/C)
  - `page_evaluations`: 페이지별 평가 배열
    - `page_number`: 페이지 번호
    - `strengths`: 장점 배열
    - `weaknesses`: 개선점 배열
  - `story_scores`: Sequoia 10가지 스토리별 점수 배열
  - `summary`: 종합 요약 텍스트
  - `investment_opinion`: 투자 의견 객체 (권고, 리스크, 강점)
  - `message` 또는 `formatted_message`: 포맷팅된 메시지 (선택적)

- **프론트엔드 표시** (`ir-valuation.tsx:335-428`, `formatEvaluationResult()`):
  - 1. 투자 종합 점수 및 등급 (마크다운 섹션 + 스토리별 점수 테이블)
  - 2. 장표별 장점과 개선점 요약 (페이지별 장점/개선점 리스트)
  - 3. 종합 결론 및 투자 종합 의견 (요약, 권고, 리스크, 강점)

### 목표 ChatGPT 형식
1. **1. 투자 종합 점수 및 등급**:
   - 항목별 점수 표 (혁신성, 시장성, 팀 경쟁력, 사업 구조 안정성, 리스크 관리 및 실행력, 확장성 및 글로벌화)
   - 총점 및 등급

2. **2. 장표별 장점과 개선점 요약**:
   - 각 페이지별 장점/개선점 (페이지별 점수 제거)
   - 용어: "잘된 점/아쉬운 점" → "장점/개선점"

3. **3. 종합 결론**:
   - 요약 문단
   - 투자 종합 의견 (권고, 리스크, 강점)

### 필요한 수정 사항
- **백엔드 API 확장 필요**:
  - `category_scores`: 항목별 점수 배열 (혁신성, 시장성 등)
  - `summary`: 종합 결론 텍스트
  - `investment_opinion`: 투자 의견 객체 (권고, 리스크, 강점)

- **프론트엔드 수정** (`ir-valuation.tsx:formatEvaluationResult()`):
  - 항목별 점수 표 생성 (마크다운 테이블)
  - 용어 변경: "잘된 점/아쉬운 점" → "장점/개선점"
  - 종합 결론 섹션 추가
  - 마크다운 테이블 렌더링 확인