오늘 진행한 일
- 프로그램 신청, 프로그램 삭제, 프로그램 신청 취소를 재확인 시켜주는 모달 구현
- 멘토링 시간 이용해서 질문하기
내일 진행해야하는 일
- 고정해 놓은 로그인 유저 ID가 아닌 전역으로 관리하는 유저 아이디로 페이지 분기 수정
- 유정 정보 수정하기 API 기능 구현
진행하면서 어려웠던 점과 회고
오늘은 어제 목표했던 프로그램 신청, 삭제, 취소 등의 유저 행동을 한번 더 확인시켜주는 모달을 구현했습니다.
처음 모달 목업을 구현했을때 기본으로 설정해둔 프로그램 상세페이지의 레이아웃 때문에 모달의 배경이 화면에 꽉 차지 않는 문제가 있었습니다. 그래서 App.tsx에서 상태 끌어올리기를 통해 모달화면을 렌더링하는 것을 생각했고 목업 구현을 완료했습니다.
하지만 여기서 문제가 발생했습니다.
api요청에 프로그램의 ID가 필요한데 props로는 불가능하다 판단했습니다.
그래서 저는 모달에서 확인버튼을 누를 떄 true와 false를 반환하고 그 값이 true인 경우 다시 상세페이지에서 api 요청을 보내는 로직을 구현했습니다.
그리고 이 로직이 효율적인가에 대해서 생각하다 멘토링시간에 피드백을 요청드렸습니다.
피드백을 들으며 의논한 결과 두가지 방안이 나왔습니다.
프로그램 ID를 전역 상태로 관리하는 것과 모달의 css를 수정해 App.tsx가 아닌 ProgramDetail.tsx에서 모달을 관리하는 것이었습니다. 프로그램 ID하나를 위해서 전역 상태관리를 이용하는 것 보단 후자가 더 효율적이라 생각해서 후자를 선택했습니다.
CSS수정 중 Layout 컴포넌트 때문에 모달이 원하는대로 렌더링 되지않으면 Layout의 자식요소가 아닌 형제요소로 두면 되겠다라는 생각을 했고 구현이 잘 되었습니다. 동시에 또 너무 복잡하게 생각해버린 제가 부끄러웠습니다.
