feat/#564 poi 적용

.github/workflows/fe-merge-dev.yml

@@ -23,8 +23,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'npm'
-          cache-dependency-path: 'frontend'
+          cache: "npm"
+          cache-dependency-path: "frontend"
 
       - name: Install npm
         run: npm install
@@ -35,7 +35,8 @@ jobs:
         working-directory: frontend
         env:
           REACT_APP_GOOGLE_ANALYTICS: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS }}
-          APP_URL: 'https://mapbefine.kro.kr/api'
+          APP_URL: "https://mapbefine.kro.kr/api"
+          TMAP_API_KEY: ${{ secrets.TMAP_API_KEY }}
 
       - name: upload to artifact
         uses: actions/upload-artifact@v3
@@ -66,7 +67,7 @@ jobs:
 
         uses: 8398a7/action-slack@v3
         with:
-          mention: 'here'
+          mention: "here"
           if_mention: always
           status: ${{ job.status }}
           fields: workflow,job,commit,message,ref,author,took

frontend/src/apis/getPoiApi.ts

@@ -0,0 +1,19 @@
+import { PoiApiResponse } from '../types/Poi';
+
+export const getPoiApi = async (query: string): Promise<PoiApiResponse> => {
+  const response = await fetch(
+    `https://apis.openapi.sk.com/tmap/pois?version=1&format=json&callback=result&searchKeyword=${query}&resCoordType=WGS84GEO&reqCoordType=WGS84GEO&count=10`,
+    {
+      method: 'GET',
+      headers: { appKey: process.env.TMAP_API_KEY || '' },
+    },
+  );
+
+  if (response.status >= 400) {
+    throw new Error('[POI] GET 요청에 실패했습니다.');
+  }
+
+  const responseData = await response.json();
+
+  return responseData;
+};

