diff --git a/apps/jurumarble/src/app/map/components/MapContainer.tsx b/apps/jurumarble/src/app/map/components/MapContainer.tsx index 4f54381f..3a24f7a2 100644 --- a/apps/jurumarble/src/app/map/components/MapContainer.tsx +++ b/apps/jurumarble/src/app/map/components/MapContainer.tsx @@ -22,6 +22,11 @@ interface Location { const MapContainer = () => { const [delayRender, setDelayRender] = useState(true); + const [nowIn, setNowIn] = useState(''); + + const onChangeNowIn = (clickRegion: string) => { + setNowIn(clickRegion); + }; useEffect(() => { setTimeout(() => { @@ -153,8 +158,17 @@ const MapContainer = () => {

- 여행지 근처의 -
우리술을 찾아드려요 + {nowIn === '' ? ( + <> + 여행지 근처의 +
우리술을 찾아드려요 + + ) : ( + <> + {nowIn} 근처에 있는 +
우리술이에요. + + )}

- 여행지를 설정하면
- 여행지의 우리술을 확인할 수 있어요 + 여행지를 설정하면 근처에 있는 우리술을 +
+ 추천받을 수 있어요.
@@ -261,6 +276,7 @@ const MapContainer = () => { setChangeMapCenter={setChangeMapCenter} onToggleDrinkSearchModal={toggle} on={on} + onChangeNowIn={onChangeNowIn} /> ); @@ -278,6 +294,9 @@ const TopBox = styled.section` text-align: left; ${({ theme }) => theme.typography.headline02}; padding-bottom: 8px; + .highlight { + color: ${({ theme }) => theme.colors.main_01}; + } } .description { diff --git a/apps/jurumarble/src/app/map/components/RegionBottomsheet.tsx b/apps/jurumarble/src/app/map/components/RegionBottomsheet.tsx index f4b4dc3b..81b4228a 100644 --- a/apps/jurumarble/src/app/map/components/RegionBottomsheet.tsx +++ b/apps/jurumarble/src/app/map/components/RegionBottomsheet.tsx @@ -8,12 +8,14 @@ interface Props { on: boolean; onToggleDrinkSearchModal: () => void; setChangeMapCenter: (lat: number, lng: number) => void; + onChangeNowIn: (nowIn: string) => void; } const RegionBottomSheet = ({ on, onToggleDrinkSearchModal, setChangeMapCenter, + onChangeNowIn, }: Props) => { if (!on) { return null; @@ -43,6 +45,7 @@ const RegionBottomSheet = ({ onClick={() => { setChangeMapCenter(lat, long); onToggleDrinkSearchModal(); + onChangeNowIn(label); }} > {label}