🎨 Simple Image Editor

현대적인 웹 기반 이미지 편집기로, React와 Canvas API를 활용하여 직관적인 이미지 편집 환경을 제공합니다.

✨ 주요 기능

• 🖼️ 이미지 업로드/다운로드 - JPG, PNG, GIF 포맷 지원
• 🖌️ 그리기 도구 - 브러시, 지우개, 색상 선택, 이동 도구
• 🎨 커스터마이징 - 브러시 크기, 색상, 투명도 조절
• ↩️ 실행 취소/다시 실행 - 무제한 히스토리 관리
• 🔒 보안 - 파일 크기/타입 검증, 메모리 누수 방지
• ⚡ 성능 최적화 - requestAnimationFrame 기반 렌더링

🛠️ 기술 스택

카테고리	기술
Frontend	React 18, TypeScript
상태 관리	Zustand
스타일링	Tailwind CSS
그래픽스	Canvas API
빌드 도구	Vite
개발 도구	ESLint, PostCSS

🚀 빠른 시작

1. 저장소 클론

git clone https://github.com/StrKare/image-editor.git
cd image-editor

2. 의존성 설치

npm install

3. 개발 서버 실행

# 방법 1: npm 스크립트 사용
npm run dev

# 방법 2: 자동화 스크립트 사용 (권장)
./start.sh

4. 애플리케이션 접속

브라우저에서 http://localhost:4000 열기

5. 서버 종료

# 방법 1: Ctrl+C (npm run dev 사용 시)

# 방법 2: 자동화 스크립트 사용 (권장)
./stop.sh

📁 프로젝트 구조

image-editor/
├── 📄 start.sh                    # 서버 시작 스크립트
├── 📄 stop.sh                     # 서버 종료 스크립트
├── 📁 src/
│   ├── 📁 components/             # React 컴포넌트
│   │   ├── Canvas/               # 캔버스 관련 컴포넌트
│   │   ├── FileManager/          # 파일 관리 컴포넌트
│   │   ├── Sidebar/              # 사이드바 컴포넌트
│   │   └── Toolbar/              # 도구 모음 컴포넌트
│   ├── 📁 stores/                # Zustand 상태 관리
│   ├── 📁 types/                 # TypeScript 타입 정의
│   ├── 📁 utils/                 # 유틸리티 함수
│   └── 📁 hooks/                 # 커스텀 React 훅
├── 📁 public/                     # 정적 파일
└── 📁 docs/                       # 문서

🎮 사용법

기본 도구 사용

1. 이미지 업로드

   • 파일 선택 버튼으로 이미지 업로드
   • 지원 포맷: JPG, PNG, GIF
   • 최대 파일 크기: 10MB

2. 그리기 도구

   • 🖌️ 브러시: 자유로운 그리기
   • 🧹 지우개: 부분 삭제
   • 🎨 색상 선택: 색상 팔레트에서 선택
   • ✋ 이동: 캔버스 이동 (향후 구현 예정)

3. 브러시 설정

   • 크기: 1-50px 범위
   • 색상: 전체 색상 스펙트럼
   • 투명도: 10-100% 범위

4. 파일 관리

   • 다운로드: PNG 포맷으로 저장
   • 실행 취소/다시 실행: 무제한 히스토리

🔧 개발 가이드

개발 환경 요구사항

• Node.js 18+
• npm 8+

주요 스크립트

npm run dev      # 개발 서버 실행
npm run build    # 프로덕션 빌드
npm run preview  # 빌드 결과 미리보기
npm run lint     # ESLint 실행

아키텍처 개요

상태 관리 (Zustand)

interface EditorStore {
  currentTool: Tool;           // 현재 선택된 도구
  brushSettings: BrushSettings; // 브러시 설정
  imageState: ImageState;      // 이미지 상태
  history: ImageData[];        // 실행 취소 히스토리
  // ... 액션 메서드들
}

컴포넌트 구조

• App: 최상위 컴포넌트
• Toolbar: 도구 선택 및 설정
• ImageCanvas: 메인 캔버스 영역
• FileManager: 파일 업로드/다운로드
• Sidebar: 필터 및 추가 기능 (향후 확장)

🔒 보안 기능

• ✅ 파일 타입 검증: MIME 타입 및 확장자 검사
• ✅ 파일 크기 제한: 10MB 최대 업로드 크기
• ✅ 메모리 관리: 히스토리 20개 제한으로 메모리 누수 방지
• ✅ 이미지 크기 제한: 4096x4096px 최대 해상도

⚡ 성능 최적화

• requestAnimationFrame: 부드러운 그리기 경험
• 메모리 관리: 자동 가비지 컬렉션 및 히스토리 제한
• 지연 로딩: 필요한 컴포넌트만 로드
• 번들 최적화: Vite 기반 빠른 개발 및 빌드

🤝 기여하기

1. 이 저장소를 포크합니다
2. 기능 브랜치를 생성합니다 (git checkout -b feature/amazing-feature)
3. 변경사항을 커밋합니다 (git commit -m 'Add amazing feature')
4. 브랜치에 푸시합니다 (git push origin feature/amazing-feature)
5. Pull Request를 생성합니다

📝 라이선스

이 프로젝트는 MIT 라이선스 하에 제공됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

🐛 버그 리포트 및 기능 요청

버그 발견이나 새로운 기능 제안은 GitHub Issues를 통해 알려주세요.

📞 지원

• GitHub Issues: 기술적 문제 및 버그 리포트
• Email: [email protected]

---

개발자: StrKare
마지막 업데이트: 2025년 1월