- 사용자는 서버에 저장된 인사기록 데이터를 가져와서 폼요소로 구성한다.
- 사용자는 인사기록(전 직장 경력, 학력) 데이터를 추가, 수정, 삭제 할 수 있다.
- 추가 버튼 클릭 시 자신이 입력할 아이템이 추가된다.
- 삭제 버튼 클릭 시 해당 아이템이 삭제된다.
- 각 폼 요소의 데이터를 변경할 경우 각 아이템의 필드들이 업데이트된다.
- 추가, 수정, 삭제는 클라이언트 임시 상태이며 화면 상단의 저장 버튼을 클릭하면 서버에 요청을 보내서 저장한다.
- 위로, 아래로 버튼 클릭시 각 액션타입에 따라서 해당 아이템이 이동된다.
- 폼필드 정보는
types.ts파일에 있는interface항목과 현재 구현되어 있는 폼 요소들을 참조한다.
- 현재 구현되어 있는 결과물을 본인이 생각하는 좋은 방향으로 개선해주시면 됩니다.
- 기존 결과물에 버그가 있을 경우 수정해주시면 됩니다.
- 학력사항은 구현되어 있지 않습니다. 전 직장 경력을 바탕으로 마무리 해주시면 됩니다.
- 디자인적 요소는 UX적 관점에서 고려해주시면 좋겠습니다.
- 프로젝트 설정은 현재 구성을 유지해서 Fork 하는 개념으로 작업하시면 됩니다.
- 라이브러리(...외부 컴포넌트 등등등)의 사용 제약은 없습니다. 단, 사용하신 이유나 어떤 문제해결을 할수 있었는지에 대한 설명을 추가로 부탁드립니다.
- 커밋이 필수는 아니지만 작업하신 결과물을 바탕으로 면접이 진행되므로 작업과정에 대한 설명을 위한 커밋 기록을 남겨주시는걸 권장합니다.
- 해당 작업물을 깃헙이나 압축파일(
.git포함)로 전달해주시면 됩니다.
- json-server 실행 시 우측 미리보기 브라우저의 url이 자동으로 변경되는 이슈가 있습니다. 미리보기에서 확인이 필요하실 경우 주소바의 3001을 5173으로 변경해주세요.
- 좌측 Ports in use 아이콘을 클릭하시면 현재 사용중인 포트를 확인 하실 수 있습니다.
- StackBlitz는 미리보기 용도로 활용하시고 실제 작업은 로컬에서 하시는걸 권장합니다.
styled-components: css 문법 그대로 사용할 수 있어서 추가했습니다.
[X] App.tsx에서 missing type 채워넣기 [X] 필요한 컴포넌트 구현: button, input, card, item, option, select, wrapper component 구현 [X] App 페이지에 컴포넌트 적용 [X] 학력사항 구현하기 [X] 항목 삭제 시 확인 메세지 모달 띄우기 [ ] 입력창 validation 추가 [X] 항목이 가장 위에 위치할 때 "위로" 버튼 숨기기, 항목이 가장 마지막에 위치할 때 "아래로" 버튼 숨기기 [ ] 채워지지 않은 필드는 자동으로 저장 안함 [ ] 각 폼 요소마다 최대 글자수 및 최소 글자수 지정 및 이에 맞는 input 컴포넌트 사이즈 조정 [X] 가독성을 높이는 코드 리팩토링
[ ] 폼 초기화 및 초기화 전 확인 메시지 띄우기 [ ] 자동저장, 실행취소, 다시실행 구현 [ ] 항목 버튼 클릭으로 순서 변경 대신 drag and drop 적용, drag and drop 시 애니메이션 적용