diff --git a/src/assets/images/home/location-marker.png b/src/assets/images/home/location-marker.png new file mode 100644 index 00000000..0e5ef3f0 Binary files /dev/null and b/src/assets/images/home/location-marker.png differ diff --git a/src/assets/images/home/selected-marker.png b/src/assets/images/home/selected-marker.png new file mode 100644 index 00000000..2f0a2d5d Binary files /dev/null and b/src/assets/images/home/selected-marker.png differ diff --git a/src/assets/images/search/defaultImg.png b/src/assets/images/search/defaultImg.png new file mode 100644 index 00000000..fac42a72 Binary files /dev/null and b/src/assets/images/search/defaultImg.png differ 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 @@ + 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..8810ca79 100644 --- 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 index 6ada6e67..6bf8c871 100644 --- 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 ` -