feat : Place 선택, State 변경 기능 구현 (#36)

Nexters · Feb 15, 2021 · 4731be6 · 4731be6
1 parent 341cb7d
commit 4731be6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/src/components/PlaceSearch/PlaceSearchList.tsx b/src/components/PlaceSearch/PlaceSearchList.tsx
@@ -1,13 +1,20 @@
 import React, { FC } from 'react';
 import PlaceSearchListItem from '@/components/PlaceSearch/PlaceSearchListItem';
 import styled from 'styled-components';
+import { IPlace } from '@/types/Place';
 
-interface IPlaceSearchListProps {}
+interface IPlaceSearchListProps {
+  places: IPlace[];
+}
 
-const PlaceSearchList: FC<IPlaceSearchListProps> = () => {
+/* eslint-disable camelcase */
+const PlaceSearchList: FC<IPlaceSearchListProps> = (props) => {
+  const { places } = props;
   return (
     <List>
-      <PlaceSearchListItem />
+      {places.map(({ id, place_name }) => (
+        <PlaceSearchListItem key={id} placeName={place_name} />
+      ))}
     </List>
   );
 };

diff --git a/src/components/PlaceSearch/PlaceSearchListItem.tsx b/src/components/PlaceSearch/PlaceSearchListItem.tsx
@@ -1,12 +1,25 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
+import { useStoryState } from '@/atoms/storyState';
+import { useHistory } from 'react-router-dom';
 
-interface IPlaceSearchListItemProps {}
+interface IPlaceSearchListItem {
+  placeName: string;
+}
+
+const PlaceSearchListItem: FC<IPlaceSearchListItem> = (props) => {
+  const { placeName } = props;
+  const { setStoryState } = useStoryState();
+  const history = useHistory();
+
+  const onClickPlaceItem = () => {
+    setStoryState({ field: 'place', value: placeName });
+    history.push('/add');
+  };
 
-const PlaceSearchListItem: FC<IPlaceSearchListItemProps> = () => {
   return (
-    <ListItem>
-      <strong>맥도날드 양평SK점</strong>
+    <ListItem onClick={onClickPlaceItem}>
+      <strong>{placeName}</strong>
       <span>940m</span>
     </ListItem>
   );

diff --git a/src/components/PlaceSearch/index.tsx b/src/components/PlaceSearch/index.tsx
@@ -1,14 +1,32 @@
-import React from 'react';
+/* global kakao */
+import React, { useEffect, useState } from 'react';
 import Layout from '@/components/Layout';
 import SearchHeader from '@/components/SearchHeader';
 import SearchInput from '@/components/SearchInput';
 import useInput from '@/hooks/useInput';
 import SearchEmptyFallback from '@/components/SearchEmptyFallback';
 import PlaceSearchList from '@/components/PlaceSearch/PlaceSearchList';
+import { IPlace } from '@/types/Place';
+
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
 
 const PlaceSearch = () => {
+  const [placeList, setPlaceList] = useState<IPlace[]>([]);
   const { value, onChangeValue } = useInput();
 
+  const searchPlaceCb = (data: IPlace[], status: string) => {
+    if (status === 'OK') setPlaceList(data);
+  };
+
+  useEffect(() => {
+    const ps = new window.kakao.maps.services.Places();
+    ps.keywordSearch(value, searchPlaceCb);
+  }, [value]);
+
   return (
     <Layout padding={'30px 24px'}>
       <SearchHeader title={'장소 검색하기'} />
@@ -17,14 +35,15 @@ const PlaceSearch = () => {
         onChangeValue={onChangeValue}
         placeholder={'장소를 검색해보세요'}
       />
-      <PlaceSearchList />
-      {/* 검색된 항목이 없을 때의 fallback 컴포넌트
+      {placeList.length > 0 ? (
+        <PlaceSearchList places={placeList} />
+      ) : (
         <SearchEmptyFallback
-        searchKeyword={value}
-        selectCustomKeyword={() => {}}
-        categoryText={'장소'}
-      />
-      */}
+          searchKeyword={value}
+          selectCustomKeyword={() => {}}
+          categoryText={'장소'}
+        />
+      )}
     </Layout>
   );
 };