Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back

[트위터 클론코딩 챌린지 중간공유] react-hook-form과 Edit Modal창 추가

#twitter_clone
1개월 전
130
2

안녕하세요!

현재 캐럿마켓 클론 공부를 하고 있는 종화입니다. 😎

Firebase 복습을 하고 싶어서 챌린지 신청을 하게 되었습니다.
(물론 뱃지도 탐나서)

구현한 기능으로는 첫 번째로 Tweet을 작성하는 Form을 react-hook-form으로 바꾸어봤습니다.

확실히 여러 state와 onChange를 넣는 방식에 비해 깔끔해진 모습이 맘에 들었습니다.

디자인은 강의 영상과 똑같이 만들었습니다

약간 다르다면 이제 Edit을 추가한 부분인데, Edit 버튼을 눌렀을 때 실제 서비스들처럼 Tweet 컴포넌트에서 바로 수정할 수 있도록 하는 방식은 어떻게 해야 할 지 잘 생각이 나지 않아서

리액트 마스터 클래스 수업에서 사용했던 방법을 떠올려서 Modal을 띄워 수정하는 방식이면 충분히 간편할 것 같다고 생각해 그렇게 구현을 하였습니다.

OK를 누르면 수정이 되고, CANCEL 버튼을 누르거나 Modal창이 나타났을 때 뒷 배경을 어둡게 처리하는 Overlay 컴포넌트를 누르면 Modal 창이 닫히도록 하였습니다.

그리고 추가적으로 사진 수정은 사진과 같이 아이콘을 누르면 새 사진을 추가할 수 있도록 하였고,

새 사진을 추가하면 아이콘을 변경하여 추가가 잘 되었다는 것을 보여줍니다.

그리고 추가적으로 사진 파일 추가하였을 때 onChange로 파일 데이터를 state에 저장하는데, 이 때 state에 저장하기 전에 파일의 크기가 1MB를 넘어가면 알림창을 띄워서 첨부 파일의 최대 크기가 1MB임을 알려줬습니다.

뭔가 이 Edit Modal 창을 만드는 부분은 처음 해보는 것이어서 그런 지 제일 재밌던 부분이었던 것 같습니다.

그리고 추가적으로 motion을 이용해서 모션도 주고 싶었는데, 정상 작동이 되려면 컴포넌트 구성을 좀 많이 바꿔야겠더라구요,, 그래서 깔끔히 포기했습니다. 😇 (처음부터 motion 고려해서 만들 걸 그랬나봐요)

일단은 Firebase 복습이 목적이었기에 지금도 충분히 만족스럽습니다. 🎉

https://huchu.link/zx0725V

2 comments