init

README.md

@@ -1,2 +1,97 @@
-# ncuetalk_frontend
+# 엔큐톡 프론트엔드 (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`)에 다음 값을 지정하세요.
+
+```bash
+# OpenAI Key (필수) – 브라우저에서 직접 호출할 때 사용
+OPENAI_API_KEY="sk-..."
+```
+
+Vite 설정에서 `envPrefix` 를 `OPENAI_` 로 포함했으므로 `VITE_` 접두어 없이도 노출됩니다.
+
+## 실행
+```bash
+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 |
+
+## 빌드 & 미리보기
+```bash
+npm run build
+npm run preview   # http://localhost:4173
+```
+
+## 빌드 산출물 구조
+프로덕션 빌드시 `dist/` 폴더가 생성되며, 정적 파일을 Nginx·S3 등에 바로 서빙할 수 있습니다.
+
+## 기여 & 문의
+Pull Request 환영합니다. 버그·제안은 Issue로 등록해 주세요.
+
+---
+© 2025 Daewoong AI Lab – All rights reserved.