Feat: 모임 만들기 레이아웃

[BeMatthewsong]

📝 설명

• [x] 모달 띄우기 (1️⃣ 병렬 라우팅 & 인터셉트 라우팅 2️⃣ zustand 3️⃣ React Portal)
• [x] 모임 만들기 모달 리팩토링
• [x] 필터리스트 커스텀해서 하나 새로 만들기
• [x] 모바일 반응형 추가

[BeMatthewsong]

병렬 라우팅 https://reactnext-central.xyz/blog/nextjs/parallel-routes

[BeMatthewsong]

라우트 가로채기와 병렬 라우트를 함께 사용하여 모달을 만들 수 있습니다.

이 패턴을 사용하여 모달을 만들면 모달로 작업할 때 흔히 발생하는 몇 가지 문제를 극복할 수 있습니다.

• URL을 통해 모달 콘텐츠를 공유할 수 있도록 만들기

• 페이지가 새로고침될 때 모달을 닫지 않고 컨텍스트 유지

• 이전 경로로 이동하지 않고 뒤로 탐색할 때 모달 닫기

• 앞으로 탐색 시 모달 다시 열기

---

UX/UI 개선 포인트 사용자는 현재 페이지의 컨텍스트를 유지하며 새로운 정보를 확인할 수 있습니다. 모달이나 슬라이드오버 형태로 새로운 콘텐츠를 표시할 수 있어 사용자에게 더 부드럽고 자연스러운 전환 경험을 제공합니다. 그리고 필요한 부분만 업데이트할 수 있어 페이지 로딩 시간을 줄이고 웹사이트의 응답성을 향상시킵니다. 브라우저의 히스토리 API와 잘 통합됩니다. 사용자는 브라우저의 뒤로 가기 버튼을 사용하여 이전 상태로 쉽게 돌아갈 수 있습니다.

전통적인 모달은 주로 JavaScript로 구현되어 URL과 무관했습니다. Intercepting Routes를 사용하면 모달의 내용을 URL과 연결할 수 있어, 다음과 같은 이점이 있습니다:

일관성: 모달의 내용이 고유한 URL을 갖게 되어 디자인의 일관성을 유지하기 쉬워집니다. 공유 가능성: 모달의 내용을 직접 공유할 수 있어 사용자 경험이 향상됩니다. SEO 친화적: 모달 내용도 개별 페이지로 존재하므로 검색 엔진 최적화에 도움이 됩니다. 더이상 모달과 URL을 연결하려고 모달의 상태를 URL에 저장하지 않아도 됩니다.

[BeMatthewsong]

Next.js의 parallel route와 intercepting router를 이용해서 만든 모달

https://velog.io/@cooljp95/Next.js-%EB%9D%BC%EC%9A%B0%ED%8C%85%EC%9C%BC%EB%A1%9C-%EB%AA%A8%EB%8B%AC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0