CV Builder (이력서 빌더)

온라인 이력서 제작 도구 | Online CV Creation Tool

시연 링크

• CV Builder

프로젝트 소개

이력서 빌더는 직관적인 인터페이스를 통해 이력서를 만들 수 있는 웹 애플리케이션입니다. 3개의 패널로 구성된 사용자 친화적인 디자인을 특징으로 합니다 :

• 선택 패널 : 다양한 이력서 컴포넌트 선택
• 캔버스 : 실시간으로 이력서를 구성하고 미리보기 할 수 있는 캔버스
• 상세 설정 패널 : 선택한 컴포넌트의 세부 내용 및 스타일 설정

포트폴리오 프로젝트 목적

이 프로젝트는 다음과 같은 기술적 역량을 보여주기 위해 개발되었습니다 :

• TypeScript와 React를 활용한 복잡한 UI 구현
• 드래그 앤 드롭 기능 구현
• 상태 관리 및 데이터 흐름 설계
• 데스크톱 환경에 최적화된 3-패널 레이아웃
• 클린 코드 작성 및 모듈화

주요 기능

• 직관적인 드래그 앤 드롭 인터페이스 (데스크톱)
• 모바일에서는 탭으로 컴포넌트 추가 · 하단 시트로 상세 설정
• 실시간 미리보기
• PDF 내보내기 기능
• 작업 내용 자동 저장 (브라우저 localStorage)

화면 크기별 동작

폭	동작
768px 이상	3-패널 레이아웃. 드래그 앤 드롭으로 컴포넌트 배치
768px 미만	컴포넌트 목록·상세 설정이 서랍(Sheet)으로 전환. 탭으로 추가, 하단 시트에서 편집

작은 화면에서도 작성·확인·PDF 저장이 가능하지만, 세밀한 편집은 PC 환경을 권장합니다.

작업 내용은 브라우저의 localStorage에만 저장되며 서버로 전송되지 않습니다. 브라우저 데이터를 삭제하면 함께 사라집니다.

업데이트 예정

• 다양한 이력서 섹션을 위한 맞춤형 컴포넌트
• 페이지 추가
• 다양한 이력서 템플릿

기술 스택

• 프론트엔드 : TypeScript, React
• 상태 관리 : Zustand
• 스타일링 : Tailwind CSS
• 빌드 도구 : Vite

실행 방법

# 프로젝트 클론
git clone https://github.com/deftones88/cv-builder.git

# 프로젝트 폴더로 이동
cd cv-builder

# 의존성 설치
# react-day-picker@8이 React 19를 peer로 허용하지 않아 플래그가 필요합니다
npm install --legacy-peer-deps

# 개발 서버 실행
npm run dev

프로젝트 구조

src/
├── features/
│   ├── canvas/             # 중앙 캔버스 및 미리보기 컴포넌트
│   ├── cv-components/      # 이력서 컴포넌트 (헤딩, 사진, 리스트 등)
│   ├── selection-panel/    # 왼쪽 패널 (컴포넌트 선택)
│   └── settings-panel/     # 오른쪽 패널 (속성 설정)
├── layouts/                # 레이아웃 컴포넌트
├── pages/                  # 페이지 컴포넌트
├── shared/
│   ├── assets/             # 이미지, 아이콘 등 정적 자산
│   ├── components/         # 공통 컴포넌트
│   ├── constants/          # 상수 정의
│   ├── hooks/              # 커스텀 React 훅
│   ├── lib/                # 유틸리티 라이브러리
│   ├── styles/             # 전역 스타일
│   ├── types/              # TypeScript 타입 정의
│   └── stores/             # 상태 관리 (Zustand)