Refactor the Banner Component's Link-related props consistently

[CHEWCHEWW]

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가지 방안을 생각해보았는데,

1. Link 컴포넌트를 사용처에서 직접 조립할 수 있도록 변경, 따라서 Link를 prop으로 직접 받을 수 있게 개선 (단 스타일은 베지어 내에 정의 되어야 합니다)
2. Link의 text + href를 받거나 text + onClick handler를 외부에서 받을 수 있도록 변경하고 prop을 정리

깊게 고민한 결과는 아니기에 좋은 의견이 있으면 좋겠습니다.

References

• pr

[wes5510]

string 구분없이 유연하게 대응하되
배너의 UI는 일관성있게 하기 위해서 BannerLink를 추가해도 좋을거 같습니다.

예제)

<Banner>
  OOO기능이 설정되어 있지 않아요!
  <BannerLink href="https://example.com/...">더 알아보기</BannerLink>
</Banner>

이 아이디어는 Chakra UI의 ModalCloseButton 을 보고 생각했습니다.