feat: 분석 요청 성공 페이지 UI 구현 (#31)

* feat: 제출 완료 페이지 구현

* refactor: 성공 모달 관련 코드 삭제

* feat: 분석 요청 성공 페이지 라우팅 경로 추가

* chore: eslint 설정 추가

* chore: 성공 페이지 배경 이미지 추가 - close #30

* refactor: eslint 설정 변경

Author: cholulu99

public/imgs/background/ryu.png

@@ -4,12 +4,15 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import MainPage from "@/pages/MainPage";
 import VideoEditor from "@/pages/VideoEditor";
 
+import SubmitSuccess from "./pages/SubmitSuccess";
+
 const App = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/video_editor" element={<VideoEditor />} />
+        <Route path="/submit_success" element={<SubmitSuccess />} />
       </Routes>
     </BrowserRouter>
   );

src/App.jsx

@@ -9,7 +9,6 @@ import Modal from "@/shared/components/Modal";
 
 import CharacterSelectFrom from "./CharacterSelectForm";
 import EmailInputForm from "./EmailInputForm";
-import SubmitResultModal from "./SubmitResultModal";
 
 const VideoSubmitModal = ({
   videoId,
@@ -21,7 +20,6 @@ const VideoSubmitModal = ({
 }) => {
   const [selectedCharacter, setSelectedCharacter] = useState(null);
   const [email, setEmail] = useState("");
-  const [isSubmitSuccess, setIsSubmitSuccess] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
 
@@ -49,7 +47,8 @@ const VideoSubmitModal = ({
       setStep(1);
       setSelectedCharacter(null);
       setEmail("");
-      setIsSubmitSuccess(true);
+
+      navigate("/submit_success", { state: { email, selectedCharacter } });
     } catch (err) {
       setIsLoading(false);
       setError(err.response?.data?.message || err.message);
@@ -68,17 +67,12 @@ const VideoSubmitModal = ({
     }
   };
 
-  const handleSuccessModalClose = () => {
-    setIsSubmitSuccess(false);
-    navigate("/");
-  };
-
   const goToPreviousStep = () => {
     setStep(1);
   };
 
   return (
-    <div>
+    <>
       <Modal
         onClose={closeModal}
         onClick={step === 1 ? selectCharacter : handleSubmit}
@@ -97,14 +91,8 @@ const VideoSubmitModal = ({
           />
         )}
       </Modal>
-      {isSubmitSuccess && (
-        <SubmitResultModal
-          onClose={handleSuccessModalClose}
-          onClick={handleSuccessModalClose}
-        />
-      )}
       {isLoading && <LoadingModal />}
-    </div>
+    </>
   );
 };
 

src/features/videoSubmit/components/VideoSubmitModal.jsx

@@ -0,0 +1,33 @@
+import { useLocation, useNavigate } from "react-router-dom";
+
+import Button from "@/shared/components/Button";
+
+const SubmitSuccess = () => {
+  const { state } = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <img
+        src="/imgs/background/ryu.png"
+        alt="배경 이미지"
+        className="absolute top-0 left-0 w-full h-full object-cover z-0 brightness-50"
+      />
+      <div className="flex flex-col items-center justify-center">
+        <div className="relative space-y-4 max-w-md">
+          <h1 className="text-3xl font-extrabold text-white">
+            제출이 완료되었습니다!
+          </h1>
+          <p className="text-xl text-white font-medium">
+            분석이 완료되면
+            <span className="text-white font-bold">{state.email}</span>로 결과
+            메일이 전송됩니다.
+          </p>
+          <Button onClick={() => navigate("/")}>홈으로</Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SubmitSuccess;