[Bottom Sheet - 1] 잘못된 추상화

🧷 다음 포스트

• [Bottom Sheet - 2] 합성 컴포넌트: https://presentkey.tistory.com/12?category=1339335

 

🚩 기존 구현 사항

기존 UI

기존 BottomSheet 컴포넌트는 main 페이지에서만 사용했고,

버튼을 클릭하면 해당하는 Form이 렌더링되고 있었습니다.

🚩 변경사항

1. BottomSheet 컴포넌트의 재사용성 높이기

     - 기존 detail 페이지의 입출금 Form을 BottomSheet 컴포넌트로 나타내기로 했습니다. 

 

2. 이동 효과주기

     - 버튼을 클릭하면 BottomSheet 영역이 올라오고 내려오는 효과를 주고싶었습니다.

🚩 첫 번째 구현 시도

합성 컴포넌트를 통해 구현을 했습니다. 영상의 겉모습을 보면 의도한 대로 구현 된 것 같지만 여러 문제가 있습니다...

 - 추상화가 잘못 되어 발생한 이해할 수 없는 컴포넌트 구조와 로직들 그리고 무수히 많은 props...

- button 영역과 from 영역이 분리되저 있는 점

- 입출금 form의 경우 input value를 공유하고 있는 점

 

 

이 문제를 해결하기 위한 방법을 더 고민해봐야겠습니다..!