feat: 모달 닫기 기능 추가 된 구조로 변경 (#33)

cholulu99 · web-flow · commit 74edda5ba000 · 2025-06-17T14:38:17.000+09:00
* refactor: 변수명 변경 * feat: 뒤로가기 버튼 위치 조정 * feat: 모달 구조 변경 * refactor: 불필요한 조건 삭제 * refactor: prop이름 변경 * refactor: 변수명 변경, 함수명 변경 - close #32 * refactor: 모달 여백 조정 * refactor: 공통 모달 구조에 버튼 추가 * fix: 에러 모달 확인 시 다시 step1으로 가는 문제 수정
diff --git a/src/features/videoEditor/hooks/useVideoEditor.js b/src/features/videoEditor/hooks/useVideoEditor.js
@@ -5,7 +5,7 @@ const useVideoEditor = () => {
   const [duration, setDuration] = useState(0);
   const [playing, setPlaying] = useState(false);
   const [error, setError] = useState(null);
-  const [isDoneEdit, setIsDoneEdit] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const playerRef = useRef(null);
 
   const handleDuration = (videoDuration) => {
@@ -67,7 +67,7 @@ const useVideoEditor = () => {
         throw new Error("영상 편집점을 다시 확인해주세요!");
       }
 
-      setIsDoneEdit(true);
+      setIsModalOpen(true);
     } catch (err) {
       setError(err.message || "편집 요청 실패");
     }
@@ -79,9 +79,9 @@ const useVideoEditor = () => {
     playing,
     playerRef,
     error,
-    isDoneEdit,
+    isModalOpen,
+    setIsModalOpen,
     setError,
-    setIsDoneEdit,
     handlePlay,
     handlePause,
     handleDuration,
diff --git a/src/features/videoSubmit/components/EmailInputForm.jsx b/src/features/videoSubmit/components/EmailInputForm.jsx
@@ -9,12 +9,12 @@ const EmailInputForm = ({ email, onEmailChange, goToPreviousStep }) => {
       <GrFormPreviousLink
         size="27"
         onClick={goToPreviousStep}
-        className="cursor-pointer"
+        className="cursor-pointer absolute top-2 left-2"
       />
-      <div className="text-2xl mb-8 mt-4 font-mediumm">
+      <div className="text-2xl mb-6 mt-6 font-mediumm">
         결과를 받을 이메일을 입력하세요
       </div>
-      <div className="flex mb-8 text-[#515151]">
+      <div className="flex mb-6 text-[#515151]">
         <Input
           type="email"
           value={email}
diff --git a/src/features/videoSubmit/components/SubmitResultModal.jsx b/src/features/videoSubmit/components/SubmitResultModal.jsx
@@ -2,9 +2,9 @@ import PropTypes from "prop-types";
 
 import Modal from "@/shared/components/Modal";
 
-const SubmitResultModal = ({ onClick }) => {
+const SubmitResultModal = ({ onClose, onClick }) => {
   return (
-    <Modal onClick={onClick} buttonText="확인">
+    <Modal onClose={onClose} onClick={onClick}>
       <div className="text-xl mb-4 font-mediumm">제출이 완료되었습니다</div>
       <p className="text-[#515151] mb-4">
         분석이 끝나면 이메일로 결과를 보내드릴게요
@@ -14,6 +14,7 @@ const SubmitResultModal = ({ onClick }) => {
 };
 
 SubmitResultModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
 };
 
diff --git a/src/features/videoSubmit/components/VideoSubmitModal.jsx b/src/features/videoSubmit/components/VideoSubmitModal.jsx
@@ -4,20 +4,24 @@ import axios from "axios";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 
-import ErrorModal from "@/shared/components/ErrorModal";
 import LoadingModal from "@/shared/components/LoadingModal";
 import Modal from "@/shared/components/Modal";
 
 import CharacterSelectFrom from "./CharacterSelectForm";
 import EmailInputForm from "./EmailInputForm";
 import SubmitResultModal from "./SubmitResultModal";
 
-const VideoSubmitModal = ({ videoId, trim }) => {
-  const [step, setStep] = useState(1);
+const VideoSubmitModal = ({
+  videoId,
+  trim,
+  closeModal,
+  setError,
+  step,
+  setStep,
+}) => {
   const [selectedCharacter, setSelectedCharacter] = useState(null);
   const [email, setEmail] = useState("");
   const [isSubmitSuccess, setIsSubmitSuccess] = useState(false);
-  const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
 
@@ -73,43 +77,44 @@ const VideoSubmitModal = ({ videoId, trim }) => {
     setStep(1);
   };
 
-  const closeModal = () => {
-    setError(null);
-  };
-
   return (
-    <>
-      {!isSubmitSuccess && !error && (
-        <Modal
-          onClick={step === 1 ? selectCharacter : handleSubmit}
-          buttonText={step === 1 ? "다음" : "제출"}
-        >
-          {step === 1 ? (
-            <CharacterSelectFrom
-              selectedCharacter={selectedCharacter}
-              onCharacterSelect={setSelectedCharacter}
-            />
-          ) : (
-            <EmailInputForm
-              email={email}
-              onEmailChange={setEmail}
-              goToPreviousStep={goToPreviousStep}
-            />
-          )}
-        </Modal>
-      )}
+    <div>
+      <Modal
+        onClose={closeModal}
+        onClick={step === 1 ? selectCharacter : handleSubmit}
+        buttonText={step === 1 ? "다음" : "제출"}
+      >
+        {step === 1 ? (
+          <CharacterSelectFrom
+            selectedCharacter={selectedCharacter}
+            onCharacterSelect={setSelectedCharacter}
+          />
+        ) : (
+          <EmailInputForm
+            email={email}
+            onEmailChange={setEmail}
+            goToPreviousStep={goToPreviousStep}
+          />
+        )}
+      </Modal>
       {isSubmitSuccess && (
-        <SubmitResultModal onClick={handleSuccessModalClose} />
+        <SubmitResultModal
+          onClose={handleSuccessModalClose}
+          onClick={handleSuccessModalClose}
+        />
       )}
       {isLoading && <LoadingModal />}
-      {error && <ErrorModal onClick={closeModal} message={error} />}
-    </>
+    </div>
   );
 };
 
 VideoSubmitModal.propTypes = {
   videoId: PropTypes.string.isRequired,
   trim: PropTypes.arrayOf(PropTypes.number).isRequired,
+  closeModal: PropTypes.func.isRequired,
+  setError: PropTypes.func.isRequired,
+  step: PropTypes.number.isRequired,
+  setStep: PropTypes.func.isRequired,
 };
 
 export default VideoSubmitModal;
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -70,7 +70,13 @@ const MainPage = () => {
         <Button onClick={handleSubmit}>제출</Button>
       </div>
       {isLoading && <LoadingModal />}
-      {error && <ErrorModal onClick={() => setError("")} message={error} />}
+      {error && (
+        <ErrorModal
+          onClose={() => setError("")}
+          onClick={() => setError("")}
+          message={error}
+        />
+      )}
       <section className="w-full max-w-2xl mt-16">
         <h2 className="text-xl font-semibold mb-6">사용 방법</h2>
         <div className="grid gap-4 sm:grid-cols-3">
diff --git a/src/pages/VideoEditor.jsx b/src/pages/VideoEditor.jsx
@@ -20,7 +20,8 @@ const VideoEditor = () => {
     playing,
     playerRef,
     error,
-    isDoneEdit,
+    isModalOpen,
+    setIsModalOpen,
     setError,
     handlePlay,
     handlePause,
@@ -32,6 +33,7 @@ const VideoEditor = () => {
 
   const videoWrapperRef = useRef(null);
   const [playerWidth, setPlayerWidth] = useState(0);
+  const [step, setStep] = useState(1);
 
   useEffect(() => {
     if (!videoWrapperRef.current) {
@@ -54,6 +56,11 @@ const VideoEditor = () => {
   }, [videoSrc, videoId]);
 
   const closeModal = () => {
+    setStep(1);
+    setIsModalOpen(false);
+  };
+
+  const closeError = () => {
     setError(null);
 
     if (!videoSrc) navigate("/");
@@ -62,30 +69,43 @@ const VideoEditor = () => {
   return (
     <>
       {videoSrc && videoId && (
-        <div className="w-full flex flex-col items-center space-y-6">
-          <div ref={videoWrapperRef} className="w-fit mx-auto">
-            <VideoPlayer
-              ref={playerRef}
-              url={videoSrc}
-              playing={playing}
-              onDuration={handleDuration}
-              onProgress={handleProgress}
-              onPlay={handlePlay}
-              onPause={handlePause}
+        <div className="w-full flex flex-col items-center">
+          <div className="space-y-6">
+            <div ref={videoWrapperRef} className="w-fit mx-auto">
+              <VideoPlayer
+                ref={playerRef}
+                url={videoSrc}
+                playing={playing}
+                onDuration={handleDuration}
+                onProgress={handleProgress}
+                onPlay={handlePlay}
+                onPause={handlePause}
+              />
+            </div>
+            <TrimSlider
+              trim={trim}
+              duration={duration}
+              videoSrc={videoSrc}
+              onChange={handleTrimChange}
+              width={playerWidth}
             />
+            <Button onClick={handleEdit}>편집 요청</Button>
           </div>
-          <TrimSlider
-            trim={trim}
-            duration={duration}
-            videoSrc={videoSrc}
-            onChange={handleTrimChange}
-            width={playerWidth}
-          />
-          <Button onClick={handleEdit}>편집 요청</Button>
-          {isDoneEdit && <VideoSubmitModal videoId={videoId} trim={trim} />}
+          {isModalOpen && !error && (
+            <VideoSubmitModal
+              videoId={videoId}
+              trim={trim}
+              closeModal={closeModal}
+              setError={setError}
+              step={step}
+              setStep={setStep}
+            />
+          )}
         </div>
       )}
-      {error && <ErrorModal onClick={closeModal} message={error} />}
+      {error && (
+        <ErrorModal onClose={closeError} onClick={closeError} message={error} />
+      )}
     </>
   );
 };
diff --git a/src/shared/components/ErrorModal.jsx b/src/shared/components/ErrorModal.jsx
@@ -2,16 +2,17 @@ import PropTypes from "prop-types";
 
 import Modal from "./Modal";
 
-const ErrorModal = ({ onClick, message }) => {
+const ErrorModal = ({ onClose, message, onClick }) => {
   return (
-    <Modal onClick={onClick} buttonText="닫기">
-      <p className="text-lg text-red-600 mb-4">{message}</p>
+    <Modal onClose={onClose} onClick={onClick}>
+      <p className="text-lg text-red-600">{message}</p>
     </Modal>
   );
 };
 
 ErrorModal.propTypes = {
   onClick: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
   message: PropTypes.string.isRequired,
 };
 
diff --git a/src/shared/components/Modal.jsx b/src/shared/components/Modal.jsx
@@ -1,11 +1,16 @@
 import PropTypes from "prop-types";
+import { IoCloseOutline } from "react-icons/io5";
 
 import Button from "./Button";
 
-const Modal = ({ children, onClick, buttonText }) => {
+const Modal = ({ children, onClick, onClose, buttonText = "확인" }) => {
   return (
     <div className="fixed inset-0 flex justify-center items-center bg-slate-200 bg-opacity-50">
-      <div className="py-8 px-6 bg-white rounded-md">
+      <div className="py-4 px-6 bg-white rounded-md relative space-y-4">
+        <IoCloseOutline
+          className="absolute top-2 right-2 text-2xl cursor-pointer"
+          onClick={onClose}
+        />
         {children}
         <Button onClick={onClick}>{buttonText}</Button>
       </div>
@@ -15,6 +20,7 @@ const Modal = ({ children, onClick, buttonText }) => {
 
 Modal.propTypes = {
   children: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
   buttonText: PropTypes.string.isRequired,
 };
