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={} />
  </>

[giwan-dev]

오버레이 UI = 팝업, 액션시트, 모달, 다이얼로그 등.

---

저는 해시를 바꿔주는 별도의 컴포넌트를 만드는 게 좋지않을까 하는 생각이 듭니다!

LocalLink랑 ExternalLink는 a 태그, next.js의 Link 컴포넌트를 확장하여 다른 화면으로 라우팅하는 역할로 이해하고 있습니다. 그런데 "오버레이 UI"를 위한 해시는 안드로이드에서 히스토리 보존을 위해 해시라는 방식을 사용할 뿐, 다른 화면으로 라우팅하려는 목적이 아닙니다. 그래서 둘을 섞는 것이 장점이 없을 것이라고 생각합니다.

같은 맥락으로 history-context에 navigate, openWindow 같은 라우팅 함수와 uriHash, push, back 같은 오버레이 UI 관리 함수가 섞여 있다고 판단했습니다. 각각의 역할로 쪼개는 작업의 일환으로 router 모듈을 만들고 LocalLink, ExternalLink 컴포넌트를 먼저 독립시켰습니다.

"오버레이 UI"를 띄우는 인터페이스를 마크업 방식, 함수 방식 두 가지로 나누는 것은 좋을 것 같습니다. Link 컴포넌트와 push, replace 함수가 짝을 이루듯이 OverlayUIAnchor(가칭) 컴포넌트와 raise(가칭), dismiss(가칭) 함수가 짝을 이루는 것이죠!

"오버레이 UI" 컴포넌트의 표시 조건을 해시값만 받아서 알아서 계산하도록 하는 건 Breaking Change가 될 것 같은데요. 겸사겸사 history-context에서 "오버레이 UI" 관련 로직만 뽑아서 별도의 context로 만들어도 좋을 것 같아요. 남은 라우팅 로직은 router 모듈로 옮겨서 LocalLink, ExternalLink와 짝을 이루도록하면 좋을 것 같구요.

[rhiokim]

LocalLink랑 ExternalLink는 a 태그, next.js의 Link 컴포넌트를 확장하여 다른 화면으로 라우팅하는 역할로 이해하고 있습니다.

저는 이 포인트에서 우리의 사용성(오버레이 UI를 위한)을 고려하지 않고 a > next/link > @titicaca/router/LocalLink 의 관계만 놓고

a 태그와 Next.js Link 컴포넌트를 확장하기 때문에 a 태그가 갖는 습성에 <a href="#hash">anchor</a> 가 있어서 LocalLink 가 hash 도 지원하는게 자연스럽다고 생각되긴 했어요. 😌

하지만 결국 a 가 필요한 모든 기능들에서 LocalLink, ExternalLink 로 대동 단결하고 오버레이 UI 를 좀더 자연스럽게 해결하기 위한 고민으로 시작된 이슈입뉘다. ㅎ 🙏🏻

[giwan-dev]

a 태그가 하는 일이 너무 많군요(?)ㅋㅋㅋㅋㅋ

라우팅도 하고 앵커링도 하고 UI도 띄우고..

[rhiokim]

-.- 찬찬히 생각하니 진짜 많네요. 좀더 묵히면서 함께 고민해주세용. 🙇🏻

별도의 가칭 OverlayUIAnchor, AnchorLink, HashLink 같은 것을 만드는 것도 저는 좋은거 같아요. 😻