From 96c41b5d0e102ef627dd088fe83067ba74ca60fb Mon Sep 17 00:00:00 2001
From: ssumanlife <ksm9805@naver.com>
Date: Mon, 4 Nov 2024 21:07:49 +0900
Subject: [PATCH] =?UTF-8?q?feat:=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/addTravel/FloatingMenu.tsx |  9 ++++++---
 src/hooks/useHandleImageUpload.tsx        | 23 ++++++++++++++++-------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/addTravel/FloatingMenu.tsx b/src/components/addTravel/FloatingMenu.tsx
index db1ed3c..4e22fcb 100644
--- a/src/components/addTravel/FloatingMenu.tsx
+++ b/src/components/addTravel/FloatingMenu.tsx
@@ -11,8 +11,11 @@ const FloatingMenu = ({ onClick }: FloatingMenuProps) => {
   const sections = useSectionsStore((state) => state.sections);
   const setOpenSection = useSectionsStore((state) => state.setOpenSection);
   const location = useLocation();
+
+  const menuHeight = location.pathname === '/add-for-find-guide' ? '260px' : '520px';
+
   return (
-    <MenuContainer location={location.pathname}>
+    <MenuContainer menuHeight={menuHeight}>
       {location.pathname === '/add-for-find-guide' ? (
         <>
           <MenuItem>
@@ -112,11 +115,11 @@ const FloatingMenu = ({ onClick }: FloatingMenuProps) => {
 
 export default FloatingMenu;
 
-const MenuContainer = styled.div<{ location: string }>`
+const MenuContainer = styled.div<{ menuHeight: string }>`
   position: sticky;
   top: 20px;
   min-width: 240px;
-  height: ${({ location }) => (location === '/add-for-find-guide' ? '260px' : '520px')};
+  height: ${({ menuHeight }) => menuHeight};
   padding: 16px;
   border: 1px solid #d2d2d2;
   border-radius: 8px;
diff --git a/src/hooks/useHandleImageUpload.tsx b/src/hooks/useHandleImageUpload.tsx
index e306346..397de10 100644
--- a/src/hooks/useHandleImageUpload.tsx
+++ b/src/hooks/useHandleImageUpload.tsx
@@ -1,21 +1,30 @@
 import useGetImageUrls from '@/hooks/useGetImageUrls';
 import { ImageStore } from '@/stores/useImageStore';
 import prepareImageUpload from '@/utils/prepareImageUpload';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const useHandleImageUpload = (images: ImageStore) => {
   const [enabled, setEnabled] = useState(false);
   const formData = new FormData();
   const { data: uploadedImages } = useGetImageUrls({ formData, enabled });
 
+  useEffect(() => {
+    return () => {
+      setEnabled(false);
+    };
+  }, []);
+
   const uploadImages = () => {
     if (images.thumbnail === '') return;
-
-    setEnabled(true);
-    prepareImageUpload(images, formData);
-    if (uploadedImages) {
-      setEnabled(false);
-      console.log(uploadedImages);
+    try {
+      setEnabled(true);
+      prepareImageUpload(images, formData);
+      if (uploadedImages) {
+        setEnabled(false);
+        console.log(uploadedImages);
+      }
+    } catch (error) {
+      console.warn(error);
     }
   };