add cleartimout

Author: winverse

src/components/write/PublishSeriesCreate.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, FormEvent } from 'react';
+import React, { useState, useEffect, FormEvent, useRef } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { themedPalette } from '../../lib/styles/themes';
 import OutsideClickHandler from 'react-outside-click-handler';
@@ -110,8 +110,8 @@ const PublishSeriesCreate: React.FC<PublishSeriesCreateProps> = ({
     urlSlug: '',
   });
   const [editing, setEditing] = useState<boolean>(false);
-
   const [defaultUrlSlug, setDefaultUrlSlug] = useState('');
+  const hideTimeoutId = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -137,15 +137,33 @@ const PublishSeriesCreate: React.FC<PublishSeriesCreateProps> = ({
     setEditing(true);
   }, [form.urlSlug]);
 
+  useEffect(() => {
+    return () => {
+      if (hideTimeoutId.current) {
+        clearTimeout(hideTimeoutId.current);
+      }
+    };
+  }, [hideTimeoutId]);
+
   const onHide = () => {
     setDisappear(true);
-    setTimeout(() => {
+    const timeout = setTimeout(() => {
       setOpen(false);
       setDisappear(false);
       setShowOpenBlock(false);
     }, 125);
+    const timeoutId = timeout;
+    hideTimeoutId.current = timeoutId;
   };
 
+  useEffect(() => {
+    return () => {
+      if (hideTimeoutId.current) {
+        clearTimeout(hideTimeoutId.current);
+      }
+    };
+  }, []);
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     if (form.name.trim() === '') {

src/containers/write/MarkdownEditorContainer.tsx

@@ -180,7 +180,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
           },
         });
 
-        if (!response || !response.data) return;
+        if (!response.data?.writePost) return;
         const { id } = response.data.writePost;
         dispatch(setWritePostId(id));
         history.replace(`/write?id=${id}`);
@@ -277,7 +277,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
           },
         });
 
-        if (!response || !response.data) return;
+        if (!response.data?.writePost) return;
         id = response.data.writePost.id;
         dispatch(setWritePostId(id));
         history.replace(`/write?id=${id}`);

src/containers/write/PublishActionButtonsContainer.tsx

@@ -100,12 +100,15 @@ const PublishActionButtonsContainer: React.FC<
         variables: variables,
       });
 
-      if (!response || !response.data) return;
+      if (!response.data?.writePost) {
+        toast.error('포스트 작성 실패');
+        return;
+      }
+
       const { user, url_slug } = response.data.writePost;
       await client.resetStore();
       history.push(`/@${user.username}/${url_slug}`);
     } catch (error) {
-      console.log('writePost error', error);
       toast.error('포스트 작성 실패');
     }
   };
@@ -119,12 +122,16 @@ const PublishActionButtonsContainer: React.FC<
           ...variables,
         },
       });
-      if (!response || !response.data) return;
+
+      if (!response.data?.editPost) {
+        toast.error('포스트 수정 실패');
+        return;
+      }
+
       const { user, url_slug } = response.data.editPost;
       await client.resetStore();
       history.push(`/@${user.username}/${url_slug}`);
     } catch (error) {
-      console.log('editPost error', error);
       toast.error('포스트 수정 실패');
     }
   };