-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[NDD-61]: createBrowserRouter를 통한 Router기능 추가 (8h / 3h) #19
Merged
Merged
Changes from all commits
Commits
Show all changes
32 commits
Select commit
Hold shift + click to select a range
0fe823f
chore: react-dom & react-router-dom 설치
adultlee d76f48b
chore: 불필요한 lint 설정 제거
adultlee 1fff519
feat: layout 폴더에 대한 절대경로 설정
adultlee 6c23703
feat: Layout 컴포넌트 정의
adultlee 933bcd2
feat: Layout 컴포넌트 기반 각 페이지별 Layout 컨포넌트 선언
adultlee 684acbd
feat: route에 대한 상수화
adultlee 971c580
feat: MyPage 내부의 section을 나눌 컴포넌트 선언
adultlee 6b1bb24
feat: InterviewPage 내부의 section을 나눌 컴포넌트 선언
adultlee e72a272
feat: InterviewSettingPage 내부의 section을 나눌 컴포넌트 선언
adultlee 51a3c4a
feat: LandingPage 내부의 section을 나눌 컴포넌트 선언
adultlee 5c20eac
feat: 각 페이지별 기초적인 section 부여
adultlee b985da7
feat: AppRouter 함수를 통해서 Router 처리
adultlee 508e6d5
feat: 중첩된 경로에대한 server응답 구현
adultlee 843fe6b
fix: Typography export 설정 변경
adultlee ea8a492
chore: react-dom & react-router-dom 설치
adultlee f906cb2
chore: 불필요한 lint 설정 제거
adultlee bb6b65c
feat: layout 폴더에 대한 절대경로 설정
adultlee 56c3bb4
feat: Layout 컴포넌트 정의
adultlee d581609
feat: Layout 컴포넌트 기반 각 페이지별 Layout 컨포넌트 선언
adultlee ed6a78f
feat: route에 대한 상수화
adultlee 4c88f66
feat: MyPage 내부의 section을 나눌 컴포넌트 선언
adultlee fbc694d
feat: InterviewPage 내부의 section을 나눌 컴포넌트 선언
adultlee 02583a3
feat: InterviewSettingPage 내부의 section을 나눌 컴포넌트 선언
adultlee b7d8f33
feat: LandingPage 내부의 section을 나눌 컴포넌트 선언
adultlee 9a014d9
feat: 각 페이지별 기초적인 section 부여
adultlee 20fbccc
feat: AppRouter 함수를 통해서 Router 처리
adultlee 8513dd9
feat: 중첩된 경로에대한 server응답 구현
adultlee ff076c5
fix: Typography export 설정 변경
adultlee 1b32d65
Merge remote-tracking branch 'origin/feature/NDD-61' into feature/NDD-61
adultlee 5e7a3af
fix: 변수로 인해 재사용성 확대
adultlee b5e8135
fix: layout 컴포넌트를 components 하위 폴더로 이동
adultlee 7c42d6a
chore: layout 라우터 변경으로 발생한 파일병 변경
adultlee File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[p-5] router관리를 좀 더 세세하게 할수 있는군요?!? 하나 배워갑니다