[4주차-ts] Search BAR with TS

week4_ts/src/components/Header.tsx

@@ -3,10 +3,11 @@ import styled from "styled-components";
 import { storeSearch } from "../libs/api";
 import { flexColumnCenter } from "../mixxin";
 import theme from "../styles/theme";
+import { Result } from "../type/result";
 
 interface MainHeaderProps {
     handleIsSearch: (newIsSearch: boolean) => void;
-    handleResults: (newResults: void[]) => void;
+    handleResults: (newResults: Result[]) => void;
 }
 
 interface Params {
@@ -22,6 +23,7 @@ function Header(props: MainHeaderProps) {
     const { handleIsSearch, handleResults } = props;
     const [isLocation, setIsLocation] = useState<boolean>(false);
     const [input, setInput] = useState<string>("");
+    //useRef의 타입을 어떻게 정의해여!?!!?
     const searchRef = useRef<HTMLInputElement>(null);
     const position = useRef<Coordinates>({ longitude: 0, latitude: 0 });
     // 위치에 따른 가게 검색 handler
@@ -81,7 +83,6 @@ function Header(props: MainHeaderProps) {
                 storeSearchHttpHandler(params);
             } else {
                 handleMyLocation();
-                console.log("position 타입은?", position);
             }
         }
     };

week4_ts/src/components/ResultSection.tsx

@@ -1,19 +1,25 @@
 import React from "react";
+import { Result } from "../type/result";
 import Skeleton from "./StoreArticle/Skeleton";
 import StoreArticle from "./StoreArticle/StoreArticle";
 
-function ResultSection(props) {
+interface MainResultProps {
+    isSearch: boolean;
+    results: Result[];
+}
+
+function ResultSection(props: MainResultProps) {
     const { isSearch, results } = props;
     // 이건 대체 뭔뜻일까
     if (isSearch) return new Array(10).fill(1).map((_, i) => <Skeleton key={i} />);
-    if (results.length === 0) return <StoreArticle placeName="여기엔 BAR가 없다..!" />;
+    if (results.length === 0) return <StoreArticle place_name="여기엔 BAR가 없다..!" />;
 
     return results.map((result) => (
         <StoreArticle
             key={result.id}
-            placeUrl={result.place_url}
-            placeName={result.place_name}
-            roadAddressName={result.road_address_name}
+            place_url={result.place_url}
+            place_name={result.place_name}
+            road_address_name={result.road_address_name}
             distance={result.distance}
             phone={result.phone}
         />

week4_ts/src/components/StoreArticle/StoreArticle.tsx

@@ -1,16 +1,18 @@
-import React from 'react';
-import { StyledRoot, StoreName, StoreAddress, StorePhoneNumber } from './articleStyle';
+import { Result } from "../../type/result";
+import { StyledRoot, StoreName, StoreAddress, StorePhoneNumber } from "./articleStyle";
 
-const StoreArticle = props => {
-  return (
-    <StyledRoot>
-      <StoreName href={props.placeUrl} target="_blank" rel="noreferrer">
-        {props.placeName}
-      </StoreName>
-      <StoreAddress>{props.distance ? `${props.distance} m` : props.roadAddressName}</StoreAddress>
-      <StorePhoneNumber>{props.phone ? props.phone : '전화번호 없음'}</StorePhoneNumber>
-    </StyledRoot>
-  );
+const StoreArticle = (props: Result) => {
+    const { place_url, place_name, road_address_name, distance, phone } = props;
+
+    return (
+        <StyledRoot>
+            <StoreName href={place_url} target="_blank" rel="noreferrer">
+                {place_name}
+            </StoreName>
+            <StoreAddress>{distance ? `${distance} m` : road_address_name}</StoreAddress>
+            <StorePhoneNumber>{phone ? phone : "전화번호 없음"}</StorePhoneNumber>
+        </StyledRoot>
+    );
 };
 
 export default StoreArticle;

week4_ts/src/pages/Main/index.tsx

@@ -1,14 +1,15 @@
 import styled from "styled-components";
 import { flexColumnCenter } from "../../mixxin";
 import React, { useState } from "react";
-import Header from "../../components/Header.js";
+import Header from "../../components/Header";
 import ResultSection from "../../components/ResultSection";
+import { Result } from "../../type/result";
 
 function Main() {
-    const [results, setResults] = useState<void[]>([]);
+    const [results, setResults] = useState<Result[]>([]);
     const [isSearch, setIsSearch] = useState<boolean>(false);
 
-    const handleResults = (newResults: void[]) => {
+    const handleResults = (newResults: Result[]) => {
         setResults(newResults);
     };
     const handleIsSearch = (newIsSearch: boolean) => {

week4_ts/src/type/result.ts

@@ -0,0 +1,8 @@
+export interface Result {
+    id?: number;
+    place_url?: string;
+    place_name?: string;
+    road_address_name?: string;
+    distance?: string;
+    phone?: string;
+}