From c853192dbc50c12ca92c9ca23fa36b139b3050d5 Mon Sep 17 00:00:00 2001
From: karnelll <165611407+karnelll@users.noreply.github.com>
Date: Thu, 28 Nov 2024 19:48:40 +0900
Subject: [PATCH 1/6] [refactor] Update exit modal functionality and improve
 data handling

---
 .../app/components/test/NaverLoginButton.tsx  | 30 ------------
 .../load-mappin-edit/components/EditLink.tsx  | 48 +++++++++----------
 .../[nonMemberId]/load-mappin-edit/page.tsx   |  9 ++--
 .../[id]/load-mappin/forms/links/page.tsx     | 13 ++---
 4 files changed, 35 insertions(+), 65 deletions(-)
 delete mode 100644 fe/src/app/components/test/NaverLoginButton.tsx

diff --git a/fe/src/app/components/test/NaverLoginButton.tsx b/fe/src/app/components/test/NaverLoginButton.tsx
deleted file mode 100644
index 884799e..0000000
--- a/fe/src/app/components/test/NaverLoginButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-export default function NaverLoginButton() {
-  const handleLogin = () => {
-    const clientId = process.env.NEXT_PUBLIC_NAVER_CLIENT_ID;
-    const redirectUri = process.env.NEXT_PUBLIC_REDIRECT_URI;
-    const state = Math.random().toString(36).substring(2, 15);
-
-    if (!clientId || !redirectUri) {
-      alert("환경 변수가 제대로 설정되지 않았습니다.");
-      return;
-    }
-
-    const naverAuthUrl = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${clientId}&redirect_uri=${encodeURIComponent(
-      redirectUri
-    )}&state=${state}`;
-
-    window.location.href = naverAuthUrl;
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={handleLogin}
-      className="bg-green-500 text-white p-4 rounded-lg"
-    >
-      Sign in with Naver
-    </button>
-  );
-}
diff --git a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx
index 82d34a2..1cab0b3 100644
--- a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx
+++ b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx
@@ -32,7 +32,7 @@ export default function LinkFieldEdit({
           id: nanoid(),
           text: val,
           error: "",
-          isValid: true,
+          isValid: !!val,
           isTyping: false,
         }))
       : [
@@ -110,28 +110,6 @@ export default function LinkFieldEdit({
     }
   };
 
-  const handlePasteFromClipboard = async (fieldId: string) => {
-    try {
-      const clipboardText = await navigator.clipboard.readText();
-
-      const cleanedValue = cleanURL(clipboardText);
-
-      if (cleanedValue) {
-        setInputFields((prevFields) =>
-          prevFields.map((fieldItem) =>
-            fieldItem.id === fieldId
-              ? { ...fieldItem, text: cleanedValue, isValid: false }
-              : fieldItem
-          )
-        );
-
-        validateLink(fieldId, cleanedValue, label);
-      }
-    } catch (error) {
-      console.error("클립보드에서 텍스트를 읽는 데 실패했습니다:", error);
-    }
-  };
-
   const handleInputChange = (fieldId: string, inputValue: string) => {
     const cleanedValue = cleanURL(inputValue);
     setInputFields((prevFields) =>
@@ -147,14 +125,33 @@ export default function LinkFieldEdit({
     }
   };
 
-  const handleFocus = (fieldId: string) => {
+  const handleFocus = async (fieldId: string) => {
     setInputFields((prevFields) =>
       prevFields.map((fieldItem) =>
         fieldItem.id === fieldId ? { ...fieldItem, isTyping: true } : fieldItem
       )
     );
 
-    handlePasteFromClipboard(fieldId);
+    // 자동 클립보드 붙여넣기 기능
+    if (navigator.clipboard) {
+      try {
+        const clipboardText = await navigator.clipboard.readText();
+        const cleanedValue = cleanURL(clipboardText);
+        if (cleanedValue) {
+          setInputFields((prevFields) =>
+            prevFields.map((fieldItem) =>
+              fieldItem.id === fieldId
+                ? { ...fieldItem, text: cleanedValue, isValid: false }
+                : fieldItem
+            )
+          );
+
+          validateLink(fieldId, cleanedValue, label);
+        }
+      } catch (error) {
+        console.error("클립보드에서 텍스트를 읽는 데 실패했습니다:", error);
+      }
+    }
   };
 
   const handleBlur = (fieldId: string) => {
@@ -199,6 +196,7 @@ export default function LinkFieldEdit({
   };
 
   const getClassNames = (item: InputField): string => {
+    if (!item.text) return "bg-[#F8F8F8]";
     if (item.error && !item.isTyping)
       return "border-2 border-[#f73a2c] bg-[#F8F8F8]";
     if (item.isValid) return "bg-[#EBF4FD] text-[#3a91ea]";
diff --git a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx
index 0708664..fe69f59 100644
--- a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx
+++ b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/page.tsx
@@ -98,13 +98,14 @@ export default function LinkEditPage() {
   };
 
   const handleBack = () => {
-    router.push(`/event-maps/${id}`);
+    setShowExitModal(true); // ExitModal을 표시
   };
 
-  const handleExit = () => {
+  const handleExitConfirm = () => {
+    // 데이터 삭제 후 뒤로가기
     localStorage.removeItem("userData");
     localStorage.removeItem("formData");
-    router.back();
+    router.push(`/event-maps/${id}`);
   };
 
   const handleCancel = () => {
@@ -175,7 +176,7 @@ export default function LinkEditPage() {
         />
       </div>
       {showExitModal && (
-        <ExitModal onCancel={handleCancel} onExit={handleExit} />
+        <ExitModal onCancel={handleCancel} onExit={handleExitConfirm} />
       )}
     </div>
   );
diff --git a/fe/src/app/event-maps/[id]/load-mappin/forms/links/page.tsx b/fe/src/app/event-maps/[id]/load-mappin/forms/links/page.tsx
index ccdeb7b..83432e4 100644
--- a/fe/src/app/event-maps/[id]/load-mappin/forms/links/page.tsx
+++ b/fe/src/app/event-maps/[id]/load-mappin/forms/links/page.tsx
@@ -63,7 +63,6 @@ export default function LinksPage() {
         localStorage.clear();
         router.push(`/event-maps/${id}`);
       } else if (response.status === 409) {
-        // 405 에러 처리
         alert("이미 존재하는 이름입니다. 다시 시도해주세요.");
       } else {
         setIsFormComplete(false);
@@ -93,11 +92,13 @@ export default function LinksPage() {
       </div>
 
       <div className="flex-1 px-[16px] pt-[72px] w-full overflow-y-auto pb-[100px]">
-        <div className="text-[#2c2c2c] text-[22px] font-semibold leading-[30px] font-['Pretendard']">
-          마음에 쏙 든 공간을 불러와요
-        </div>
-        <div className="text-[#555555] text-base font-medium leading-relaxed font-['Pretendard'] mb-[24px]">
-          네이버지도에 북마크 해 둔 공간을 불러와요
+        <div className="mt-[16px] mb-[36px]">
+          <div className="text-[#2c2c2c] text-[22px] font-semibold leading-[30px] font-['Pretendard']">
+            마음에 쏙 든 공간을 불러와요
+          </div>
+          <div className="text-[#555555] text-base font-medium leading-relaxed font-['Pretendard'] mt-2">
+            네이버지도에 북마크 해 둔 공간을 불러와요
+          </div>
         </div>
 
         <form onSubmit={handleSubmit} className="w-full">

From 6ae43466c7dd4aba0a64e765f0fe5930a725d981 Mon Sep 17 00:00:00 2001
From: karnelll <165611407+karnelll@users.noreply.github.com>
Date: Thu, 28 Nov 2024 21:21:12 +0900
Subject: [PATCH 2/6] [fix] implement feedback

---
 .../load-mappin-edit/components/EditLink.tsx  |  1 -
 .../load-mappin-edit/components/ExitModal.tsx |  1 -
 .../eventcreate-page/\butils/formHelpers.ts"  |  8 +++++
 .../components/EventNameInput.tsx             | 30 ++++++++++++-------
 .../eventcreate-page/location-search/page.tsx |  5 ++--
 fe/src/app/robots.ts                          |  1 -
 6 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 "fe/src/app/eventcreate-page/\butils/formHelpers.ts"

diff --git a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx
index 1cab0b3..3b7fffb 100644
--- a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx
+++ b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/EditLink.tsx
@@ -132,7 +132,6 @@ export default function LinkFieldEdit({
       )
     );
 
-    // 자동 클립보드 붙여넣기 기능
     if (navigator.clipboard) {
       try {
         const clipboardText = await navigator.clipboard.readText();
diff --git a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/ExitModal.tsx b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/ExitModal.tsx
index 0ca1649..16357c1 100644
--- a/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/ExitModal.tsx
+++ b/fe/src/app/event-maps/[id]/[nonMemberId]/load-mappin-edit/components/ExitModal.tsx
@@ -36,7 +36,6 @@ const ExitModal: React.FC<ExitModalProps> = function ExitModal({
           </div>
         </div>
 
-        {/* Buttons */}
         <div className="flex border-t border-[#f0f0f0]">
           <button
             type="button"
diff --git "a/fe/src/app/eventcreate-page/\butils/formHelpers.ts" "b/fe/src/app/eventcreate-page/\butils/formHelpers.ts"
new file mode 100644
index 0000000..da04dba
--- /dev/null
+++ "b/fe/src/app/eventcreate-page/\butils/formHelpers.ts"
@@ -0,0 +1,8 @@
+export const cleanString = (value: string): string => value.trim();
+
+export const isValidLength = (value: string, minLength: number): boolean =>
+  value.length >= minLength;
+
+export const generateDefaultEventName = (
+  location: string | undefined
+): string => (location ? `${location} 모임` : "");
diff --git a/fe/src/app/eventcreate-page/components/EventNameInput.tsx b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
index 785e1bd..fb6ec53 100644
--- a/fe/src/app/eventcreate-page/components/EventNameInput.tsx
+++ b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
@@ -1,11 +1,22 @@
 "use client";
 
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import Image from "next/image";
-import { EventNameInputProps } from "@/app/eventcreate-page/types/types";
 import classNames from "classnames";
+import {
+  cleanString,
+  isValidLength,
+  generateDefaultEventName,
+} from "../utils/formHelpers";
 
-function EventNameInput({
+interface EventNameInputProps {
+  className?: string;
+  selectedLocation?: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function EventNameInput({
   className,
   selectedLocation,
   onChange,
@@ -13,11 +24,11 @@ function EventNameInput({
 }: EventNameInputProps) {
   const [hasUserEdited, setHasUserEdited] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
-  const showWarning = hasUserEdited && value.trim().length < 1;
+  const showWarning = hasUserEdited && !isValidLength(cleanString(value), 1);
 
   useEffect(() => {
     if (!hasUserEdited) {
-      const newEventName = selectedLocation ? `${selectedLocation} 모임` : "";
+      const newEventName: string = generateDefaultEventName(selectedLocation);
       onChange(newEventName);
     }
   }, [selectedLocation, onChange, hasUserEdited]);
@@ -50,7 +61,7 @@ function EventNameInput({
         className={classNames(
           "relative w-[328px] h-14 p-4 bg-[#f7f7f7] rounded-lg flex justify-between items-center border-2",
           {
-            "border-danger-base": showWarning,
+            "border-[#f73a2c]": showWarning,
             "border-[#555555]": isTyping,
             "border-transparent": !isTyping && !showWarning,
           }
@@ -66,13 +77,12 @@ function EventNameInput({
           className={classNames(
             "bg-transparent text-base font-medium font-['Pretendard'] leading-normal outline-none flex-grow",
             {
-              "text-[#2c2c2c]": isTyping || value.trim().length > 0,
-              "text-[#8e8e8e]": !isTyping && value.trim().length === 0,
+              "text-[#2c2c2c]": isTyping || cleanString(value).length > 0,
+              "text-[#8e8e8e]": !isTyping && cleanString(value).length === 0,
             }
           )}
           aria-label="이벤트 이름 입력"
         />
-
         {value && (
           <button
             type="button"
@@ -99,5 +109,3 @@ function EventNameInput({
     </div>
   );
 }
-
-export default EventNameInput;
diff --git a/fe/src/app/eventcreate-page/location-search/page.tsx b/fe/src/app/eventcreate-page/location-search/page.tsx
index 5b5fc82..b96de4a 100644
--- a/fe/src/app/eventcreate-page/location-search/page.tsx
+++ b/fe/src/app/eventcreate-page/location-search/page.tsx
@@ -63,11 +63,10 @@ function LocationSearch() {
     };
   }, [location, debouncedFetch]);
 
+  // Focus the input field on component mount
   useEffect(() => {
     if (inputRef.current) {
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 100);
+      inputRef.current.focus(); // Automatically focus on the input field
     }
   }, []);
 
diff --git a/fe/src/app/robots.ts b/fe/src/app/robots.ts
index bd3a760..533f301 100644
--- a/fe/src/app/robots.ts
+++ b/fe/src/app/robots.ts
@@ -1,4 +1,3 @@
-// app/robots.ts
 import { MetadataRoute } from "next";
 
 export default function robots(): MetadataRoute.Robots {

From bad29c289baf3b0f9eb16587589838a755967b8e Mon Sep 17 00:00:00 2001
From: karnelll <165611407+karnelll@users.noreply.github.com>
Date: Thu, 28 Nov 2024 21:37:09 +0900
Subject: [PATCH 3/6] [chore] enhance event name input utility

---
 .../eventcreate-page/components/EventNameInput.tsx    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/fe/src/app/eventcreate-page/components/EventNameInput.tsx b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
index fb6ec53..27e415c 100644
--- a/fe/src/app/eventcreate-page/components/EventNameInput.tsx
+++ b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
@@ -24,14 +24,15 @@ export default function EventNameInput({
 }: EventNameInputProps) {
   const [hasUserEdited, setHasUserEdited] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
-  const showWarning = hasUserEdited && !isValidLength(cleanString(value), 1);
 
   useEffect(() => {
-    if (!hasUserEdited) {
+    if (!hasUserEdited && !value) {
       const newEventName: string = generateDefaultEventName(selectedLocation);
-      onChange(newEventName);
+      if (newEventName) {
+        onChange(newEventName);
+      }
     }
-  }, [selectedLocation, onChange, hasUserEdited]);
+  }, [selectedLocation, onChange, hasUserEdited, value]);
 
   const handleInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -51,6 +52,8 @@ export default function EventNameInput({
     onChange("");
   }, [onChange]);
 
+  const showWarning = hasUserEdited && !isValidLength(cleanString(value), 1);
+
   return (
     <div className={`relative flex flex-col mt-4 ${className}`}>
       <label className="text-[#2c2c2c] text-[22px] font-semibold font-['Pretendard'] leading-[30px] mb-2">

From 216f03f7a6dc90338be3d190011978ff1564c170 Mon Sep 17 00:00:00 2001
From: karnelll <165611407+karnelll@users.noreply.github.com>
Date: Thu, 28 Nov 2024 22:12:03 +0900
Subject: [PATCH 4/6] [chore] enhance event name input utility

---
 .../eventcreate-page/components/EventNameInput.tsx    | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/fe/src/app/eventcreate-page/components/EventNameInput.tsx b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
index 27e415c..82a9ecf 100644
--- a/fe/src/app/eventcreate-page/components/EventNameInput.tsx
+++ b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
@@ -26,19 +26,18 @@ export default function EventNameInput({
   const [isTyping, setIsTyping] = useState(false);
 
   useEffect(() => {
-    if (!hasUserEdited && !value) {
-      const newEventName: string = generateDefaultEventName(selectedLocation);
-      if (newEventName) {
-        onChange(newEventName);
-      }
+    if (!hasUserEdited && !cleanString(value)) {
+      const newEventName = generateDefaultEventName(selectedLocation);
+      if (newEventName) onChange(newEventName);
     }
   }, [selectedLocation, onChange, hasUserEdited, value]);
 
   const handleInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
+      const trimmedValue = cleanString(e.target.value);
       setHasUserEdited(true);
       setIsTyping(true);
-      onChange(e.target.value);
+      onChange(trimmedValue);
     },
     [onChange]
   );

From aeee6beb24934eeadb8eeb3a4785a5eb5db6d62d Mon Sep 17 00:00:00 2001
From: karnelll <165611407+karnelll@users.noreply.github.com>
Date: Thu, 28 Nov 2024 22:59:09 +0900
Subject: [PATCH 5/6] Add event name feature

---
 .../components/EventNameInput.tsx              | 16 +++++++---------
 .../eventcreate-page/location-search/page.tsx  |  3 +--
 fe/src/app/eventcreate-page/page.tsx           | 18 ++++++++----------
 .../app/eventcreate-page/utils/formHelpers.ts  |  0
 4 files changed, 16 insertions(+), 21 deletions(-)
 rename "fe/src/app/eventcreate-page/\butils/formHelpers.ts" => fe/src/app/eventcreate-page/utils/formHelpers.ts (100%)

diff --git a/fe/src/app/eventcreate-page/components/EventNameInput.tsx b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
index 82a9ecf..8d90214 100644
--- a/fe/src/app/eventcreate-page/components/EventNameInput.tsx
+++ b/fe/src/app/eventcreate-page/components/EventNameInput.tsx
@@ -7,7 +7,7 @@ import {
   cleanString,
   isValidLength,
   generateDefaultEventName,
-} from "../utils/formHelpers";
+} from "../utils/formHelpers";
 
 interface EventNameInputProps {
   className?: string;
@@ -24,20 +24,20 @@ export default function EventNameInput({
 }: EventNameInputProps) {
   const [hasUserEdited, setHasUserEdited] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
+  const showWarning = hasUserEdited && !isValidLength(cleanString(value), 1);
 
   useEffect(() => {
-    if (!hasUserEdited && !cleanString(value)) {
-      const newEventName = generateDefaultEventName(selectedLocation);
-      if (newEventName) onChange(newEventName);
+    if (!hasUserEdited) {
+      const newEventName: string = generateDefaultEventName(selectedLocation);
+      onChange(newEventName);
     }
-  }, [selectedLocation, onChange, hasUserEdited, value]);
+  }, [selectedLocation, onChange, hasUserEdited]);
 
   const handleInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      const trimmedValue = cleanString(e.target.value);
       setHasUserEdited(true);
       setIsTyping(true);
-      onChange(trimmedValue);
+      onChange(e.target.value);
     },
     [onChange]
   );
@@ -51,8 +51,6 @@ export default function EventNameInput({
     onChange("");
   }, [onChange]);
 
-  const showWarning = hasUserEdited && !isValidLength(cleanString(value), 1);
-
   return (
     <div className={`relative flex flex-col mt-4 ${className}`}>
       <label className="text-[#2c2c2c] text-[22px] font-semibold font-['Pretendard'] leading-[30px] mb-2">
diff --git a/fe/src/app/eventcreate-page/location-search/page.tsx b/fe/src/app/eventcreate-page/location-search/page.tsx
index b96de4a..61e3750 100644
--- a/fe/src/app/eventcreate-page/location-search/page.tsx
+++ b/fe/src/app/eventcreate-page/location-search/page.tsx
@@ -63,10 +63,9 @@ function LocationSearch() {
     };
   }, [location, debouncedFetch]);
 
-  // Focus the input field on component mount
   useEffect(() => {
     if (inputRef.current) {
-      inputRef.current.focus(); // Automatically focus on the input field
+      inputRef.current.focus();
     }
   }, []);
 
diff --git a/fe/src/app/eventcreate-page/page.tsx b/fe/src/app/eventcreate-page/page.tsx
index f630150..eedf5f4 100644
--- a/fe/src/app/eventcreate-page/page.tsx
+++ b/fe/src/app/eventcreate-page/page.tsx
@@ -46,10 +46,6 @@ function EventCreatePage() {
       setIsSubmitting(false);
     }
   };
-  useEffect(() => {
-    setLocation(null); // selectedLocation 초기화
-    setEventName(""); // eventName 초기화
-  }, [setLocation]);
 
   useEffect(() => {
     if (uuid) router.push(`/event-maps/${uuid}`);
@@ -64,12 +60,14 @@ function EventCreatePage() {
           className="mt-[12px] w-full"
           value={selectedLocation?.name || ""}
         />
-        <EventNameInput
-          className="mt-[40px] w-full"
-          value={eventName}
-          selectedLocation={selectedLocation?.name || ""}
-          onChange={setEventName}
-        />
+        <div className="relative mt-[40px] w-full">
+          <EventNameInput
+            className="w-full"
+            value={eventName}
+            selectedLocation={selectedLocation?.name || ""}
+            onChange={setEventName}
+          />
+        </div>
       </div>
       <div className="w-full fixed bottom-[45px] left-0 flex justify-center">
         <Button
diff --git "a/fe/src/app/eventcreate-page/\butils/formHelpers.ts" b/fe/src/app/eventcreate-page/utils/formHelpers.ts
similarity index 100%
rename from "fe/src/app/eventcreate-page/\butils/formHelpers.ts"
rename to fe/src/app/eventcreate-page/utils/formHelpers.ts

From 94088e2ecc278df7f0a6888c0be8962d8a9c9551 Mon Sep 17 00:00:00 2001
From: karnelll <165611407+karnelll@users.noreply.github.com>
Date: Thu, 28 Nov 2024 23:45:02 +0900
Subject: [PATCH 6/6] =?UTF-8?q?[fix]=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95=20-=20=EC=99=BC=EC=AA=BD=20=EB=B2=BD=20?=
 =?UTF-8?q?=EA=B0=84=EA=B2=A9=2016px=20=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../load-mappin/forms/links/\bcomponents/BottomSheet.tsx"    | 2 +-
 .../app/event-maps/[id]/load-mappin/forms/tooltip/page.tsx   | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git "a/fe/src/app/event-maps/[id]/load-mappin/forms/links/\bcomponents/BottomSheet.tsx" "b/fe/src/app/event-maps/[id]/load-mappin/forms/links/\bcomponents/BottomSheet.tsx"
index eefb284..994f4b4 100644
--- "a/fe/src/app/event-maps/[id]/load-mappin/forms/links/\bcomponents/BottomSheet.tsx"
+++ "b/fe/src/app/event-maps/[id]/load-mappin/forms/links/\bcomponents/BottomSheet.tsx"
@@ -18,7 +18,7 @@ export default function BottomSheet() {
 
   return (
     <div
-      className={`fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[556px] bg-[#1d1d1d] rounded-t-[20px] transition-transform z-[1000] duration-700 ${
+      className={`fixed bottom-0 left-1/2 transform -translate-x-1/2 w-[400px] min-w-[400px] h-[556px] bg-[#1d1d1d] rounded-t-[20px] transition-transform z-[1000] duration-700 ${
         isVisible ? "translate-y-0" : "translate-y-full"
       }`}
     >
diff --git a/fe/src/app/event-maps/[id]/load-mappin/forms/tooltip/page.tsx b/fe/src/app/event-maps/[id]/load-mappin/forms/tooltip/page.tsx
index b7b0d70..7cf8b39 100644
--- a/fe/src/app/event-maps/[id]/load-mappin/forms/tooltip/page.tsx
+++ b/fe/src/app/event-maps/[id]/load-mappin/forms/tooltip/page.tsx
@@ -66,18 +66,17 @@ export default function ToolTipPage() {
       className="w-full h-screen bg-white flex flex-col items-center"
       {...handlers}
     >
-      {/* 고정된 넓이 설정 */}
       <div className="w-full max-w-[500px] px-4 mx-auto">
         <Navigation />
       </div>
-      <div className="w-full max-w-[500px] px-4 mx-auto mt-16 mb-[48px]">
+      <div className="w-[360px] px-4 mx-auto mt-16 mb-[48px]">
         <h1 className="text-[#2c2c2c] text-[22px] font-semibold font-['Pretendard'] leading-[30px]">
           이렇게 공유 버튼이 안 보이나요?
           <br />
           이렇게 하면 해결 완
         </h1>
       </div>
-      <div className="w-full max-w-[500px] px-4 mx-auto mb-[20px]">
+      <div className="w-fix max-w-[500px] px-4 mx-auto mb-[20px]">
         <div className="bg-[#F8F8F8] rounded-xl border border-[#F0F0F0] p-[20px]">
           {slides[currentSlide].step && (
             <div className="flex items-center gap-2 mb-2">