미해결
Next + React Query로 SNS 서비스 만들기
/compose/tweet 바로접속(새로고침) 에도 모달창 뜨게 하기
안녕하세요 질문드릴게 있습니다.'/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