Merge pull request #80 from BCSDLab/feature/#76

Feature/#76 메인페이지 마커 디자인변경, 드롭다운메뉴 제작
BCSDLab · Jul 17, 2023 · a5da7cc · a5da7cc
2 parents ab9e38e + 20e276f
commit a5da7cc
Show file tree

Hide file tree

Showing 10 changed files with 220 additions and 138 deletions.
diff --git a/src/assets/images/home/location-marker.png b/src/assets/images/home/location-marker.png
diff --git a/src/assets/images/home/selected-marker.png b/src/assets/images/home/selected-marker.png
diff --git a/src/assets/images/search/defaultImg.png b/src/assets/images/search/defaultImg.png
diff --git a/src/assets/svg/home/verticalDot.svg b/src/assets/svg/home/verticalDot.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
@@ -1,119 +1,142 @@
 @use "src/utils/styles/mediaQuery" as media;
 
-.marker {
+.container {
   display: flex;
   justify-content: center;
+  flex-direction: column;
   align-items: center;
-  border: 2px solid #ff7f23;
-  border-radius: 33.5px;
-  background-color: #ffffff;
-  width: 100%;
-  height: 68px;
-  font-weight: 500;
+}
 
-  &::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;
+.marker {
+  width: 69px;
+  height: 69px;
+
+  @include media.media-breakpoint-down(mobile) {
+    width: 48px;
+    height: 48px;
   }
 
   &--clicked {
+    position: absolute;
+    left: 20px;
     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: 175px;
+    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;
+    @include media.media-breakpoint-down(mobile) {
+      width: 125px;
+      height: 45px;
     }
   }
 }
 
 .bubble {
   display: flex;
+  width: 100%;
+  height: 100%;
   align-items: center;
   box-sizing: content-box;
 
   &__photo img {
-    display: flex;
-    align-items: center;
-    width: 62px;
-    height: 62px;
+    width: 43px;
+    height: 43px;
     border-radius: 89.5px;
+    position: absolute;
+    top: 10px;
+    left: 29px;
+
+    @include media.media-breakpoint-down(mobile) {
+      width: 30px;
+      height: 30px;
+      top: 7px;
+      left: 35px;
+    }
   }
 
-  &__name {
-    margin-left: 10px;
-    padding-right: 10px;
+  &__photo--clicked img {
+    width: 56.007px;
+    height: 55.723px;
+    border-radius: 89.5px;
+    position: absolute;
+    top: 2px;
+    left: 22px;
 
     @include media.media-breakpoint-down(mobile) {
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      top: 85px;
-      right: 0;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      font-size: 15px;
-      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;
+      width: 36px;
+      height: 36px;
+      top: 2px;
+      left: 21px;
     }
   }
 
-  &--clicked {
-    display: flex;
-    align-items: center;
+  &__name {
+    width: 100px;
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
 
-    &__photo img {
-      display: flex;
-      align-items: center;
-      width: 65px;
-      height: 65px;
-      border-radius: 89.5px;
+    @include media.media-breakpoint-down(mobile) {
+      font-size: 12px;
+      font-weight: 700;
+      color: #222222;
     }
 
-    &__name {
-      margin-left: 10px;
-      padding-right: 10px;
+    &--clicked {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100px;
+      height: 40px;
+      position: absolute;
+      text-align: center;
+      top: 10px;
+      left: 75px;
+      font-size: 20px;
+      font-weight: 700;
+      color: #fe7f23;
 
       @include media.media-breakpoint-down(mobile) {
-        padding: 0;
-        display: none;
+        width: 70px;
+        height: 34px;
+        top: 3px;
+        left: 55px;
+        font-size: 14px;
       }
     }
   }
-}
 
-.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: 18px;
+    left: 43px;
+    font-size: 24px;
+    font-weight: 700;
+    z-index: 999;
+
+    @include media.media-breakpoint-down(mobile) {
+      font-size: 16px;
+      top: 13px;
+      left: 46px;
+    }
+
+    &--clidked {
+      color: #ffffff;
+      position: absolute;
+      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
@@ -1,33 +1,43 @@
+import Default from 'assets/images/search/defaultImg.png';
+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) {
+export function MarkerHtml(thumbnail:string | null, name:string, index:number) {
   return `
-    <div class=${styles.marker}>
+  <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}>
+          ${!thumbnail ? index : ''}
+          
         </div>
         <div class=${styles.bubble__name}>
           ${name}
         </div>
       </div>
-      <div class=${styles.dummy} />
-    </div>
+      </div>
   `;
 }
 
-export function ClickedMarkerHtml(defaultImg:string, name:string) {
+export function ClickedMarkerHtml(thumbnail:string | null, name:string, index:number) {
   return `
-    <div class=${styles['marker--clicked']}>
-      <div class=${styles['bubble--clicked']}>
-        <div class=${styles.bubble__photo}>
-          <img src=${defaultImg} alt="음식 이미지" />
+  <div class=${styles.continer}>
+    <img src=${Selected} class=${styles['marker--clicked']}>
+      <div class=${styles.bubble}>
+        <div class=${styles['bubble__photo--clicked']}>
+          <img src=${thumbnail || Default} alt="" />
         </div>
-        <div class=${styles.bubble__name}>
+        <div class=${styles['bubble__index--clidked']}>
+          ${!thumbnail ? index : ''}
+        </div>
+        <div class=${styles['bubble__name--clicked']}>
           ${name}
         </div>
       </div>
-      <div class=${styles['dummy--clicked']} />
     </div>
   `;
 }
diff --git 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%);
@@ -19,38 +22,62 @@
     color: #666666;
     padding-left: 18px;
     padding-right: 15px;
-    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 {