diff --git a/index.html b/index.html
index bc7dc38a..3f6840a4 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,20 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=0"
+    />
+
+    <meta property="og:title" content="레큐 lecue" />
+    <meta
+      property="og:description"
+      content="레큐노트에 우리의 마음을 담아 전달해요"
+    />
+    <meta
+      property="og:image"
+      content="https://dzfv99wxq6tx0.cloudfront.net/lecue.png"
+    />
 
     <title>Lecue</title>
   </head>
diff --git a/src/LecueNote/components/ShowColorChart/index.tsx b/src/LecueNote/components/ShowColorChart/index.tsx
index 1f009a2d..507db0e8 100644
--- a/src/LecueNote/components/ShowColorChart/index.tsx
+++ b/src/LecueNote/components/ShowColorChart/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
 import { IcCameraSmall } from '../../../assets';
 import { BG_COLOR_CHART } from '../../constants/colorChart';
@@ -19,7 +19,8 @@ function ShowColorChart({
   handleIconFn,
 }: ShowColorChartProps) {
   const imgRef = useRef<HTMLInputElement | null>(null);
-  const { data } = useGetPresignedUrl();
+  // 여기
+  useGetPresignedUrl(setPresignedUrl, setFileName);
 
   const handleImageUpload = () => {
     const fileInput = imgRef.current;
@@ -44,13 +45,6 @@ function ShowColorChart({
     }
   };
 
-  useEffect(() => {
-    if (data !== undefined) {
-      setPresignedUrl(data.data.url);
-      setFileName(data.data.fileName);
-    }
-  }, [data]);
-
   return (
     <S.Wrapper>
       {colorChart === BG_COLOR_CHART && (
diff --git a/src/LecueNote/hooks/useGetPresignedUrl.ts b/src/LecueNote/hooks/useGetPresignedUrl.ts
index 3ffeaa7d..573b8471 100644
--- a/src/LecueNote/hooks/useGetPresignedUrl.ts
+++ b/src/LecueNote/hooks/useGetPresignedUrl.ts
@@ -3,13 +3,20 @@ import { useNavigate } from 'react-router-dom';
 
 import getPresignedUrl from '../api/getPresignedUrl';
 
-const useGetPresignedUrl = () => {
+const useGetPresignedUrl = (
+  setPresignedUrl: React.Dispatch<React.SetStateAction<string>>,
+  setFileName: React.Dispatch<React.SetStateAction<string>>,
+) => {
   const navigate = useNavigate();
 
   const { isLoading, data } = useQuery({
     queryKey: ['get-presigned-url'],
     queryFn: () => getPresignedUrl(),
     onError: () => navigate('/error'),
+    onSuccess: (data) => {
+      setPresignedUrl(data.data.url);
+      setFileName(data.data.fileName);
+    },
     refetchOnWindowFocus: false,
   });