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 제거 후 라우팅 처리.

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)

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 사용 예시

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() (4곳: 100, 116, 162, 225)
• 프로덕션 환경 개선: ir-valuation.tsx:518-527 - 테스트 파일 업로드 버튼 개발 환경에서만 표시
• 입력창 하단 고정: ir-valuation.tsx:489, 708 - sticky bottom-0 z-10 적용, 메시지 영역에 pb-32 추가

교훈

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