diff --git a/src/App.jsx b/src/App.jsx index 6998fc8..1f95040 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,21 +1,29 @@ import "./App.css"; import Header from "./components/Header.jsx"; import CategoryFilter from "./components/CategoryFilter.jsx"; -import RestaurantDetailModal from "./components/RestaurantDetailModal.jsx"; -import AddRestaurantModal from "./components/AddRestaurantModal.jsx"; +// import RestaurantDetailModal from "./components/RestaurantDetailModal.jsx"; +// import AddRestaurantModal from "./components/AddRestaurantModal.jsx"; import RestaurantList from "./components/RestaurantList.jsx"; +import {useState} from "react"; +import {restaurants} from "/db.json" function App() { + const ALL = '전체'; + const [category, setCategory] = useState(ALL); + const filteredRestaurants = category === ALL + ? restaurants + : restaurants.filter(restaurant => restaurant.category === category); + return ( <> -
+
- - + +
); diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx index e508255..ee52d11 100644 --- a/src/components/CategoryFilter.jsx +++ b/src/components/CategoryFilter.jsx @@ -1,10 +1,14 @@ import './CategoryFilter.css'; -export default function CategoryFilter() { +export default function CategoryFilter({category, onChangeCategory}) { + const handleCategoryChange = (event) => { + onChangeCategory(event.target.value); + } + return ( <>
- diff --git a/src/components/RestaurantList.jsx b/src/components/RestaurantList.jsx index 7b134f2..52f7817 100644 --- a/src/components/RestaurantList.jsx +++ b/src/components/RestaurantList.jsx @@ -6,80 +6,35 @@ import categoryWestern from '../assets/category-western.png'; import categoryJapanese from '../assets/category-japanese.png'; import './RestaurantList.css'; -export default function RestaurantList() { +export default function RestaurantList({restaurants}) { + const categoryImages = { + '한식': categoryKorean, + '일식': categoryJapanese, + '중식': categoryChinese, + '양식': categoryWestern, + '아시안': categoryAsian, + '기타': categoryEtc + } + + function getImage(category) { + return categoryImages[category]; + } + return ( <>
    - -
  • -
    - 한식 -
    -
    -

    피양콩할마니

    -

    평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 - 수 있는 - 곳으로, - ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 - 대표 - 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.

    -
    -
    • - -
  • -
    - 중식 -
    -
    -

    친친

    -

    Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 - 펼쳐갑니다

    -
    -
    • - -
  • -
    - 일식 -
    -
    -

    잇쇼우

    -

    잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 - 음식에 최선을 - 다하는 잇쇼우는 - 고객 한분 한분께 최선을 다하겠습니다

    -
    -
    • - -
  • -
    - 양식 -
    -
    -

    이태리키친

    -

    늘 변화를 추구하는 이태리키친입니다.

    -
    -
    • - -
  • -
    - 아시안 -
    -
    -

    호아빈 삼성점

    -

    푸짐한 양에 국물이 일품인 쌀국수

    -
    -
    • - -
  • -
    - 기타 -
    -
    -

    도스타코스 선릉점

    -

    멕시칸 캐주얼 그릴

    -
    -
    • + {restaurants.map((restaurant) => ( +
  • +
    + {restaurant.category} +
    +
    +

    {restaurant.name}

    +

    {restaurant.description}

    +
    +
    • + ))}