---
type: page-frontend
status: stable
page_id: B03_FileInput
related_pages: ["[[B03_FileInput/B03_backend]]", "[[B03_FileInput/B03_api]]", "[[B03_FileInput/B03_db]]"]
last_updated: 2026-07-12
source: 상위 프로젝트 B03_FileInput 실 코드 직접 확인 (2026-07-12)
---

# B03_FileInput — Frontend

## 페이지·업로드 흐름
| 항목 | 위치 | 역할 |
|---|---|---|
| `renderB03FileInput()` | `B03_FileInput_UI_Page.ts:170` | 파일 입력 화면과 이벤트 등록 |
| 청크 세션 생성 | `B03_FileInput_UI_Page.ts:515` | 대용량 파일을 청크 업로드로 시작 |
| 청크 병합 완료 | `B03_FileInput_UI_Page.ts:558` | 서버 병합 결과를 상태에 저장 |
| WF1 진행률 폴링 | `B03_FileInput_UI_Page.ts:577` | 분석 상태와 진행률 갱신 |
| B04 이동 | `B03_FileInput_UI_Page.ts:609,693` | WF1 완료 시 `ROUTES.B04_WF1_SURFACE`로 이동 |

## API 클라이언트
| 항목 | 위치 | 역할 |
|---|---|---|
| `uploadProjectFiles()` | `B03_FileInput_Api_Fetch.ts:60` | 일반 다중 파일 업로드 |
| `createUploadSession()` | `B03_FileInput_Api_Fetch.ts:82` | 청크 세션 생성 |
| `uploadFileChunk()` | `B03_FileInput_Api_Fetch.ts:100` | 단일 청크 전송 |
| `finalizeUploadSession()` | `B03_FileInput_Api_Fetch.ts:119` | 청크 병합 요청 |
| `fetchUploadStatus()` | `B03_FileInput_Api_Fetch.ts:133` | 청크 업로드 상태 조회 |
| `checkWF1AnalysisStatus()` | `B03_FileInput_Api_Fetch.ts:154` | WF1 분석 상태 조회 |

## 브라우저 상태·오프라인 보조
| 항목 | 위치 | 역할 |
|---|---|---|
| `loadB03ProjectState()` | `B03_FileInput_State.ts:23` | 프로젝트별 저장 상태 복원 |
| `saveB03UploadedFile()` | `B03_FileInput_State.ts:34` | 업로드 파일 결과 저장 |
| `updateB03AnalysisState()` | `B03_FileInput_State.ts:53` | 분석 상태·진행률 저장 |
| `restoreB03ProjectState()` | `B03_FileInput_State.ts:71` | 재진입 시 상태와 완료 콜백 복원 |
| `registerB03ServiceWorker()` | `B03_FileInput_UI_Page.ts:622` | Service Worker 등록 시도와 안내 토스트 |

공통 UI는 [[../../concepts/ui_templates]], 단계 상태는 [[../../concepts/workflow_state]]를 참조한다.

## 기술부채
| 항목 | 위치 | 역할 |
|---|---|---|
| 700줄 근접 | `B03_FileInput_UI_Page.ts:1` | 695줄; 추가 기능은 상태·업로드·화면 분할 검토 필요 |
| CSS 대형 파일 | `B03_FileInput_UI_Style.css:1` | 376줄; 공통 테마와 페이지 스타일 분리 검토 |