refactor: 방 생성, 관리 페이지 렌더링 최적화

[bbearcookie]

🧩 이슈 번호

• close 방 생성, 관리 페이지 렌더링 최적화 #507

✅ 작업 사항

• 방 생성 페이지 렌더링 최적화
• 방 관리 페이지 렌더링 최적화
• 방 생성 페이지에서 StepTemplate 작성하는 방식으로 리팩토링

👩‍💻 공유 포인트 및 논의 사항

기존

현재

기존에 watch 로 값의 변화를 감지하고 있다 보니, FormProvider 로 감싸진 전체 영역이 리렌더링되는 현상이 발생했었는데요,
여기에 useWatch를 사용하는 방식으로 수정하여 값을 구독하는 컴포넌트만 리렌더링되도록 했어요.

추가로, 페이지 내에 존재하는 컴포넌트를 분리하기에는 애매하지만 값이 변경되었을 때 전체가 리렌더링 되는 것이 아니라 특정 JSX만 리렌더링하고 싶은 경우에는 Controller를 사용했어요.
(ex. TimePicker)

Reference: https://github.com/orgs/react-hook-form/discussions/7558