Today I Learend
날짜
2024년 3월 19일 화요일
내용
모달로 기능 추가하기
우리 서비스를 삭제하려면 Shopify 의 shop admin 쪽에서 처리하면 된다. 하지만 이와 별도로 우리 서비스 내에서도 자체적으로 삭제 버튼을 만들기로 했다. 이와 관련된 로직은 아마 내일 처리할 예정이니 내일 TIL에 담길 듯 하다. 오늘은 프론트쪽에서의 기능 구현을 우선으로 했다.
삭제 전 이유에 대한 데이터를 모달을 이용해서 수집해야 한다. 기존 계획으론
- 모달에서 고객이 선택하고 입력한 데이터를 수집한다.
- 유저가 확인버튼을 누를 경우 삭제 요청과 함께 이 데이터를 서버로 보낸다.
- 서버에선 데이터는 저장하고 삭제 로직을 시작한다
- 모달이 종료된다..
- 만약 취소버튼을 누를 경우 그냥 2~3번 과정 없이 모달창을 종료한다.
의 순서로 구성했다. 프론트는 아직 너무 허접한 수준이라 조언을 받았는데, 우리 서비스에서 특별한 예외 케이스가 아니면 모달에서 요청을 보내도록 처리하지 않았다. 모달이 닫히고 기존에 위치해 있던 페이지에서 요청을 보내야 한다. 따라서
- 모달에서 고객이 선택하고 입력한 데이터를 수집한다.
- 유저가 화깅ㄴ버튼을 누를 경우 모달 창의 부모 컴포넌트는 True와 이 데이터를 함께 받는다.
- 자식 컴포넌트이자 모달창이 True를 반환할 경우 서버에 데이터를 전송하며 삭제를 요청한다.
- 만약 모달창이 False를 반환하면 아무 로직이 발생하지 않는다.
따라서 모달창에선 MatCheckboxChange를 통해 고객이 입력한 값들만 처리해주도록 코드를 작성했고 부모 컴포넌트쪽에서 서버로 데이터를 전송하는 로직을 만들었다. 근데 체크박스가 귀여운 노란색으로 나온다.. 우리 서비스에서 쓰는게 있는데 몰랐다. CSS도 기존에 쓰던것 클래스로 가져오면 되는데 일일이 만들고 있었다. 역시 머리가 나쁘면 몸이 고생하는 것 같다.
회고
프론트.. 생각보다 재밌을 지도..?
