[FE] refactor: 글 제목 수정 낙관적 업데이트 구현

[yogjin]

🛠️ Issue

• close 낙관적 업데이트 적용 #585

✅ Tasks

수정 전

2023-10-16.11.52.10.mov

수정 후

2023-10-16.11.58.58.mov

• 글 제목 수정할 때 낙관적 업데이트 적용
• 글 제목 수정 시 깜빡임 현상 해결
• 글 제목 수정 실패 테스트 추가 (msw 오버라이딩 환경설정 및 함수 추가)

⏰ Time Difference

• 6 + 6

📝 Note

[jeonjeunghoon]

훅 분리랑 input value change 핸들러 내부에 넣는 의견 어떤가요?
코멘트로 남겨뒀어요~!

[jeonjeunghoon]

해담 훅은 분리하는게 좋을 것같아요

[jeonjeunghoon]

useControlledInput 훅 내부에 핸들러가 있어도 될 것같다고 생각해요

[yogjin]

잘 이해가 안가는데, 어떤 식으로 구현할 수 있을까요?

[jeonjeunghoon]

onChange 를 useControlledInput 훅 내부에 다음과 같이 선언할 수 있지 않나요?

const useControlledInput = (defaultValue: string = '') => {
  ...
  const onChange: ChangeEventHandler<HTMLInputElement> = (e) => setInputTitle(e.target.value)
  ...

  return {
    ....
    onChange,
    ...
  }
}

[nangkyeonglim]

고생하셨어요! 바로바로 업데이트 되니까 좋네요

[nangkyeonglim]

이건 뭔가요?

[yogjin]

에러 테스트를 위해 overrideWritingTitleWithError으로 msw 핸들러를 오버라이딩할 때, 내부적으로 ~URL을 사용합니다.
그 때 기존 process의 환경변수는 접근하지 못하더라구요.
아마 실행환경이 달라서 그런 것 같습니다.
그래서 불가피하게 cypress용 환경변수를 작성했습니다

[jeonjeunghoon]

고생하셨어요! 코멘트 남겨놨습니다~

[jeonjeunghoon]

onChange 를 useControlledInput 훅 내부에 다음과 같이 선언할 수 있지 않나요?

const useControlledInput = (defaultValue: string = '') => {
  ...
  const onChange: ChangeEventHandler<HTMLInputElement> = (e) => setInputTitle(e.target.value)
  ...

  return {
    ....
    onChange,
    ...
  }
}