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/18] =?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) {