[CLIENT] 공통 레이아웃 적용을 위한 라우팅 구조 수정

[leegwae]

🎉 11.16 이후 라우팅 구조

🤷‍♂️ Description

현재 상황

• 현재 라우팅 구조는 아래와 같다.
  

  web24-Asnity/client/src/App.tsx

  Lines 15 to 31 in 4c0e832

  	<Routes>
  	<Route path="/" element={<Home />}>
  	<Route path="dms" element={<DM />}>
  	<Route path="followings" element={<Followings />} />
  	<Route path="followers" element={<Followers />} />
  	<Route path="user-search" element={<UserSearch />} />
  	<Route path=":roomId" element={<DMRoom />} />
  	</Route>
  	<Route
  	path="communities/:communityId/channels/:roomId"
  	element={<Community />}
  	/>
  	</Route>
  	<Route path="/sign-in" element={<SignIn />} />
  	<Route path="/sign-up" element={<SignUp />} />
  	<Route path="*" element={<NotFound />} />
  	</Routes>

문제: ⚠️ DM 페이지에서 팔로우, 팔로잉, 사용자 검색 페이지가 공유하는 컴포넌트는 DMRoom 페이지는 공유하지 않는다.

DM 페이지 밑에는 임의의 라우트 A와 DMRoom 페이지를 놓고, A 밑에 팔로우, 팔로잉, 사용자 검색 페이지를 넣으면 될 거 같다.

---

⚠️ 아래는 11.16 이전 라우팅 구조입니다.

🤷‍♂️ Description

현재 상황

공통 레이아웃 적용을 위해 라우팅 구조를 수정해야한다.

• 우선 커뮤니티 페이지는 아래와 같다.

- DM 페이지는 아래와 같다.

• 현재 라우팅 구조는 아래와 같다.

web24-Asnity/client/src/App.tsx

Lines 14 to 31 in 4186d9e

	const App = () => (
	<Routes>
	<Route path="/" element={<Home />} />
	<Route path="/sign-in" element={<SignIn />} />
	<Route path="/sign-up" element={<SignUp />} />
	<Route path="/dms" element={<DM />}>
	<Route path="followings" element={<Followings />} />
	<Route path="followers" element={<Followers />} />
	<Route path="user-search" element={<UserSearch />} />
	<Route path=":roomId" element={<DMRoom />} />
	</Route>
	<Route
	path="/communities/:communityId/channels/:roomId"
	element={<Community />}
	/>
	<Route path="*" element={<NotFound />} />
	</Routes>
	);

이때 DM 페이지와 커뮤니티 페이지는 별개의 Route로, children으로 Gnb 컴포넌트를 각각 따로 가지고 있다.

문제: ⚠️맨 왼쪽의 Gnb 컴포넌트는 페이지를 이동해도 다시 렌더링될 필요가 없다.⚠️

Gnb를 밖으로 빼주고 Home 페이지 밑으로 DM 페이지와 커뮤니티 페이지를 넣어주면 될 거 같다.