From f3636d0468407e123298c9c96fe1491fbde263be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=84=B1=EC=9D=B8?= Date: Wed, 8 Nov 2023 17:11:19 +0900 Subject: [PATCH] =?UTF-8?q?[NDD-61]:=20createBrowserRouter=EB=A5=BC=20?= =?UTF-8?q?=ED=86=B5=ED=95=9C=20Router=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(8h=20/=203h)=20(#19)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 3 +- FE/package-lock.json | 41 +++++++++++- FE/package.json | 3 +- FE/src/App.tsx | 24 ++----- FE/src/AppRouter.tsx | 56 ++++++++++++++++ .../foundation/Typography/Typography.tsx | 4 +- .../interviewPage/InterViewCamera.tsx | 19 ++++++ .../interviewPage/InterViewFooter.tsx | 24 +++++++ FE/src/components/interviewPage/Layout.tsx | 17 +++++ .../interviewPage/interviewHeader.tsx | 19 ++++++ .../interviewSettingPage/Description.tsx | 19 ++++++ .../interviewSettingPage/Layout.tsx | 13 ++++ .../QustionSelectionBox.tsx | 6 ++ .../interviewSettingPage/RecordMethodBox.tsx | 6 ++ .../SettingProgressBar.tsx | 19 ++++++ .../interviewSettingPage/VideoSettingBox.tsx | 6 ++ .../components/interviewVideoPage/Layout.tsx | 13 ++++ FE/src/components/landingPage/Intro.tsx | 47 +++++++++++++ FE/src/components/landingPage/Layout.tsx | 15 +++++ .../components/landingPage/SideBackground.tsx | 19 ++++++ FE/src/components/layout/Layout.tsx | 30 +++++++++ FE/src/components/myPage/Header.tsx | 19 ++++++ FE/src/components/myPage/Layout.tsx | 11 ++++ FE/src/components/myPage/MyPageHeader.tsx | 19 ++++++ FE/src/components/myPage/Profile.tsx | 25 +++++++ FE/src/constants/path.ts | 17 +++++ FE/src/page/LandingPage/index.tsx | 14 ++++ FE/src/page/interviewPage/index.tsx | 16 +++++ FE/src/page/interviewSettingPage/index.tsx | 66 +++++++++++++++++++ FE/src/page/interviewVideoPage/index.tsx | 18 +++++ FE/src/page/myPage/index.tsx | 14 ++++ FE/webpack.config.js | 2 +- 32 files changed, 599 insertions(+), 25 deletions(-) create mode 100644 FE/src/AppRouter.tsx create mode 100644 FE/src/components/interviewPage/InterViewCamera.tsx create mode 100644 FE/src/components/interviewPage/InterViewFooter.tsx create mode 100644 FE/src/components/interviewPage/Layout.tsx create mode 100644 FE/src/components/interviewPage/interviewHeader.tsx create mode 100644 FE/src/components/interviewSettingPage/Description.tsx create mode 100644 FE/src/components/interviewSettingPage/Layout.tsx create mode 100644 FE/src/components/interviewSettingPage/QustionSelectionBox.tsx create mode 100644 FE/src/components/interviewSettingPage/RecordMethodBox.tsx create mode 100644 FE/src/components/interviewSettingPage/SettingProgressBar.tsx create mode 100644 FE/src/components/interviewSettingPage/VideoSettingBox.tsx create mode 100644 FE/src/components/interviewVideoPage/Layout.tsx create mode 100644 FE/src/components/landingPage/Intro.tsx create mode 100644 FE/src/components/landingPage/Layout.tsx create mode 100644 FE/src/components/landingPage/SideBackground.tsx create mode 100644 FE/src/components/layout/Layout.tsx create mode 100644 FE/src/components/myPage/Header.tsx create mode 100644 FE/src/components/myPage/Layout.tsx create mode 100644 FE/src/components/myPage/MyPageHeader.tsx create mode 100644 FE/src/components/myPage/Profile.tsx create mode 100644 FE/src/constants/path.ts create mode 100644 FE/src/page/LandingPage/index.tsx create mode 100644 FE/src/page/interviewPage/index.tsx create mode 100644 FE/src/page/interviewSettingPage/index.tsx create mode 100644 FE/src/page/interviewVideoPage/index.tsx create mode 100644 FE/src/page/myPage/index.tsx diff --git a/FE/.eslintrc.json b/FE/.eslintrc.json index b6b630f..ecc2f23 100644 --- a/FE/.eslintrc.json +++ b/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": { diff --git a/FE/package-lock.json b/FE/package-lock.json index 99d014a..f45df6b 100644 --- a/FE/package-lock.json +++ b/FE/package-lock.json @@ -14,7 +14,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", @@ -2745,6 +2746,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@remix-run/router": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@types/body-parser": { "version": "1.19.4", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.4.tgz", @@ -8663,6 +8672,36 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-router": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "dependencies": { + "@remix-run/router": "1.11.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", + "dependencies": { + "@remix-run/router": "1.11.0", + "react-router": "6.18.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", diff --git a/FE/package.json b/FE/package.json index 6f303bf..438a736 100644 --- a/FE/package.json +++ b/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", diff --git a/FE/src/App.tsx b/FE/src/App.tsx index fbc54bc..a43cfb2 100644 --- a/FE/src/App.tsx +++ b/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 ( -
- asdfasdfasdfasdfasdfasdfasdf - hihiHello - Worasdfasasdfasdfdflasdfasdfasdfasdasdfasdfasdfasdfasdfasdf -
- Styled with Emotion! -
-
+ ); } + export default App; diff --git a/FE/src/AppRouter.tsx b/FE/src/AppRouter.tsx new file mode 100644 index 0000000..2c92bae --- /dev/null +++ b/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: , + }, + { + path: PATH.INTERVIEW, + element: , + }, + { + path: PATH.INTERVIEW_SETTING, + element: , + children: [ + { + index: true, + element: , + }, + { + path: PATH.CONNECTION, + element: , + }, + { + path: PATH.RECORD, + element: , + }, + ], + }, + { + path: PATH.MYPAGE, + element: , + }, + { + path: PATH.INTERVIEW_VIDEO, // ":videoId" is a URL parameter + element: , + }, +]; + +const router = createBrowserRouter(routes); + +const AppRouter = () => { + return ; +}; + +export default AppRouter; diff --git a/FE/src/components/foundation/Typography/Typography.tsx b/FE/src/components/foundation/Typography/Typography.tsx index 6362cf9..319d62d 100644 --- a/FE/src/components/foundation/Typography/Typography.tsx +++ b/FE/src/components/foundation/Typography/Typography.tsx @@ -11,7 +11,7 @@ type Props = { children: ReactNode; }; -export const Typography: React.FC = ({ +const Typography: React.FC = ({ component, variant = 'body1', noWrap, @@ -42,3 +42,5 @@ export const Typography: React.FC = ({ ); }; + +export default Typography; diff --git a/FE/src/components/interviewPage/InterViewCamera.tsx b/FE/src/components/interviewPage/InterViewCamera.tsx new file mode 100644 index 0000000..415d4a8 --- /dev/null +++ b/FE/src/components/interviewPage/InterViewCamera.tsx @@ -0,0 +1,19 @@ +import { css } from '@emotion/react'; + +const InterviewCamera: React.FC = () => { + return ( +
+ 면접페이지의 카메라 입니다. +
+ ); +}; +export default InterviewCamera; diff --git a/FE/src/components/interviewPage/InterViewFooter.tsx b/FE/src/components/interviewPage/InterViewFooter.tsx new file mode 100644 index 0000000..cce8909 --- /dev/null +++ b/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 ( +
+ + 면접페이지의 하단 입니다. + +
+ ); +}; +export default InterViewFooter; diff --git a/FE/src/components/interviewPage/Layout.tsx b/FE/src/components/interviewPage/Layout.tsx new file mode 100644 index 0000000..a0b82b1 --- /dev/null +++ b/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 = ({ + children, +}) => { + return ( + + {children} + + ); +}; + +export default InterviewPageLayout; diff --git a/FE/src/components/interviewPage/interviewHeader.tsx b/FE/src/components/interviewPage/interviewHeader.tsx new file mode 100644 index 0000000..1face2f --- /dev/null +++ b/FE/src/components/interviewPage/interviewHeader.tsx @@ -0,0 +1,19 @@ +import { css } from '@emotion/react'; + +const InterviewHeader: React.FC = () => { + return ( +
+ 면접페이지의 Header 입니다. +
+ ); +}; +export default InterviewHeader; diff --git a/FE/src/components/interviewSettingPage/Description.tsx b/FE/src/components/interviewSettingPage/Description.tsx new file mode 100644 index 0000000..8edd9c4 --- /dev/null +++ b/FE/src/components/interviewSettingPage/Description.tsx @@ -0,0 +1,19 @@ +import { css } from '@emotion/react'; + +const Description: React.FC = () => { + return ( +
+ 설명 +
+ ); +}; +export default Description; diff --git a/FE/src/components/interviewSettingPage/Layout.tsx b/FE/src/components/interviewSettingPage/Layout.tsx new file mode 100644 index 0000000..607696f --- /dev/null +++ b/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 = ({ + children, +}) => { + return {children}; +}; + +export default InterviewSettingPageLayout; diff --git a/FE/src/components/interviewSettingPage/QustionSelectionBox.tsx b/FE/src/components/interviewSettingPage/QustionSelectionBox.tsx new file mode 100644 index 0000000..8471f80 --- /dev/null +++ b/FE/src/components/interviewSettingPage/QustionSelectionBox.tsx @@ -0,0 +1,6 @@ +import Box from '@foundation/Box/Box'; + +const QuestionSelectionBox: React.FC = () => { + return 여기에는 Question Box가 들어갑니다; +}; +export default QuestionSelectionBox; diff --git a/FE/src/components/interviewSettingPage/RecordMethodBox.tsx b/FE/src/components/interviewSettingPage/RecordMethodBox.tsx new file mode 100644 index 0000000..a566bdb --- /dev/null +++ b/FE/src/components/interviewSettingPage/RecordMethodBox.tsx @@ -0,0 +1,6 @@ +import Box from '@foundation/Box/Box'; + +const RecordMethodBox: React.FC = () => { + return SaveMethodBox 입니다; +}; +export default RecordMethodBox; diff --git a/FE/src/components/interviewSettingPage/SettingProgressBar.tsx b/FE/src/components/interviewSettingPage/SettingProgressBar.tsx new file mode 100644 index 0000000..8e00acb --- /dev/null +++ b/FE/src/components/interviewSettingPage/SettingProgressBar.tsx @@ -0,0 +1,19 @@ +import { css } from '@emotion/react'; + +const SettingProgressBar: React.FC = () => { + return ( +
+ progress +
+ ); +}; +export default SettingProgressBar; diff --git a/FE/src/components/interviewSettingPage/VideoSettingBox.tsx b/FE/src/components/interviewSettingPage/VideoSettingBox.tsx new file mode 100644 index 0000000..1059c07 --- /dev/null +++ b/FE/src/components/interviewSettingPage/VideoSettingBox.tsx @@ -0,0 +1,6 @@ +import Box from '@foundation/Box/Box'; + +const VideoSettingBox: React.FC = () => { + return videoSettionBox 입니다; +}; +export default VideoSettingBox; diff --git a/FE/src/components/interviewVideoPage/Layout.tsx b/FE/src/components/interviewVideoPage/Layout.tsx new file mode 100644 index 0000000..e2487a7 --- /dev/null +++ b/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 = ({ + children, +}) => { + return {children}; +}; + +export default InterviewVideoPageLayout; diff --git a/FE/src/components/landingPage/Intro.tsx b/FE/src/components/landingPage/Intro.tsx new file mode 100644 index 0000000..e9d1e6b --- /dev/null +++ b/FE/src/components/landingPage/Intro.tsx @@ -0,0 +1,47 @@ +import { css } from '@emotion/react'; +import { Link } from 'react-router-dom'; + +const Intro: React.FC = () => { + // 로그인에 따라 로직이 달라집니다. + return ( +
+
+ 당신만을 위한 면접 서비스 +
+
+ + + + +
+
+ ); +}; +export default Intro; diff --git a/FE/src/components/landingPage/Layout.tsx b/FE/src/components/landingPage/Layout.tsx new file mode 100644 index 0000000..ebf7130 --- /dev/null +++ b/FE/src/components/landingPage/Layout.tsx @@ -0,0 +1,15 @@ +import Layout from '@/components/layout/Layout'; + +type LandingPageLayoutProps = { + children: React.ReactNode; +}; + +const LandingPageLayout: React.FC = ({ children }) => { + return ( + + {children} + + ); +}; + +export default LandingPageLayout; diff --git a/FE/src/components/landingPage/SideBackground.tsx b/FE/src/components/landingPage/SideBackground.tsx new file mode 100644 index 0000000..a02321e --- /dev/null +++ b/FE/src/components/landingPage/SideBackground.tsx @@ -0,0 +1,19 @@ +import { css } from '@emotion/react'; + +const SideBackground: React.FC = () => { + return ( +
+ 조금 이쁜 랜딩 입니다 +
+ ); +}; +export default SideBackground; diff --git a/FE/src/components/layout/Layout.tsx b/FE/src/components/layout/Layout.tsx new file mode 100644 index 0000000..4f7688c --- /dev/null +++ b/FE/src/components/layout/Layout.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/react'; + +type MainProps = { + full?: boolean; + direction: 'column' | 'row'; + children: React.ReactNode; +}; + +const Layout: React.FC = ({ + full = false, + direction = 'row', + children, +}) => { + return ( +
+ {children} +
+ ); +}; + +export default Layout; diff --git a/FE/src/components/myPage/Header.tsx b/FE/src/components/myPage/Header.tsx new file mode 100644 index 0000000..40d2b46 --- /dev/null +++ b/FE/src/components/myPage/Header.tsx @@ -0,0 +1,19 @@ +import { css } from '@emotion/react'; + +const MyPageHeader: React.FC = () => { + return ( +
+ My Header 입니다. +
+ ); +}; +export default MyPageHeader; diff --git a/FE/src/components/myPage/Layout.tsx b/FE/src/components/myPage/Layout.tsx new file mode 100644 index 0000000..b4af94d --- /dev/null +++ b/FE/src/components/myPage/Layout.tsx @@ -0,0 +1,11 @@ +import Layout from '@/components/layout/Layout'; + +type MyPageLayoutProps = { + children: React.ReactNode; +}; + +const MyPageLayout: React.FC = ({ children }) => { + return {children}; +}; + +export default MyPageLayout; diff --git a/FE/src/components/myPage/MyPageHeader.tsx b/FE/src/components/myPage/MyPageHeader.tsx new file mode 100644 index 0000000..40d2b46 --- /dev/null +++ b/FE/src/components/myPage/MyPageHeader.tsx @@ -0,0 +1,19 @@ +import { css } from '@emotion/react'; + +const MyPageHeader: React.FC = () => { + return ( +
+ My Header 입니다. +
+ ); +}; +export default MyPageHeader; diff --git a/FE/src/components/myPage/Profile.tsx b/FE/src/components/myPage/Profile.tsx new file mode 100644 index 0000000..9438c2d --- /dev/null +++ b/FE/src/components/myPage/Profile.tsx @@ -0,0 +1,25 @@ +import { css } from '@emotion/react'; +import Box from '@foundation/Box/Box'; +import Avatar from '@foundation/Avatar/Avatar'; +import Typography from '../foundation/Typography/Typography'; +const Profile: React.FC = () => { + return ( + +
+ + milk717 + robolindasoo@gmail.com +
+ + ); +}; +export default Profile; diff --git a/FE/src/constants/path.ts b/FE/src/constants/path.ts new file mode 100644 index 0000000..e84b34a --- /dev/null +++ b/FE/src/constants/path.ts @@ -0,0 +1,17 @@ +const INTERVIEW = 'interview'; +const SETTING = 'setting'; +const CONNECTION = 'connection'; +const RECORD = 'record'; +const MYPAGE = 'mypage'; + +export const PATH = { + ROOT: '/', + INTERVIEW: `/${INTERVIEW}`, + INTERVIEW_SETTING: `/${INTERVIEW}/${SETTING}`, + INTERVIEW_SETTING_CONNECTION: `/${INTERVIEW}/${SETTING}/${CONNECTION}`, + INTERVIEW_SETTING_RECORD: `/${INTERVIEW}/${SETTING}/${RECORD}`, + MYPAGE: `/${MYPAGE}`, + CONNECTION: `${CONNECTION}`, + RECORD: `${RECORD}`, + INTERVIEW_VIDEO: `/${INTERVIEW}/:videoId`, +}; diff --git a/FE/src/page/LandingPage/index.tsx b/FE/src/page/LandingPage/index.tsx new file mode 100644 index 0000000..02799f6 --- /dev/null +++ b/FE/src/page/LandingPage/index.tsx @@ -0,0 +1,14 @@ +import LandingPageLayout from '@/components/landingPage/Layout'; +import SideBackground from '@/components/landingPage/SideBackground'; +import Intro from '@/components/landingPage/Intro'; + +const RenderingPage: React.FC = () => { + return ( + + + + + ); +}; + +export default RenderingPage; diff --git a/FE/src/page/interviewPage/index.tsx b/FE/src/page/interviewPage/index.tsx new file mode 100644 index 0000000..a10f03c --- /dev/null +++ b/FE/src/page/interviewPage/index.tsx @@ -0,0 +1,16 @@ +import InterviewPageLayout from '@/components/interviewPage/Layout'; +import InterviewHeader from '@/components/interviewPage/interviewHeader'; +import InterviewCamera from '@/components/interviewPage/InterviewCamera'; +import InterviewFooter from '@/components/interviewPage/InterviewFooter'; + +const InterviewPage: React.FC = () => { + return ( + + + + + + ); +}; + +export default InterviewPage; diff --git a/FE/src/page/interviewSettingPage/index.tsx b/FE/src/page/interviewSettingPage/index.tsx new file mode 100644 index 0000000..6fbfba6 --- /dev/null +++ b/FE/src/page/interviewSettingPage/index.tsx @@ -0,0 +1,66 @@ +import InterviewSettingPageLayout from '@/components/interviewSettingPage/Layout'; +import { css } from '@emotion/react'; +import { Outlet, useLocation, useNavigate } from 'react-router-dom'; +import SettingProgressBar from '@/components/interviewSettingPage/SettingProgressBar'; +import Description from '@/components/interviewSettingPage/Description'; +import Button from '@/components/foundation/Button/Button'; +import { PATH } from '@constants/path'; + +const InterviewSettingPage: React.FC = () => { + const navigate = useNavigate(); + const location = useLocation(); + + function navigateNext() { + switch (location.pathname) { + case PATH.INTERVIEW_SETTING: + navigate(PATH.INTERVIEW_SETTING_CONNECTION); + break; + case PATH.INTERVIEW_SETTING_CONNECTION: + navigate(PATH.INTERVIEW_SETTING_RECORD); + break; + case PATH.INTERVIEW_SETTING_RECORD: + navigate(PATH.INTERVIEW); + break; + default: + navigate(PATH.ROOT); + break; + } + } + function navigatePrev() { + switch (location.pathname) { + case PATH.INTERVIEW_SETTING: + navigate(PATH.ROOT); + break; + case PATH.INTERVIEW_SETTING_CONNECTION: + navigate(PATH.INTERVIEW_SETTING); + break; + case PATH.INTERVIEW_SETTING_RECORD: + navigate(PATH.INTERVIEW_SETTING_CONNECTION); + break; + default: + navigate(PATH.ROOT); + break; + } + } + return ( + + + + +
+ + +
+ + ); +}; + +export default InterviewSettingPage; diff --git a/FE/src/page/interviewVideoPage/index.tsx b/FE/src/page/interviewVideoPage/index.tsx new file mode 100644 index 0000000..addf8e9 --- /dev/null +++ b/FE/src/page/interviewVideoPage/index.tsx @@ -0,0 +1,18 @@ +import { useParams } from 'react-router-dom'; +import InterviewVideoPageLayout from '@/components/interviewVideoPage/Layout'; + +const InterviewVideoPage: React.FC = () => { + // Use the `useParams` hook to access the `videoId` parameter + const params = useParams(); + const videoId = params.videoId; // This is the video ID from the URL + + return ( + +

Interview Video Page

+

Showing video for ID: {videoId}

+ {/* You can use the videoId to fetch and display the appropriate video */} + + ); +}; + +export default InterviewVideoPage; diff --git a/FE/src/page/myPage/index.tsx b/FE/src/page/myPage/index.tsx new file mode 100644 index 0000000..3691d74 --- /dev/null +++ b/FE/src/page/myPage/index.tsx @@ -0,0 +1,14 @@ +import MyPageLayout from '@/components/myPage/Layout'; +import MyPageHeader from '@/components/myPage/MyPageHeader'; +import Profile from '@/components/myPage/Profile'; + +const MyPage: React.FC = () => { + return ( + + + + + ); +}; + +export default MyPage; diff --git a/FE/webpack.config.js b/FE/webpack.config.js index b3ec118..ad3220c 100644 --- a/FE/webpack.config.js +++ b/FE/webpack.config.js @@ -2,12 +2,12 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const webpack = require('webpack'); const CopyPlugin = require('copy-webpack-plugin'); - module.exports = { mode: process.env.production === 'true' ? 'production' : 'development', devtool: process.env.production === 'true' ? 'hidden-source-map' : 'eval', entry: './src/index.tsx', output: { + publicPath: '/', path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', clean: true,