LocalLink 컴포넌트에 href='#hash' 을 지원하면 어떨까요?

[rhiokim]

배경

초기 버젼의 생각입니다.

종종 필터 팝업다이얼로그나 안내에 bottom-up 방식의 팝업 다이얼로그를 띄우는 기능들을 구현하고 있는데요. 보통 다음과 같은 절차가 요구됩니다.

1. 팝업에 오픈 상태를 위해 hash 상태값을 정의합니다.

const REFUND_POLICY_HASH = 'hash.open-refund-policy-modal'

2. hash 값을 참조해 boolean 상태를 판단하는 로직을 추가합니다.

function Component() {
  const { uriHash } = useHistoryContext()
  const isOpen = uriHash === REFUND_POLICY_HASH

  return <Popup open={isOpen}> ... </Popup>
}

3. 사용자 CTA 에서 클릭과 함께 hash 변경 로직

function Component() {

  return <Button onClick={() => { push(REFUND_POLICY_HASH) }}>환불정책</Button>
}

기대

1. LocalLink 가 href 값으로 hash 값이 들어오면 그냥 push(hash) 를 수행해준다.
2. Popup 이나 Alert 과 같은 컴포넌트들은 target 이라는 props 만 갖고 open 상태를 알아서 결정한다.

function Component() {
  return <>
    <LocalLink href={REFUND_POLICY_HASH}>환불정책</LocalLink>
    <AnchorLink href={REFUND_POLICY_HASH}>환불정책</AnchorLink>

    <Popup target={REFUND_POLICY_HASH} onClose={} onExited={} />
  </>