Merge pull request #89 from Easy-Ti-cket/refactor/modal

Refactor: Modal 관련 폴더명 및 파일명 수정 및 SelectSeatChallengeMode로 통일

src/components/header/Header.jsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 import Modal from "../modal/Modal";
 import { useAtomValue, useSetAtom } from "jotai";
 import { timerControlAtom, themeSiteAtom } from "../../store/atom";
-import GoToLocationModalCont from "../modal/GoToMainModalCont";
+import GoToLocationModalContents from "../modal/modalContents/GoToMainModalContents";
 
 /*헤더 Container*/
 const HeaderContainer = styled.div`
@@ -56,7 +56,7 @@ const Header = () => {
         <Modal
           width="300px"
           height="300px"
-          contents={<GoToLocationModalCont setIsConfirm={setIsConfirm} />}
+          contents={<GoToLocationModalContents setIsConfirm={setIsConfirm} />}
           buttonShow={false}
         />
       )}

src/components/header/nav/Nav.jsx

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components"; // css 함수 import 추가
 import SubNav from "./subNav/SubNav";
 import useHover from "../../../hooks/useHover";
 import { useLocation, useNavigate } from "react-router-dom";
-import GoToLocationModalCont from "../../modal/GoToMainModalCont";
+import GoToLocationModalContents from "../../modal/modalContents/GoToMainModalContents";
 import Modal from "../../modal/Modal";
 import { useSetAtom } from "jotai";
 import { timerControlAtom } from "../../../store/atom";
@@ -113,7 +113,7 @@ const Nav = () => {
         <Modal
           buttonShow={false}
           contents={
-            <GoToLocationModalCont
+            <GoToLocationModalContents
               levelTheme="/record"
               setIsConfirm={setIsConfirm}
             />

src/components/header/nav/subNav/SubNav.jsx

@@ -11,7 +11,7 @@ import { useAtomValue, useSetAtom } from "jotai";
 import resetAtom from "../../../../util/resetAtom";
 import { useState } from "react";
 import Modal from "../../../modal/Modal";
-import GoToLocationModalCont from "../../../modal/GoToMainModalCont";
+import GoToLocationModalContents from "../../../modal/modalContents/GoToMainModalContents";
 
 const SubNavBgc = styled.div`
   width: 100vw;
