Feature 074

src/components/Home/ProgressBar.tsx

@@ -67,7 +67,7 @@ const ProgressBar = () => {
 
         {['CONTINUE', 'STOP', 'ERROR'].includes(status) && (
           <div className="converting-text">
-            <button
+            {/* <button
               className="converting-btn"
               style={{
                 backgroundColor:
@@ -77,7 +77,7 @@ const ProgressBar = () => {
               }}
             >
               {status === 'CONTINUE' ? '변환중지' : '다시 시작'}
-            </button>
+            </button> */}
 
             <div className="converting-percentage">{modelingProgress}%</div>
           </div>

src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteItem.tsx

@@ -43,7 +43,7 @@ const NoteItem = ({
   ) => {
     if (e.key === 'Escape') {
       onDisableEditable();
-    } else if (e.key === 'Enter') {
+    } else if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
       e.preventDefault();
 
       onEditAndNext && onEditAndNext(noteText);

src/components/SummaryPage/SummaryScriptBox/ScriptEditor/ScriptContentEditor.tsx

@@ -52,10 +52,12 @@ const ScriptContentEditor = ({ content, onChange }: Props) => {
       className="script-content-edit"
       contentEditable
       dangerouslySetInnerHTML={{ __html: content }}
-      onInput={({ target }) => {
+      onKeyDown={({ target, nativeEvent }) => {
+        if (nativeEvent.isComposing) return;
         caretPos.current = getCaret(contentRef.current as HTMLDivElement);
         onChange((target as HTMLDivElement).innerText);
       }}
+      onBlur={({ target }) => onChange((target as HTMLDivElement).innerText)}
     />
   );
 };

src/pages/HomePage.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { IVideoProps } from 'types/videos';
 
 import {
   getRecentVideos,
   getAllDummyVideos,
   createDummyVideoToMine,
-  createVideoAPI,
 } from '@/apis/videos';
 
 import SearchYoutube from '@/components/Home/SearchYoutube';
@@ -15,6 +14,7 @@ import InsightVideos from '@/components/Home/InsightVideos';
 import RecommendationModal from '@/components/modals/RecommendationModal';
 
 import useCreateToast from '@/hooks/useCreateToast';
+import useCreateVideo from '@/hooks/useCreateVideo';
 
 import { HomePageContainer } from '@/styles/HomepageStyle';
 
@@ -27,12 +27,13 @@ const HomePage: React.FC = () => {
   const userToken = useRecoilValue(userTokenState);
   const isOpenModal = useRecoilValue(recommendationModalState);
   const setIsSideBarOpen = useSetRecoilState(isSideBarOpenState);
-  const [modelingData, setModelingData] = useRecoilState(modelingDataState);
+  const setModelingData = useSetRecoilState(modelingDataState);
 
   const [recentVideos, setRecentVideos] = useState<IVideoProps[]>([]);
   const [dummyVideos, setDummyVideos] = useState<IVideoProps[]>([]);
 
   const { createToast } = useCreateToast();
+  const { createVideo } = useCreateVideo();
 
   const searchRef = useRef(null);
 
@@ -69,18 +70,6 @@ const HomePage: React.FC = () => {
   }, [setIsSideBarOpen, userToken]);
 
   useEffect(() => {
-    const createVideo = async () => {
-      if (!modelingData) return;
-
-      try {
-        await createVideoAPI(modelingData);
-      } catch (e) {
-        console.error(e);
-      }
-
-      setModelingData(null);
-    };
-
     if (userToken) {
       createVideo();
     } else {