1. Route as Modal?

모던한 웹 애플리케이션을 개발할 때 Modal을 이용한 방법은 사용자 경험을 향상시키는 중요한 요소이다.
사용자가 리스트 페이지에서 Post나, Card, Item같은 UI를 클릭하고, 다른 페이지로 이동하지 않고도 추가 정보를 보거나 작업을 수행할 수 있게 상세 페이지를 Modal로 대체한다. 예를 들어 Instagram이 대표적이다. Instagram은 Feed에서 댓글 모두 보기를 클릭하면 Modal창만 띄어지면서 URL이 변하게된다.

이러한 방법을 Route as Modal 패턴이라 한다.

Nextjs / Route as Modal 예제 참고
Nextjs / StackBlitz 예제
원티드의 Nextjs / Route as Modal

내게 필요했던건 공유 기능이었고, 사용자가 공유할 수 있는 URL을 제공해야한다는 점이었다.
애초에 Modal을 채택해서 개발 중이었고, 2가지 방식이 있다. 이 글은 2번째 방식을 사용해 작성한다.

2. 2가지의 Route as Modal

Card의 목록을 렌더링하는 페이지는 pages/index로 시작하고,
Modal은 react-modal 라이브러리를 사용한다.

첫 번째는 Modal을 라우팅 시키는 방식, 두 번째는 Query String을 이용한 방식이다.

// pages/index.js

import React from 'react';
import {useRouter} from 'next/router';
const Home = () => {
  const router = useRouter();
  const { post } = useSelector(state => state.post);
	return(
      <>
        <PostModal
          isOpen={!!router.query.identifier}
          identifier={router.query.identifier}
          style...
        >
        </PostModal>
      	{post.map( post => <Card post={post}/>)}
		<CardGrid /> // 동적 라우팅시
      </>
    
    )
}

1. Dynamic Routing

동적 라우팅으로 페이지가 이동한다.
일반적인 웹사이트의 Modal은 뒤 배경을 그대로 유지하면서 오픈되는 방법인데 동적 라우팅을 사용하는 경우에는 다시 직접 넣어줘야한다.

// components/Card.js
import Link from 'next/link';
	<Link
      key={post.id}
      href="/p/[identifier]"
      as={`/p/${identifier}`}
      className='style'
	>
      {identifier}
    </Link>

2. Query String

우리가 알고 있는 일반적 Modal의 형태

// components/Card.js
import Link from 'next/link';
	<Link
      key={post.id}
      href={`/?identifier=${identifier}`}
      as={`/p/${identifier}`}
	  scroll={false} //scroll을 그대로 유지하려면 필수
      className='style'
	>
      {identifier}
    </Link>

3. infinite scrolling

추가예정