feat: 동일한 부분 핑크색으로 뜨는 기능 구현

TEAM-BEAT · Jan 3, 2025 · 7378870 · 7378870
1 parent 360b79e
commit 7378870
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/commons/mapInput/MapInput.styled.ts b/src/components/commons/mapInput/MapInput.styled.ts
@@ -141,7 +141,8 @@ export const DropDownItem = styled.div`
 export const RoadName = styled.p`
   align-self: stretch;
 
-  color: ${({ theme }) => theme.colors.pink_200};
+  color: ${({ theme }) => theme.colors.gray_0};
+  //color: ${({ theme }) => theme.colors.pink_200};
   ${({ theme }) => theme.fonts["body1-normal-semi"]};
   white-space: nowrap;
 `;

diff --git a/src/components/commons/mapInput/MapInput.tsx b/src/components/commons/mapInput/MapInput.tsx
@@ -98,6 +98,16 @@ const MapInput = ({
     }
   };
 
+  const matchStringPink = (inputValue: string, result: string) => {
+    const regex = new RegExp(`(${_.escapeRegExp(inputValue)})`, "gi");
+    const highlightedResult = result.replace(
+      regex,
+      (match) => `<span style="color: #FF97C2;">${match}</span>`
+    );
+
+    return <span dangerouslySetInnerHTML={{ __html: highlightedResult }} />;
+  };
+
   useEffect(() => {
     setInputValue(value as string);
     prevValueRef.current = value as string;
@@ -191,7 +201,7 @@ const MapInput = ({
                       setLatitudeLongitude(place.y, place.x); //lat이 y값
                     }}
                   >
-                    <S.RoadName>{place.place_name}</S.RoadName>
+                    <S.RoadName>{matchStringPink(inputValue, place.place_name)}</S.RoadName>
                     <S.PostName>{place.road_address_name}</S.PostName>
                   </S.DropDownItem>
                   {idx !== places.length - 1 && <S.Divider />}