Refactor the Banner Component's Link-related props consistently #941
Description
Description
Banner 컴포넌트의 Link 관련 prop들을 정리하여 일관되게 사용할 수 있도록 개선하면 좋겠습니다.
Reasons for suggestion
현재 Banner는 Link와 관련 된 prop들을 가지고 있습니다.
- hasLink
- linkTo
- linkText
- renderLink
이를 통해 Banenr 컴포넌트 내부에서 다음과 같이 조립해주고 있습니다.
이는 몇가지 문제를 가지고 있는데,
- hasLink와 renderLink를 모두 사용처에서 넣어줘야 해서 직관성이 떨어짐
- prop간의 위계관계가 존재해야하나 코드상으로는 모두 허용하고 있기에 직관성이 떨어짐
- renderLink와 linkTo, linkText의 역할을 직관적으로 알기 어려워서 사용성이 좋지 않음
- renderLink에서 href로 이동하는 액션 이외의 행동을 하고 싶을 경우(e.g onClick) 사용처에서 다시 조립을 해줘야 하기에 사용성이 좋지 않음
따라서 리팩토링을 제안합니다.
Proposed solution
현재 구현은 Link의 테마 및 규격을 디자인 시스템의 베지어로 정의하기 위함, 그리고 href를 link에 넣어주기 위함에서 비롯되었다고 생각합니다.
2가지 방안을 생각해보았는데,
- Link 컴포넌트를 사용처에서 직접 조립할 수 있도록 변경, 따라서 Link를 prop으로 직접 받을 수 있게 개선 (단 스타일은 베지어 내에 정의 되어야 합니다)
- Link의 text + href를 받거나 text + onClick handler를 외부에서 받을 수 있도록 변경하고 prop을 정리
깊게 고민한 결과는 아니기에 좋은 의견이 있으면 좋겠습니다.