/compose/tweet 바로접속(새로고침) 에도 모달창 뜨게 하기

Question

안녕하세요 질문드릴게 있습니다.

'/compose/tweet' 모달창은 인터셉팅 라우트 + 페럴렐 라우트로 CSR 통한 접속은 잘 모달이 뜹니다.
->(버튼을 클릭해서 모달창 뜨는 것을 말합니다.)

하지만 만약 바로 URL직접 입력했을 때 (혹은 새로고침) 할 때는 뜨지 않습니다. 인터셉팅이 되지 않으니

import Home from "@/app/(afterLogin)/home/page";
// (afterLogin)/compose/tweet
export default function Page() {
  return <Home />;
}

아마 여기서 Home에서 구현한 것만 뜨고, 모달로 구현한 것은 뜨지 않는 것 같습니다.

하지만 실제 트위터에서는 바로 모달창이 뜨는 형태로 됩니다.

어떻게 하면 새로고침/바로URL접속 에도 compose/tweet/ 모달창이 뜨게 할 지 조언을 구해봅니다.
(직접 뒤에 배경 + 별도의 모달창을 바로 띄우는 생각은 했지만 다른 방식이 있는지 궁금합니다)

import Home from "@/app/(afterLogin)/home/page";
import TweetModal from "../../@modal/(.)compose/tweet/page";

export default function Page() {
  return (
    <>
      <Home />
      <TweetModal />
    </>
  );
}

버전은 15.3.0 입니다. 현재 사용하고 있는 폴더 구조는 아래와 같습니다.

📦src
 ┣ 📂app
 ┃ ┣ 📂(afterLogin)
 ┃ ┃ ┣ 📂@modal
 ┃ ┃ ┃ ┣ 📂(.)compose
 ┃ ┃ ┃ ┃ ┗ 📂tweet
 ┃ ┃ ┃ ┃ ┃ ┣ 📜modal.module.css
 ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┃ ┣ 📂[username]
 ┃ ┃ ┃ ┃ ┣ 📂status
 ┃ ┃ ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂photo
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂[photoId]
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_component
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜photoModal.module.css
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜default.tsx
 ┃ ┃ ┃ ┃ ┗ 📜default.tsx
 ┃ ┃ ┃ ┗ 📜default.tsx
 ┃ ┃ ┣ 📂[username]
 ┃ ┃ ┃ ┣ 📂status
 ┃ ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┃ ┣ 📂_component
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📜CommentForm.tsx
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜commentForm.module.css
 ┃ ┃ ┃ ┃ ┃ ┣ 📂photo
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂[photoId]
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📜singlePost.module.css
 ┃ ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┃ ┗ 📜profile.module.css
 ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┣ 📜ActionButtons.tsx
 ┃ ┃ ┃ ┣ 📜BackButton.tsx
 ┃ ┃ ┃ ┣ 📜FollowRecommand.tsx
 ┃ ┃ ┃ ┣ 📜LogoutButton.tsx
 ┃ ┃ ┃ ┣ 📜NavMenu.tsx
 ┃ ┃ ┃ ┣ 📜Post.tsx
 ┃ ┃ ┃ ┣ 📜PostArticle.tsx
 ┃ ┃ ┃ ┣ 📜PostImages.tsx
 ┃ ┃ ┃ ┣ 📜RightSearchZone.tsx
 ┃ ┃ ┃ ┣ 📜SearchForm.tsx
 ┃ ┃ ┃ ┣ 📜Trend.tsx
 ┃ ┃ ┃ ┣ 📜TrendSection.tsx
 ┃ ┃ ┃ ┣ 📜followRecommend.module.css
 ┃ ┃ ┃ ┣ 📜logout.module.css
 ┃ ┃ ┃ ┣ 📜navMenu.module.css
 ┃ ┃ ┃ ┣ 📜post.module.css
 ┃ ┃ ┃ ┣ 📜rightSearchZone.module.css
 ┃ ┃ ┃ ┣ 📜trend.module.css
 ┃ ┃ ┃ ┗ 📜trendSection.module.css
 ┃ ┃ ┣ 📂compose
 ┃ ┃ ┃ ┗ 📂tweet
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂explore
 ┃ ┃ ┃ ┣ 📜explore.module.css
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂home
 ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┣ 📜PostForm.tsx
 ┃ ┃ ┃ ┃ ┣ 📜Tab.tsx
 ┃ ┃ ┃ ┃ ┣ 📜TabProvider.tsx
 ┃ ┃ ┃ ┃ ┣ 📜postForm.module.css
 ┃ ┃ ┃ ┃ ┗ 📜tab.module.css
 ┃ ┃ ┃ ┣ 📜home.module.css
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂messages
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂search
 ┃ ┃ ┃ ┣ 📂_component
 ┃ ┃ ┃ ┃ ┗ 📜Tab.tsx
 ┃ ┃ ┃ ┣ 📜page.tsx
 ┃ ┃ ┃ ┗ 📜search.module.css
 ┃ ┃ ┣ 📜layout.module.css
 ┃ ┃ ┗ 📜layout.tsx
 ┃ ┣ 📂(beforeLogin)
 ┃ ┃ ┣ 📂@modal
 ┃ ┃ ┃ ┣ 📂(.)i
 ┃ ┃ ┃ ┃ ┗ 📂flow
 ┃ ┃ ┃ ┃ ┃ ┣ 📂login
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📂signup
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┃ ┗ 📜default.tsx
 ┃ ┃ ┣ 📂_component
 ┃ ┃ ┃ ┣ 📜LoginModal.tsx
 ┃ ┃ ┃ ┣ 📜Main.tsx
 ┃ ┃ ┃ ┣ 📜SignupModal.tsx
 ┃ ┃ ┃ ┣ 📜login.module.css
 ┃ ┃ ┃ ┣ 📜main.module.css
 ┃ ┃ ┃ ┗ 📜signup.module.css
 ┃ ┃ ┣ 📂i
 ┃ ┃ ┃ ┗ 📂flow
 ┃ ┃ ┃ ┃ ┣ 📂login
 ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┃ ┃ ┗ 📂signup
 ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂login
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📜layout.tsx
 ┃ ┃ ┣ 📜page.module.css
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜globals.css
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜not-found.tsx
 ┣ 📂components
 ┃ ┗ 📜RecordChangePathComponent.tsx
 ┗ 📂util
 ┃ ┗ 📜getBeforePath.ts

