이미지 & 구분선 구현

docs/리포트_관리_시스템_구현_진행상황.md

@@ -201,20 +201,36 @@
 
 ## 남은 작업 (우선순위순) 📋
 
-### Phase 1: 추가 컴포넌트 ⬅️ 다음 권장 작업
+### Phase 1: 추가 컴포넌트 ✅ 완료!
 
-1. **이미지 컴포넌트**
+1. **이미지 컴포넌트** ✅
 
-   - 이미지 업로드 및 URL 입력
-   - 크기 조절 및 정렬
+   - [x] 파일 업로드 (multer, 10MB 제한)
+   - [x] 회사별 디렉토리 분리 저장
+   - [x] 맞춤 방식 (contain/cover/fill/none)
+   - [x] CORS 설정으로 이미지 로딩
+   - [x] 캔버스 및 미리보기 렌더링
    - 로고, 서명, 도장 등에 활용
 
-2. **구분선 컴포넌트 (Divider)**
+2. **구분선 컴포넌트 (Divider)** ✅
 
-   - 가로/세로 구분선
-   - 두께, 색상, 스타일(실선/점선) 설정
+   - [x] 가로/세로 방향 선택
+   - [x] 선 두께 (lineWidth) 독립 속성
+   - [x] 선 색상 (lineColor) 독립 속성
+   - [x] 선 스타일 (solid/dashed/dotted/double)
+   - [x] 캔버스 및 미리보기 렌더링
 
-3. **차트 컴포넌트** (선택사항)
+**파일**:
+- `backend-node/src/controllers/reportController.ts` (uploadImage)
+- `backend-node/src/routes/reportRoutes.ts` (multer 설정)
+- `frontend/types/report.ts` (이미지/구분선 속성)
+- `frontend/components/report/designer/ComponentPalette.tsx`
+- `frontend/components/report/designer/CanvasComponent.tsx`
+- `frontend/components/report/designer/ReportDesignerRightPanel.tsx`
+- `frontend/components/report/designer/ReportPreviewModal.tsx`
+- `frontend/lib/api/client.ts` (getFullImageUrl)
+
+3. **차트 컴포넌트** (선택사항) ⬅️ 다음 권장 작업
    - 막대 차트
    - 선 차트
    - 원형 차트
@@ -339,4 +355,4 @@
 
 **최종 업데이트**: 2025-10-01
 **작성자**: AI Assistant
-**상태**: 레이아웃 도구 완료 (Phase 1 완료, 약 98% 완료)
+**상태**: 이미지 & 구분선 컴포넌트 완료 (기본 컴포넌트 완료, 약 99% 완료)