`;
}
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..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%);
@@ -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 {
diff --git a/src/pages/Home/components/Map/components/MobileOptions/index.tsx b/src/pages/Home/components/Map/components/MobileOptions/index.tsx
index 2dcc749f..cee53828 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);
@@ -15,30 +17,30 @@ export default function MobileOptions(): JSX.Element {
};
return (
-
+
-
+
검색어를 입력해주세요.
-
+
+ {filter && (
+
-
+ )}
);
diff --git a/src/pages/Home/components/Map/index.tsx b/src/pages/Home/components/Map/index.tsx
index 23a63c43..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 defaultImage from 'assets/images/search/default-image.png';
import useMediaQuery from 'utils/hooks/useMediaQuery';
import styles from './Map.module.scss';
import OptionButtons from './components/OptionButtons';
@@ -12,6 +11,7 @@ interface MarkerType {
latitude: number;
longitude: number;
placeName: string;
+ index: number;
}
const options = {
maximumAge: 1000,
@@ -26,14 +26,19 @@ export default function Map(): JSX.Element {
naver.maps.Event.addListener(markerCur, 'click', () => {
if (selectedMarker.current) {
selectedMarker.current.setIcon({
- content: MarkerHtml(defaultImage, selectedMarker.current.getTitle()),
+ content: MarkerHtml(
+ '',
+ 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),
+ // 추후 각 마커벼로 이미지파일이 주어지면 첫번째 인자로 해당 이미지를 넘겨주도록 해야함
+ content: ClickedMarkerHtml('', item.placeName, item.index),
size: new naver.maps.Size(50, 52),
anchor: new naver.maps.Point(25, 26),
});
@@ -77,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),
+ content: MarkerHtml('', 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 dc52674b..4aa5d29b 100644
--- a/src/pages/Home/static/marker.ts
+++ b/src/pages/Home/static/marker.ts
@@ -1,43 +1,51 @@
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,
},
{
- 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,
},
];
diff --git a/yarn.lock b/yarn.lock
index 6a0cf345..61d68ccb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7589,6 +7589,13 @@ qs@6.10.3:
dependencies:
side-channel "^1.0.4"
+qs@^6.11.2:
+ version "6.11.2"
+ resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
+ integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
+ dependencies:
+ side-channel "^1.0.4"
+
queue-microtask@^1.2.2:
version "1.2.3"
resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"