2차 과제 구현 과정 및 회고

사전 과제에서 미구현 된 부분을 보완하고  버그/에러를 해결한 과정을 기록합니다.

 

<버그/에러 해결>

 

1. redux-toolkit update / delete 기능 구현

- 기존 코드의 문제:

1) 배열 내에 class 객체가 들어가는 형태인데, push 로 배열에 접근해 추가하지 않고 바로 할당하는 데에서 에러가 발생했습니다. 

2) delete 에서 .pop() 등 직접 접근하는 메서드를 사용하여 에러가 발생했습니다.

 

- 해결 방법:

1) 배열에 push 로 접근하여 action.payload를 배열에 추가하는 방식으로 코드를 수정했습니다. 이때, action.payload는 reservedClass라는 객체입니다. 해당 state를 useState로 생성하고, 각 예약 단계에서 수업권 타입 / 시간 날짜 / 튜터를 선택할 때마다 setState로 상태를 업데이트 시켜주었습니다. 또한, 마지막 튜터 선택 시점에서 dispatch를 호출해 reservedClass 객체를 aciton.payload로 넘겨 전역 상태에 업데이트가 일어나도록 작성해주었습니다. 이 과정에서 중복되는 상태를 작성한 timeSlice를 삭제하하였습니다. 그리고  reservedClass객체에 들어있는 type으로 Select 컴포넌트 등 type에 따른 조건부 렌더링이 필요한 곳에서 reservedClass.type을 통해 조건을 작성해주었습니다.

 

2) delete에서는 .filter를 이용하여 수업 id를 비교해 삭제 기능이 작동하도록 코드를 작성하였습니다.

 

2. MainCalendar 컴포넌트 구조 개선

- 기존 코드의 문제:

timezoneArr를 <button> 으로 전부 렌더링하는 형태였던 기존의 코드는 날짜/요일/시간 상태를 받아 이에 따라 다르게 렌더링하지 않고 전부 동일한 버튼으로 렌더링하고 있었습니다.

 

- 해결 방법: 

1) 왼쪽 time zone / 상단 일주일 요일과 날짜를 생성하여 동적으로 렌더링 해주어 매주 다른 날짜가 나오도록 코드를 작성했습니다. 이후 , 해당 스코프 내에서 그대로 time block을 조건에 따라 time, date을 받아와 이에 따라 동적으로 timeblock을 생성해주었습니다. 

 

- 왼쪽 time zone은 이미 작성되어 있던 timezoneArr를 1시간 단위로 렌더링할 수 있도록 짝수번째 인덱스 (00시 00분을 의미하는 nn00 형태) 만 텍스트를 가진 div 태그를 반환합니다. 홀수번째 인덱스 (00시 30분을 의미하는 nn30 형태) 는 빈 div태그를 반환하여 레이아웃만 차지할 수 있도록 했습니다.

 

- 상단 일주일 요일과 날짜는 getDayName, getThisWeekDays를 유틸 함수로 작성해 동적으로 생성될 수 있도록 코드를 작성했습니다. 이를 통해 일주일 날짜와 요일이 정확히 렌더링되고, 오늘 날짜에는 CSS 효과를 주어 사용자에게 알릴 수 있도록 했습니다.

 

- timezoneArr를 map하여 생성해주는 time block은 다음과 같은 조건에 따라 나뉩니다. 

 

1) 새벽 3-5시 오후 14-19시 선택 불가 -> timezoneArr는 고정되어 있는 배열이기때문에, 인덱스값을 이용해 조건문을 작성하여 disabled 된 버튼을 생성했습니다.

2) 오늘 날짜 이전 (getToday 함수를 통해 date를 얻어옴) 의 날짜에 해당하는 time block 또한 disabled된 버튼을 생성했습니다.

3) 내일 날짜 (getToday() + 1 에 해당하는 날짜) 인 경우, 현재 시간보다 2시간 이후 시간 (getCurrentTime + 200)까지는 disabled된 버튼으로 수업을 선택할 수 없게 버튼을 생성했습니다. 

 

(이 경우, MainCalendar에서 시간을 30분 단위로 사용하기 때문에 timezoneArr와 getCurrentTIme 모두 0000 ~ 2330 까지의 시간을 number 타입으로 가지고 있습니다. 이 둘을 비교하여 조건문을 실행시켜주었습니다.) 

 

