From 73d00d01724ff9d814146095e5cf9bb387269d2f Mon Sep 17 00:00:00 2001
From: KimKyungYun <60084235+KimKyungYun@users.noreply.github.com>
Date: Sat, 24 Jun 2023 09:43:10 +0900
Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=EB=A7=88=EC=BB=A4=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MarkerHtml/MarkerHtml.module.scss         | 73 +++++++++++--------
 .../Map/components/MarkerHtml/index.tsx       |  9 ++-
 src/pages/Home/static/marker.ts               | 24 ++++--
 3 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index 238a9c6f..0d4c7a7b 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -11,6 +11,15 @@
   height: 68px;
   font-weight: 500;
 
+  @include media.media-breakpoint-down(mobile){
+    background-color: #ff7f23;
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    top: 40px;
+    left: 20px;
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -20,6 +29,11 @@
     top: 68px;
     left: 22px;
     z-index: -1;
+
+    @include media.media-breakpoint-down(mobile){
+      top: 26px;
+      left: 2px;
+    }
   }
 
   &--clicked {
@@ -34,6 +48,15 @@
     color: white;
     font-weight: 500;
 
+    @include media.media-breakpoint-down(mobile){
+      background-color: #ff7f23;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      top: 40px;
+      left: 22px;
+    }
+
     &::after {
       content: "";
       position: absolute;
@@ -42,6 +65,12 @@
       border-right: 14px solid transparent;
       top: 68px;
       left: 22px;
+      z-index: -1;
+
+      @include media.media-breakpoint-down(mobile){
+        top: 26px;
+        left: 0;
+      }
     }
   }
 }
@@ -57,9 +86,14 @@
     width: 62px;
     height: 62px;
     border-radius: 89.5px;
+
+    @include media.media-breakpoint-down(mobile){
+      width: 30px;
+      height: 30px;
+    }
   }
 
-  &__name {
+&__name {
     margin-left: 10px;
     padding-right: 10px;
 
@@ -67,41 +101,16 @@
       margin: 0;
       padding: 0;
       position: absolute;
-      top: 85px;
-      right: 0;
+      top: 40px;
       width: 100%;
       display: flex;
       justify-content: center;
-      font-size: 15px;
+      font-size: 12px;
       font-weight: 500;
-      line-height: 15px;
       color: #222222;
       // stylelint-disable-next-line
-      text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
-        1px 1px 0 white;
-    }
-  }
-
-  &--clicked {
-    display: flex;
-    align-items: center;
-
-    &__photo img {
-      display: flex;
-      align-items: center;
-      width: 65px;
-      height: 65px;
-      border-radius: 89.5px;
-    }
-
-    &__name {
-      margin-left: 10px;
-      padding-right: 10px;
-
-      @include media.media-breakpoint-down(mobile) {
-        padding: 0;
-        display: none;
-      }
+      // text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
+      //   1px 1px 0 white;
     }
   }
 }
@@ -115,5 +124,9 @@
     border-top: 12px solid #ffffff;
     border-left: 12px solid transparent;
     border-right: 12px solid transparent;
