feat: 카카오맵 연동 및 지역 행정구동 검색 기능 구현 (SanE-Seo#21)

src/components/Community/PlaceSearchModal.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import * as P from '../../styles/place-search-modal.style';
+import SeoulCoordinates from '../../seoul_districts_coordinates.json';
+type PlaceProps = {
+  placeInput: string;
+  setPlaceInput: (value: string) => void;
+  setIsOpen: (value: boolean) => void;
+  setLat: (value: number) => void;
+  setLong: (value: number) => void;
+};
+
+type DistrictCoordinates = {
+  [key: string]: { lat: number; lng: number };
+};
+function PlaceSearchModal({
+  placeInput,
+  setPlaceInput,
+  setIsOpen,
+  setLat,
+  setLong,
+}: PlaceProps) {
+  console.log(placeInput);
+  const [searchResults, setSearchResults] = useState<string[]>([]);
+
+  const coordinates: DistrictCoordinates = SeoulCoordinates;
+  useEffect(() => {
+    const results: string[] = [];
+    for (const districtName in coordinates) {
+      if (districtName.includes(placeInput)) {
+        results.push(districtName);
+      }
+    }
+    setSearchResults(results);
+  });
+  return (
+    <>
+      {searchResults.length > 0 && (
+        <P.ModalWrapper>
+          <ul>
+            {searchResults.map((district, index) => (
+              <>
+                <li
+                  key={index}
+                  className="text-style"
+                  onClick={() => {
+                    setPlaceInput(district);
+                    setLat(coordinates[district].lat);
+                    setLong(coordinates[district].lng);
+                    setIsOpen(false);
+                  }}
+                >
+                  {district}
+                </li>
+                <hr className="line" />
+              </>
+            ))}
+          </ul>
+        </P.ModalWrapper>
+      )}
+    </>
+  );
+}
+
+export default PlaceSearchModal;

src/components/Community/UserTrailMap.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import useKakaoLoader from '../useKakaoLoader';
+import { Map, Polyline, CustomOverlayMap } from 'react-kakao-maps-sdk';
+
+import * as U from '../../styles/user-trail-map.style';
+type MapProps = {
+  lat: number;
+  long: number;
+};
+function UserTrailMap({ lat, long }: MapProps) {
+  useKakaoLoader();
+
+  return (
+    <U.MapLayout>
+      <Map
+        id="map"
+        center={{ lat: lat, lng: long }}
+        className="map-style"
+        level={2}
+      ></Map>
+    </U.MapLayout>
+  );
+}
+
+export default UserTrailMap;

src/pages/Community.tsx

@@ -3,19 +3,36 @@ import DefaultLayout from '../components/DefaultLayout';
 import * as C from '../styles/community.style';
 import RightArrowIcon from '../assets/icons/right-arrow';
 import { ReactComponent as SearchIcon } from '../assets/icons/search-icon.svg';
-import MapItem from '../components/Community/MapItem';
 import { useNavigate } from 'react-router-dom';
+import UserTrailMap from '../components/Community/UserTrailMap';
+import PlaceSearchModal from '../components/Community/PlaceSearchModal';
+import { useLocation } from '../contexts/LocationContext';
 function Community() {
   const [placeInput, setPlaceInput] = useState<string>('');
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const { latitude, longitude } = useLocation();
+
+  const [lat, setLat] = useState<number>(latitude);
+  const [long, setLong] = useState<number>(longitude);
 
   const navigate = useNavigate();
+
   return (
     <>
       <DefaultLayout />
       <C.HeaderLayout>
         <C.SearchContainer>
           <SearchIcon />
-          <input name="text" placeholder="지역을 검색하세요"></input>
+          <input
+            name="text"
+            placeholder="지역을 검색하세요"
+            value={placeInput}
+            onChange={(e) => {
+              setPlaceInput(e.target.value);
+              setIsOpen(true);
+            }}
+          ></input>
         </C.SearchContainer>
         <C.AddButton onClick={() => navigate('/edit-user-course')}>
           <span className="button_icon-wrapper">
@@ -25,7 +42,17 @@ function Community() {
           <span>내 코스 추가하기</span>
         </C.AddButton>
       </C.HeaderLayout>
-      <MapItem />
+      {isOpen && (
+        <PlaceSearchModal
+          placeInput={placeInput}
+          setPlaceInput={setPlaceInput}
+          setIsOpen={setIsOpen}
+          setLat={setLat}
+          setLong={setLong}
+        />
+      )}
+
+      <UserTrailMap lat={lat} long={long} />
     </>
   );
 }