fix: 지도 설명 문구 변경

choooz · Oct 18, 2023 · 8408822 · 8408822
1 parent 02e69b9
commit 8408822
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git 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,17 +158,27 @@ 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}>
             직접 설정
           </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
@@ -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}