간단한 입력으로 빠르게 이력서를 만들어주는 웹 애플리케이션 ✍️
- [실행 방법]
- 개요
- 기술스택
- 기술 선택 이유
- 프로젝트 주요기능 소개
- 트러블 슈팅
🔥 소개 ( Demo )
Resume.io는 단순한 입력만으로도 짧은 시간에 프로페셔널한 이력서를 만들 수 있는 매력적인 웹사이트입니다. 하지만 한국어 지원이 없어서 한국어로 인풋 작성이 아예 불가능합니다. 저는 그에 아쉽기도 했고 매우 좋은 UX/UI 를 가진 프로젝트 같아서 직접 클론 개발하기로 결심했습니다. 이를 통해 한국어 사용자들도 쉽게 이력서를 작성할 수 있게 도와드리고 싶습니다. 제 목표는 사용자 경험을 최적화하고, 이력서 디자인에서도 다양한 옵션을 제공하여 선택의 폭을 넓히고 싶습니다.
$ git clone https://github.com/cottonpup/resume-builder.git$ npm install
# or
$ yarn install$ npm start
# or
$ yarn run start| TypeScript | React | Redux |
|---|---|---|
 |
 |
 |
| Tailwind | Draft.js | uuid |
|---|---|---|
 |
 |
 |
.
├── dist // 빌드된 파일 디렉토리
│
├── public // 정적 파일 디렉토리
│
└── src/ // 소스 코드 메인 디렉토리
│
├── components/ // UI 컴포넌트 디렉토리
│ │
│ ├── EditorView // 에디터 뷰 컴포넌트 디렉토리
│ │
│ ├── hooks // 전역 커스텀 훅 디렉토리
│ │
│ ├── PagesView/ // 페이지 뷰 컴포넌트 디렉토리
│ │ ├── content // 페이지 뷰 관련 컨텐츠 컴포넌트 디렉토리
│ │ ├── footer // 페이지 뷰 관련 푸터 컴포넌트 디렉토리
│ │ ├── header // 페이지 뷰 관련 헤더 컴포넌트 디렉토리
│ │ └── hooks // 페이지 뷰 관련 커스텀 훅 디렉토리
│ │
│ └── UI/ // 전역 UI 컴포넌트 디렉토리
│ ├── Buttons // 버튼 컴포넌트 디렉토리
│ ├── DatePicker // 데이트 픽커 컴포넌트 디렉토리
│ ├── Inputs // 인풋 컴포넌트 디렉토리
│ └── RichTextEditor // 리치 텍스트 에디터(Draft.js) 컴포넌트 디렉토리
│
└── state/ // 애플리케이션 상태 관리 디렉토리
├── action-creators // 액션 생성 함수 디렉토리
├── action-types // 액션 타입 디렉토리
├── actions // 액션 객체 디렉토리
└── reducers // 리듀서 디렉토리
- 드래그 앤 드랍 기능
- 텍스트 블록을 드래그 앤 드랍 기능을 통해 쉽게 순서를 변경할 수 있습니다.
- 다양한 서식과 디자인 템플릿 (
WIP)- 다양한 디자인과 레이아웃 템플릿을 제공하여 사용자가 원하는 스타일에 맞게 레쥬메를 작성할 수 있습니다.∑
- 한국어 (다국어) 작성 지원
- 다양한 언어를 지원하여 한국어 사용자도 레쥬메를 작성할 수 있습니다.
- 텍스트 포맷팅
- 사용자가 입력한 텍스트 구간을 스타일링 할 수 있습니다.
- 간편한 정보 입력
- 사용자가 개인 정보, 경력, 교육 등의 항목을 쉽게 입력하고 관리할 수 있는 사용자 친화적인 입력 인터페이스를 제공합니다. 또한 좋은 예시들을 보여주고 추천 키워드를 띄어줍니다.
- 리얼타임 미리보기
- 정보를 입력하는 동시에 레쥬메의 실∑시간 미리보기를 제공하여 작성 중인 내용의 레이아웃과 서식을 확인할 수 있습니다.
- Export 옵션 (
WIP)- 작성한 레쥬메를 PDF나 워드 문서 등 다양한 형식으로 내보내어 다른 곳에서 사용하거나 공유할 수 있습니다.
- 저장 및 관리 (
WIP)- 사용자 계정을 통해 작성한 레쥬메를 저장하고 관리할 수 있으며, 필요할 때 언제든지 열람하거나 편집할 수 있습니다