[NDD-61]: createBrowserRouter를 통한 Router기능 추가 (8h / 3h) (#19)

* chore: react-dom & react-router-dom 설치

* chore: 불필요한 lint 설정 제거

* feat: layout 폴더에 대한 절대경로 설정

* feat: Layout 컴포넌트 정의

* feat: Layout 컴포넌트 기반 각 페이지별 Layout 컨포넌트 선언

* feat: route에 대한 상수화

* feat: MyPage 내부의 section을 나눌 컴포넌트 선언

* feat: InterviewPage 내부의 section을 나눌 컴포넌트 선언

* feat: InterviewSettingPage 내부의 section을 나눌 컴포넌트 선언

* feat: LandingPage 내부의 section을 나눌 컴포넌트 선언

* feat: 각 페이지별 기초적인 section 부여

* feat: AppRouter 함수를 통해서 Router 처리

* feat: 중첩된 경로에대한 server응답 구현

* fix: Typography export 설정 변경

* chore: react-dom & react-router-dom 설치

* chore: 불필요한 lint 설정 제거

* feat: layout 폴더에 대한 절대경로 설정

* feat: Layout 컴포넌트 정의

* feat: Layout 컴포넌트 기반 각 페이지별 Layout 컨포넌트 선언

* feat: route에 대한 상수화

* feat: MyPage 내부의 section을 나눌 컴포넌트 선언

* feat: InterviewPage 내부의 section을 나눌 컴포넌트 선언

* feat: InterviewSettingPage 내부의 section을 나눌 컴포넌트 선언

* feat: LandingPage 내부의 section을 나눌 컴포넌트 선언

* feat: 각 페이지별 기초적인 section 부여

* feat: AppRouter 함수를 통해서 Router 처리

* feat: 중첩된 경로에대한 server응답 구현

* fix: Typography export 설정 변경

* fix: 변수로 인해 재사용성 확대

* fix: layout 컴포넌트를 components 하위 폴더로 이동

* chore: layout 라우터 변경으로 발생한 파일병 변경

FE/.eslintrc.json

@@ -33,7 +33,8 @@
       }
     ],
     "no-console": "warn",
-    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+    "react/prop-types": "off"
   },
   "settings": {
     "react": {

FE/package.json

@@ -16,7 +16,8 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",

FE/src/App.tsx

@@ -1,31 +1,15 @@
-import styled from '@emotion/styled';
-import { css, Global, ThemeProvider } from '@emotion/react';
+import { Global, ThemeProvider } from '@emotion/react';
 import { theme } from '@styles/theme';
 import _global from '@styles/_global';
-
-const EmotionStyledDiv = styled.div`
-  color: red;
-`;
+import AppRouter from '@/AppRouter'; // AppRouter를 임포트합니다.
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
       <Global styles={_global} />
-      <div>
-        asdfasdfasdfasdfasdfasdfasdf
-        <EmotionStyledDiv>hihi</EmotionStyledDiv>Hello
-        Worasdfasasdfasdfdflasdfasdfasdfasdasdfasdfasdfasdfasdfasdf
-        <div
-          css={css`
-            color: ${theme.colors.point.primary};
-            font-family: 'Pretendard', serif;
-            font-weight: 600;
-          `}
-        >
-          Styled with Emotion!
-        </div>
-      </div>
+      <AppRouter />
     </ThemeProvider>
   );
 }
+
 export default App;

FE/src/AppRouter.tsx

@@ -0,0 +1,56 @@
+import { RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, RouteObject } from 'react-router-dom';
+import LandingPage from '@/page/LandingPage';
+import InterviewSettingPage from '@page/interviewSettingPage';
+import InterviewPage from '@page/interviewPage';
+import MyPage from './page/myPage';
+import InterviewVideoPage from './page/interviewVideoPage';
+import QuestionSelectionBox from '@components/interviewSettingPage/QustionSelectionBox';
+import VideoSettingBox from './components/interviewSettingPage/VideoSettingBox';
+import RecordMethodBox from './components/interviewSettingPage/RecordMethodBox';
+import { PATH } from '@constants/path';
+
+const routes: RouteObject[] = [
+  {
+    path: PATH.ROOT,
+    element: <LandingPage />,
+  },
+  {
+    path: PATH.INTERVIEW,
+    element: <InterviewPage />,
+  },
+  {
+    path: PATH.INTERVIEW_SETTING,
+    element: <InterviewSettingPage />,
+    children: [
+      {
+        index: true,
+        element: <QuestionSelectionBox />,
+      },
+      {
+        path: PATH.CONNECTION,
+        element: <VideoSettingBox />,
+      },
+      {
+        path: PATH.RECORD,
+        element: <RecordMethodBox />,
+      },
+    ],
+  },
+  {
+    path: PATH.MYPAGE,
+    element: <MyPage />,
+  },
+  {
+    path: PATH.INTERVIEW_VIDEO, // ":videoId" is a URL parameter
+    element: <InterviewVideoPage />,
+  },
+];
+
+const router = createBrowserRouter(routes);
+
+const AppRouter = () => {
+  return <RouterProvider router={router} />;
+};
+
+export default AppRouter;

