[NDD-135] Interview 페이지 UI 구현 (#57)

* 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 고정

FE/src/components/interviewPage/InterviewFooter/AnswerToggleButton.tsx

@@ -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;

FE/src/components/interviewPage/InterviewFooter/InterviewExitButton.tsx

@@ -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;

FE/src/components/interviewPage/InterviewFooter/InterviewFooter.tsx

@@ -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;

FE/src/components/interviewPage/InterviewFooter/NextButton.tsx

@@ -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;

FE/src/components/interviewPage/InterviewFooter/RecordControlButton.tsx

@@ -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;