4) 시간이 선택된 경우, isReserved 로 시간이 선택됨을 리액트에 알려주고, 선택된 시간과 날짜에 맞는 timeblock을 추가 조건에 맞추어 렌더링해줍니다. 추가 조건에 따른 버튼은 

 

 a. 튜터는 아직 선택되지 않은 상태 -> SelectButton 렌더링

 b. 튜터까지 선택된 상태 -> ReservedButton 렌더링

 

입니다. 

 

5) 마지막으로, 호버되면 해당 timeblock의 시간을 알려주고, 클릭하면 그에 맞는 코드가 실행되는 기본 timeblock 버튼을 생성해줍니다. 

-> 여기에는 20분, 40분 선택에 따른 높이 값을 다르게 줍니다. 또한, 40분 수업권을 선택한 경우, 02:30 과 13:30이 disabled 되어야 하는 조건도 반영해주었습니다. 

-> 클릭 시에는 isReserved를 변경해 시간이 선택되었음을 리액트에 알려줍니다. 또한, time, day를 상태로 관리하여 reservedClass 상태까지 업데이트해줍니다. 

 

3. delete 실행 이후 40분 선택권으로 자동 이동하는 버그 해결

- reservedClass 객체 상태로 전역 상태를 업데이트 하기 전, 수업 예약 과정에서 받아온 정보를 관리해주다보니 로직이 살짝 꼬였습니다.  deleteModal에서 수업 삭제 후, 빈 객체로 reservedClass 상태를 변경해주다보니 일어난 문제였습니다. 링글 수업 예약 페이지에 따르면, 삭제 후에는 기존에 선택했던 수업권 타입이 그대로 남아있어야 했습니다. 그래서 delete를 dispatch를 통해 실행시켜 준 후에는 tutorId, selectedDate, selectedTime 이라는 type 이외의 key값을 삭제하고 remainedClassType만을 reservedClass에 남겨주는 코드를 추가해 버그를 해결했습니다. 

 

4. 추가한 기능

- 튜터까지 모두 선택된 경우, '다음' 버튼이 활성화되도록 했습니다.

- 상태를 명확히 관리하여 상단 헤더의 "예약 신청한 수업"의 개수가 제대로 렌더링되도록 했습니다. 

- deleteModal에서 예약한 시간, 날짜 및 튜터 정보를 렌더링해주었습니다.

 

<회고>

1. 아쉬운 점

- 감사하게도 시간이 더 주어졌음에도 아직 해결하지 못한 부분이 남았습니다. 40분 수업권 선택 시, 시간 및 튜터를 선택했을 때 timeblock layout이 밀리는 현상이 발생합니다. 이는 timeblock을 <버그/에러 해결> 에서 작성해준 것과 같이 한번에 조건에 따라 렌더링해주고 있어서, 분리가 되지 않고 높이만 변경되도록 코드를 작성했기 때문입니다. 

 

- tailwind CSS를 처음 사용해봤는데, config에서 theme 등을 활용하여 CSS 코드의 반복을 줄일 수 있었을 것 같습니다. tailwind CSS를 더 심화하여 사용하지 못한 것이 아쉬웠습니다.

 

- 컴포넌트 구조를 파악하기에 어려운 코드 작성. tailwind를 사용하느라 그렇게 된 감이 있지만... 그럼에도 컴포넌트 구조 개선이 필요해보입니다.

 

2. 깨달은 점

- 설계 과정에서 어떻게 동작해야하는지 로직을 어느정도 파악해 두고 시작했지만, timeblock layout이 밀릴 것을 예상하지 못해 HTML 마크업을 유연하게 짜지 못한 것이 문제였습니다. 사전 설계가 더욱 치밀해야함을 깨달았습니다. 현업에서는 요구사항이 계속 바뀌겠지만, 이번 과제는 요구사항이 픽스된 상태였기때문에 이 점을 고려하여 설계하는 것이 부족했던 것이 아쉬웠습니다. 

 

3. 앞으로 적용할 점

- tailwind CSS config 를 활용하여 더 효율적인 CSS 코드 작성해보기

- tutorCard 분리 -> tutorList에서 map 해주기

- 이외에도 분리해야하는 컴포넌트 찾아 리팩토링하기