@@ -105,7 +105,7 @@ const SubNav = ({ hovereditem }) => {
         <Modal
           buttonShow={false}
           contents={
-            <GoToLocationModalCont
+            <GoToLocationModalContents
               setIsConfirm={setIsConfirm}
               levelTheme={levelTheme}
             />

src/components/modal/EscModalContents.jsx → src/components/modal/modalContents/EscModalContents.jsx

@@ -1,9 +1,9 @@
 import styled from "styled-components";
-import Button from "../button/Button";
+import Button from "../../button/Button";
 import { useNavigate } from "react-router-dom";
 import PauseIcon from "/public/assets/images/icons/playPause/pause.svg?react";
 import { useSetAtom } from "jotai";
-import { timerControlAtom } from "../../store/atom";
+import { timerControlAtom } from "../../../store/atom";
 
 const Wrap = styled.div`
   display: flex;

src/components/modal/GoToMainModalCont.jsx → src/components/modal/modalContents/GoToMainModalContents.jsx

@@ -1,9 +1,13 @@
 import styled from "styled-components";
-import Button from "../button/Button";
+import Button from "../../button/Button";
 import { useNavigate } from "react-router-dom";
 import { useSetAtom } from "jotai";
-import { levelAtom, themeSiteAtom, timerControlAtom } from "../../store/atom";
-import resetAtom from "../../util/resetAtom";
+import {
+  levelAtom,
+  themeSiteAtom,
+  timerControlAtom
+} from "../../../store/atom";
+import resetAtom from "../../../util/resetAtom";
 
 const Container = styled.div`
   display: flex;
@@ -26,7 +30,7 @@ const ButtonWrap = styled.div`
   display: flex;
 `;
 
-const GoToLocationModalCont = ({ setIsConfirm, levelTheme = "/" }) => {
+const GoToLocationModalContents = ({ setIsConfirm, levelTheme = "/" }) => {
   const navigate = useNavigate();
   //타이머 제어
   const setTimerControl = useSetAtom(timerControlAtom);
@@ -80,4 +84,4 @@ const GoToLocationModalCont = ({ setIsConfirm, levelTheme = "/" }) => {
   );
 };
 
-export default GoToLocationModalCont;
+export default GoToLocationModalContents;

src/components/secureModal/SecureModal.jsx → src/components/modal/modalContents/SecureModalContents.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import Modal from "../modal/Modal";
-import { createCaptchaImage } from "../../util/captcha";
-import { getRandomString } from "../../util/getRandomString";
+import Modal from "../Modal";
+import { createCaptchaImage } from "../../../util/captcha";
+import { getRandomString } from "../../../util/getRandomString";
 import RefreshIcon from "/public/assets/images/icons/refresh.svg";
 import VoiceIcon from "/public/assets/images/icons/voice.svg";
-import { speakCharacterByCharacter } from "../../util/speechVoice";
+import { speakCharacterByCharacter } from "../../../util/speechVoice";
 
 const TitleWrapper = styled.div`
   font-family: "pretendardB";
@@ -58,7 +58,7 @@ const InputBox = styled.input`
   text-transform: uppercase;
 `;
 
-const SecureModal = ({ onClick }) => {
+const SecureModalContents = ({ onClick }) => {
   const [randomString, setRandomString] = useState(getRandomString());
   const [inputValue, setInputValue] = useState("");
   const [captchaImage, setCaptchaImage] = useState("");
@@ -124,4 +124,4 @@ const SecureModal = ({ onClick }) => {
   );
 };
 
-export default SecureModal;
+export default SecureModalContents;

src/components/modal/TimeoutModal.jsx → src/components/modal/modalContents/TimeoutModalContents.jsx

@@ -1,15 +1,15 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 import { useNavigate, useLocation } from "react-router-dom";
-import Button from "../button/Button";
+import Button from "../../button/Button";
 import { useAtom, useSetAtom } from "jotai";
 import {
   minuteCountAtom,
   timerControlAtom,
   themeSiteAtom,
   levelAtom
-} from "../../store/atom";
-import resetAtom from "../../util/resetAtom";
+} from "../../../store/atom";
+import resetAtom from "../../../util/resetAtom";
 
 const Wrap = styled.div`
   display: flex;
@@ -33,35 +33,20 @@ const ButtonWrap = styled.div`
   gap: 5px;
 `;
 
-const TimeoutModal = ({ setIsModalOpen }) => {
+const TimeoutModalContents = ({ setIsModalContentsOpen }) => {
   const navigate = useNavigate();
-  const location = useLocation();
   const [timeSpent] = useAtom(minuteCountAtom);
   const setTimerControl = useSetAtom(timerControlAtom);
   // themeSite
   const [themeSite] = useAtom(themeSiteAtom);
   // level
   const [level] = useAtom(levelAtom);
-  // 현재 경로가 step0인지 확인하기 위한 변수 정의
-  const isStep0Path = location.pathname.includes("step0");
-
-  useEffect(() => {
-    // minute이 0보다 작아지면 모달 자동 열림
-    if (timeSpent <= 0) {
-      setIsModalOpen(true);
-    }
-    // 단, 인트로 페이지에서는 모달이 열리지 않도록 설정
-    // (초기 타이머가 0으로 설정되어 있기 때문.)
-    if (isStep0Path) {
-      setIsModalOpen(false);
-    }
-  }, [timeSpent, isStep0Path, setIsModalOpen]);
 
   // 다시 시작하기
   const handleRestart = () => {
     const confirmNavigate = true;
     if (confirmNavigate) {
-      setIsModalOpen(false); // 모달 닫기
+      setIsModalContentsOpen(false); // 모달 닫기
       setTimerControl(false); // 타이머 정지
 
       // 경로 설정
@@ -77,7 +62,7 @@ const TimeoutModal = ({ setIsModalOpen }) => {
 
   // 처음으로 돌아가기
   const handleReturnToMain = () => {
-    setIsModalOpen(false); // 모달 닫기
+    setIsModalContentsOpen(false); // 모달 닫기
     setTimerControl(false); // 타이머 정지
     // 메인 페이지로 이동
     navigate("/");
@@ -100,4 +85,4 @@ const TimeoutModal = ({ setIsModalOpen }) => {
   );
 };
 
-export default TimeoutModal;
+export default TimeoutModalContents;

src/pages/ProgressContents.jsx

@@ -6,8 +6,8 @@ import Button from "../components/button/Button";
 import Modal from "../components/modal/Modal";
 import ProgressBar from "../components/progressBar/ProgressBar";
 import Timer from "../components/timer/Timer";
-import EscModalContents from "../components/modal/EscModalContents";
-import TimeoutModal from "../components/modal/TimeoutModal";
+import EscModalContents from "../components/modal/modalContents/EscModalContents";
+import TimeoutModalContents from "../components/modal/modalContents/TimeoutModalContents";
 import {
   themeSiteAtom,
   levelAtom,
@@ -71,21 +71,23 @@ const ProgressContents = ({ text, practiceMode, challengeMode }) => {
   //theme
   const themeSite = useAtomValue(themeSiteAtom);
   // 타임아웃 모달창 제어
-  const [isTimeoutModalOpen, setIsTimeoutModalOpen] = useState(false);
+  const [isTimeoutModalContentsOpen, setIsTimeoutModalContentsOpen] =
+    useState(false);
   // 일시정지 모달창 제어
   const [isPaused, setIsPaused] = useState(false);
 
-  const navigate = useNavigate();
   const path = useLocation().pathname;
+  // 현재 경로가 step0인지 확인하기 위한 변수 정의
+  const isStep0Path = location.pathname.includes("step0");
 
   // 시간이 초과되었을 때 타임아웃 모달 열리도록 설정
   useEffect(() => {
     // 남은 시간 0 이하일 때만 모달이 열리도록 설정
-    if (timeSpent <= 0 && !isTimeoutModalOpen) {
-      setIsTimeoutModalOpen(true);
+    if (timeSpent <= 0 && !isStep0Path) {
+      setIsTimeoutModalContentsOpen(true);
       setTimerControl(false); // 타이머 정지
     }
-  }, [timeSpent, isTimeoutModalOpen, setTimerControl]);
+  }, [timeSpent, setTimerControl]);
 
   const handleModalOpen = () => {
     setIsModalOpen(true);
@@ -160,13 +162,11 @@ const ProgressContents = ({ text, practiceMode, challengeMode }) => {
           <Modal onClick={handleModalClose} contents={helpText} />
         )}
         {/*타임아웃 모달창*/}
-        {isTimeoutModalOpen && (
+        {isTimeoutModalContentsOpen && (
           <Modal
             contents={
-              <TimeoutModal
-                practiceMode={practiceMode}
-                challengeMode={challengeMode}
-                setIsModalOpen={setIsTimeoutModalOpen}
+              <TimeoutModalContents
+                setIsModalContentsOpen={setIsTimeoutModalContentsOpen}
               />
             }
             buttonShow={false}