FE/src/components/foundation/Typography/Typography.tsx

@@ -11,7 +11,7 @@ type Props = {
   children: ReactNode;
 };
 
-export const Typography: React.FC<Props> = ({
+const Typography: React.FC<Props> = ({
   component,
   variant = 'body1',
   noWrap,
@@ -42,3 +42,5 @@ export const Typography: React.FC<Props> = ({
     </Component>
   );
 };
+
+export default Typography;

FE/src/components/interviewPage/InterViewCamera.tsx

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+
+const InterviewCamera: React.FC = () => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 75%;
+        border: 1px solid red;
+      `}
+    >
+      면접페이지의 카메라 입니다.
+    </div>
+  );
+};
+export default InterviewCamera;

FE/src/components/interviewPage/InterViewFooter.tsx

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+import { useNavigate } from 'react-router-dom';
+
+const InterViewFooter: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 15%;
+        border: 1px solid red;
+      `}
+    >
+      <button onClick={() => navigate('/')}>나가기</button>
+      면접페이지의 하단 입니다.
+      <button onClick={() => navigate('/mypage')}>면접 종료</button>
+    </div>
+  );
+};
+export default InterViewFooter;

FE/src/components/interviewPage/Layout.tsx

@@ -0,0 +1,17 @@
+import Layout from '@/components/layout/Layout';
+
+type InterviewPageLayoutProps = {
+  children: React.ReactNode;
+};
+
+const InterviewPageLayout: React.FC<InterviewPageLayoutProps> = ({
+  children,
+}) => {
+  return (
+    <Layout full direction="column">
+      {children}
+    </Layout>
+  );
+};
+
+export default InterviewPageLayout;

FE/src/components/interviewPage/interviewHeader.tsx

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+
+const InterviewHeader: React.FC = () => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 10%;
+        border: 1px solid red;
+      `}
+    >
+      면접페이지의 Header 입니다.
+    </div>
+  );
+};
+export default InterviewHeader;

FE/src/components/interviewSettingPage/Description.tsx

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+
+const Description: React.FC = () => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 35%;
+        border: 1px solid red;
+      `}
+    >
+      설명
+    </div>
+  );
+};
+export default Description;

FE/src/components/interviewSettingPage/Layout.tsx

@@ -0,0 +1,13 @@
+import Layout from '@/components/layout/Layout';
+
+type InterviewSettingPageLayoutProps = {
+  children: React.ReactNode;
+};
+
+const InterviewSettingPageLayout: React.FC<InterviewSettingPageLayoutProps> = ({
+  children,
+}) => {
+  return <Layout direction="column">{children}</Layout>;
+};
+
+export default InterviewSettingPageLayout;

FE/src/components/interviewSettingPage/QustionSelectionBox.tsx

@@ -0,0 +1,6 @@
+import Box from '@foundation/Box/Box';
+
+const QuestionSelectionBox: React.FC = () => {
+  return <Box>여기에는 Question Box가 들어갑니다</Box>;
+};
+export default QuestionSelectionBox;

FE/src/components/interviewSettingPage/RecordMethodBox.tsx

@@ -0,0 +1,6 @@
+import Box from '@foundation/Box/Box';
+
+const RecordMethodBox: React.FC = () => {
+  return <Box>SaveMethodBox 입니다</Box>;
+};
+export default RecordMethodBox;

FE/src/components/interviewSettingPage/SettingProgressBar.tsx

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+
+const SettingProgressBar: React.FC = () => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 20%;
+        border: 1px solid red;
+      `}
+    >
+      progress
+    </div>
+  );
+};
+export default SettingProgressBar;

FE/src/components/interviewSettingPage/VideoSettingBox.tsx

@@ -0,0 +1,6 @@
+import Box from '@foundation/Box/Box';
+
+const VideoSettingBox: React.FC = () => {
+  return <Box>videoSettionBox 입니다</Box>;
+};
+export default VideoSettingBox;

FE/src/components/interviewVideoPage/Layout.tsx

@@ -0,0 +1,13 @@
+import Layout from '@/components/layout/Layout';
+
+type InterviewVideoPageLayoutProps = {
+  children: React.ReactNode;
+};
+
+const InterviewVideoPageLayout: React.FC<InterviewVideoPageLayoutProps> = ({
+  children,
+}) => {
+  return <Layout direction="column">{children}</Layout>;
+};
+
+export default InterviewVideoPageLayout;