-
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.
* feat: Interview Header 컴포넌트 개발 * feat: InterviewCamera 컴포넌트 개발 1. 최소한의 반응형을 지원할것, 2. height를 고정후 width를 변화시키지만 over-flow : hidden 속성으로 x축 스크롤 방지 3. Question div 와 Answer Div 에 대한 기능 구현 * feat: InterviewFooter 컴포넌트 개발 1. 최소 기능 부여 (녹화 시작, 녹화 종료, 녹화 저장) * feat: 최소 로직에 대한 기능 구현 * style: components/interviewPage의 컴포넌트 구조변경 * fix: Typograpy 디자인 반영 * fix: 저장하기 로직 예외처리 * style: Interview 페이지 내부 theme 적용 * feat: 면접 종료 Modal 구현 * fix: InterviewPageFooter의 Button 간격 수정 * feat: InterviewIntro 모달 구현 * fix: Interview Intro 모달의 문구 변경 * feat: interview finish 모달 구현 * feat: InterviewTimeOver 모달 구현 * feat: Interview 페이지 내부 false 상태로 modal 적용 * fix: record-stop 버튼에 대한 버그 수정 * feat: 위로 스크롤시 배경이 가려지는 문제 해결 * fix: 상단에 Question 고정
- Loading branch information
Showing
22 changed files
with
879 additions
and
192 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
31 changes: 31 additions & 0 deletions
31
FE/src/components/interviewPage/InterviewFooter/AnswerToggleButton.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,31 @@ | ||
import { css } from '@emotion/react'; | ||
import { theme } from '@styles/theme'; | ||
import Icon from '@foundation/Icon/Icon'; | ||
import Typography from '@foundation/Typography/Typography'; | ||
|
||
type AnswerToggleButtonType = { | ||
handleAnswerToggle: () => void; | ||
}; | ||
|
||
const AnswerToggleButton: React.FC<AnswerToggleButtonType> = ({ | ||
handleAnswerToggle, | ||
}) => { | ||
return ( | ||
<div | ||
css={css` | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
gap: 0.75rem; | ||
`} | ||
onClick={handleAnswerToggle} | ||
> | ||
<Icon id="script" width="2rem" height="2rem" /> | ||
<Typography variant={'body1'} color={theme.colors.text.white}> | ||
스크립트 | ||
</Typography> | ||
</div> | ||
); | ||
}; | ||
export default AnswerToggleButton; |
32 changes: 32 additions & 0 deletions
32
FE/src/components/interviewPage/InterviewFooter/InterviewExitButton.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,32 @@ | ||
import { theme } from '@styles/theme'; | ||
import { css } from '@emotion/react'; | ||
|
||
import Icon from '@foundation/Icon/Icon'; | ||
import Typography from '@foundation/Typography/Typography'; | ||
|
||
type InterviewExitButtonType = { | ||
handleInterviewExit: () => void; | ||
}; | ||
|
||
const InterviewExitButton: React.FC<InterviewExitButtonType> = ({ | ||
handleInterviewExit, | ||
}) => { | ||
return ( | ||
<div | ||
css={css` | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
gap: 0.75rem; | ||
`} | ||
onClick={handleInterviewExit} | ||
> | ||
<Icon id="close-circle" width="2rem" height="2rem" /> | ||
<Typography variant={'body1'} color={theme.colors.text.white}> | ||
나가기 | ||
</Typography> | ||
</div> | ||
); | ||
}; | ||
export default InterviewExitButton; |
65 changes: 65 additions & 0 deletions
65
FE/src/components/interviewPage/InterviewFooter/InterviewFooter.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,65 @@ | ||
import { css } from '@emotion/react'; | ||
import InterviewExitButton from './InterviewExitButton'; | ||
import AnswerToggleButton from './AnswerToggleButton'; | ||
import RecordControlButton from './RecordControlButton'; | ||
import NextButton from './NextButton'; | ||
import InterviewExitModal from '@components/interviewPage/InterviewModal/InterviewExitModal'; | ||
import { useState } from 'react'; | ||
import { theme } from '@styles/theme'; | ||
|
||
type InterviewFooterProps = { | ||
isRecording: boolean; | ||
recordedBlobs: Blob[]; | ||
handleStartRecording: () => void; | ||
handleStopRecording: () => void; | ||
handleScript: () => void; | ||
handleDownload: () => void; | ||
}; | ||
|
||
const InterviewFooter: React.FC<InterviewFooterProps> = ({ | ||
isRecording, | ||
recordedBlobs, | ||
handleStartRecording, | ||
handleStopRecording, | ||
handleScript, | ||
handleDownload, | ||
}) => { | ||
const [interviewExitModalIsOpen, setInterviewExitModalIsOpen] = | ||
useState<boolean>(false); | ||
|
||
const handleNext = () => { | ||
alert('다음면접을 진행합니다'); | ||
if (!isRecording && recordedBlobs.length > 0) handleDownload(); | ||
else alert('저장할 수 없습니다'); | ||
}; | ||
|
||
return ( | ||
<div | ||
css={css` | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
width: 100%; | ||
height: 6.25rem; | ||
background-color: ${theme.colors.surface.black100}; | ||
gap: 2.5rem; | ||
`} | ||
> | ||
<InterviewExitButton | ||
handleInterviewExit={() => setInterviewExitModalIsOpen(true)} | ||
/> | ||
<AnswerToggleButton handleAnswerToggle={handleScript} /> | ||
<RecordControlButton | ||
isRecording={isRecording} | ||
handleStartRecording={handleStartRecording} | ||
handleStopRecording={handleStopRecording} | ||
/> | ||
<NextButton handleNext={handleNext} /> | ||
<InterviewExitModal | ||
isOpen={interviewExitModalIsOpen} | ||
closeModal={() => setInterviewExitModalIsOpen((prev) => !prev)} | ||
/> | ||
</div> | ||
); | ||
}; | ||
export default InterviewFooter; |
34 changes: 34 additions & 0 deletions
34
FE/src/components/interviewPage/InterviewFooter/NextButton.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,34 @@ | ||
import { theme } from '@styles/theme'; | ||
import { css } from '@emotion/react'; | ||
|
||
import Icon from '@foundation/Icon/Icon'; | ||
import Typography from '@foundation/Typography/Typography'; | ||
|
||
type NextButtonType = { | ||
handleNext: () => void; | ||
}; | ||
|
||
const NextButton: React.FC<NextButtonType> = ({ handleNext }) => { | ||
return ( | ||
<div | ||
css={css` | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
gap: 0.75rem; | ||
`} | ||
onClick={handleNext} | ||
> | ||
<Icon | ||
id="next" // symbol 옆에 작성한 id를 인자로 받습니다. | ||
width="2rem" | ||
height="2rem" | ||
/> | ||
<Typography variant={'body1'} color={theme.colors.text.white}> | ||
다음질문 | ||
</Typography> | ||
</div> | ||
); | ||
}; | ||
export default NextButton; |
39 changes: 39 additions & 0 deletions
39
FE/src/components/interviewPage/InterviewFooter/RecordControlButton.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,39 @@ | ||
import { theme } from '@styles/theme'; | ||
import { css } from '@emotion/react'; | ||
import Icon from '@foundation/Icon/Icon'; | ||
import Typography from '@foundation/Typography/Typography'; | ||
|
||
type RecordControlButtonType = { | ||
isRecording: boolean; | ||
handleStartRecording: () => void; | ||
handleStopRecording: () => void; | ||
}; | ||
|
||
const RecordControlButton: React.FC<RecordControlButtonType> = ({ | ||
isRecording, | ||
handleStartRecording, | ||
handleStopRecording, | ||
}) => { | ||
return ( | ||
<div | ||
css={css` | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
gap: 0.75rem; | ||
`} | ||
onClick={isRecording ? handleStopRecording : handleStartRecording} | ||
> | ||
{isRecording ? ( | ||
<Icon id="record-stop" width="2rem" height="2rem" /> | ||
) : ( | ||
<Icon id="record-start" width="2rem" height="2rem" /> | ||
)} | ||
<Typography variant={'body1'} color={theme.colors.text.white}> | ||
{isRecording ? '녹화종료' : '녹화시작'} | ||
</Typography> | ||
</div> | ||
); | ||
}; | ||
export default RecordControlButton; |
Oops, something went wrong.