Refactor : tasklist 생성 모달을 parallel & intercepting routing 방식으로 변경 #173
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
✅ Preview 배포가 성공적으로 완료되었습니다! 🚀 |
KSJ27
left a comment
KSJ27
left a comment
There was a problem hiding this comment.
고생 많으셨습니다!! 다만 프로젝트에서 모달을 사용하는 부분이 많아, 자칫 app 폴더 안에 경로가 너무 복잡해질것 같습니다. 모달안의 모달도 있고요... 모달들이 인터셉팅하는 경로를 아래 처럼 가져가는건 어떨까요??
- /[...modal]/page.tsx
or- /[groupId]/[...modal] -> 그룹 관련
2./user/[...modal] -> 유저 관련
3./article/[...modal] -> 게시판
모달을 경로로 관리하게 되면서 경로 수가 늘어나면서 복잡해진다는 점에 공감합니다. 이 방식으로 모달을 구현할 때 단점이라고 생각해요. 그런데 보여주신 예시가 이해하기 어렵네요. 일단 /[...modal]/page.tsx 가 아니라 /(...)modal/page.tsx를 말씀하신거라고 생각했어요.
그러면 동작 상 (.), (..), (...) 이 컨벤션은 @modal 하위에서 사용해야하는게 맞다고 생각합니다.
/[groupId] 에서 모달을 열면 /[groupId]/tasklist-create로 이동하고, @modal/[groupId]/tasklist-create가 경로를 가로채서 보여주게끔 했어요.
그래서 모든 모달은 @modal/ 하위에 위치하게끔 의도했어요. 물론 app 하위에 동일한 경로를 만들어줘야 합니다.
추가로, intercepting routing으로 페이지를 분리하는게 tasklist를 생성하는 모달에는 적합한 방식은 아니라고 생각합니다. (이렇게 구현하긴했지만,..) 그 이유는
- 단순히 CUD만 하는 모달은 많은데, 이 모달마다 페이지 파일을 두 개씩 만드는 건 폴더 관리가 복잡해질 수 있습니다.
- 페이지 URL을 공유할 수 있다는 장점이 없습니다. (tasklist 생성 페이지는 로그인 되어 있고, 그룹에 속한 사람만 들어갈 수 있음 + 유저 플로우 상
tasklist 목록 보기-> tasklist 생성하기이 자연스럽기 때문에 URL을 공유하는 경우도 거의 없음)
그래서 사실 이 프로젝트에서 이 방식을 쓰기 좋은 곳이 없다고 생각합니다. 공식 예시처럼 자체 컨텐츠가 있는 모달에 사용하기 적합하기 때문입니다.
|
제가 설명이 좀 부족했네요 그냥 저라면 이렇게 시도해보았을것 같다는 제안으로 들어주세용 1. [...modal] 라는 경로(실제 페이지의 경로) 의 의미다중 경로 세그먼트로 아래 경로를 /[...modal]/page.tsx 에서 모두 분기 렌더링 하는걸 의미했습니다. 2. @modal/(...)[...modal]/page.tsx 안에서 렌더링될 모달의 분기 처리해당 방식은 이제 modal이 열리는 트리거가 router.push , Link 등으로 path가 바뀌었을때가 될텐데, https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes#conditional-routes 3. 모든 모달을 다 intercepting 해야하나?저도 석준님 말씀처럼 해당 프로젝트에서 모달에 intercepting routing 이 조금 상황에 맞지 않는다는 말씀에 공감합니다 제안 드린 방법은, app 폴더 안의 퍼렐럴라우트와 인터셉팅 될 페이지가 모두 동적 경로로 바뀌게 되면서, 깔끔해진다는 장점이 있지만, 자칫 분기처리가 너무 복잡해서 가독성이 해쳐질수 있다는 단점이 존재하는것 같습니다.... 그래서 그냥 제안입니다 !! 푸하핫~ |
KSJ27
left a comment
KSJ27
left a comment
There was a problem hiding this comment.
[...](Catch-all Segments)에 대해 알게됐네요. 인터셉트 당하는 경로를 하나로 관리할 수 있다는 장점이 있네요. 모달마다 다른 페이지를 보여줄 수는 없지만, 간단한 모달은 그럴 필요가 없어 보여서 도입해보겠습니다.
| <Modal.Heading className="mb-2">할 일 목록 추가</Modal.Heading> | ||
| <FormField | ||
| field="input" | ||
| placeholder="목록 이름을 입력해주세요." |
|
✅ Preview 배포가 성공적으로 완료되었습니다! 🚀 |
🔎 작업 사항
tasklist 생성 모달을 parallel & intercepting routing 방식으로 변경했습니다.
이 방식으로 portal 및 전역 모달 상태를 관리할 필요가 없어서, 이걸 사용하지 않는 기본 모달 컴포넌트들을 newModal이라는 폴더로 분리했습니다.
지금은 모달 하나만 적용했는데, 다른 모달에도 적용할 예정입니다.
❗️ 전달 사항
➕ 관련 이슈