AlertModal 및 ProfileImage 컴포넌트 생성 #45
Conversation
| * onCancel={() => {}} | ||
| * onConfirm={() => {}} | ||
| * > | ||
| * <AlertModal.ProfileImage uri={userData?.profileImage} size={56} /> |
There was a problem hiding this comment.
프랍으로 받는 것과 칠드런으로 받는 것의 차이가 뭔가요?
There was a problem hiding this comment.
children으로 받는 것은 AlertModal에 프로필 이미지가 들어가냐의 여부입니다. 그 외에 것들은 props로 넘겨줍니다.
ProfileImage는 기본 이미지 처리, uri 분기, 사이즈 관리 등의 조건 로직을 가지므로
AlertModal이 이를 props로 직접 제어하는 것은 책임 과도하다고 판단했습니다.
따라서 AlertModal은 레이아웃과 인터랙션만 담당하고,
프로필 이미지는 children으로 주입받는 구조로 설계했습니다.
또한, ProfileImage는 AlertModal 외의 영역에서도 사용될 수 있다고 판단했습니다.
모달 내부 구현에 종속시키지 않고 children으로 전달하도록 설계했습니다.
예시
- 버튼 1개로 이루어진 AlertModal은 cancelLabel과 onCancel을 제외하고 props로 넘겨주면 됩니다.
- 프로필 이미지가 포함된 AlertModal은 모달로 감싸주어 프로필 이미지라는 값을 children으로 받습니다.
There was a problem hiding this comment.
엇 지금보니 Input 들어가는 상황을 처리 안해줬네요. 다시 추가해서 커밋 올리도록 하겠습니다!
There was a problem hiding this comment.
AlertModal 하나에 프랍과 이벤트가 많이 들어가고 옵셔널로 들어갈 수 있는 게 많다보니 나중에 사용할 때 헷갈릴 수도 있다고 생각합니다.
특히, 취소 버튼이 있을 때 취소 이벤트가 필수적으로 들어가야하는 부분에서 취소 이벤트만 들어가는 경우가 생길 수도 있다고 생각합니다.
해당 컴포넌트를 구성하는 컴포넌트들이 아톰들로 이루어져 있어서 단계로 보면 molecules로 들어가야 하나, 책임에 대해 생각하면 지금처럼 organisms에 있는게 맞다고 생각이 드네요..흠.. 내부 컴포넌트들을 한 번 moledules에 정의해서 책임 분리를 한 후에 진행하면 어떨까합니다!
There was a problem hiding this comment.
좋은 의견 감사합니다 😊 저도 같은 문제로 고민 중이었습니다.
기존 단일 컴포넌트에 모든 props를 받던 구조이다보니 사용하실 때, 어려움이 발생한다는걸 인지하였습니다.
이를 보다 용이하게 molecule 단위로 책임 분리 (Title/Text/Input/Actions) 나눠서 AlertModal 컴포넌트 안에 가져다 쓰는 형태로 개선하였습니다.
자세한 사용 방법이나 코드는 #56 여기서 확인해주시면 감사하겠습니다.
- size 설정으로 유동적인 크기 조정 가능
Description
More
AlertModal은 영역별 조합이 필요한 컴포넌트라기보다 텍스트 · 버튼 옵션만 달라지는 패턴이 반복되어, 불필요한 컴포넌트 분리를 지양하고 props로 제어하는 단일 컴포넌트 구조를 선택했습니다.
기본 프로필 이미지.svg 추가할 때 assets/icons 폴더 만들어서 이 경로에 넣어줬습니다.