Document Mini Project Frontend

문서를 업로드하고 OCR·요약·분류 진행 상태와 결과를 확인하는 React 프론트엔드입니다.

주요 기능

• 클릭 또는 드래그 앤 드롭 문서 업로드
• HWP/HWPX, PDF, DOCX, PPT/PPTX 확장자 검증
• 작업 진행률, 현재 단계, 상태 메시지 표시
• 문서 요약 및 대분류·소분류 결과 확인
• 요약과 분류 결과 텍스트 다운로드

기술 스택

• React 18
• Vite 6
• Axios

실행 방법

npm install
cp .env.example .env
npm run dev

개발 서버는 http://localhost:5173 에서 실행됩니다.

백엔드 주소가 다르다면 .env를 수정합니다.

VITE_API_BASE_URL=http://localhost:8000

빌드

npm run build
npm run preview

프로젝트 구조

.
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── App.jsx       # 업로드·진행 상태·결과 화면
    ├── api.js        # 백엔드 API 호출
    ├── main.jsx      # React 진입점
    └── styles.css    # 화면 스타일

백엔드 연동

프론트엔드는 다음 API를 사용합니다.

Method	Endpoint	설명
POST	/api/process/start	문서 업로드 및 처리 시작
GET	/api/process/{job_id}	진행 상태와 처리 결과 조회