이 문제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 채용을 위한 목적으로만
이 문제를 활용할 수 있습니다. 이 문제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게
제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다.
이 “누설 행위"에는 문제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.
과제를 시작하기 전 유의사항
앞 단계의 문서를 충분히 확인한 뒤 시작해주세요.
과제
김토스님이 새로 구현한 상담 예약 추가/취소 기능을 리뷰해주세요.
구현 요구사항
아래 내용은 김토스님이 구현한 요구사항입니다.
1. 예약 취소 기능
상담 예약을 취소하는 기능을 구현합니다.
1.
일정표에서 예약 건이 있는 시간을 선택하면 나타나는 일정 상세 정보 모달에 “삭제” 버튼을 추가합니다.
2.
삭제 버튼을 누르면, 해당 예약 건을 취소하기 위한 서버 API를 호출합니다.
3.
취소가 완료되면, 일정표를 서버의 최신 정보와 동기화합니다.
4.
만약 열려있던 일정 상세 정보 모달에 더이상 예약 건이 없다면 자동으로 모달을 닫습니다.
1번 화면 예시
서버 API
•
예약 취소
◦
DELETE /api/schedules/:scheduleId
◦
Params
▪
scheduleId: 취소할 상담 예약 건의 ID
2. 신규 예약 추가 기능
새로운 상담 예약을 추가하는 기능을 구현합니다.
1.
일정표 상단 우측에 “예약 추가” 버튼을 추가합니다.
2.
“예약 추가” 버튼을 누르면 “신규 예약 추가하기” 모달을 표시합니다.
3.
“고객 이름”과 “예약일”을 입력할 수 있습니다.
4.
“추가하기” 버튼을 누르면 주어진 정보를 사용하여 예약을 생성하는 서버 API를 호출합니다.
a.
예약 일자 포맷은 yyyy-MM-dd hh:mm 입니다.
5.
작업이 완료되면 “신규 예약 추가하기” 모달은 자동으로 닫힙니다.
6.
작업이 완료되면 일정표를 서버의 최신 정보와 동기화합니다.
1번 화면 예시
2번 화면 예시
서버 API
•
신규 예약 추가
◦
PUT /api/schedules
◦
Request Body
{
// 고객 이름
"customerName": string,
// 예약일. "yyyy-MM-dd hh:mm" 형식.
"reservationDateTime": string,
}
TypeScript
복사
리뷰 제출하기
1.
과제 안내 단계에서 자동으로 생성된 PR 중, “예약 추가/취소 기능” PR을 확인해주세요.
2.
코드 개선이 필요하거나 논의가 필요한 변경점이 있다면 [Files changed] 탭에서 인라인 코멘트를 달아주세요. 인라인 코멘트를 남길 라인 번호에 마우스를 올리면 [+] 버튼이 뜨고, 드래그 하거나 클릭하면 입력창이 뜹니다.
3.
만약 특정 변경점에 국한된 내용이 아니거나, 전체적인 변경점에 대한 논의가 필요하다면 [Conversation] 탭에서 코멘트를 추가해주세요.
4.
과제 제출 시간이 끝나기 전에 [Files changed] 탭의 우상단에 있는 [Finish your review] 버튼에 숫자가 남아 있는지 꼭 확인해주세요. 만약 숫자가 남아있다면 [Submit review] 버튼을 눌러주세요. 과제 제출 시간 내에 submit 된 코멘트만 채점의 대상이 됩니다.
무엇을 리뷰해야 하나요?
•
코드 품질에 개선이 필요한 부분이 있다면 코멘트 남겨주세요.
◦
코딩 스타일의 문제
◦
유지 보수 하기 힘든 형태
•
버그나 사이드 이펙트가 우려되는 부분이 있다면 코멘트 남겨주세요.
•
더 나은 구현 방법이 있다면 코멘트 남겨주세요.
◦
특정 라이브러리를 도입해서 개선할 수 있음
◦
구조를 더 좋게 개선할 수 있음
•
인터랙션이나 사용자 경험에 우려가 되는 부분이 있다면 코멘트 남겨주세요.
•
기타 구현 사항에 대해 궁금한 내용이 있다면 코멘트 남겨주세요.
•
모든 코멘트에는 변경을 제안하실 내용을 달아주시면 좋습니다.
아래와 같은 형태로 변경점을 추가할 수도 있습니다.
```suggestion
// 변경 제안
```
Markdown
복사
•
실제 협업하는 것처럼 코멘트를 달아주시면 좋습니다.
이어서
본격적으로 김토스님이 구현한 또다른 기능을 살펴봅시다. 아래에 노란색으로 강조된 링크를 따라 이동해주세요.