[민우] - 피드백 평가 모달, 디바운스 스위치 버튼 구현

[MinwooP]

📌 이슈 번호

#66

🚀 구현 내용

• 피드백 평가 모달 구현
• 디바운스 스위치 버튼 구현
• 상세 페이지 수정 => 디바운스 스위치 버튼 사용

📌 피드백 모달 로직 수정 및 연결

feedback_modal.mp4

ModalRadio 컴포넌트가 ModalEvaluate컴포넌트의 rate state를 계속 바꿔주면 ModalEvaluate컴포넌트의 피드백 완료 버튼을 클릭했을 때, 리마인드 아이템 컴포넌트로부터 넘겨받은 onClickFinish(rate: number)에 rate state를 인자로 넘겨서 실행시킨다.

📌 디바운스 스위치 버튼 구현

toggle.mp4

• 클릭될 때마다 클라이언트의 상태는 계속 toggle 되고
• 실제 서버 상태의 toggle을 일으키는 api 호출은 디바운스를 이용해 처리하고, 그 처리 자체도 원래 기존값과 다를 때만 호출해줘야 한다(toggle이기 때문에 로컬의 상태가 변하지 않는다면 서버의 상태도 변하지 않아야 하므로)

사용예시

 <DebounceSwitchButton
        defaultIsOn={serverIsOn} // toggle하려는 상태의 기본값이 on or off
        submitToggleAPI={submitToggleAPI} // 실제로 서버의 상태를 toggle 시켜주는 API 호출 함수
        toggleName="remind" // 계획 공개여부 or 아좌좌 알림 여부 or 리마인드 알림 여부 중 어느 곳에서 사용하는지 
      />

[qkdl60]

고생하셨습니다 👍LGTM

[qkdl60]

디바운스 잘쓸게요