# Order_web 통합 마이그레이션 및 UI 구현 계획서

## 1. Goal Description (목표)
기존 옵시디언 로컬 환경에서 구동되던 `order-manager` 플러그인의 핵심 데이터를 파싱하고, 이를 기반으로 동작하는 독립적인 웹 애플리케이션(Order_web)을 구축합니다. 이 시스템은 NAS의 WebDAV 환경과 하이브리드로 연동되며, 향후 외부 웹페이지(PROS·ON 홈페이지 등)와의 기능 통합을 위한 기틀을 마련합니다.

## 2. User Review Required (사용자 검토 필요 사항)
> [!IMPORTANT]
> **프론트엔드 기술 스택 결정**: 
> 백엔드는 FastAPI로 확정하여 가상환경 세팅까지 마쳤습니다. 프론트엔드 UI를 어떻게 구성할지 결정이 필요합니다.
> *   **옵션 A (추천)**: `Jinja2 템플릿 + Tailwind CSS + Vanilla JS`. 빌드 과정 없이 직관적으로 빠르게 만들 수 있으며 FastAPI 내부에 통합하기 가장 좋습니다.
> *   **옵션 B**: `React (Vite) + Tailwind CSS`. 향후 컴포넌트 단위의 대규모 확장이나 복잡한 상태 관리가 필요할 때 유리하지만, 별도의 Node 컨테이너가 필요해 구조가 약간 무거워집니다.

## 3. 백엔드 데이터 파싱 로직 (Data Parsing)

현재 확인된 JSON 파일 구조를 바탕으로 데이터를 파싱하고 제공합니다.

### 3.1. 카탈로그 마스터 (`catalog_master.json`)
*   **구조**: `{ "schemaVersion": 1, "items": [ { "productCode", "name", "unitPrice", ... } ] }`
*   **처리**: 
    *   API: `GET /api/catalog`
    *   파싱: 서버 시작 시와 파일 변경 시 메모리에 로드(캐싱)하여 검색/필터링 속도를 극대화합니다.
    *   프론트엔드에 카테고리별, 공급업체별 필터링 기능 제공.

### 3.2. 주문 데이터 및 설정 (`data.json`)
*   **구조**: 메일 설정, 기관 코드 등 단일 설정 객체. (주문 내역 배열 포함 예상)
*   **처리**:
    *   API: `GET /api/config`, `GET /api/orders`, `POST /api/orders`
    *   **동시성 제어**: `POST` 요청으로 데이터를 추가할 때, OS 레벨의 파일 락(`fcntl`)을 걸어 WebDAV 동기화 시점이나 다중 접속 시 파일이 깨지는 것을 방지합니다.

### 3.3. 수가 코드 (`procedure_code_master.json`)
*   **처리**: 카탈로그와 동일하게 조회 API를 구성하여 견적/청구서 작성 시 자동완성 기능을 제공합니다.

---

## 4. 프론트엔드 UI 기획 (Dashboard Design)

관리자 및 실무자가 직관적으로 사용할 수 있도록 대시보드 형태의 UI를 제안합니다.

### 4.1. 주요 화면 구성 (GNB / Sidebar)
1. **📊 대시보드 (Dashboard)**: 최근 주문 내역 요약, 즐겨찾는 품목 등 간략한 통계.
2. **📦 카탈로그 검색 (Catalog)**: 
   *   `catalog_master.json` 데이터를 보여주는 Data Table.
   *   검색창(이름, 코드), 제조사 필터, 카테고리 필터.
   *   "장바구니 담기" 또는 "즉시 주문" 버튼.
3. **📝 주문 관리 (Order Management)**: 
   *   장바구니에 담긴 물품 확인 및 수량 조절.
   *   거래처 및 환자 식별 정보 입력 폼.
   *   '주문 확정' 시 API 전송.
4. **⚙️ 환경 설정 (Settings)**: 
   *   `data.json`에 있는 메일 계정, 기관 코드 등 설정 값 뷰어 및 수정.

### 4.2. UI 테마 및 스타일
*   **디자인 시스템**: 깔끔하고 현대적인 Tailwind CSS 기반의 Admin Dashboard 디자인 적용.
*   **반응형**: 모바일 기기(아이패드 등)에서도 창고나 현장에서 물품을 조회할 수 있도록 반응형 대응.

---

## 5. Verification Plan (검증 계획)

### 5.1. Automated / Backend Tests
*   **API 엔드포인트 테스트**: `pytest`를 사용하여 카탈로그 조회 및 주문 기록 API가 JSON 파일을 정상적으로 읽고 쓰는지(락 매커니즘 포함) 검증.

### 5.2. Manual Verification
1.  사용자가 웹 브라우저로 접속하여 카탈로그 목록이 즉시 뜨는지 확인.
2.  테스트 주문을 생성한 뒤, 로컬의 옵시디언 환경(WebDAV 연동)에서 `data.json`이 갱신되어 옵시디언 플러그인에도 정상 반영되는지 교차 확인.

## Open Questions
> [!WARNING]
> 1. 프론트엔드 화면 구성을 **옵션 A (단일 풀스택)**와 **옵션 B (React 분리)** 중 어떤 것으로 진행할까요?
> 2. `data.json` 내에 기존의 주문 내역 리스트 필드가 어떻게 저장되고 있나요? (현재 앞부분만 확인되어 설정값들만 보입니다.)