From 0eb55d620e8b4e9a61f93839ebbcf5487eefbc4b Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Sun, 9 Jun 2024 16:15:21 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9C=84=EC=B9=98=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=20=EC=9E=AC=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20x=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/CloseBtn.svg           | 16 ++++++++++++++++
 src/components/map/UseMap.tsx | 17 ++++++++---------
 2 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 public/CloseBtn.svg

diff --git a/public/CloseBtn.svg b/public/CloseBtn.svg
new file mode 100644
index 0000000..4bba680
--- /dev/null
+++ b/public/CloseBtn.svg
@@ -0,0 +1,16 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1000011348">
+<g id="Vector 2316">
+<path d="M1 1L14 14" stroke="#212121" stroke-linecap="round"/>
+<path d="M1 1L14 14" stroke="black" stroke-opacity="0.2" stroke-linecap="round"/>
+<path d="M1 1L14 14" stroke="black" stroke-opacity="0.2" stroke-linecap="round"/>
+<path d="M1 1L14 14" stroke="black" stroke-opacity="0.2" stroke-linecap="round"/>
+</g>
+<g id="Vector 2317">
+<path d="M14 1L0.999999 14" stroke="#212121" stroke-linecap="round"/>
+<path d="M14 1L0.999999 14" stroke="black" stroke-opacity="0.2" stroke-linecap="round"/>
+<path d="M14 1L0.999999 14" stroke="black" stroke-opacity="0.2" stroke-linecap="round"/>
+<path d="M14 1L0.999999 14" stroke="black" stroke-opacity="0.2" stroke-linecap="round"/>
+</g>
+</g>
+</svg>
diff --git a/src/components/map/UseMap.tsx b/src/components/map/UseMap.tsx
index 72b371c..6986ae6 100644
--- a/src/components/map/UseMap.tsx
+++ b/src/components/map/UseMap.tsx
@@ -244,25 +244,24 @@ const UseMap: React.FC = () => {
     }
   };
 
-  const handleCurrentLocationTextClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleCurrentLocationTextClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     setShowMessage(false);
-    const button = document.getElementById('current-location-text');
-    if (button) {
-      button.click();
-    }
   };
+  
 
   return (
     <section className="relative w-full h-screen">
       <div ref={mapRef} className="w-full h-full" />
       {showMessage && (
         <>
-          <div className={`absolute ${isModalOpen ? 'bottom-[355px]' : 'bottom-[180px]'} left-4 bg-white px-3 py-3.5 shadow-lg flex items-center`}>
+          <div className={`absolute ${isModalOpen ? 'bottom-[355px]' : 'bottom-[180px]'} left-4 bg-white px-3 py-3.5 shadow-lg flex items-center ${isIOS && !isStandalone ? 'mb-[80px]' : ''}`}>
             <span>더 정확한 접속위치를 확인해보세요!</span>
-            <button id="current-location-text" onClick={handleCurrentLocationTextClick} className="ml-4">X</button>
+            <div onClick={handleCurrentLocationTextClick} className="ml-4 inline-block cursor-pointer">
+              <Image src='/CloseBtn.svg' alt='closeBtn' width={13} height={13} />
+            </div>
           </div>
-          <Image src='/map/triangle.svg' alt="Current Location" className={`absolute ${isModalOpen ? 'bottom-[345px]' : 'bottom-[170px]'} left-[40px]`} width={18} height={10} />
+          <Image src='/map/triangle.svg' alt="Current Location" className={`absolute ${isModalOpen ? 'bottom-[345px]' : 'bottom-[170px]'} left-[40px]  ${isIOS && !isStandalone ? 'mb-[80px]' : ''}`} width={18} height={10} />
         </>
       )}
       <MapSearchBar onFocus={() => setShowSearchResults(true)} onChange={handleSearchQueryChange} />
@@ -290,7 +289,7 @@ const UseMap: React.FC = () => {
         onMouseLeave={() => setImageSrc('/map/MapLocation.png')}
         onClick={handleCurrentLocationClick}
       >
-        <Image src={imageSrc} alt="Current Location" width={48} height={48} />
+      <Image src={imageSrc} alt="Current Location" width={48} height={48} />
       </button>
       {loading && (
         <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">