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

* feat: 공통 레이아웃 적용을 위해 라우팅 구조 변경 #47

- 기존: DM 페이지와 커뮤니티 페이지는 별개의 페이지로 Gnb를 공유하지 않았음
- 변경 후: DM 페이지와 커뮤니티 페이지를 `/` 경로 아래에 두어 Gnb를 공유하게 됨

* chore: eslint global에 JSX 명시

* feat: 팔로잉, 팔로워, 사용자 검색을 query params에 따라 조건부 렌더링

- 기존: `/followings`, `/followers`, `/user-search`에 각각 라우터가 등록되어있었음.
따라서 재렌더링하지 않아도 되는 부분까지 재렌더링해야했음
- 변경 후: `/dms?tab=`처럼 `tab` query params에 따라 조건부 렌더링

* feat: `Home` 페이지 - gnb, sidebar 위치 놓음

client/.eslintrc

@@ -5,6 +5,9 @@
     "jest": true,
     "commonjs": true
   },
+  "globals": {
+    "JSX": true
+  },
   "extends": ["plugin:react/recommended", "plugin:react-hooks/recommended"],
   "rules": {
     "react/prop-types": "off",

client/src/App.tsx

@@ -1,31 +1,28 @@
 import Community from '@pages/Community';
 import DM from '@pages/DM';
 import DMRoom from '@pages/DMRoom';
-import Followers from '@pages/Followers';
-import Followings from '@pages/Followings';
+import Friends from '@pages/Friends';
 import Home from '@pages/Home';
 import NotFound from '@pages/NotFound';
 import SignIn from '@pages/SignIn';
 import SignUp from '@pages/SignUp';
-import UserSearch from '@pages/UserSearch';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 const App = () => (
   <Routes>
-    <Route path="/" element={<Home />} />
+    <Route path="/" element={<Home />}>
+      <Route path="dms" element={<DM />}>
+        <Route index element={<Friends />} />
+        <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="/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>
 );

client/src/pages/DM/index.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
+import { Outlet } from 'react-router-dom';
 
 const DM = () => {
-  return <div>DM</div>;
+  return (
+    <>
+      <Outlet />
+    </>
+  );
 };
 
 export default DM;

client/src/pages/Friends/index.tsx

@@ -0,0 +1,58 @@
+import Followers from '@pages/Followers';
+import Followings from '@pages/Followings';
+import UserSearch from '@pages/UserSearch';
+import React, { useEffect } from 'react';
+import {
+  createSearchParams,
+  useNavigate,
+  useSearchParams,
+} from 'react-router-dom';
+
+const TabPanel: Record<string, JSX.Element> = {
+  followers: <Followers />,
+  followings: <Followings />,
+  'user-search': <UserSearch />,
+};
+
+const DEFAULT_TAB = 'followings';
+
+const Friends = () => {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  useEffect(() => {
+    if (!((searchParams.get('tab') ?? '') in TabPanel))
+      navigate({ search: `?${createSearchParams([['tab', DEFAULT_TAB]])}` });
+  });
+
+  const renderTablPanel = (tab: string) => TabPanel[tab];
+
+  return (
+    <main className="flex flex-col">
+      <nav>
+        <ul className="flex">
+          <li>
+            <button onClick={() => setSearchParams({ tab: 'followings' })}>
+              팔로잉
+            </button>
+          </li>
+          <li>
+            <button onClick={() => setSearchParams({ tab: 'followers' })}>
+              팔로워
+            </button>
+          </li>
+          <li>
+            <button onClick={() => setSearchParams({ tab: 'user-search' })}>
+              사용자 검색
+            </button>
+          </li>
+        </ul>
+      </nav>
+      <div className="content">
+        {renderTablPanel(searchParams.get('tab') ?? DEFAULT_TAB)}
+      </div>
+    </main>
+  );
+};
+
+export default Friends;

client/src/pages/Home/index.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
+import { Outlet } from 'react-router-dom';
 
 const Home = () => {
-  return <div></div>;
+  return (
+    <div className="flex">
+      <div>gnb</div>
+      <div>sidebar</div>
+      <Outlet />
+    </div>
+  );
 };
 
 export default Home;