feat: 프레임 시퀀스 불러올 때 로딩 띄우기 - close #36

Author: cholulu99

src/features/videoEditor/components/TrimSlider.jsx

@@ -6,7 +6,14 @@ import PropTypes from "prop-types";
 const THUMB_W = 60;
 const THUMB_H = 60;
 
-const TrimSlider = ({ width, duration, videoSrc, trim, onChange }) => {
+const TrimSlider = ({
+  width,
+  duration,
+  videoSrc,
+  trim,
+  onChange,
+  setIsLoading,
+}) => {
   const [thumbs, setThumbs] = useState([]);
   const videoEl = useRef(null);
   const count = Math.max(8, Math.ceil(width / THUMB_W));
@@ -53,7 +60,7 @@ const TrimSlider = ({ width, duration, videoSrc, trim, onChange }) => {
       for (let i = 0; i < count; i += 1) {
         list.push(await grab((duration * i) / (count - 1)));
       }
-
+      setIsLoading(false);
       setThumbs(list);
     };
 
@@ -113,6 +120,7 @@ TrimSlider.propTypes = {
   videoSrc: PropTypes.string.isRequired,
   trim: PropTypes.arrayOf(PropTypes.number).isRequired,
   onChange: PropTypes.func.isRequired,
+  setIsLoading: PropTypes.func.isRequired,
 };
 
 export default TrimSlider;

src/features/videoSubmit/components/VideoSubmitModal.jsx

@@ -36,11 +36,11 @@ const VideoSubmitModal = ({
       setIsLoading(true);
 
       await axios.post("/api/edit", {
+        videoId,
         trimStart: trim[0],
         trimEnd: trim[1],
-        videoId,
-        selectedCharacter,
         email,
+        selectedCharacter,
       });
 
       setIsLoading(false);

src/pages/VideoEditor.jsx

@@ -8,6 +8,7 @@ import useVideoEditor from "@/features/videoEditor/hooks/useVideoEditor";
 import VideoSubmitModal from "@/features/videoSubmit/components/VideoSubmitModal";
 import Button from "@/shared/components/Button";
 import ErrorModal from "@/shared/components/ErrorModal";
+import LoadingModal from "@/shared/components/LoadingModal";
 
 const VideoEditor = () => {
   const location = useLocation();
@@ -34,6 +35,7 @@ const VideoEditor = () => {
   const videoWrapperRef = useRef(null);
   const [playerWidth, setPlayerWidth] = useState(0);
   const [step, setStep] = useState(1);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     if (!videoWrapperRef.current) {
@@ -88,6 +90,7 @@ const VideoEditor = () => {
               videoSrc={videoSrc}
               onChange={handleTrimChange}
               width={playerWidth}
+              setIsLoading={setIsLoading}
             />
             <Button onClick={handleEdit}>편집 요청</Button>
           </div>
@@ -103,6 +106,7 @@ const VideoEditor = () => {
           )}
         </div>
       )}
+      {isLoading && <LoadingModal />}
       {error && (
         <ErrorModal onClose={closeError} onClick={closeError} message={error} />
       )}