[FE] issue374: 버그 및 UI 개선 (#380)

* feat: 스터디장은 스터디를 탈퇴할 수 없도록 수정 스터디장이 자신이 만든 스터디를 클릭했을 때 alert를 띄운다. * fix: 세로로 긴 화면에서 무한 스크롤이 적용되지 않는 버그 수정 * feat: api 타입 수정 * feat: 스터디 상세 페이지 태그 ui 개선 태그가 많아질 경우 페이지를 넘어가는 경우가 발생 -> 페이지를 넘어가지 않도록 수정 * chore: react-router upgrade 라우팅할 때 relative 설정을 사용하기 위해 버전 업데이트 * fix: 스터디방 페이지 라우팅 오류 수정 * refactor: tsc 적용 * refactor: App.tsx 라우팅 수정 * feat: 로그인 버튼에 깃허브 로그인이라 명시 * feat: 링크 미리보기 stale time 적용 * chore: link-tab, review-tab 절대 경로 추가 * fix: 깃 머지 충돌 해결 * refactor: 링크 탭, 리뷰 탭 절대 경로 적용 * fix: url path 오류 수정 - 스터디 방 페이지 인덱스로 접근시 notice page로 리다이렉트 - useEffect를 제거하고 App.tsx 라우팅으로 구현 - initialSelectedTabId + TabId 타입 좁히기
woowacourse-teams · Sep 29, 2022 · 56eb75e · 56eb75e
1 parent 0f29a02
commit 56eb75e
Show file tree

Hide file tree

Showing 59 changed files with 496 additions and 499 deletions.
diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
@@ -28,9 +28,11 @@ module.exports = {
       '@create-study-page': resolve(__dirname, '../src/pages/create-study-page'),
       '@edit-study-page': resolve(__dirname, '../src/pages/edit-study-page'),
       '@my-study-page': resolve(__dirname, '../src/pages/my-study-page'),
-      '@community-tab': resolve(__dirname, '../src/pages/study-room-page/tabs/community-tab-panel'),
-      '@notice-tab': resolve(__dirname, '../src/pages/study-room-page/tabs/notice-tab-panel'),
       '@study-room-page': resolve(__dirname, '../src/pages/study-room-page'),
+      '@notice-tab': resolve(__dirname, '../src/pages/study-room-page/tabs/notice-tab-panel'),
+      '@community-tab': resolve(__dirname, '../src/pages/study-room-page/tabs/community-tab-panel'),
+      '@link-tab': resolve(__dirname, '../src/pages/study-room-page/tabs/link-room-tab-panel'),
+      '@review-tab': resolve(__dirname, '../src/pages/study-room-page/tabs/review-tab-panel'),
       '@login-redirect-page': resolve(__dirname, '../src/pages/login-redirect-page'),
       '@error-page': resolve(__dirname, '../src/pages/error-page'),
       '@layout': resolve(__dirname, '../src/layout'),

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -7,11 +7,14 @@ import { useAuth } from '@hooks/useAuth';
 
 import { Footer, Header, Main } from '@layout';
 
-import EditStudyPage from '@edit-study-page/EditStudyPage';
+import RouteWithCondition from '@components/route-with-condition/RouteWithCondition';
 
 const CreateStudyPage = lazy(
   () => import(/* webpackChunkName: "create-study-page" */ '@pages/create-study-page/CreateStudyPage'),
 );
+const EditStudyPage = lazy(
+  () => import(/* webpackChunkName: "create-study-page" */ '@pages/edit-study-page/EditStudyPage'),
+);
 const DetailPage = lazy(() => import(/* webpackChunkName: "detail-page" */ '@pages/detail-page/DetailPage'));
 const ErrorPage = lazy(() => import(/* webpackChunkName: "error-page" */ '@pages/error-page/ErrorPage'));
 const LoginRedirectPage = lazy(
@@ -22,6 +25,12 @@ const MyStudyPage = lazy(() => import(/* webpackChunkName: "my-study-page" */ '@
 const StudyRoomPage = lazy(
   () => import(/* webpackChunkName: "study-room-page" */ '@pages/study-room-page/StudyRoomPage'),
 );
+const NoticeTabPanel = lazy(() => import(/* webpackChunkName: "notice-tab-panel" */ '@notice-tab/NoticeTabPanel'));
+const CommunityTabPanel = lazy(
+  () => import(/* webpackChunkName: "community-tab-panel" */ '@community-tab/CommunityTabPanel'),
+);
+const LinkRoomTabPanel = lazy(() => import(/* webpackChunkName: "link-tab-panel" */ '@link-tab/LinkRoomTabPanel'));
+const ReviewTabPanel = lazy(() => import(/* webpackChunkName: "review-tab-panel" */ '@review-tab/ReviewTabPanel'));
 
 const App = () => {
   const { isLoggedIn } = useAuth();
@@ -34,50 +43,31 @@ const App = () => {
           <Routes>
             <Route path={PATH.MAIN} element={<MainPage />} />
             <Route path={PATH.STUDY_DETAIL()} element={<DetailPage />} />
-            <Route
-              path={PATH.CREATE_STUDY}
-              element={isLoggedIn ? <CreateStudyPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={PATH.LOGIN}
-              element={isLoggedIn ? <Navigate to={PATH.MAIN} replace={true} /> : <LoginRedirectPage />}
-            />
-            <Route
-              path={PATH.MY_STUDY}
-              element={isLoggedIn ? <MyStudyPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={`${PATH.STUDY_ROOM()}/*`}
-              element={isLoggedIn ? <StudyRoomPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={`${PATH.COMMUNITY_ARTICLE()}`}
-              element={isLoggedIn ? <StudyRoomPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={`${PATH.COMMUNITY_PUBLISH()}`}
-              element={isLoggedIn ? <StudyRoomPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={`${PATH.COMMUNITY_EDIT()}`}
-              element={isLoggedIn ? <StudyRoomPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={`${PATH.NOTICE_ARTICLE()}`}
-              element={isLoggedIn ? <StudyRoomPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={`${PATH.NOTICE_PUBLISH()}`}
-              element={isLoggedIn ? <StudyRoomPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={`${PATH.NOTICE_EDIT()}`}
-              element={isLoggedIn ? <StudyRoomPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
-            <Route
-              path={PATH.EDIT_STUDY()}
-              element={isLoggedIn ? <EditStudyPage /> : <Navigate to={PATH.MAIN} replace={true} />}
-            />
+            <Route element={<RouteWithCondition routingCondition={!isLoggedIn} />}>
+              <Route path={PATH.LOGIN} element={<LoginRedirectPage />} />
+            </Route>
+            <Route element={<RouteWithCondition routingCondition={isLoggedIn} />}>
+              <Route path={PATH.CREATE_STUDY} element={<CreateStudyPage />} />
+              <Route path={PATH.EDIT_STUDY()} element={<EditStudyPage />} />
+              <Route path={PATH.MY_STUDY} element={<MyStudyPage />} />
+              <Route path={PATH.STUDY_ROOM()} element={<StudyRoomPage />}>
+                {/* TODO: 인덱스 페이지를 따로 두면 좋을 것 같다. */}
+                <Route index element={<Navigate to={PATH.NOTICE} />} />
+                <Route path={PATH.NOTICE} element={<NoticeTabPanel />}>
+                  {[PATH.NOTICE_PUBLISH, PATH.NOTICE_ARTICLE(), PATH.NOTICE_EDIT()].map((path, index) => (
+                    <Route key={index} path={path} element={<NoticeTabPanel />} />
+                  ))}
+                </Route>
+                <Route path={PATH.COMMUNITY} element={<CommunityTabPanel />}>
+                  {[PATH.COMMUNITY_PUBLISH, PATH.COMMUNITY_ARTICLE(), PATH.COMMUNITY_EDIT()].map((path, index) => (
+                    <Route key={index} path={path} element={<CommunityTabPanel />} />
+                  ))}
+                </Route>
+                <Route path={PATH.LINK} element={<LinkRoomTabPanel />} />
+                <Route path={PATH.REVIEW} element={<ReviewTabPanel />} />
+                <Route path="*" element={<ErrorPage />} />
+              </Route>
+            </Route>
             <Route path="*" element={<ErrorPage />} />
           </Routes>
         </Main>