-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[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 라우터 변경으로 발생한 파일병 변경
- Loading branch information
1 parent
5568e91
commit f3636d0
Showing
32 changed files
with
599 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
6 changes: 6 additions & 0 deletions
6
FE/src/components/interviewSettingPage/QustionSelectionBox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import Box from '@foundation/Box/Box'; | ||
|
||
const QuestionSelectionBox: React.FC = () => { | ||
return <Box>여기에는 Question Box가 들어갑니다</Box>; | ||
}; | ||
export default QuestionSelectionBox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import Box from '@foundation/Box/Box'; | ||
|
||
const RecordMethodBox: React.FC = () => { | ||
return <Box>SaveMethodBox 입니다</Box>; | ||
}; | ||
export default RecordMethodBox; |
19 changes: 19 additions & 0 deletions
19
FE/src/components/interviewSettingPage/SettingProgressBar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import Box from '@foundation/Box/Box'; | ||
|
||
const VideoSettingBox: React.FC = () => { | ||
return <Box>videoSettionBox 입니다</Box>; | ||
}; | ||
export default VideoSettingBox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Oops, something went wrong.