[NDD-240] settingpage 라우터 처리 (1h/2h)

FE/src/components/interviewSettingPage/InterviewSettingPageLayout.tsx

@@ -12,7 +12,7 @@ const InterviewSettingPageLayout: React.FC<InterviewSettingPageLayoutProps> = ({
     <Layout
       direction="column"
       css={css`
-        padding: 0 1rem 1rem 1rem;
+        padding: 0rem 1rem 1rem 1rem;
         height: auto;
       `}
     >

FE/src/components/interviewSettingPage/AnswerSelectionModal/AnswerSelectionModal.tsx → FE/src/components/interviewSettingPage/QuestionPage/AnswerSelectionModal/AnswerSelectionModal.tsx

@@ -1,7 +1,7 @@
-import Modal from '../../foundation/Modal';
+import Modal from '../../../foundation/Modal';
 import { css } from '@emotion/react';
 import { theme } from '@/styles/theme';
-import Typography from '../../foundation/Typography/Typography';
+import Typography from '../../../foundation/Typography/Typography';
 import useQuestionAnswerQuery from '@/hooks/queries/useQuestionAnswerQuery';
 import AnswerScript from './AnswerScript';
 import AnswerForm from './AnswerForm';

FE/src/hooks/useMedia.ts

@@ -1,7 +1,7 @@
 import { closeMedia, getMedia, getSupportedMimeTypes } from '@/utils/media';
 import { useState, useEffect, useCallback, useRef } from 'react';
 
-const useMedia = () => {
+const useMedia = (trigger: boolean = true) => {
   const [media, setMedia] = useState<MediaStream | null>(null);
   const [selectedMimeType, setSelectedMimeType] = useState('');
   const [connectStatus, setIsConnectedStatus] = useState<
@@ -23,7 +23,7 @@ const useMedia = () => {
   }, []);
 
   useEffect(() => {
-    if (!media) {
+    if (!media && trigger) {
       void connectMedia();
     }
     const mimeTypes = getSupportedMimeTypes();
@@ -32,7 +32,7 @@ const useMedia = () => {
     return () => {
       closeMedia(media);
     };
-  }, [media, connectMedia]);
+  }, [media, connectMedia, trigger]);
 
   return { media, videoRef, connectStatus, selectedMimeType };
 };

FE/src/page/interviewSettingPage/QuestionSettingPage.tsx

@@ -1,7 +1,7 @@
 import { questionSetting } from '@/atoms/interviewSetting';
 import Button from '@/components/foundation/Button/Button';
 import Description from '@/components/interviewSettingPage/Description';
-import QuestionSelectionBox from '@/components/interviewSettingPage/QuestionSelectionBox/QuestionSelectionBox';
+import QuestionSelectionBox from '@/components/interviewSettingPage/QuestionPage/QuestionSelectionBox/QuestionSelectionBox';
 import { css } from '@emotion/react';
 import { useRecoilValue } from 'recoil';
 
@@ -17,11 +17,7 @@ const QuestionSettingPage: React.FC<QuestionSettingPageProps> = ({
   const setting = useRecoilValue(questionSetting);
 
   return (
-    <div
-      css={css`
-        padding-top: 3rem;
-      `}
-    >
+    <>
       <Description title="문제 선택">
         - 주어진 카테고리 중에서 관련 있는 문제를 선택해 주세요.
         <br />
@@ -68,7 +64,7 @@ const QuestionSettingPage: React.FC<QuestionSettingPageProps> = ({
           다음
         </Button>
       </div>
-    </div>
+    </>
   );
 };
 

FE/src/page/interviewSettingPage/RecordSettingPage.tsx

@@ -29,11 +29,7 @@ const RecordSettingPage: React.FC<RecordSettingPageProps> = ({
   };
 
   return (
-    <div
-      css={css`
-        padding-top: 3rem;
-      `}
-    >
+    <>
       <Description title="녹화 설정">
         - 면접 시작 전, 사용하시는 장치의 화면 및 소리가 정상적으로 연결되어
         있는지 확인해 주세요.
@@ -111,7 +107,7 @@ const RecordSettingPage: React.FC<RecordSettingPageProps> = ({
           다음
         </Button>
       </div>
-    </div>
+    </>
   );
 };
 export default RecordSettingPage;

FE/src/page/interviewSettingPage/VideoSettingPage.tsx

@@ -11,16 +11,18 @@ import { useRecoilState } from 'recoil';
 type VideoSettingPageProps = {
   onNextClick?: () => void;
   onPrevClick?: () => void;
+  isCurrentPage: boolean;
 };
 
 const VideoSettingPage: React.FC<VideoSettingPageProps> = ({
   onNextClick,
   onPrevClick,
+  isCurrentPage,
 }) => {
   const [videoSettingState, setVideoSettingState] =
     useRecoilState(videoSetting);
 
-  const { videoRef: mirrorVideoRef, connectStatus } = useMedia();
+  const { videoRef: mirrorVideoRef, connectStatus } = useMedia(isCurrentPage);
 
   useEffect(() => {
     if (connectStatus === 'connect') {
@@ -35,11 +37,7 @@ const VideoSettingPage: React.FC<VideoSettingPageProps> = ({
   }, [connectStatus, setVideoSettingState]);
 
   return (
-    <div
-      css={css`
-        padding-top: 3rem;
-      `}
-    >
+    <>
       <Description title="문제 선택">
         - 면접 시작 전, 사용하시는 장치의 화면 및 소리가 정상적으로 연결되어
         있는지 확인해 주세요.
@@ -111,7 +109,7 @@ const VideoSettingPage: React.FC<VideoSettingPageProps> = ({
           다음
         </Button>
       </div>
-    </div>
+    </>
   );
 };
 

FE/src/page/interviewSettingPage/index.tsx

@@ -14,8 +14,15 @@ import { css } from '@emotion/react';
 import RecordSettingPage from './RecordSettingPage';
 import VideoSettingPage from './VideoSettingPage';
 
+const FIRST_PAGE_INDEX = 0;
+const PREV_PAGE_INDEX = -1;
+
 const InterviewSettingPage: React.FC = () => {
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const currentPage = searchParams.get('page');
+
   const pageInfo = [
     {
       name: '문제 선택',
@@ -33,6 +40,7 @@ const InterviewSettingPage: React.FC = () => {
       path: SETTING_PATH.CONNECTION,
       page: (
         <VideoSettingPage
+          isCurrentPage={currentPage === SETTING_PATH.CONNECTION}
           onPrevClick={() => changeSearchParams(SETTING_PATH.QUESTION)}
           onNextClick={() => changeSearchParams(SETTING_PATH.RECORD)}
         />
@@ -51,9 +59,8 @@ const InterviewSettingPage: React.FC = () => {
       state: useRecoilValue(recordSetting),
     },
   ];
-  const validPagePaths = pageInfo.map((item) => item.path);
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const currentIndex = pageInfo.findIndex((item) => item.path === currentPage);
 
   const changeSearchParams = (newPage: string) => {
     const newSearchParams = new URLSearchParams(searchParams);
@@ -62,12 +69,23 @@ const InterviewSettingPage: React.FC = () => {
   };
   // TODO: 로직이 더 길어지면 hook으로 분리해도 나쁘지 않을듯
 
-  const currentPage = searchParams.get('page');
-
-  if (!currentPage || !validPagePaths.includes(currentPage)) {
+  const isValidatePath = currentIndex !== -1;
+  if (!isValidatePath) {
     return <Navigate to={`?page=${SETTING_PATH.QUESTION}`} replace />;
   }
 
+  const prevPageInfo =
+    currentIndex === FIRST_PAGE_INDEX
+      ? pageInfo[FIRST_PAGE_INDEX]
+      : pageInfo[currentIndex + PREV_PAGE_INDEX];
+
+  const isValidatePrevPageStatus =
+    currentIndex !== FIRST_PAGE_INDEX && !prevPageInfo.state.isSuccess;
+
+  if (isValidatePrevPageStatus) {
+    return <Navigate to={`?page=${prevPageInfo.path}`} replace />;
+  }
+
   return (
     <InterviewSettingPageLayout>
       <div