+
+    @include media.media-breakpoint-down(mobile){
+      display: none;
+    }
   }
 }
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
index 6ada6e67..44ef6350 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
+++ b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
@@ -5,11 +5,14 @@ export function MarkerHtml(defaultImg:string, name:string) {
     <div class=${styles.marker}>
       <div class=${styles.bubble}>
         <div class=${styles.bubble__photo}>
-          <img src=${defaultImg} alt="음식 이미지" />
+          <img src=${defaultImg} alt="" />
         </div>
         <div class=${styles.bubble__name}>
           ${name}
         </div>
+        <div class=${styles.bubble__index}>
+         
+        </div>
       </div>
       <div class=${styles.dummy} />
     </div>
@@ -21,12 +24,14 @@ export function ClickedMarkerHtml(defaultImg:string, name:string) {
     <div class=${styles['marker--clicked']}>
       <div class=${styles['bubble--clicked']}>
         <div class=${styles.bubble__photo}>
-          <img src=${defaultImg} alt="음식 이미지" />
+          <img src=${defaultImg} alt="" />s
         </div>
         <div class=${styles.bubble__name}>
           ${name}
         </div>
       </div>
+      <div class=${styles.bubble__index}>
+      </div>
       <div class=${styles['dummy--clicked']} />
     </div>
   `;
diff --git a/src/pages/Home/static/marker.ts b/src/pages/Home/static/marker.ts
index dc52674b..33c0f094 100644
--- a/src/pages/Home/static/marker.ts
+++ b/src/pages/Home/static/marker.ts
@@ -1,43 +1,51 @@
 const MARKER = [
   {
-    placeName: '장소1',
+    placeName: '1',
     latitude: 36.862341,
     longitude: 127.209635,
+    index: 1,
   },
   {
-    placeName: '장소2',
+    placeName: '2',
     latitude: 36.762341,
     longitude: 125.254645,
+    index: 2,
   },
   {
-    placeName: '장소3',
+    placeName: '3',
     latitude: 36.722341,
     longitude: 127.269665,
+    index: 3,
   },
   {
-    placeName: '장소4',
+    placeName: '4',
     latitude: 37.762341,
     longitude: 125.189675,
+    index: 4,
   },
   {
-    placeName: '장소5',
+    placeName: '5',
     latitude: 36.862341,
     longitude: 127.254631,
+    index: 5,
   },
   {
-    placeName: '장소6',
+    placeName: '6',
     latitude: 36.962341,
     longitude: 127.218645,
+    index: 6,
   },
   {
-    placeName: '장소7',
+    placeName: '7',
     latitude: 36.562341,
     longitude: 127.299565,
+    index: 7,
   },
   {
-    placeName: '장소8',
+    placeName: '8',
     latitude: 36.552341,
     longitude: 126.259775,
+    index: 8,
   },
 ];
 

From e0b1b1223f6f20da9d470f1e3a6a13bad19726fd Mon Sep 17 00:00:00 2001
From: KimKyungYun <60084235+KimKyungYun@users.noreply.github.com>
Date: Sat, 24 Jun 2023 16:35:47 +0900
Subject: [PATCH 02/12] =?UTF-8?q?feat:=20=EB=A7=88=EC=BB=A4=20=EC=9D=B8?=
 =?UTF-8?q?=EB=8D=B1=EC=8A=A4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MarkerHtml/MarkerHtml.module.scss         | 34 ++++++++++++-------
 .../Map/components/MarkerHtml/index.tsx       | 17 +++++-----
 src/pages/Home/components/Map/index.tsx       |  7 ++--
 src/pages/Home/static/marker.ts               | 12 +++----
 4 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index 0d4c7a7b..abc9bf67 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -54,7 +54,7 @@
       height: 32px;
       position: absolute;
       top: 40px;
-      left: 22px;
+      left: 20px;
     }
 
     &::after {
@@ -69,7 +69,7 @@
 
       @include media.media-breakpoint-down(mobile){
         top: 26px;
-        left: 0;
+        left: 2px;
       }
     }
   }
@@ -81,7 +81,7 @@
   box-sizing: content-box;
 
   &__photo img {
-    display: flex;
+    display: none;
     align-items: center;
     width: 62px;
     height: 62px;
@@ -93,24 +93,34 @@
     }
   }
 
-&__name {
+  &__name {
+    text-align: center;
     margin-left: 10px;
     padding-right: 10px;
 
     @include media.media-breakpoint-down(mobile) {
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      top: 40px;
-      width: 100%;
       display: flex;
       justify-content: center;
+      width: 100%;
+      position: absolute;
+      top: 40px;
+      right: -10px;
       font-size: 12px;
       font-weight: 500;
       color: #222222;
-      // stylelint-disable-next-line
-      // text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
-      //   1px 1px 0 white;
+    }
+  }
+  
+  &__index {
+    display: none;
+
+    @include media.media-breakpoint-down(mobile){
+      display: block;
+      color: #ffffff;
+      position: absolute;
+      top: 6px;
+      left: 12px;
+      font-size: 16px;
     }
   }
 }
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
index 44ef6350..0e7e8b0b 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
+++ b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
@@ -1,37 +1,38 @@
 import styles from './MarkerHtml.module.scss';
 
-export function MarkerHtml(defaultImg:string, name:string) {
+export function MarkerHtml(defaultImg:string, name:string, index:number = 0) {
   return `
     <div class=${styles.marker}>
       <div class=${styles.bubble}>
         <div class=${styles.bubble__photo}>
           <img src=${defaultImg} alt="" />
         </div>
+        <div class=${styles.bubble__index}>
+          ${index}
+        </div>
         <div class=${styles.bubble__name}>
           ${name}
         </div>
-        <div class=${styles.bubble__index}>
-         
-        </div>
       </div>
       <div class=${styles.dummy} />
     </div>
   `;
 }
 
-export function ClickedMarkerHtml(defaultImg:string, name:string) {
+export function ClickedMarkerHtml(defaultImg:string, name:string, index:number) {
   return `
     <div class=${styles['marker--clicked']}>
       <div class=${styles['bubble--clicked']}>
         <div class=${styles.bubble__photo}>
-          <img src=${defaultImg} alt="" />s
+          <img src=${defaultImg} alt="" />
+        </div>
+        <div class=${styles.bubble__index}>
+          ${index}
         </div>
         <div class=${styles.bubble__name}>
           ${name}
         </div>
       </div>
-      <div class=${styles.bubble__index}>
-      </div>
       <div class=${styles['dummy--clicked']} />
     </div>
   `;
diff --git a/src/pages/Home/components/Map/index.tsx b/src/pages/Home/components/Map/index.tsx
index 23a63c43..29899674 100644
--- a/src/pages/Home/components/Map/index.tsx
+++ b/src/pages/Home/components/Map/index.tsx
@@ -12,6 +12,7 @@ interface MarkerType {
   latitude: number;
   longitude: number;
   placeName: string;
+  index: number;
 }
 const options = {
   maximumAge: 1000,
@@ -24,7 +25,7 @@ export default function Map(): JSX.Element {
 
   const markerHighlightEvent = (markerCur:naver.maps.Marker, item:MarkerType) => {
     naver.maps.Event.addListener(markerCur, 'click', () => {
-      if (selectedMarker.current) {
+      if (selectedMarker.current && !isMobile) {
         selectedMarker.current.setIcon({
           content: MarkerHtml(defaultImage, selectedMarker.current.getTitle()),
           size: new naver.maps.Size(50, 52),
@@ -33,7 +34,7 @@ export default function Map(): JSX.Element {
       }
 
       markerCur.setIcon({
-        content: ClickedMarkerHtml(defaultImage, item.placeName),
+        content: ClickedMarkerHtml(defaultImage, item.placeName, item.index),
         size: new naver.maps.Size(50, 52),
         anchor: new naver.maps.Point(25, 26),
       });
@@ -78,7 +79,7 @@ export default function Map(): JSX.Element {
           title: item.placeName,
           map: mapRef.current,
           icon: {
-            content: MarkerHtml(defaultImage, item.placeName),
+            content: MarkerHtml(defaultImage, item.placeName, item.index),
             size: new naver.maps.Size(50, 52),
             anchor: new naver.maps.Point(25, 26),
           },
diff --git a/src/pages/Home/static/marker.ts b/src/pages/Home/static/marker.ts
index 33c0f094..4aa5d29b 100644
--- a/src/pages/Home/static/marker.ts
+++ b/src/pages/Home/static/marker.ts
@@ -1,14 +1,14 @@
 const MARKER = [
   {
-    placeName: '1',
-    latitude: 36.862341,
-    longitude: 127.209635,
+    placeName: '박순자 아우내순대',
+    latitude: 36.761724,
+    longitude: 127.299092,
     index: 1,
   },
   {
-    placeName: '2',
-    latitude: 36.762341,
-    longitude: 125.254645,
+    placeName: '집',
+    latitude: 36.343087,
+    longitude: 127.448879,
     index: 2,
   },
   {

From 8ababd91b31d68e0f594cf4ec331300c512c0174 Mon Sep 17 00:00:00 2001
From: KimKyungYun <60084235+KimKyungYun@users.noreply.github.com>
Date: Mon, 26 Jun 2023 18:07:01 +0900
Subject: [PATCH 03/12] =?UTF-8?q?fix=20:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EB=A9=94=EB=89=B4=20=EC=A0=81=EC=9A=A9,=20?=
 =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=EA=B8=B0=EB=B3=B8=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/search/defaultImg.png       | Bin 0 -> 120 bytes
 src/assets/svg/home/location-marker.svg       |   5 +
 src/assets/svg/home/verticalDot.svg           |   5 +
 .../MarkerHtml/MarkerHtml.module.scss         | 132 +++++-------------
 .../Map/components/MarkerHtml/index.tsx       |  23 +--
 .../MobileOptions/MobileOptions.module.scss   |  50 +++++--
 .../Map/components/MobileOptions/index.tsx    |  31 ++--
 src/pages/Home/components/Map/index.tsx       |  15 +-
 8 files changed, 123 insertions(+), 138 deletions(-)
 create mode 100644 src/assets/images/search/defaultImg.png
 create mode 100644 src/assets/svg/home/location-marker.svg
 create mode 100644 src/assets/svg/home/verticalDot.svg

diff --git a/src/assets/images/search/defaultImg.png b/src/assets/images/search/defaultImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..fac42a7204fc033b73dd93fda687f61427faee19
GIT binary patch
literal 120
zcmeAS@N?(olHy`uVBq!ia0vp^(}4H{BQuaR@a|FrQp^E9A+G=Hm4%gLYk*wN0*}aI
z1_r((Aj~*bn@<`jDDCOu7~;|S_MjmnkauXoSN~id`2|2`!*)jg1q_T@&qbJkJO)o!
KKbLh*2~7aBEE@U%

literal 0
HcmV?d00001

diff --git a/src/assets/svg/home/location-marker.svg b/src/assets/svg/home/location-marker.svg
new file mode 100644
index 00000000..73abfb32
--- /dev/null
+++ b/src/assets/svg/home/location-marker.svg
@@ -0,0 +1,5 @@
+<svg width="69" height="69" viewBox="0 0 69 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="location-marker">
+<path id="Vector" d="M50.7639 47.889L38.5653 60.0876C38.0318 60.6216 37.3983 61.0453 36.701 61.3343C36.0037 61.6233 35.2563 61.7721 34.5014 61.7721C33.7466 61.7721 32.9992 61.6233 32.3019 61.3343C31.6046 61.0453 30.9711 60.6216 30.4376 60.0876L18.2361 47.889C15.0196 44.6724 12.8292 40.5741 11.9419 36.1126C11.0545 31.6511 11.51 27.0266 13.2509 22.824C14.9917 18.6214 17.9397 15.0293 21.722 12.5021C25.5043 9.97487 29.9511 8.62598 34.5 8.62598C39.0489 8.62598 43.4957 9.97487 47.278 12.5021C51.0603 15.0293 54.0083 18.6214 55.7491 22.824C57.49 27.0266 57.9455 31.6511 57.0582 36.1126C56.1708 40.5741 53.9804 44.6724 50.7639 47.889Z" fill="#FF7F23" stroke="#FF7F23" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/assets/svg/home/verticalDot.svg b/src/assets/svg/home/verticalDot.svg
new file mode 100644
index 00000000..8a38c725
--- /dev/null
+++ b/src/assets/svg/home/verticalDot.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dots-vertical" opacity="0.8">
+<path id="Vector" d="M16.0003 7.16634V7.17967M16.0003 16.4997V16.513M16.0003 25.833V25.8463M16.0003 8.49967C15.6467 8.49967 15.3076 8.3592 15.0575 8.10915C14.8075 7.8591 14.667 7.51996 14.667 7.16634C14.667 6.81272 14.8075 6.47358 15.0575 6.22353C15.3076 5.97348 15.6467 5.83301 16.0003 5.83301C16.3539 5.83301 16.6931 5.97348 16.9431 6.22353C17.1932 6.47358 17.3337 6.81272 17.3337 7.16634C17.3337 7.51996 17.1932 7.8591 16.9431 8.10915C16.6931 8.3592 16.3539 8.49967 16.0003 8.49967ZM16.0003 17.833C15.6467 17.833 15.3076 17.6925 15.0575 17.4425C14.8075 17.1924 14.667 16.8533 14.667 16.4997C14.667 16.1461 14.8075 15.8069 15.0575 15.5569C15.3076 15.3068 15.6467 15.1663 16.0003 15.1663C16.3539 15.1663 16.6931 15.3068 16.9431 15.5569C17.1932 15.8069 17.3337 16.1461 17.3337 16.4997C17.3337 16.8533 17.1932 17.1924 16.9431 17.4425C16.6931 17.6925 16.3539 17.833 16.0003 17.833ZM16.0003 27.1663C15.6467 27.1663 15.3076 27.0259 15.0575 26.7758C14.8075 26.5258 14.667 26.1866 14.667 25.833C14.667 25.4794 14.8075 25.1402 15.0575 24.8902C15.3076 24.6401 15.6467 24.4997 16.0003 24.4997C16.3539 24.4997 16.6931 24.6401 16.9431 24.8902C17.1932 25.1402 17.3337 25.4794 17.3337 25.833C17.3337 26.1866 17.1932 26.5258 16.9431 26.7758C16.6931 27.0259 16.3539 27.1663 16.0003 27.1663Z" stroke="#666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index abc9bf67..b255b6f0 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -2,141 +2,81 @@
 
 .marker {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  border: 2px solid #ff7f23;
-  border-radius: 33.5px;
-  background-color: #ffffff;
-  width: 100%;
-  height: 68px;
-  font-weight: 500;
-
-  @include media.media-breakpoint-down(mobile){
-    background-color: #ff7f23;
-    width: 32px;
-    height: 32px;
-    position: absolute;
-    top: 40px;
-    left: 20px;
-  }
+  width: 69px;
+  height: 69px;
 
-  &::after {
-    content: "";
-    position: absolute;
-    border-top: 14px solid #ff7f23;
-    border-left: 14px solid transparent;
-    border-right: 14px solid transparent;
-    top: 68px;
-    left: 22px;
-    z-index: -1;
 
-    @include media.media-breakpoint-down(mobile){
-      top: 26px;
-      left: 2px;
-    }
+  @include media.media-breakpoint-down(mobile) {
+    width: 48px;
+    height: 48px;
   }
 
   &--clicked {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: 2px solid #ff7f23;
-    border-radius: 33.5px;
-    background-color: #ff7f23;
-    width: 100%;
-    height: 68px;
-    color: white;
-    font-weight: 500;
+    width: 69px;
+    height: 69px;
 
-    @include media.media-breakpoint-down(mobile){
-      background-color: #ff7f23;
-      width: 32px;
-      height: 32px;
-      position: absolute;
-      top: 40px;
-      left: 20px;
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      border-top: 14px solid #ff7f23;
-      border-left: 14px solid transparent;
-      border-right: 14px solid transparent;
-      top: 68px;
-      left: 22px;
-      z-index: -1;
-
-      @include media.media-breakpoint-down(mobile){
-        top: 26px;
-        left: 2px;
-      }
+    @include media.media-breakpoint-down(mobile) {
+      width: 48px;
+      height: 48px;
     }
   }
 }
 
 .bubble {
   display: flex;
+  width: 100%;
+  height: 100%;
   align-items: center;
   box-sizing: content-box;
 
   &__photo img {
-    display: none;
-    align-items: center;
-    width: 62px;
-    height: 62px;
+    width: 43px;
+    height: 43px;
     border-radius: 89.5px;
+    position: absolute;
+    top: 10px;
+    left: 13px;
 
-    @include media.media-breakpoint-down(mobile){
+    @include media.media-breakpoint-down(mobile) {
       width: 30px;
       height: 30px;
+      top: 7px;
+      left: 9px;
     }
   }
 
   &__name {
     text-align: center;
-    margin-left: 10px;
-    padding-right: 10px;
+    font-size: 18px;
+    font-weight: 500;
+    width: 100%;
 
     @include media.media-breakpoint-down(mobile) {
-      display: flex;
-      justify-content: center;
-      width: 100%;
-      position: absolute;
-      top: 40px;
-      right: -10px;
       font-size: 12px;
-      font-weight: 500;
+      font-weight: 700;
       color: #222222;
     }
   }
-  
-  &__index {
-    display: none;
-
-    @include media.media-breakpoint-down(mobile){
-      display: block;
-      color: #ffffff;
-      position: absolute;
-      top: 6px;
-      left: 12px;
-      font-size: 16px;
-    }
-  }
-}
 
-.dummy {
-  &::after {
-    content: "";
+  &__index {
+    color: #ffffff;
     position: absolute;
-    top: 67px;
-    left: 23px;
-    border-top: 12px solid #ffffff;
-    border-left: 12px solid transparent;
-    border-right: 12px solid transparent;
+    top: 20px;
+    left: 28px;
+    font-size: 24px;
+    font-weight: 700;
 
-    @include media.media-breakpoint-down(mobile){
-      display: none;
+    @include media.media-breakpoint-down(mobile) {
+      font-size: 16px;
+      top: 12px;
+      left: 20px;
     }
   }
 }
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
index 0e7e8b0b..d96e87ae 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
+++ b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
@@ -1,39 +1,40 @@
+import Default from 'assets/images/search/defaultImg.png';
+import MarkerLogo from 'assets/svg/home/location-marker.svg';
 import styles from './MarkerHtml.module.scss';
 
-export function MarkerHtml(defaultImg:string, name:string, index:number = 0) {
+export function MarkerHtml(defaultImg:string, name:string, index:number) {
   return `
-    <div class=${styles.marker}>
+    <img src=${MarkerLogo} class=${styles.marker}>
       <div class=${styles.bubble}>
         <div class=${styles.bubble__photo}>
-          <img src=${defaultImg} alt="" />
+          <img src=${defaultImg} alt=""/>
         </div>
         <div class=${styles.bubble__index}>
-          ${index}
+          ${defaultImg === Default ? index : ''}
+          
         </div>
         <div class=${styles.bubble__name}>
           ${name}
         </div>
       </div>
-      <div class=${styles.dummy} />
-    </div>
+    </img>
   `;
 }
 
 export function ClickedMarkerHtml(defaultImg:string, name:string, index:number) {
   return `
-    <div class=${styles['marker--clicked']}>
-      <div class=${styles['bubble--clicked']}>
+    <img src=${MarkerLogo} class=${styles['marker--clicked']}>
+      <div class=${styles.bubble}>
         <div class=${styles.bubble__photo}>
           <img src=${defaultImg} alt="" />
         </div>
         <div class=${styles.bubble__index}>
-          ${index}
+          ${defaultImg === Default ? index : ''}
         </div>
         <div class=${styles.bubble__name}>
           ${name}
         </div>
       </div>
-      <div class=${styles['dummy--clicked']} />
-    </div>
+    </img>
   `;
 }
diff --git a/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss b/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss
index eba18f57..e6e7fb55 100644
--- a/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss
+++ b/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss
@@ -10,6 +10,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 70%;
     height: 48px;
     background: #ffffff;
     box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%);
@@ -22,35 +23,60 @@
     margin-bottom: 10px;
   }
 
+  &__filter {
+    width: 48px;
+    height: 48px;
+    background-color: #ffffff;
+    border-radius: 37px;
+    opacity: 0.8;
+    box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
+    border: 1px solid #eeeeee;
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &--clicked {
+      svg path {
+        stroke: #ff7f23;
+      }
+    }
+  }
+
   &__list {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 4px;
-    justify-items: center;
+    display: flex;
+    float: right;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 118px;
+    height: 78px;
+    border-radius: 15px;
+    opacity: 0.8;
+    border: 1px solid #eeeeee;
+    background-color: #ffffff;
+    box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
   }
 
   &__text {
     display: flex;
-    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
     width: 100%;
     height: 30px;
-    background: rgb(251 251 250 / 90%);
-    border: 1px solid #c4c4c4;
-    box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%);
-    border-radius: 37px;
+    margin-left: 10px;
     font-weight: 500;
     font-size: 12px;
     color: #595959;
     cursor: pointer;
+    background-color: transparent;
+    border: none;
 
     svg {
       padding-right: 5px;
     }
 
-    &--selected {
-      border: 1px solid #ff7f23;
+    &--clicked {
       color: #ff7f23;
 
       svg path {
diff --git a/src/pages/Home/components/Map/components/MobileOptions/index.tsx b/src/pages/Home/components/Map/components/MobileOptions/index.tsx
index 2dcc749f..21774424 100644
--- a/src/pages/Home/components/Map/components/MobileOptions/index.tsx
+++ b/src/pages/Home/components/Map/components/MobileOptions/index.tsx
@@ -1,13 +1,15 @@
 import { ReactComponent as LensIcon } from 'assets/svg/home/lens.svg';
-import { ReactComponent as StoreFrontIcon } from 'assets/svg/home/storefront.svg';
 import { ReactComponent as GroupIcon } from 'assets/svg/home/group.svg';
 import { ReactComponent as BookMarkIcon } from 'assets/svg/home/bookmark.svg';
+import { ReactComponent as VerticalDot } from 'assets/svg/home/verticalDot.svg';
 import { Link } from 'react-router-dom';
 import cn from 'utils/ts/classNames';
 import { useState } from 'react';
+import useBooleanState from 'utils/hooks/useBooleanState';
 import styles from './MobileOptions.module.scss';
 
 export default function MobileOptions(): JSX.Element {
+  const [filter, , ,toggle] = useBooleanState(false);
   const [selected, setSelected] = useState('');
   const handleClick = (type: string) => {
     setSelected(type);
@@ -22,18 +24,18 @@ export default function MobileOptions(): JSX.Element {
             <LensIcon />
           </Link>
         </div>
-        <span className={styles['top-options__list']}>
-          <button
-            type="button"
-            className={cn({
-              [styles['top-options__text']]: true,
-              [styles['top-options__text--clicked']]: selected === 'nearby',
-            })}
-            onClick={() => handleClick('nearby')}
-          >
-            <StoreFrontIcon />
-            가까운 음식점
-          </button>
+        <button
+          type="button"
+          className={cn({
+            [styles['top-options__filter']]: true,
+            [styles['top-options__filter--clicked']]: selected !== '',
+          })}
+          onClick={toggle}
+        >
+          <VerticalDot />
+        </button>
+        {filter && (
+        <div className={styles['top-options__list']}>
           <button
             type="button"
             className={cn({
@@ -56,7 +58,8 @@ export default function MobileOptions(): JSX.Element {
             <BookMarkIcon />
             북마크 음식점
           </button>
-        </span>
+        </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/pages/Home/components/Map/index.tsx b/src/pages/Home/components/Map/index.tsx
index 29899674..ca544c46 100644
--- a/src/pages/Home/components/Map/index.tsx
+++ b/src/pages/Home/components/Map/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import useGeolocation from 'utils/hooks/useGeolocation';
 import MARKER from 'pages/Home/static/marker';
-import defaultImage from 'assets/images/search/default-image.png';
+import defaultImg from 'assets/images/search/default-image.png';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import styles from './Map.module.scss';
 import OptionButtons from './components/OptionButtons';
@@ -25,16 +25,20 @@ export default function Map(): JSX.Element {
 
   const markerHighlightEvent = (markerCur:naver.maps.Marker, item:MarkerType) => {
     naver.maps.Event.addListener(markerCur, 'click', () => {
-      if (selectedMarker.current && !isMobile) {
+      if (selectedMarker.current) {
         selectedMarker.current.setIcon({
-          content: MarkerHtml(defaultImage, selectedMarker.current.getTitle()),
+          content: MarkerHtml(
+            defaultImg,
+            selectedMarker.current.getTitle(),
+            selectedMarker.current.getZIndex(),
+          ),
           size: new naver.maps.Size(50, 52),
           anchor: new naver.maps.Point(25, 26),
         });
       }
 
       markerCur.setIcon({
-        content: ClickedMarkerHtml(defaultImage, item.placeName, item.index),
+        content: ClickedMarkerHtml(defaultImg, item.placeName, item.index),
         size: new naver.maps.Size(50, 52),
         anchor: new naver.maps.Point(25, 26),
       });
@@ -78,8 +82,9 @@ export default function Map(): JSX.Element {
           position: new naver.maps.LatLng(item.latitude, item.longitude),
           title: item.placeName,
           map: mapRef.current,
+          zIndex: item.index,
           icon: {
-            content: MarkerHtml(defaultImage, item.placeName, item.index),
+            content: MarkerHtml(defaultImg, item.placeName, item.index),
             size: new naver.maps.Size(50, 52),
             anchor: new naver.maps.Point(25, 26),
           },

From 6ee55c7dbd1858c54094adc0ac31355d8aa00215 Mon Sep 17 00:00:00 2001
From: KimKyungYun <60084235+KimKyungYun@users.noreply.github.com>
Date: Tue, 27 Jun 2023 18:36:42 +0900
Subject: [PATCH 04/12] =?UTF-8?q?feat:=20=EB=A7=88=EC=BB=A4=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD,sv?=
 =?UTF-8?q?g=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svg/home/selected-marker.svg       |  4 ++
 .../MarkerHtml/MarkerHtml.module.scss         | 46 +++++++++++++++++--
 .../Map/components/MarkerHtml/index.tsx       |  7 +--
 3 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/svg/home/selected-marker.svg

diff --git a/src/assets/svg/home/selected-marker.svg b/src/assets/svg/home/selected-marker.svg
new file mode 100644
index 00000000..adda4745
--- /dev/null
+++ b/src/assets/svg/home/selected-marker.svg
@@ -0,0 +1,4 @@
+<svg width="177" height="71" viewBox="0 0 177 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.1027 61.001L36.2522 67.8168C35.5573 68.5089 34.7322 69.0578 33.824 69.4324C32.9158 69.8069 31.9423 69.9997 30.9591 69.9997C29.976 69.9997 29.0025 69.8069 28.0942 69.4324C27.186 69.0578 26.3609 68.5089 25.666 67.8168L9.77374 52.0087C5.5843 47.8403 2.7313 42.5294 1.57552 36.7477C0.419739 30.9661 1.01308 24.9732 3.28052 19.5271C5.54796 14.0809 9.38765 9.42598 14.3141 6.15097C19.2046 2.89978 24.9481 1.15344 30.828 1.12821C31.798 1.04401 32.7806 1.00098 33.7739 1.00098H144.226C161.774 1.00098 176 14.4324 176 31.001C176 47.5695 161.774 61.001 144.226 61.001H43.1027Z" fill="white"/>
+<path d="M43.1027 61.001V60.001C42.8384 60.001 42.5848 60.1056 42.3974 60.2921L43.1027 61.001ZM36.2522 67.8168L35.5469 67.1079L35.5465 67.1083L36.2522 67.8168ZM25.666 67.8168L26.3717 67.1083L26.3713 67.1078L25.666 67.8168ZM9.77374 52.0087L9.06841 52.7176L9.06851 52.7177L9.77374 52.0087ZM1.57552 36.7477L0.594922 36.9438H0.594922L1.57552 36.7477ZM3.28052 19.5271L2.35733 19.1427L3.28052 19.5271ZM14.3141 6.15097L13.7604 5.3182H13.7604L14.3141 6.15097ZM30.828 1.12821L30.8323 2.1282C30.8597 2.12808 30.8871 2.12683 30.9145 2.12446L30.828 1.12821ZM42.3974 60.2921L35.5469 67.1079L36.9575 68.5257L43.808 61.7099L42.3974 60.2921ZM35.5465 67.1083C34.9448 67.7076 34.2299 68.1833 33.4427 68.5079L34.2053 70.3569C35.2345 69.9324 36.1699 69.3101 36.9578 68.5254L35.5465 67.1083ZM33.4427 68.5079C32.6555 68.8326 31.8116 68.9997 30.9591 68.9997V70.9997C32.073 70.9997 33.176 70.7813 34.2053 70.3569L33.4427 68.5079ZM30.9591 68.9997C30.1067 68.9997 29.2627 68.8326 28.4755 68.5079L27.713 70.3569C28.7422 70.7813 29.8453 70.9997 30.9591 70.9997V68.9997ZM28.4755 68.5079C27.6883 68.1833 26.9735 67.7076 26.3717 67.1083L24.9604 68.5254C25.7483 69.3101 26.6837 69.9324 27.713 70.3569L28.4755 68.5079ZM26.3713 67.1078L10.479 51.2997L9.06851 52.7177L24.9608 68.5258L26.3713 67.1078ZM10.4791 51.2998C6.42985 47.2709 3.67293 42.1384 2.55612 36.5517L0.594922 36.9438C1.78967 42.9204 4.73874 48.4096 9.06841 52.7176L10.4791 51.2998ZM2.55612 36.5517C1.43932 30.965 2.0126 25.1742 4.2037 19.9114L2.35733 19.1427C0.013562 24.7722 -0.599837 30.9671 0.594922 36.9438L2.55612 36.5517ZM4.2037 19.9114C6.39483 14.6485 10.1056 10.1495 14.8677 6.98374L13.7604 5.3182C8.66966 8.70248 4.70108 13.5132 2.35733 19.1427L4.2037 19.9114ZM14.8677 6.98374C19.5951 3.84099 25.1476 2.15259 30.8323 2.1282L30.8237 0.128216C24.7487 0.154284 18.8141 1.95856 13.7604 5.3182L14.8677 6.98374ZM30.9145 2.12446C31.8557 2.04276 32.8095 2.00098 33.7739 2.00098V0.000976562C32.7517 0.000976562 31.7403 0.0452613 30.7415 0.131953L30.9145 2.12446ZM33.7739 2.00098H144.226V0.000976562H33.7739V2.00098ZM144.226 2.00098C161.277 2.00098 175 15.0381 175 31.001H177C177 13.8268 162.272 0.000976562 144.226 0.000976562V2.00098ZM175 31.001C175 46.9639 161.277 60.001 144.226 60.001V62.001C162.272 62.001 177 48.1751 177 31.001H175ZM144.226 60.001H43.1027V62.001H144.226V60.001Z" fill="#FF7F23"/>
+</svg>
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index b255b6f0..09df8007 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -19,12 +19,12 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    width: 69px;
+    width: 175px;
     height: 69px;
 
     @include media.media-breakpoint-down(mobile) {
-      width: 48px;
-      height: 48px;
+      width: 125px;
+      height: 45px;
     }
   }
 }
@@ -52,6 +52,22 @@
     }
   }
 
+  &__photo--clicked img {
+    width: 56px;
+    height: 56px;
+    border-radius: 89.5px;
+    position: absolute;
+    top: 3px;
+    left: 5px;
+
+    @include media.media-breakpoint-down(moblie) {
+      width: 36px;
+      height: 36px;
+      top: 2px;
+      left: 8px;
+    }
+  }
+
   &__name {
     text-align: center;
     font-size: 18px;
@@ -63,6 +79,29 @@
       font-weight: 700;
       color: #222222;
     }
+
+    &--clicked {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100px;
+      height: 40px;
+      position: absolute;
+      text-align: center;      
+      top: 10px;
+      left: 60px;
+      font-size: 20px;
+      font-weight: 700;
+      color: #fe7f23;
+      
+      @include media.media-breakpoint-down(mobile) {
+        width: 70px;
+        height: 34px;
+        top: 3px;
+        left: 40px;
+        font-size: 14px;
+      }
+    }
   }
 
   &__index {
@@ -72,6 +111,7 @@
     left: 28px;
     font-size: 24px;
     font-weight: 700;
+    z-index: 999;
 
     @include media.media-breakpoint-down(mobile) {
       font-size: 16px;
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
index d96e87ae..5c08bfbd 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
+++ b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
@@ -1,5 +1,6 @@
 import Default from 'assets/images/search/defaultImg.png';
 import MarkerLogo from 'assets/svg/home/location-marker.svg';
+import Selected from 'assets/svg/home/selected-marker.svg';
 import styles from './MarkerHtml.module.scss';
 
 export function MarkerHtml(defaultImg:string, name:string, index:number) {
@@ -23,15 +24,15 @@ export function MarkerHtml(defaultImg:string, name:string, index:number) {
 
 export function ClickedMarkerHtml(defaultImg:string, name:string, index:number) {
   return `
-    <img src=${MarkerLogo} class=${styles['marker--clicked']}>
+    <img src=${Selected} class=${styles['marker--clicked']}>
       <div class=${styles.bubble}>
-        <div class=${styles.bubble__photo}>
+        <div class=${styles['bubble__photo--clicked']}>
           <img src=${defaultImg} alt="" />
         </div>
         <div class=${styles.bubble__index}>
           ${defaultImg === Default ? index : ''}
         </div>
-        <div class=${styles.bubble__name}>
+        <div class=${styles['bubble__name--clicked']}>
           ${name}
         </div>
       </div>

From 1de2d3d1976841a4be94ea73e2608648a8d4e5ec Mon Sep 17 00:00:00 2001
From: KimKyungYun <60084235+KimKyungYun@users.noreply.github.com>
Date: Tue, 27 Jun 2023 18:39:08 +0900
Subject: [PATCH 05/12] =?UTF-8?q?fix:=20lint=EC=97=90=EB=9F=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Map/components/MarkerHtml/MarkerHtml.module.scss         | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index 09df8007..3809ffd0 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -8,7 +8,6 @@
   width: 69px;
   height: 69px;
 
-
   @include media.media-breakpoint-down(mobile) {
     width: 48px;
     height: 48px;
@@ -87,13 +86,13 @@
       width: 100px;
       height: 40px;
       position: absolute;
-      text-align: center;      
+      text-align: center;
       top: 10px;
       left: 60px;
       font-size: 20px;
       font-weight: 700;
       color: #fe7f23;
-      
+
       @include media.media-breakpoint-down(mobile) {
         width: 70px;
         height: 34px;

From 7ca3ba29eb1c2c356e3bbdeaade88ca4599ed5f1 Mon Sep 17 00:00:00 2001
From: KimKyungYun <60084235+KimKyungYun@users.noreply.github.com>
Date: Tue, 27 Jun 2023 18:49:13 +0900
Subject: [PATCH 06/12] =?UTF-8?q?fix:=20css=20=EC=9D=B4=EB=A6=84=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Map/components/MarkerHtml/MarkerHtml.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index 3809ffd0..870ac879 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -59,7 +59,7 @@
     top: 3px;
     left: 5px;
 
-    @include media.media-breakpoint-down(moblie) {
+    @include media.media-breakpoint-down(mobile) {
       width: 36px;
       height: 36px;
       top: 2px;

From ad36af9af987f0276614da995c3b50ed59740f62 Mon Sep 17 00:00:00 2001
From: KimKyungYun <60084235+KimKyungYun@users.noreply.github.com>
Date: Tue, 27 Jun 2023 18:53:18 +0900
Subject: [PATCH 07/12] =?UTF-8?q?fix:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=ED=95=84=ED=84=B0=20=EC=A1=B0=EA=B1=B4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Home/components/Map/components/MobileOptions/index.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Home/components/Map/components/MobileOptions/index.tsx b/src/pages/Home/components/Map/components/MobileOptions/index.tsx
index 21774424..1395aaf9 100644
--- a/src/pages/Home/components/Map/components/MobileOptions/index.tsx
+++ b/src/pages/Home/components/Map/components/MobileOptions/index.tsx
@@ -28,7 +28,7 @@ export default function MobileOptions(): JSX.Element {
           type="button"
           className={cn({
             [styles['top-options__filter']]: true,
-            [styles['top-options__filter--clicked']]: selected !== '',
+            [styles['top-options__filter--clicked']]: selected !== '' && !filter,
           })}
           onClick={toggle}
         >

From 978779a396c6782594a4e39503528203030fb46b Mon Sep 17 00:00:00 2001
From: KimDoToRi <60084235+KimKyungYun@users.noreply.github.com>
Date: Thu, 13 Jul 2023 09:37:03 +0900
Subject: [PATCH 08/12] =?UTF-8?q?fix:=20=EB=A7=88=EC=BB=A4=20png=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD,=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/home/location-marker.png    | Bin 0 -> 873 bytes
 src/assets/images/home/selected-marker.png    | Bin 0 -> 1778 bytes
 src/assets/svg/home/location-marker.svg       |   5 ----
 src/assets/svg/home/selected-marker.svg       |   4 ---
 .../MarkerHtml/MarkerHtml.module.scss         |  28 +++++++++++-------
 .../Map/components/MarkerHtml/index.tsx       |  12 ++++----
 6 files changed, 24 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/images/home/location-marker.png
 create mode 100644 src/assets/images/home/selected-marker.png
 delete mode 100644 src/assets/svg/home/location-marker.svg
 delete mode 100644 src/assets/svg/home/selected-marker.svg

diff --git a/src/assets/images/home/location-marker.png b/src/assets/images/home/location-marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e5ef3f0fc57d5434a9503f3a558570d65608bd1
GIT binary patch
literal 873
zcmV-v1D5=WP)<h;3K|Lk000e1NJLTq002b*002b@1^@s69E~d}00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0{%%vK~#7F?VH_k
z6EP6S|Er?_mvBkoIiUj19heG2DoA+G#Ak+gNClV*2o=QX!0&vS4z2+1#LCAF3<EP+
zourdMznNqbkDO?JUVYqZ1!OXrOeT}b#0eoVx-MsEiv^TE=6_%EEBuAo&la@fZw<e`
zL)+cq0k%}{b_hriDSHu}ItNk3zg7^Vx9I2^MY{<h$g32VQ9>6>{_z>yu?Dp(pK`oN
z*++&}EQ2oK4{vguOVO8Qg+jgQ=L_%fyhCU7^5X^$QE-S}9WGH6w}FHhN)-B5UmY&t
z5NDCH7t&FUsnEKn7oS&ffD<W`3mI@EX0()OgbX+kGfIlSJX)Z@JH$py^D&dJwUmAj
zqC!rp5*l8v4|ut5V1fPWv)`0ai8$eXQt=9wSVhW@o$43Fj^!}2i<Exr9zTV)>ZdqT
zl8KT5Y9I65vX#6=9x16r$v~$T5MnWWbcK{4I)@OE6kR_$iFn2N8#5mACz3bFB1N|q
zQlwRtq`7eT&=aJHqGM5W$e1BXw8!DoCz%t3L?5Pf_>@SKQqtII=Ivi0OZfv*DOQi-
z5g_WfbfQgE3ZFI#kWRFs2dik%^i|Sa8Yy>367BIRnN*sQ(y5K4xiC_`87ZmFD~&Y!
zCX%vG1ncfS(&7d}<ogs=tdSBey@e3F#P#xsk2Y-TOoFqc)u#gpvD?uSIXScS4#BFQ
z_J?8dM~hXI80?>YNIgf)P&<bu)>5ecz{@kmDMr(%3a9Z^2UkaH{wt@5hZ`O?Pcee=
zsRPwsNVn1c;C@hhhLN}_+UX1bOa+1{7wQ%xq?_AT8vKg8@~%n6xD#S<S{*r!7`H+U
z?n_34ig7Q*;Ip{cvlu@@4BpDn{fhA?#NfL&--8&xLJZz-akv%ZUx*>x)t1p>!U!=0
zy96~(OgJHipf|(p#Do=MnC80Ny~TtVVhAq9a6d8A2r*0|WkA;tYd#$~{jJ2K;dJLU
zAE&&YLWp5fDFc0hp`LMfnm&1z$z(E_%>TxBQ7=Jbo@%gu00000NkvXXu0mjfTAzZk

literal 0
HcmV?d00001

diff --git a/src/assets/images/home/selected-marker.png b/src/assets/images/home/selected-marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f0a2d5ddcd586541deefd4a6d514b65acbea96a
GIT binary patch
literal 1778
zcmV<O1`YX%P)<h;3K|Lk000e1NJLTq006N7002h_1^@s6NaCi!00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH28T&RK~#7F?VUYr
z97Pnz-|VGG12SDCC{83uA&n0TaL1*HL`Q%oA_eCzG~hG{p+L@w3rLd$3g~hvBBkKN
z=^}`fr85n>G~mL9LjozKfri3&lljl=?B4p$_I>Q0ca#55TJ7w8IE8<HdHde%jFOzu
zA6IKqsnjIU^CD`_yi_%>R+CSts*uNlE%STrnBOPPZRyFMqI+$%(g`JJlw^!<R_CM}
zG$c@On9G_u=7c=yghuL{Qt5`O+385eWG1n`P_3JYd(jN*sW;}HGqLv-ks~KW4nJ+K
zpLIw7`=tE*|F4O~f4lR;-=gDJcTQu4R+l$hk`Yr&JXGH5t0KownK=BG6PG->K<duV
zBJ20e@q@Yk&%e_#GB0N#^TZPC<_k5G^IR1#@8PFJ78cFXptxi>5E?Rv*Im?hOfB<7
z66;T&zbHyI?FHo}lhFQdr_8IOy5}d!na7gY+_Y6iS8j-pz7V(mKIJ8ola_hQMCJ42
zM&*$ucIiX+ds`C2joIldF83v5TDJZ&B7bRw{?=V<-Bg!;Umo@ABT1~6kG^aELaqtQ
zWf1qwSB$<Sd)8VacUSxs(u+ltUTp36wS6Uy1a8?2qz|uO5JGYTCAr(@qV&QvO;qpX
zej@KFaa4i0FNna%eQ^+yH%Kp9XGaz}*zFB>6Nem_0+Sho23X@()D%-DkXEkl_3>RL
z79HHTH*siMP+&4^yvQiwnvpH*?!r)s^)kMoqAJAaLdbytk<WbX#-=Z!FC426``AEE
z9MyvVuop`q=QfaoC#hO=OvU1*o%!)#B(`aUxD<i{lOlksnCnTH02>UX6)B1JCr2A`
z8o@l66bYoYHa}KNJJX7EBo4H*y#9d@QYerWV2%!`=u|Y0B~C?QOra#CXxK?+wpvl|
zkH$$P4zvrujKZX-V5-BAXly066$uoT8HGvFK{R&M?W1twBXKWSvghi85K?Fmjs5IN
zJj*FwVkNKHGovsm1GTr^**%ObDsFDT@Q;2GLJAKabNcLMH&)$e0@<$A?8T86g^*Iv
zpHgfess*Mh;Uwl$8l+74psRXDVx{KYizkGT(%^j!)O-*xDdmdDgp`9g{na&8C)_eq
z{j2g2Qgq^=tLB1uK|jt|BV{7-wHgQ^C5IA|(nE<!=?UDz$l@N8CZsGRzIG6a-SbMx
zlADASpT1Q!1JU|{9S$yrOh|FT{0X4tA9U>6_5!PV6H*qiaJNOb1L>-c9WxS>GU0vg
z1z{kEx?%hx^I}p4{1yt}&~`hB7NQ8<h9OKTNC{Z~(T}hj(^m9khyKZ){UXPN6d5nE
zlAAb1&5qtR_vSsO6r|Xov<6QtE)}*Cr&5Zw8$w87N&Ia2O=^<1vr=x41T5Z0ND;A7
zI7%hD>ZX4=mRL16LW!esO9&|(xMy>nx=^iHUoGhgKt39WUobZ&#RBreOQ5=o{coit
zPDNwvEk;ODSpCqCT01vv9Gr^jEk{ZbxAq7*KoEhQi&$iPV1K&-iJj%@yuE<^$!sA)
zW)C{aaT*~*x6K_oDPApapl%#mfp5RZ{FodJ*1vOZtktq=Zmtgd*zQkusP3C~!aQ2h
zcP|SeGX(;--tn2hs=Bn%-0h>gN^Bb-s&^7U&Tb-|B-VuFOG;pD#+a@~>}1bp>}>v_
z0*Xv#2Xf$)z*BCE>q%{oi{)QWUlBqw2QB5KM-d{W&18de4@D-q0cr8Syl*LMxvnm4
zE{*#2ktMc2n<A5}Nk`u;S4P`xjq@YMk{D2Ak_l*DBuxx}^kH#W9e6*+mKeCz<)aPE
zDKZ%qMBDZ^Za#1#Zzqbrt1=-INen1583~AsT(`64&Pn6Uqz>x3$o92SZr=7{Vu=Ao
zCNX|R9+b#1#`)p;u;(^I>6#n2mB}OTPNtF=%tU1T^`iaA2}xxHQMPSNxnpX+t!bm~
zFs7Cm<SH@*M)8~LViX-Cr#6ROj0fWfrcq|b+wDBW?I#n7K`tVv1;#YIlat)NlE<6O
zBnFv^Oo7RWWGXR8iG2K&6M5WCZ747qgUlrcDUq>NQ{&d?B2!>8Cb>uqCK8zflL^Re
zy8}0k6Z4UyiS@0sdq3*r=a5ohGA6l2Voxd}W3Rl0hDdcG*-Q`8qLYJ(Ag-H3fyr3p
zE-`Q-SFW1j>3u#r@*Gk^JTsBlqnpR-($fu5dfxogwdmE3Xt^Unuo|s<LC9D<0#u6I
UWlhI7IsgCw07*qoM6N<$f`Z&bod5s;

literal 0
HcmV?d00001

diff --git a/src/assets/svg/home/location-marker.svg b/src/assets/svg/home/location-marker.svg
deleted file mode 100644
index 73abfb32..00000000
--- a/src/assets/svg/home/location-marker.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="69" height="69" viewBox="0 0 69 69" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="location-marker">
-<path id="Vector" d="M50.7639 47.889L38.5653 60.0876C38.0318 60.6216 37.3983 61.0453 36.701 61.3343C36.0037 61.6233 35.2563 61.7721 34.5014 61.7721C33.7466 61.7721 32.9992 61.6233 32.3019 61.3343C31.6046 61.0453 30.9711 60.6216 30.4376 60.0876L18.2361 47.889C15.0196 44.6724 12.8292 40.5741 11.9419 36.1126C11.0545 31.6511 11.51 27.0266 13.2509 22.824C14.9917 18.6214 17.9397 15.0293 21.722 12.5021C25.5043 9.97487 29.9511 8.62598 34.5 8.62598C39.0489 8.62598 43.4957 9.97487 47.278 12.5021C51.0603 15.0293 54.0083 18.6214 55.7491 22.824C57.49 27.0266 57.9455 31.6511 57.0582 36.1126C56.1708 40.5741 53.9804 44.6724 50.7639 47.889Z" fill="#FF7F23" stroke="#FF7F23" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
diff --git a/src/assets/svg/home/selected-marker.svg b/src/assets/svg/home/selected-marker.svg
deleted file mode 100644
index adda4745..00000000
--- a/src/assets/svg/home/selected-marker.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="177" height="71" viewBox="0 0 177 71" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M43.1027 61.001L36.2522 67.8168C35.5573 68.5089 34.7322 69.0578 33.824 69.4324C32.9158 69.8069 31.9423 69.9997 30.9591 69.9997C29.976 69.9997 29.0025 69.8069 28.0942 69.4324C27.186 69.0578 26.3609 68.5089 25.666 67.8168L9.77374 52.0087C5.5843 47.8403 2.7313 42.5294 1.57552 36.7477C0.419739 30.9661 1.01308 24.9732 3.28052 19.5271C5.54796 14.0809 9.38765 9.42598 14.3141 6.15097C19.2046 2.89978 24.9481 1.15344 30.828 1.12821C31.798 1.04401 32.7806 1.00098 33.7739 1.00098H144.226C161.774 1.00098 176 14.4324 176 31.001C176 47.5695 161.774 61.001 144.226 61.001H43.1027Z" fill="white"/>
-<path d="M43.1027 61.001V60.001C42.8384 60.001 42.5848 60.1056 42.3974 60.2921L43.1027 61.001ZM36.2522 67.8168L35.5469 67.1079L35.5465 67.1083L36.2522 67.8168ZM25.666 67.8168L26.3717 67.1083L26.3713 67.1078L25.666 67.8168ZM9.77374 52.0087L9.06841 52.7176L9.06851 52.7177L9.77374 52.0087ZM1.57552 36.7477L0.594922 36.9438H0.594922L1.57552 36.7477ZM3.28052 19.5271L2.35733 19.1427L3.28052 19.5271ZM14.3141 6.15097L13.7604 5.3182H13.7604L14.3141 6.15097ZM30.828 1.12821L30.8323 2.1282C30.8597 2.12808 30.8871 2.12683 30.9145 2.12446L30.828 1.12821ZM42.3974 60.2921L35.5469 67.1079L36.9575 68.5257L43.808 61.7099L42.3974 60.2921ZM35.5465 67.1083C34.9448 67.7076 34.2299 68.1833 33.4427 68.5079L34.2053 70.3569C35.2345 69.9324 36.1699 69.3101 36.9578 68.5254L35.5465 67.1083ZM33.4427 68.5079C32.6555 68.8326 31.8116 68.9997 30.9591 68.9997V70.9997C32.073 70.9997 33.176 70.7813 34.2053 70.3569L33.4427 68.5079ZM30.9591 68.9997C30.1067 68.9997 29.2627 68.8326 28.4755 68.5079L27.713 70.3569C28.7422 70.7813 29.8453 70.9997 30.9591 70.9997V68.9997ZM28.4755 68.5079C27.6883 68.1833 26.9735 67.7076 26.3717 67.1083L24.9604 68.5254C25.7483 69.3101 26.6837 69.9324 27.713 70.3569L28.4755 68.5079ZM26.3713 67.1078L10.479 51.2997L9.06851 52.7177L24.9608 68.5258L26.3713 67.1078ZM10.4791 51.2998C6.42985 47.2709 3.67293 42.1384 2.55612 36.5517L0.594922 36.9438C1.78967 42.9204 4.73874 48.4096 9.06841 52.7176L10.4791 51.2998ZM2.55612 36.5517C1.43932 30.965 2.0126 25.1742 4.2037 19.9114L2.35733 19.1427C0.013562 24.7722 -0.599837 30.9671 0.594922 36.9438L2.55612 36.5517ZM4.2037 19.9114C6.39483 14.6485 10.1056 10.1495 14.8677 6.98374L13.7604 5.3182C8.66966 8.70248 4.70108 13.5132 2.35733 19.1427L4.2037 19.9114ZM14.8677 6.98374C19.5951 3.84099 25.1476 2.15259 30.8323 2.1282L30.8237 0.128216C24.7487 0.154284 18.8141 1.95856 13.7604 5.3182L14.8677 6.98374ZM30.9145 2.12446C31.8557 2.04276 32.8095 2.00098 33.7739 2.00098V0.000976562C32.7517 0.000976562 31.7403 0.0452613 30.7415 0.131953L30.9145 2.12446ZM33.7739 2.00098H144.226V0.000976562H33.7739V2.00098ZM144.226 2.00098C161.277 2.00098 175 15.0381 175 31.001H177C177 13.8268 162.272 0.000976562 144.226 0.000976562V2.00098ZM175 31.001C175 46.9639 161.277 60.001 144.226 60.001V62.001C162.272 62.001 177 48.1751 177 31.001H175ZM144.226 60.001H43.1027V62.001H144.226V60.001Z" fill="#FF7F23"/>
-</svg>
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index 870ac879..5aa682d0 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -1,10 +1,13 @@
 @use "src/utils/styles/mediaQuery" as media;
 
-.marker {
+.container{
   display: flex;
-  flex-direction: column;
   justify-content: center;
+  flex-direction: column;
   align-items: center;
+}
+
+.marker {  
   width: 69px;
   height: 69px;
 
@@ -14,6 +17,8 @@
   }
 
   &--clicked {
+    position: absolute;
+    left: 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -35,13 +40,14 @@
   align-items: center;
   box-sizing: content-box;
 
+
   &__photo img {
     width: 43px;
     height: 43px;
     border-radius: 89.5px;
     position: absolute;
     top: 10px;
-    left: 13px;
+    left: 28px;
 
     @include media.media-breakpoint-down(mobile) {
       width: 30px;
@@ -52,12 +58,12 @@
   }
 
   &__photo--clicked img {
-    width: 56px;
-    height: 56px;
+    width: 56.007px;
+    height: 55.723px;
     border-radius: 89.5px;
     position: absolute;
-    top: 3px;
-    left: 5px;
+    top: 2px;
+    left: 23px;
 
     @include media.media-breakpoint-down(mobile) {
       width: 36px;
@@ -68,11 +74,11 @@
   }
 
   &__name {
-    text-align: center;
+    width: 100px;
     font-size: 18px;
     font-weight: 500;
-    width: 100%;
-
+    text-align: center;
+    
     @include media.media-breakpoint-down(mobile) {
       font-size: 12px;
       font-weight: 700;
@@ -88,7 +94,7 @@
       position: absolute;
       text-align: center;
       top: 10px;
-      left: 60px;
+      left: 75px;
       font-size: 20px;
       font-weight: 700;
       color: #fe7f23;
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
index 5c08bfbd..071793d2 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
+++ b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
@@ -1,11 +1,12 @@
 import Default from 'assets/images/search/defaultImg.png';
-import MarkerLogo from 'assets/svg/home/location-marker.svg';
-import Selected from 'assets/svg/home/selected-marker.svg';
+import MarkerLogo from 'assets/images/home/location-marker.png';
+import Selected from 'assets/images/home/selected-marker.png';
 import styles from './MarkerHtml.module.scss';
 
 export function MarkerHtml(defaultImg:string, name:string, index:number) {
   return `
-    <img src=${MarkerLogo} class=${styles.marker}>
+  <div class=${styles.container}>
+    <img src=${MarkerLogo}  class=${styles.marker}/>
       <div class=${styles.bubble}>
         <div class=${styles.bubble__photo}>
           <img src=${defaultImg} alt=""/>
@@ -18,12 +19,13 @@ export function MarkerHtml(defaultImg:string, name:string, index:number) {
           ${name}
         </div>
       </div>
-    </img>
+      </div>
   `;
 }
 
 export function ClickedMarkerHtml(defaultImg:string, name:string, index:number) {
   return `
+  <div class=${styles.continer}>
     <img src=${Selected} class=${styles['marker--clicked']}>
       <div class=${styles.bubble}>
         <div class=${styles['bubble__photo--clicked']}>
@@ -36,6 +38,6 @@ export function ClickedMarkerHtml(defaultImg:string, name:string, index:number)
           ${name}
         </div>
       </div>
-    </img>
+    </div>
   `;
 }

From 407826a80247ec1a124a05be785b5a6197f8c894 Mon Sep 17 00:00:00 2001
From: KimDoToRi <60084235+KimKyungYun@users.noreply.github.com>
Date: Thu, 13 Jul 2023 10:11:53 +0900
Subject: [PATCH 09/12] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Map/components/MarkerHtml/MarkerHtml.module.scss        | 6 +++---
 .../Home/components/Map/components/MarkerHtml/index.tsx     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index 5aa682d0..2754a782 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -53,7 +53,7 @@
       width: 30px;
       height: 30px;
       top: 7px;
-      left: 9px;
+      left: 35px;
     }
   }
 
@@ -69,7 +69,7 @@
       width: 36px;
       height: 36px;
       top: 2px;
-      left: 8px;
+      left: 22px;
     }
   }
 
@@ -103,7 +103,7 @@
         width: 70px;
         height: 34px;
         top: 3px;
-        left: 40px;
+        left: 55px;
         font-size: 14px;
       }
     }
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
index 071793d2..29472dbb 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
+++ b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
@@ -6,7 +6,7 @@ import styles from './MarkerHtml.module.scss';
 export function MarkerHtml(defaultImg:string, name:string, index:number) {
   return `
   <div class=${styles.container}>
-    <img src=${MarkerLogo}  class=${styles.marker}/>
+    <img src=${MarkerLogo}  class=${styles.marker} alt="marker" />
       <div class=${styles.bubble}>
         <div class=${styles.bubble__photo}>
           <img src=${defaultImg} alt=""/>

From 097964477eeba1f5b11cd4ad56f0aacd0c451695 Mon Sep 17 00:00:00 2001
From: KimDoToRi <60084235+KimKyungYun@users.noreply.github.com>
Date: Thu, 13 Jul 2023 10:23:57 +0900
Subject: [PATCH 10/12] =?UTF-8?q?fix:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EB=A9=94=EB=89=B4=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95,?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MarkerHtml/MarkerHtml.module.scss          |  7 +++----
 .../MobileOptions/MobileOptions.module.scss    |  7 ++++---
 .../Map/components/MobileOptions/index.tsx     | 18 +++++++++---------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index 2754a782..153df651 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -1,13 +1,13 @@
 @use "src/utils/styles/mediaQuery" as media;
 
-.container{
+.container {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
 }
 
-.marker {  
+.marker {
   width: 69px;
   height: 69px;
 
@@ -40,7 +40,6 @@
   align-items: center;
   box-sizing: content-box;
 
-
   &__photo img {
     width: 43px;
     height: 43px;
@@ -78,7 +77,7 @@
     font-size: 18px;
     font-weight: 500;
     text-align: center;
-    
+
     @include media.media-breakpoint-down(mobile) {
       font-size: 12px;
       font-weight: 700;
diff --git a/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss b/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss
index e6e7fb55..bd779712 100644
--- a/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss
+++ b/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss
@@ -1,5 +1,8 @@
-.top-options {
+.nav {
   position: absolute;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 50px;
   top: 20px;
   left: 50%;
   transform: translate(-50%);
@@ -10,7 +13,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 70%;
     height: 48px;
     background: #ffffff;
     box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%);
@@ -20,7 +22,6 @@
     color: #666666;
     padding-left: 18px;
     padding-right: 15px;
-    margin-bottom: 10px;
   }
 
   &__filter {
diff --git a/src/pages/Home/components/Map/components/MobileOptions/index.tsx b/src/pages/Home/components/Map/components/MobileOptions/index.tsx
index 1395aaf9..cee53828 100644
--- a/src/pages/Home/components/Map/components/MobileOptions/index.tsx
+++ b/src/pages/Home/components/Map/components/MobileOptions/index.tsx
@@ -17,9 +17,9 @@ export default function MobileOptions(): JSX.Element {
   };
   return (
     <div className={styles.options}>
-      <div className={styles['top-options']}>
+      <div className={styles.nav}>
         <div>
-          <Link to="/search" className={styles['top-options__search']}>
+          <Link to="/search" className={styles.nav__search}>
             검색어를 입력해주세요.
             <LensIcon />
           </Link>
@@ -27,20 +27,20 @@ export default function MobileOptions(): JSX.Element {
         <button
           type="button"
           className={cn({
-            [styles['top-options__filter']]: true,
-            [styles['top-options__filter--clicked']]: selected !== '' && !filter,
+            [styles.nav__filter]: true,
+            [styles['nav__filter--clicked']]: selected !== '' && !filter,
           })}
           onClick={toggle}
         >
           <VerticalDot />
         </button>
         {filter && (
-        <div className={styles['top-options__list']}>
+        <div className={styles.nav__list}>
           <button
             type="button"
             className={cn({
-              [styles['top-options__text']]: true,
-              [styles['top-options__text--clicked']]: selected === 'friend',
+              [styles.nav__text]: true,
+              [styles['nav__text--clicked']]: selected === 'friend',
             })}
             onClick={() => handleClick('friend')}
           >
@@ -50,8 +50,8 @@ export default function MobileOptions(): JSX.Element {
           <button
             type="button"
             className={cn({
-              [styles['top-options__text']]: true,
-              [styles['top-options__text--clicked']]: selected === 'bookmark',
+              [styles.nav__text]: true,
+              [styles['nav__text--clicked']]: selected === 'bookmark',
             })}
             onClick={() => handleClick('bookmark')}
           >

From 0c9f5fbbecc148b8a42a0fc2d71f48fbfd211ab5 Mon Sep 17 00:00:00 2001
From: KimDoToRi <60084235+KimKyungYun@users.noreply.github.com>
Date: Mon, 17 Jul 2023 12:50:18 +0900
Subject: [PATCH 11/12] =?UTF-8?q?fix:=20=EB=A7=88=EC=BB=A4=20=EC=82=AC?=
 =?UTF-8?q?=EC=A7=84=20=ED=91=9C=EC=8B=9C=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MarkerHtml/MarkerHtml.module.scss         | 31 ++++++++++++++-----
 .../Map/components/MarkerHtml/index.tsx       | 14 ++++-----
 src/pages/Home/components/Map/index.tsx       |  8 ++---
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index 153df651..d74e9dcf 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -46,7 +46,7 @@
     border-radius: 89.5px;
     position: absolute;
     top: 10px;
-    left: 28px;
+    left: 29px;
 
     @include media.media-breakpoint-down(mobile) {
       width: 30px;
@@ -62,13 +62,13 @@
     border-radius: 89.5px;
     position: absolute;
     top: 2px;
-    left: 23px;
+    left: 22px;
 
     @include media.media-breakpoint-down(mobile) {
       width: 36px;
       height: 36px;
       top: 2px;
-      left: 22px;
+      left: 21px;
     }
   }
 
@@ -111,16 +111,33 @@
   &__index {
     color: #ffffff;
     position: absolute;
-    top: 20px;
-    left: 28px;
+    top: 18px;
+    left: 43px;
     font-size: 24px;
     font-weight: 700;
     z-index: 999;
 
     @include media.media-breakpoint-down(mobile) {
       font-size: 16px;
-      top: 12px;
-      left: 20px;
+      top: 13px;
+      left: 46px;
+    }
+
+    &--clidked{
+      color: #ffffff;
+      position: absolute;
+      top: 18px;
+      left: 43px;
+      font-size: 24px;
+      font-weight: 700;
+      z-index: 999;
+      top: 15px;
+
+       @include media.media-breakpoint-down(mobile) {
+        font-size: 16px;
+        top: 10px;
+        left:35px;
+    }
     }
   }
 }
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
index 29472dbb..6bf8c871 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
+++ b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
@@ -3,16 +3,16 @@ import MarkerLogo from 'assets/images/home/location-marker.png';
 import Selected from 'assets/images/home/selected-marker.png';
 import styles from './MarkerHtml.module.scss';
 
-export function MarkerHtml(defaultImg:string, name:string, index:number) {
+export function MarkerHtml(thumbnail:string | null, name:string, index:number) {
   return `
   <div class=${styles.container}>
     <img src=${MarkerLogo}  class=${styles.marker} alt="marker" />
       <div class=${styles.bubble}>
         <div class=${styles.bubble__photo}>
-          <img src=${defaultImg} alt=""/>
+          <img src=${thumbnail || Default} alt=""/>
         </div>
         <div class=${styles.bubble__index}>
-          ${defaultImg === Default ? index : ''}
+          ${!thumbnail ? index : ''}
           
         </div>
         <div class=${styles.bubble__name}>
@@ -23,16 +23,16 @@ export function MarkerHtml(defaultImg:string, name:string, index:number) {
   `;
 }
 
-export function ClickedMarkerHtml(defaultImg:string, name:string, index:number) {
+export function ClickedMarkerHtml(thumbnail:string | null, name:string, index:number) {
   return `
   <div class=${styles.continer}>
     <img src=${Selected} class=${styles['marker--clicked']}>
       <div class=${styles.bubble}>
         <div class=${styles['bubble__photo--clicked']}>
-          <img src=${defaultImg} alt="" />
+          <img src=${thumbnail || Default} alt="" />
         </div>
-        <div class=${styles.bubble__index}>
-          ${defaultImg === Default ? index : ''}
+        <div class=${styles['bubble__index--clidked']}>
+          ${!thumbnail ? index : ''}
         </div>
         <div class=${styles['bubble__name--clicked']}>
           ${name}
diff --git a/src/pages/Home/components/Map/index.tsx b/src/pages/Home/components/Map/index.tsx
index ca544c46..dae9ae33 100644
--- a/src/pages/Home/components/Map/index.tsx
+++ b/src/pages/Home/components/Map/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 import useGeolocation from 'utils/hooks/useGeolocation';
 import MARKER from 'pages/Home/static/marker';
-import defaultImg from 'assets/images/search/default-image.png';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import styles from './Map.module.scss';
 import OptionButtons from './components/OptionButtons';
@@ -28,7 +27,7 @@ export default function Map(): JSX.Element {
       if (selectedMarker.current) {
         selectedMarker.current.setIcon({
           content: MarkerHtml(
-            defaultImg,
+            '',
             selectedMarker.current.getTitle(),
             selectedMarker.current.getZIndex(),
           ),
@@ -38,7 +37,8 @@ export default function Map(): JSX.Element {
       }
 
       markerCur.setIcon({
-        content: ClickedMarkerHtml(defaultImg, item.placeName, item.index),
+        // 추후 각 마커벼로 이미지파일이 주어지면 첫번째 인자로 해당 이미지를 넘겨주도록 해야함
+        content: ClickedMarkerHtml('', item.placeName, item.index),
         size: new naver.maps.Size(50, 52),
         anchor: new naver.maps.Point(25, 26),
       });
@@ -84,7 +84,7 @@ export default function Map(): JSX.Element {
           map: mapRef.current,
           zIndex: item.index,
           icon: {
-            content: MarkerHtml(defaultImg, item.placeName, item.index),
+            content: MarkerHtml('', item.placeName, item.index),
             size: new naver.maps.Size(50, 52),
             anchor: new naver.maps.Point(25, 26),
           },

From 20e276f05e96d5a213f69650b8dda6c94e3119d2 Mon Sep 17 00:00:00 2001
From: KimDoToRi <60084235+KimKyungYun@users.noreply.github.com>
Date: Mon, 17 Jul 2023 12:54:31 +0900
Subject: [PATCH 12/12] =?UTF-8?q?fix:=20lint=EC=97=90=EB=9F=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Map/components/MarkerHtml/MarkerHtml.module.scss     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
index d74e9dcf..8810ca79 100644
--- a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
+++ b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -123,21 +123,20 @@
       left: 46px;
     }
 
-    &--clidked{
+    &--clidked {
       color: #ffffff;
       position: absolute;
-      top: 18px;
       left: 43px;
       font-size: 24px;
       font-weight: 700;
       z-index: 999;
       top: 15px;
 
-       @include media.media-breakpoint-down(mobile) {
+      @include media.media-breakpoint-down(mobile) {
         font-size: 16px;
         top: 10px;
-        left:35px;
-    }
+        left: 35px;
+      }
     }
   }
 }