엔큐톡 프론트엔드 (React + Vite)

엔큐톡(ncuetalk)은 다양한 AI 엔진(챗봇·PDF QA·Text-to-SQL 등)을 한 화면에서 사용할 수 있게 해 주는 통합 프론트엔드입니다. 기존 jQuery SPA 구조를 React 18 / Vite 7 기반으로 전면 개편하였습니다.

폴더 구조

ncuetalk_frontend/
├── index.html               # Vite 진입점 (root div 및 module script)
├── style.css                # 전역 스타일 – 기존 CSS 그대로 유지
├── package.json             # 의존성 & 스크립트
├── vite.config.js           # Vite 설정
├── src/                     # React 소스 코드
│   ├── main.jsx             # React DOM 마운트
│   ├── App.jsx             # 라우팅·레이아웃 컨테이너
│   ├── context/
│   │   └── ToolContext.jsx  # 도구 상태 전역 관리(Context API)
│   ├── components/
│   │   └── Sidebar.jsx      # 좌측 메뉴 바
│   ├── pages/               # 상단 메뉴별 화면
│   │   ├── ChatPage.jsx     # 채팅 화면(일반/iframe/dev_chatbot)
│   │   ├── ToolsPage.jsx    # 도구 목록/필터/즐겨찾기
│   │   ├── LecturePage.jsx  # 강의 모음(정적)
│   │   └── CommunityPage.jsx# 커뮤니티(정적)
│   └── tools/               # 개별 도구 전용 컴포넌트·헬퍼
│       └── dev_chatbot/
│           ├── constants.js   # 백엔드 API base URL 등
│           ├── AIService.js   # /chat 호출 래퍼
│           ├── OCRService.js  # Tesseract.js 기반 OCR
│           ├── ChatHandler.js # 파일/OCR 처리 후 AIService 호출
│           └── ChatInput.jsx  # dev_chatbot 전용 채팅 UI
└── frontend/                # (구)폴더 – iframe 전용 도구의 README만 보관
    ├── lims_text2sql/
    └── research_qa/

주요 흐름

1. ToolsPage 가 /tools API를 조회해 카드 목록을 표시
2. 카드 클릭 → 선택 도구가 ToolContext 에 저장되며 ChatPage 로 이동
3. ChatPage
   • dev_chatbot → DevChatInput 렌더링 (OCR + 멀티파트 업로드 지원)
   • research_qa / lims_text2sql → 외부 URL을 iframe 으로 임베드
   • 그 외 → 일반 채팅 UI (textarea + API /chat 호출)

환경 변수 설정

프로젝트 루트 또는 쉘 설정(~/.zshrc)에 다음 값을 지정하세요.

# OpenAI Key (필수) – 브라우저에서 직접 호출할 때 사용
OPENAI_API_KEY="sk-..."

Vite 설정에서 envPrefix 를 OPENAI_ 로 포함했으므로 VITE_ 접두어 없이도 노출됩니다.

실행

nvm install 20
nvm use 20
node -v          # 20.x 확인
npm install
npm run dev       # 개발 서버 (http://localhost:5173)

주요 기능

1. React 18 + Vite 7 SPA 구조
2. ChatGPT 도구
   • 모델 선택: GPT-4o(기본), GPT-4.1-mini, o4-mini
   • 긴 한국어 답변 + 이모지 + Markdown 렌더링
   • 입력 후 "생각중… (경과초)" 로딩 표시
3. 개발챗봇 도구
   • PDF 파일 사이드바(업로드·삭제)
   • 이미지 OCR(Tesseract.js) 지원
4. 강의·커뮤니티 페이지 정적 콘텐츠 표시

의존성 주요 목록

라이브러리	용도
React 18	UI
Vite 7	번들러
marked 5	Markdown → HTML 변환
tesseract.js	이미지 OCR

빌드 & 미리보기

npm run build
npm run preview   # http://localhost:4173

빌드 산출물 구조

프로덕션 빌드시 dist/ 폴더가 생성되며, 정적 파일을 Nginx·S3 등에 바로 서빙할 수 있습니다.

기여 & 문의

Pull Request 환영합니다. 버그·제안은 Issue로 등록해 주세요.

---

© 2025 Daewoong AI Lab – All rights reserved.