Schedule_EngAll
원티드 프리온보딩 기업과제 Week-4-2 Schedule
제작 기간 : 2022 - 07 - 27 ~ 2022 - 07 - 29
사용 스택
-
typeScript: 타입스크립트로 build했습니다. -
eslint / prettier: 깔끔하고 일관된 코드스타일을 위해 사용하였습니다. -
recoil: 클라이언트 측 전역 데이터를, 보일러 플레이트 없는 수준으로 구현 가능했기에 주어진 시간 대비 최고의 효율이라고 생각되어 사용하였습니다. -
json-server와 axios: 모듈화된 get, post api를 제작하고 서버데이터를 구축하기 위해 사용하였습니다. -
tailwindCss: 번들 크기를 줄이고 최소한의 코드와 시간으로 요구 레이아웃(반응형)을 구현하기 위해 사용하였습니다. -
date-fns: 날짜/시간 조작을 이용하여 시작시간만을 받아와 다른 사용해야 할 데이터들을 제작하기 위해 사용하였습니다. -
react-router-dom: 딜레이 없는 빠른 라우팅과 리다이렉트 지원을 위해 사용하였습니다.
기능 구현
주간 테이블
-
날짜는 표시되지 않습니다.✅
- 날짜가 표시되지 않는 주간 시간표를 제작하였습니다.
-
주간 일정 데이터를 가져와 요일 시간 별로 노출합니다.✅
- Date 객체를 사용하고자 했으나 이번 과제의 특성(날짜는 체크하지 않음)상 다음날 만드는 데이터가 무조건 늦게 정렬되었습니다.
- 차선으로 am/pm 여부와 시간단위 숫자에 이중정렬을 걸었습니다.
-
각 일정은 x버튼을 누르면 삭제 되어야 합니다.✅
- hook으로 컨펌 로직을 분리하고 삭제시 컨펌메세지를 띄워주었습니다.
-
add class schedule 버튼을 누르면 수업 일정추가 페이지로 이동합니다.✅
- add페이지와 view페이지를 만들고 첫 진입시와 존재하지 않는 주소일때 리다이렉트될 home페이지를 만들었습니다.
-
반응형 웹 + 테이블 ✅
- 각 카드크기를 고정하고 가로화면에 overflow를 적용해 디스플레이가 깨지지 않게 했습니다.
수업 일정 추가
-
수업 일정 추가 버튼을 누르면 수업 일정 추가가 열립니다.✅
-
저장 버튼을 누르면 수업 일정 보기로 돌아갑니다.(주간 테이블)✅
-
수업 일정 추가 페이지에서 시작시간을 선택할 수 있습니다.✅
-
시작시간은 5분 간격으로 제한됩니다.✅
- 필요한 시간단위를 계산하는 수식을 만들어 작업량과 코드양을 조금 줄였습니다.
-
시작 시간의 범위는 0~23시까지 입니다.✅
- 마지막 시작시간의 경우 23시에 마쳐야 하므로 dropdown에서 am -> pm으로 변경시 시간이 23시 20분 이상이라면 초기화되도록 했습니다.
-
수업 시간은 항상 40분입니다.✅
- 로직을 hook으로 분리 : 시작시간을 받아와서 date-fns로 시작시간, 끝시간, json에 들어갈 Date객체, timeFilter 배열을 리턴하도록 했습니다.
-
-
수업 일정을 추가할 때 똑같은 시간에 여러 요일을 선택할 수 있습니다.✅
- 모든 요일 선택기능을 추가하였습니다.
- 여러 요일을 선택해서 각 주소로 제출할 수 있도록 하였습니다.
-
새로 추가된 일정이 주간 테이블에 노출됩니다.✅
- 주간 페이지 진입시 useEffect 사용으로 api를 받아오도록 했습니다.
-
페이지가 다시 로드 되어도 수업 일정이 유지 되어야 합니다.✅
- json-server를 사용하여 캐싱 이슈와 데이터 유지 문제를 해결하였습니다.
-
반응형 웹 + 작성 폼 ✅
- 작성 폼의 버튼들에 각각 플렉스를 적용하여 스크린의 크기에 따라 새로이 배치되도록 하였습니다.
-
중복된 날짜 제출 금지 : 트러블슈팅 ✅
- 초기 시도 : date 객체를 json에 담아 비교하려 했으나 다음 날이 되면 자동으로 밑에 정렬되는 문제가 발생
- 중기 시도 : 시작시간을 비교하려 했으나 중간에 겹치는 시간을 확인할 수 없는 문제가 발생
- 해결 : 시작시간을 받아올 때에 시작시간 => 40분동안 5분간격으로 출력한 배열을 가지고 반복문을 돌려주었습니다.
- 또한 api를 요일별로 분리하여 submit시가 아닌 checkbox 클릭시 저장된 배열에 맵을 돌려서 해당 주소의 api만을 요청하고,
- 이때 중복이 발생한 경우에는 submit button을 disable 상태로 만들었으며 유저에게 알림 + checkbox input을 초기화시켰습니다.
