From cbb6146df9714ef964ba9184730d4ab84909e46f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=89=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=92=E1=85=B1?= <whistle_js@naver.com>
Date: Wed, 21 Feb 2024 03:20:48 +0900
Subject: [PATCH] =?UTF-8?q?feature-074:=20=ED=95=9C=EA=B8=80=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home/ProgressBar.tsx           |  4 ++--
 .../SummaryDetailBox/NoteBox/NoteItem.tsx     |  2 +-
 .../ScriptEditor/ScriptContentEditor.tsx      |  4 +++-
 src/pages/HomePage.tsx                        | 19 ++++---------------
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/components/Home/ProgressBar.tsx b/src/components/Home/ProgressBar.tsx
index 1327df2..527583b 100644
--- a/src/components/Home/ProgressBar.tsx
+++ b/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>
diff --git a/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteItem.tsx b/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteItem.tsx
index 7953dee..6c05121 100644
--- a/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteItem.tsx
+++ b/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);
diff --git a/src/components/SummaryPage/SummaryScriptBox/ScriptEditor/ScriptContentEditor.tsx b/src/components/SummaryPage/SummaryScriptBox/ScriptEditor/ScriptContentEditor.tsx
index 570d7a8..6ea84c0 100644
--- a/src/components/SummaryPage/SummaryScriptBox/ScriptEditor/ScriptContentEditor.tsx
+++ b/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)}
     />
   );
 };
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 71b6aff..28ec0a5 100644
--- a/src/pages/HomePage.tsx
+++ b/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 {