[ Fix ] 그룹 생성 데이트피커 버튼 제출 오류 / 제출 완료 시 페이지 깜빡임 해결

[wuzoo]

#️⃣ Related Issue

Closes #314

✅ Done Task

• 데이트피커 type button
• suspense 삭제

💎 PR Point

데이트피커 월 이동 버튼 클릭 시 제출됨

당연하게도 button의 타입이 기본 타입인 submit 으로 되어있어서 이벤트 전파로 인해 그룹 생성 폼도 제출되는 현상이 발생했어요. 타입 수정하여 고쳐주었습니다.

제출 완료시 깜빡임 해결

useGroupByCodeQuery 훅이 useSuspenseQuery로 되어있었습니다. 즉 그룹 생성이 완료되고 응답 데이터로 code를 받게 되면 code 상태가 바뀌고, Clipboard가 렌더링되게 됩니다. 그럼 즉시 서스펜스 쿼리가 실행되고, 응답을 기다리며 펜딩 상태가 success가 될 때까지 컴포넌트 렌더링을 중단하는 현상이 발생해요 ! 따라서 깜빡임이 발생하고 성공 상태가 떴을 때 나머지를 렌더링하게 되었습니다.

이를 useQuery로 수정해주었어요. 그렇다보니 어쩔 수 없는 undefined 값에 대한 처리를 해줘야했습니다. Clipboard 컴포넌트에서 만약 useQuery가 pending 상태일 때 복사 버튼을 누르면 잘못된 초대 텍스트가 복사될 것이 우려되었습니다. 따라서 해당 쿼리의 isSuccess 상태를 기준으로 아직 성공상태가 아니라면 클립보드를 보여주지 않고, 성공이 떴을 때 클립보드를 렌더링해주는 방식으로 수정해주었습니다.

📸 Screenshot

2025-01-21.11.09.52.mov

[j-nary]

LGTM! useSuspenseQuery 에 그런 사이드이펙트가 있었네요!
좋은 코드 감사합니다! 수고하셨습니다 :)