woowacourse · HyeonaKwon · Apr 18, 2023 · Apr 15, 2023 · Apr 15, 2023 · Apr 15, 2023
diff --git a/package.json b/package.json
@@ -2,25 +2,25 @@
   "name": "react-lunch",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://evencoding.github.io/react-lunch/",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.23",
-    "@types/react": "^18.0.34",
-    "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^2.1.3",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "styled-components": "^5.3.9"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -42,6 +42,9 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",
-    "styled-components": "^5.3.9"
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.23",
+    "@types/react": "^18.0.34",
+    "@types/react-dom": "^18.0.11"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -5,39 +5,14 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" 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>
   </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`.
-    -->
+    <div id="modal-root"></div>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,114 +1,57 @@
-import { Category, Restaurant, SortingType } from './types/restaurant';
+import { Restaurant } from './types/restaurant';
 
-import React from 'react';
-import { Header, RestaurantList, RestaurantDetail } from './components';
+import React, { useState } from 'react';
+import { Header, RestaurantList, RestaurantDetail, Filter } from './components';
 
-import mockData from './mockData.json';
+import { useRestaurantFilter } from './hooks/useFilter';
+import { useLocalStorage } from './hooks/useLocalStorage';
 
-interface Props {}
-
-interface State {
-  restaurants: Restaurant[];
-  category: string;
-  sortingType: SortingType;
+interface ModalState {
   isModalOpen: boolean;
-  detailId: Restaurant['id'];
+  detailId?: Restaurant['id'];
 }
 
-class App extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    if (!localStorage.getItem('restaurants')) {
-      localStorage.setItem('restaurants', JSON.stringify(mockData.restaurants));
-    }
-
-    const restaurants = JSON.parse(localStorage.getItem('restaurants') || '[]');
-    this.state = {
-      restaurants,
-      category: '전체',
-      sortingType: '이름순',
-      isModalOpen: false,
-      detailId: '1'
-    };
-
-    window.addEventListener('keyup', ({ key }) => {
-      if (this.state.isModalOpen && key === 'Escape') {
-        this.closeModal();
-      }
-    });
-  }
+const App = () => {
+  const localRestaurantsData = useLocalStorage('restaurants');
+  const [modalState, setModalState] = useState<ModalState>({
+    isModalOpen: false,
+  });
+  const [restaurants, { setCategory, setSortingType }] = useRestaurantFilter(localRestaurantsData);
 
-  openModal = (id: Restaurant['id']) => {
-    this.setState({
+  const openModal = (id: Restaurant['id']) => {
+    setModalState({
+      ...modalState,
       detailId: id,
-      isModalOpen: true
-    });
-  };
-
-  closeModal = () => {
-    this.setState({
-      isModalOpen: false
-    });
-  };
-
-  setCategory = (category: Category) => {
-    this.setState({
-      category
-    });
-  };
-
-  setSortingType = (sortingType: SortingType) => {
-    this.setState({
-      sortingType
+      isModalOpen: true,
     });
   };
 
-  filterRestaurants = () => {
-    const { category, sortingType } = this.state;
-
-    const restaurants = this.state.restaurants.filter(
-      restaurant => category === '전체' || restaurant.category === category
-    );
-
-    const getPivot = (restaurant: Restaurant) => {
-      return sortingType === '이름순' ? restaurant.name : restaurant.distance;
-    };
-
-    return restaurants.sort((a, b) => {
-      const A = getPivot(a);
-      const B = getPivot(b);
-      if (A > B) return 1;
-      if (A < B) return -1;
-      return 0;
+  const closeModal = () => {
+    setModalState({
+      ...modalState,
+      isModalOpen: false,
     });
   };
 
-  render() {
-    return (
-      <div className="App">
-        <Header />
-
-        <RestaurantList
-          restaurants={this.filterRestaurants()}
-          openModal={this.openModal}
-          setCategory={this.setCategory}
-          setSortingType={this.setSortingType}
+  return (
+    <div className="App">
+      <Header />
+
+      <main>
+        <Filter setCategory={setCategory} setSortingType={setSortingType} />
+        <RestaurantList restaurants={restaurants} openModal={openModal} />
+      </main>
+
+      {modalState.isModalOpen && (
+        <RestaurantDetail
+          closeModal={closeModal}
+          restaurant={
+            restaurants.find((restaurant) => restaurant.id === modalState.detailId) as Restaurant
+          }
         />
-
-        {this.state.isModalOpen && (
-          <RestaurantDetail
-            closeModal={this.closeModal}
-            restaurant={
-              mockData.restaurants.find(
-                restaurant => restaurant.id === this.state.detailId
-              ) as Restaurant
-            }
-          />
-        )}
-      </div>
-    );
-  }
-}
+      )}
+    </div>
+  );
+};
 
 export default App;
diff --git a/src/components/Button.ts b/src/components/Button.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const Button = styled.button`
+export const Button = styled.button`
   width: 100%;
   height: 44px;
 

diff --git a/src/components/CategoryImage.tsx b/src/components/CategoryImage.tsx
diff --git a/src/components/CategoryImage/CategoryImage.styles.ts b/src/components/CategoryImage/CategoryImage.styles.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const CategoryImageWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+  min-width: 64px;
+  min-height: 64px;
+
+  margin-right: 16px;
+
+  border-radius: 50%;
+  background: var(--lighten-color);
+
+  img {
+    width: 36px;
+    height: 36px;
+  }
+`;
diff --git a/src/components/CategoryImage/CategoryImage.tsx b/src/components/CategoryImage/CategoryImage.tsx
@@ -0,0 +1,20 @@
+import { Category } from '../../types/restaurant';
+
+import React from 'react';
+import * as styled from './CategoryImage.styles';
+
+import { CATEGORY_IMAGE_MAP } from '../../constants';
+
+interface Props {
+  category: Category;
+}
+
+const CategoryImage = (props: Props) => {
+  return (
+    <styled.CategoryImageWrapper>
+      <img src={`./img/${CATEGORY_IMAGE_MAP[props.category]}`} alt={props.category} />
+    </styled.CategoryImageWrapper>
+  );
+};
+
+export default CategoryImage;
diff --git a/src/components/Filter/Filter.styles.ts b/src/components/Filter/Filter.styles.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const FilterContainer = styled.section`
+  display: flex;
+  justify-content: space-between;
+
+  margin-top: 24px;
+  padding: 0 16px;
+
+  select {
+    height: 44px;
+    min-width: 125px;
+
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    padding: 8px;
+
+    background: transparent;
+    font-size: 16px;
+  }
+`;