제로초(조현영) · Answer

네네 말씀하신대로 이렇게 할 수도 있고요. AI 인턴 말대로 /compose/tweet 컴포넌트 로딩 시 useEffect에서 모달 띄우는 함수를 실행하실 수도 있습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 피곤한개발자님.

Next.js에서 모달을 새로고침하거나 직접 URL을 입력했을 때도 표시되도록 하기 위해서는 인터셉팅 라우트와 병렬 라우트를 보다 확실하게 설정해야 합니다. 트위터와 같이 특정 경로에서 직접 URL을 입력하거나 새로고침할 때에도 모달이 표시되는 이유는 라우터의 설정과 초기 로드 시 상태 관리 덕분입니다.

문제 요약:

문제점은 새로고침을 하거나 URL 직접 입력 시, 기존 페이지 구조로 인해 모달이 초기화되지 않는다는 점입니다.

해결 방법:

라우트 설정 확인:
- 모달 컴포넌트를 /compose/tweet 경로에 직접 렌더링하지 않고, 병렬 라우트를 활용해 상위에서 모달 구조를 정의합니다.
- /compose/tweet 경로에 접속할 때도 전역 상태나 Context API를 사용해서 모달이 열리도록 설정합니다.
상태 관리 사용:
- 모달을 상태로 관리하고, 페이지 로드시 해당 상태가 활성화되도록 합니다.
- useEffect 훅을 사용하여 페이지가 처음 로드될 때 상태를 업데이트합니다.
라우트와 페이지 컴포넌트 수정:
- 아래는 간단한 상태 관리 예시입니다. 이렇게 하면 페이지 진입 시에도 모달이 열릴 수 있습니다.

import { useState, useEffect } from "react";
import Home from "@/app/(afterLogin)/home/page";
import TweetModal from "@/components/TweetModal"; // 가상의 모달 컴포넌트

export default function Page() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  useEffect(() => {
    setIsModalOpen(true); // 페이지 로드시 모달을 표시하도록 상태 설정
  }, []);

  return (
    <>
      <Home />
      {isModalOpen && <TweetModal />}
    </>
  );
}

별도의 설정이나 코드 구현 없이 직접 URL 입력이나 새로고침 시에도 모달이 자동으로 나타나도록 만드는 것이 중요합니다. Next.js의 최신 버전을 활용하여 페이지 구조를 명확하게 하고, 상태 관리 도구를 적절히 사용하여 이 문제를 해결할 수 있습니다.

아래 유사한 질문과 답변이 있을 수 있습니다. 이를 통해 더욱 깊이 있는 이해를 도울 수 있습니다:

PhotoModal 페이지 인터셉팅 라우트 질문 - 인터셉팅 라우트의 사용 사례와 수정 과정이 포함되어 있습니다.
modal에 intercept route를 사용하는 이유가 새로고침했을때를 위함인가요? - 새로고침 시 모달 관련한 라우팅 설명이 포함된 답변입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변