woowacourse · JeongBin0227 · Apr 18, 2023 · Apr 14, 2023 · Apr 14, 2023 · Apr 14, 2023
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -10,34 +10,11 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>점심 뭐먹지?</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/mockData.json b/public/mockData.json
@@ -2,7 +2,7 @@
   {
     "id": "0",
     "title": "가 한식",
-    "distance": "5",
+    "estimateTime": "5",
     "category": "한식",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.naver.com"
@@ -11,22 +11,22 @@
     "id": "1",
     "title": "나 한식",
     "category": "한식",
-    "distance": "10",
+    "estimateTime": "10",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "2",
     "title": "다 한식",
     "category": "한식",
-    "distance": "15",
+    "estimateTime": "15",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "3",
     "title": "가 중식",
-    "distance": "5",
+    "estimateTime": "5",
     "category": "중식",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.naver.com"
@@ -35,22 +35,22 @@
     "id": "4",
     "title": "나 중식",
     "category": "중식",
-    "distance": "10",
+    "estimateTime": "10",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "5",
     "title": "다 중식",
     "category": "중식",
-    "distance": "15",
+    "estimateTime": "15",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "6",
     "title": "가 일식",
-    "distance": "5",
+    "estimateTime": "5",
     "category": "일식",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.naver.com"
@@ -59,22 +59,22 @@
     "id": "7",
     "title": "나 일식",
     "category": "일식",
-    "distance": "10",
+    "estimateTime": "10",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "8",
     "title": "다 일식",
     "category": "일식",
-    "distance": "15",
+    "estimateTime": "15",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "9",
     "title": "가 아시안",
-    "distance": "5",
+    "estimateTime": "5",
     "category": "아시안",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.naver.com"
@@ -83,22 +83,22 @@
     "id": "10",
     "title": "나 아시안",
     "category": "아시안",
-    "distance": "10",
+    "estimateTime": "10",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "11",
     "title": "다 아시안",
     "category": "아시안",
-    "distance": "15",
+    "estimateTime": "15",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "12",
     "title": "가 양식",
-    "distance": "5",
+    "estimateTime": "5",
     "category": "양식",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.naver.com"
@@ -107,22 +107,22 @@
     "id": "13",
     "title": "나 양식",
     "category": "양식",
-    "distance": "10",
+    "estimateTime": "10",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "14",
     "title": "다 양식",
     "category": "양식",
-    "distance": "15",
+    "estimateTime": "15",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "15",
     "title": "가 기타음식",
-    "distance": "15",
+    "estimateTime": "15",
     "category": "기타",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.naver.com"
@@ -131,15 +131,15 @@
     "id": "16",
     "title": "나 기타음식",
     "category": "기타",
-    "distance": "10",
+    "estimateTime": "10",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   },
   {
     "id": "17",
     "title": "다 기타음식",
     "category": "기타",
-    "distance": "5",
+    "estimateTime": "5",
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
     "link": "www.google.com"
   }

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import type { FilterOption } from './util/type.js';
 import MainHeader from './MainHeader.tsx';
 import RestaurantList from './RestaurantList.tsx';
 import SelectContainer from './SelectContainer.tsx';
@@ -8,62 +10,44 @@ import {
   DEFAULT_SORTING,
   NO_SELECT_ID,
 } from './util/constant.ts';
-import { FilterOption } from './util/type.js';
-
-type AppState = {
-  filterOptions: FilterOption;
-  isOpenDrawer: boolean;
-  drawerSelectId: number;
-};
-class App extends React.Component<{}, AppState> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      filterOptions: {
-        category: DEFAULT_CATEGORY,
-        sorting: DEFAULT_SORTING,
-      },
-      isOpenDrawer: false,
-      drawerSelectId: NO_SELECT_ID,
-    };
 
-    this.onChangeFilterOptions = this.onChangeFilterOptions.bind(this);
-    this.onToggleDrawer = this.onToggleDrawer.bind(this);
-  }
+const App = () => {
+  const [isOpenDrawer, setIsOpenDrawer] = useState<boolean>(false);
+  const [drawerSelectId, setDrawerSelectId] = useState<number>(NO_SELECT_ID);
+  const [filterOptions, setFilterOptions] = useState<FilterOption>({
+    category: DEFAULT_CATEGORY,
+    sorting: DEFAULT_SORTING,
+  });
 
-  onChangeFilterOptions(e: React.ChangeEvent<HTMLSelectElement>) {
-    this.setState({
-      filterOptions: {
-        ...this.state.filterOptions,
-        [e.target.name]: e.target.value,
-      },
+  const onChangeFilterOptions = (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ): void => {
+    setFilterOptions({
+      ...filterOptions,
+      [e.target.name]: e.target.value,
     });
-  }
+  };
 
-  onToggleDrawer(id: number = NO_SELECT_ID) {
-    this.setState({
-      isOpenDrawer: !this.state.isOpenDrawer,
-      drawerSelectId: id,
-    });
-  }
+  const onToggleDrawer = (id: number = NO_SELECT_ID): void => {
+    setDrawerSelectId(id);
+    setIsOpenDrawer(!isOpenDrawer);
+  };
 
-  render() {
-    return (
-      <div className="App">
-        <MainHeader />
-        <SelectContainer onChangeFilterOptions={this.onChangeFilterOptions} />
-        <RestaurantList
-          filterOptions={this.state.filterOptions}
-          onToggleDrawer={this.onToggleDrawer}
-        />
-        <RestaurantDetailDrawer
-          isOpenDrawer={this.state.isOpenDrawer}
-          onToggleDrawer={this.onToggleDrawer}
-          restaurantId={this.state.drawerSelectId}
-        />
-      </div>
-    );
-  }
-}
+  return (
+    <div className="App">
+      <MainHeader />
+      <SelectContainer onChangeFilterOptions={onChangeFilterOptions} />
+      <RestaurantList
+        filterOptions={filterOptions}
+        onToggleDrawer={onToggleDrawer}
+      />
+      <RestaurantDetailDrawer
+        isOpenDrawer={isOpenDrawer}
+        onToggleDrawer={onToggleDrawer}
+        restaurantId={drawerSelectId}
+      />
+    </div>
+  );
+};
 
 export default App;
diff --git a/src/MainHeader.tsx b/src/MainHeader.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
-import Header from './common/Header.tsx';
+import Header from './components/Header.tsx';
 
-class MainHeader extends React.Component {
-  render() {
-    return (
-      <Header>
-        <h1 className="gnb__title text-title">점심 뭐 먹지</h1>
-      </Header>
-    );
-  }
-}
+const MainHeader = () => {
+  return (
+    <Header>
+      <h1 className="gnb__title text-title">점심 뭐 먹지</h1>
+    </Header>
+  );
+};
 
 export default MainHeader;