From 84088222fe711e0d560789ebe4e1de97e1321500 Mon Sep 17 00:00:00 2001
From: leejiho9898 <cctv1998@naver.com>
Date: Thu, 19 Oct 2023 00:15:02 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A7=80=EB=8F=84=20=EC=84=A4=EB=AA=85?=
 =?UTF-8?q?=20=EB=AC=B8=EA=B5=AC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/map/components/MapContainer.tsx   | 27 ++++++++++++++++---
 .../app/map/components/RegionBottomsheet.tsx  |  3 +++
 2 files changed, 26 insertions(+), 4 deletions(-)

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 = () => {
       <TopBox>
         <SettingWrapper>
           <h1 className="title">
-            여행지 근처의
-            <br /> 우리술을 찾아드려요
+            {nowIn === '' ? (
+              <>
+                여행지 근처의
+                <br /> 우리술을 찾아드려요
+              </>
+            ) : (
+              <>
+                <span className="highlight">{nowIn}</span> 근처에 있는
+                <br /> <span className="highlight">우리술</span>이에요.
+              </>
+            )}
           </h1>
 
           <Button variant="primary" height="40px" width="82px" onClick={toggle}>
@@ -162,8 +176,9 @@ const MapContainer = () => {
           </Button>
         </SettingWrapper>
         <div className="description">
-          여행지를 설정하면 <br />
-          여행지의 우리술을 확인할 수 있어요
+          여행지를 설정하면 근처에 있는 우리술을
+          <br />
+          추천받을 수 있어요.
         </div>
       </TopBox>
 
@@ -261,6 +276,7 @@ const MapContainer = () => {
         setChangeMapCenter={setChangeMapCenter}
         onToggleDrinkSearchModal={toggle}
         on={on}
+        onChangeNowIn={onChangeNowIn}
       />
     </Container>
   );
@@ -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}