git clone https://github.com/Wanted-Pre-Onboarding-FE-Team5/engall-class-schedule
npm i
npm start
//windows 운영체제에서 npm start 명령어로 json-server 실행이 안될 경우 추가로 아래 명령어 사용
npm run server
typescript json-server recoil styled-components date-fns
- 구현된 기능과 구현되지 않은 기능
<구현된 기능>
-
add class schedule 버튼 클릭시 add class schedule 페이지로 이동
-
자동으로 현재 날짜를 Date 객체로 가져와서 현재 날짜가 포함된 월요일~일요일까지의 날짜 데이터를 계산함
-
상단에서 계산된 날짜는 전역 state로 존재하여 양 페이지에서 활용 가능
-
각 수업 스케줄 삭제(x) 버튼 클릭시 삭제 컨펌 팝업 모달이 열림
-
삭제 컨펌 팝업에서는 delete 클릭시 delete request 요청, cancel 클릭시 팝업이 닫힘
-
delete 클릭 이벤트 핸들러에 수동으로 get request를 달아 삭제한 내용이 실시간으로 변경됨
<구현되지 않은 기능>
-
삭제 컨펌 모달 오픈시 모달이외의 다른 곳 클릭시에도 모달이 닫히게 하는 기능은 구현하지 못함
-
모바일 디바이스를 고려한 반응형 스타일링은 구현하지 못함
<구현된 기능>
-
수업 시간 드롭다운 구현, 0-11 사이에서 선택 가능
-
우측 PM 버튼 클릭시 앞서 선택한 시간에 +12 가 됨, AM 버튼은 추가 시간적 작업 없음
-
분 드롭다운은 0-55분 사이에 5분 간격으로 선택 가능
-
시간, 분, AM, PM element들은 각각 클릭시 사용자가 직관적으로 알아챌 수 있는 스타일적 변화가 생김
-
수업시간이 고정되어 있어서 끝나는 시간은 자동으로 계산됨
-
하단에 원하는 요일들을 클릭하면 앞서 선택한 시간에 각각의 요일 버튼이 가진 날짜 정보를 정해 database에 넣을 data를 객체 형태로 만들어 useState를 사용해 배열에 저장함.
-
하단에 요일을 클릭하면 클릭된 요일은 사용자가 직관적으로 알아챌 수 있는 스타일적 변화가 생김
-
save 버튼을 누르면 앞서 useState를 통해 저장된 배열 안 data를 map 반복하며 순서대로 post request를 보냄. 또한 동시에 view class schedule 페이지로 이동
<구현되지 않은 기능>
- 시간을 선택하면 하단에 요일들에서 겹치는 수업 시간이 없는지 확인하는 로직을 거친후 겹치면 비활성화(흐려짐)
- 코드 작성시 참고한 상황 가정
-
사용자는 프로그램 사용시 날짜를 직접 선택할 필요가 없으며, 프로그램이 자동으로 접속한 날을 포함한 월요일부터 일요일을 계산해서 그에 맞는 스케줄을 알아서 그려준다
-
한주의 시작은 월요일이다
-
수업시간은 항상 40분이며 따라서 사용자는 시작 시간만 선택하면 자동으로 프로그램이 종료시간을 정해준다
-
확장성을 고려하여 레이아웃을 구성하는 컴포넌트, hooks, 상수는 재사용 가능하게 처리하고, 현재 날짜는 전역 state로 관리한다.
-
프로그램은 텍스트를 통해 사용자에게 직접 질문하기 보다는 눈에 띄는 스타일 변화를 주어 사용자가 직관적으로 이해할 수 있게 한다
- 코드만들 때 어떤 엣지 케이스를 고려 했고 처리하지 못한 엣지 케이스는 무엇인가?
<처리한 엣지 케이스>
- atom.ts에서 현재 날짜로 월요일을 구하는 로직에서 현재 날짜가 일요일일 경우 기존에 만든 로직을 벗어나는 케이스 : Date객체 내에서 일요일은 한 주의 시작으로 값이 0임. 그래서 일요일이 현재 날짜일 경우 기존 로직을 통하면 다음주로 넘어가게 됨.
const now: Date = new Date();
const day: number = getDay(now);
const mondayMilliseconds: number = now.setDate(now.getDate() - (day - 1)); //now가 일요일이면 다음주 월요일이 기준 월요일이 됨
따라서 지난주 월요일을 구해야 하므로 일요일일 경우만을 위한 로직을 따로 추가함
const now: Date = new Date();
const day: number = getDay(now);
const mondayMilliseconds: number = now.setDate(day === 0 ? now.getDate()-6 : now.getDate()-(day - 1)); //일요일일 경우 따로 처리할 로직 추가
- AddSchedule 컴포넌트에서 요일 버튼 클릭시 post할 스케줄이 생성되는데, 계속 클릭할 경우 동일한 스케줄들이 중복 저장되는 오류 : 기존 로직은 요일 버튼 클릭시 WEEK_TEMPLATE을 통해서 post할 스케줄을 생성하고 useState에 배열형식으로 전부 저장해두었다가 save 버튼 클릭시 한번에 post request함. 클릭 이벤트에 로직을 달았기 때문에 여러번 클릭시 스케줄이 여러개 생성될 상황에 대한 인식을 하지 못함 => 클릭 이벤트와 post할 스케줄 생성 단계를 분리함으로서 해결. 요일 버튼 클릭시 date 정보를 조건문을 통해 중복을 제거하고 useState에 저장함. post할 스케줄 생성은 save 버튼 클릭시 생성하여 바로 post하게 변경.
<처리하지 못한 엣지 케이스>
- 수업시간을 이미 존재하는 수업과 겹치게 선택했을 경우 해당 요일의 버튼을 비활성화하는 작업
- 시간이 더 있다면 하고싶은 것과 그에 대한 아이디어
-
처리하지 못한 엣지 케이스 해결 => date-fns의 areIntervalsOverlapping 메서드를 사용하여 겹치는 시간이 있는지 없는지 여부를 boolean값으로 추출하는 것 까지는 해결. 추출한 데이터를 사용하려고 한 곳은 AddSchedule 컴포넌트 였는데, 이 데이터를 활용할 컴포넌트 레벨을 잘못 지정한 것 같다고 생각함. 현재 AddSchedule 컴포넌트는 페이지의 역할을 하고 있기 때문에 그 하위의 자식 컴포넌트인 요일 버튼 레벨(DayButton 컴포넌트)에서 해당 작업을 시도해볼 예정
-
AddSchedule 컴포넌트 전체를 form 형식으로 변경 : 데이터 제출에는 form과 input 태그를 사용하는 것이 목적에 부합하다는 생각이 들어 현재 div요소를 사용한 코드 전체를 리팩토링 하고 싶음
-
view week schedule 페이지에서 수업시간 데이터 렌더링이 많이 느려 성능 개선을 하고 싶다 => 1) onload 이벤트가 적용 가능한지 확인해본다 2) 실패하면 로딩 상태를 만들어서 달아본다 3) 코드 설계를 잘못되어서 구조적으로 느려진건지 알아본다 4) 전부 다 아니면 다른 이유가 있는지 찾아본다
-
반복문(map, for)과 useState사용을 줄이는 방향으로 코드 리팩토링