frontend/src/components/common/Input/Autocomplete.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable react/function-component-definition */
+import { memo, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import { getPoiApi } from '../../../apis/getPoiApi';
+import { Poi } from '../../../types/Poi';
+import Input from '.';
+import Text from '../Text';
+
+interface AutocompleteProps {
+  defaultValue?: string;
+  onSuggestionSelected: (suggestion: Poi) => void;
+}
+
+const Autocomplete = ({
+  defaultValue = '',
+  onSuggestionSelected,
+}: AutocompleteProps) => {
+  const [inputValue, setInputValue] = useState<string>(defaultValue);
+  const [suggestions, setSuggestions] = useState<Poi[]>([]);
+  const [selectedSuggestion, setSelectedSuggestion] = useState<
+    Poi['name'] | null
+  >(null);
+
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const fetchData = async (query: string) => {
+    try {
+      const fetchedSuggestions = await getPoiApi(query);
+
+      if (!fetchedSuggestions)
+        throw new Error('추천 검색어를 불러오지 못했습니다.');
+
+      setSuggestions(fetchedSuggestions.searchPoiInfo.pois.poi);
+    } catch (error) {
+      setSuggestions([]);
+      console.error(error);
+    }
+  };
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.trim() === '') {
+      setSuggestions([]);
+      setInputValue('');
+      return;
+    }
+
+    setInputValue(e.target.value);
+
+    if (debounceTimeoutRef.current !== null) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    debounceTimeoutRef.current = setTimeout(
+      () => fetchData(e.target.value),
+      500,
+    );
+  };
+
+  const onClickSuggestion = (suggestion: Poi) => {
+    const { name } = suggestion;
+    setInputValue(name);
+    setSelectedSuggestion(name);
+    onSuggestionSelected(suggestion);
+  };
+
+  useEffect(() => {
+    setInputValue(defaultValue);
+  }, [defaultValue]);
+
+  return (
+    <>
+      <AutocompleteInput
+        type="text"
+        value={inputValue}
+        onChange={onInputChange}
+        placeholder="장소를 직접 입력하거나 지도에서 클릭하세요."
+        onClick={() => setSelectedSuggestion(null)}
+      />
+
+      {!selectedSuggestion && (
+        <SuggestionsList>
+          {suggestions?.map((suggestion: Poi, index: number) => (
+            <SuggestionItem
+              key={index}
+              onClick={() => {
+                onClickSuggestion(suggestion);
+              }}
+            >
+              {suggestion.name}
+              <Address $fontSize="small" color="gray" $fontWeight="normal">
+                {suggestion.upperAddrName} {suggestion.middleAddrName}{' '}
+                {suggestion.roadName}
+              </Address>
+            </SuggestionItem>
+          ))}
+        </SuggestionsList>
+      )}
+    </>
+  );
+};
+
+export default memo(Autocomplete);
+
+const AutocompleteInput = styled(Input)`
+  width: 100%;
+`;
+
+const SuggestionsList = styled.ul`
+  border: 1px solid #ccc;
+  border-top: none;
+  border-bottom: none;
+  border-radius: 4px;
+  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.3);
+`;
+
+const SuggestionItem = styled.li`
+  padding: ${({ theme }) => theme.spacing['2']};
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f7f7f7;
+  }
+`;
+
+const Address = styled(Text)``;
+
+const Description = styled.div`
+  font-size: ${({ theme }) => theme.fontSize.small};
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

frontend/src/hooks/useClickedCoordinate.ts

@@ -10,10 +10,15 @@ export default function useClickedCoordinate(map: TMap | null) {
 
   useEffect(() => {
     if (!map) return;
+    const currentZoom = map.getZoom();
     if (clickedCoordinate.address) displayClickedMarker(map);
 
     // 선택된 좌표가 있으면 해당 좌표로 지도의 중심을 이동
     if (clickedCoordinate.latitude && clickedCoordinate.longitude) {
+      if (currentZoom <= 17) {
+        map.setZoom(17);
+      }
+
       map.panTo(
         new Tmapv3.LatLng(
           clickedCoordinate.latitude,

frontend/src/pages/NewPin.tsx

@@ -1,13 +1,13 @@
+/* eslint-disable no-nested-ternary */
 import { FormEvent, useContext, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { getApi } from '../apis/getApi';
-import { getMapApi } from '../apis/getMapApi';
 import { postApi } from '../apis/postApi';
 import Button from '../components/common/Button';
 import Flex from '../components/common/Flex';
-import Input from '../components/common/Input';
+import Autocomplete from '../components/common/Input/Autocomplete';
 import Space from '../components/common/Space';
 import Text from '../components/common/Text';
 import InputContainer from '../components/InputContainer';
@@ -24,6 +24,7 @@ import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 import useToast from '../hooks/useToast';
 import { NewPinFormProps } from '../types/FormValues';
+import { Poi } from '../types/Poi';
 import { TopicCardProps } from '../types/Topic';
 import { hasErrorMessage, hasNullValue } from '../validations';
 
@@ -51,7 +52,7 @@ function NewPin() {
   const { routePage } = useNavigator();
   const { showToast } = useToast();
   const { width } = useSetLayoutWidth(SIDEBAR);
-  const { openModal, closeModal } = useContext(ModalContext);
+  const { openModal } = useContext(ModalContext);
   const { compressImageList } = useCompressImage();
 
   const [formImages, setFormImages] = useState<File[]>([]);
@@ -131,12 +132,10 @@ function NewPin() {
         return;
       }
       let postTopicId = topic?.id;
-      let postName = formValues.name;
 
       if (!topic) {
         // 토픽이 없으면 selectedTopic을 통해 토픽을 생성한다.
         postTopicId = selectedTopic?.topicId;
-        postName = selectedTopic?.topicName;
       }
 
       if (postTopicId) routePage(`/topics/${postTopicId}`, [postTopicId]);
@@ -148,39 +147,6 @@ function NewPin() {
     }
   };
 
-  const onClickAddressInput = (
-    e:
-      | React.MouseEvent<HTMLInputElement>
-      | React.KeyboardEvent<HTMLInputElement>,
-  ) => {
-    if (!(e.type === 'click') && e.currentTarget.value) return;
-
-    const width = 500; // 팝업의 너비
-    const height = 600; // 팝업의 높이
-    new window.daum.Postcode({
-      width, // 생성자에 크기 값을 명시적으로 지정해야 합니다.
-      height,
-      async onComplete(data: any) {
-        const addr = data.roadAddress; // 주소 변수
-
-        // data를 통해 받아온 값을 Tmap api를 통해 위도와 경도를 구한다.
-        const { ConvertAdd } = await getMapApi<any>(
-          `https://apis.openapi.sk.com/tmap/geo/convertAddress?version=1&format=json&callback=result&searchTypCd=NtoO&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo&coordType=WGS84GEO&reqAdd=${addr}`,
-        );
-        const lat = ConvertAdd.oldLat;
-        const lng = ConvertAdd.oldLon;
-
-        setClickedCoordinate({
-          latitude: lat,
-          longitude: lng,
-          address: addr,
-        });
-      },
-    }).open({
-      popupKey: 'postPopUp',
-    });
-  };
-
   const onPinImageChange = async (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -215,6 +181,17 @@ function NewPin() {
     setShowedImages(imageUrlLists);
   };
 
+  const onSuggestionSelected = (suggestion: Poi) => {
+    const { noorLat, noorLon } = suggestion;
+    const address = `${suggestion.upperAddrName} ${suggestion.middleAddrName} ${suggestion.roadName}[${suggestion.name}]`;
+
+    setClickedCoordinate({
+      latitude: Number(noorLat),
+      longitude: Number(noorLon),
+      address,
+    });
+  };
+
   useEffect(() => {
     const getTopicId = async () => {
       if (topicId && topicId.split(',').length === 1) {
@@ -329,14 +306,9 @@ function NewPin() {
             </Text>
           </Flex>
           <Space size={0} />
-          <Input
-            name="address"
-            readOnly
-            value={clickedCoordinate.address}
-            onClick={onClickAddressInput}
-            onKeyDown={onClickAddressInput}
-            tabIndex={2}
-            placeholder="지도를 클릭하거나 장소의 위치를 입력해주세요."
+          <Autocomplete
+            defaultValue={clickedCoordinate.address}
+            onSuggestionSelected={onSuggestionSelected}
           />
 
           <Space size={5} />

frontend/src/types/Poi.ts

@@ -0,0 +1,77 @@
+export interface EvCharger {
+  evCharger: any[];
+}
+
+export interface NewAddress {
+  centerLat: string;
+  centerLon: string;
+  frontLat: string;
+}
+
+export interface NewAddressList {
+  newAddress: NewAddress[];
+}
+
+export interface Poi {
+  id: string;
+  pkey: string;
+  navSeq: string;
+  collectionType: string;
+  name: string;
+
+  adminDongCode: string;
+  bizName: string;
+  dataKind: string;
+  desc: string;
+
+  evChargers: EvCharger;
+  firstBuildNo: string;
+  firstNo: string;
+  frontLat: string;
+  frontLon: string;
+
+  legalDongCode: string;
+
+  lowerAddrName: string;
+
+  middleAddrName: string;
+  mlClass: string;
+
+  newAddressList: NewAddressList;
+
+  noorLat: string;
+  noorLon: string;
+
+  parkFlag: string;
+
+  radius: string;
+
+  roadName: string;
+
+  rpFlag: string;
+
+  secondBuildNo: string;
+
+  secondNo: string;
+
+  telNo: string;
+
+  upperAddrName: string;
+
+  zipCode: String;
+}
+
+export interface Pois {
+  poi: Poi[];
+}
+
+export interface SearchPoiInfo {
+  totalCount: string;
+  count: string;
+  page: string;
+  pois: Pois;
+}
+
+export interface PoiApiResponse {
+  searchPoiInfo: SearchPoiInfo;
+}