Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[2단계] 홍석주 미션 제출합니다 #6

Open
wants to merge 1 commit into
base: somefood
Choose a base branch
from
Open

[2단계] 홍석주 미션 제출합니다 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 15 additions & 7 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Comment on lines +11 to +16
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 App.jsx에 레스토랑 목록을 필터링하고 있는데, 비슷한 요구조건이 늘어나면 App.jsx가 지저분해질거 같은데, 이럴때는 어떤식으로 분리하는지 궁금합니다!

return (
<>
<Header />
<Header/>
<main>
<CategoryFilter />
<RestaurantList />
<CategoryFilter category={category} onChangeCategory={setCategory}/>
<RestaurantList restaurants={filteredRestaurants}/>
</main>
<aside>
<RestaurantDetailModal />
<AddRestaurantModal />
{/*<RestaurantDetailModal />*/}
{/*<AddRestaurantModal />*/}
</aside>
</>
);
Expand Down
8 changes: 6 additions & 2 deletions src/components/CategoryFilter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<section className="restaurant-filter-container">
<select name="category" id="category-filter" className="restaurant-filter" aria-label="음식점 카테고리 필터">
<select name="category" id="category-filter" className="restaurant-filter" aria-label="음식점 카테고리 필터" value={category} onChange={handleCategoryChange}>
<option value="전체">전체</option>
<option value="한식">한식</option>
<option value="중식">중식</option>
Expand Down
95 changes: 25 additions & 70 deletions src/components/RestaurantList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
}
Comment on lines +10 to +21
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RestaurantList.jsx에서 각 카테고리마다 이미지 경로를 전달해주기 categoryImages 객체를 만들고 함수로 갖고 오게끔 처리했습니다. db.json에 url을 추가할까다가 최대한 건들지 않기 위해 위의 방식을 취했는데, 멘토님이라면 어떤식으로 처리하셨을지 궁금합니다!


return (
<>
<section className="restaurant-list-container">
<ul className="restaurant-list">

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

<li className="restaurant">
<div className="restaurant__category">
<img src={categoryChinese} alt="중식" className="category-icon"/>
</div>
<div className="restaurant__info">
<h3 className="restaurant__name text-subtitle">친친</h3>
<p className="restaurant__description text-body">Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를
펼쳐갑니다</p>
</div>
</li>

<li className="restaurant">
<div className="restaurant__category">
<img src={categoryJapanese} alt="일식" className="category-icon"/>
</div>
<div className="restaurant__info">
<h3 className="restaurant__name text-subtitle">잇쇼우</h3>
<p className="restaurant__description text-body">잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든
음식에 최선을
다하는 잇쇼우는
고객 한분 한분께 최선을 다하겠습니다</p>
</div>
</li>

<li className="restaurant">
<div className="restaurant__category">
<img src={categoryWestern} alt="양식" className="category-icon"/>
</div>
<div className="restaurant__info">
<h3 className="restaurant__name text-subtitle">이태리키친</h3>
<p className="restaurant__description text-body">늘 변화를 추구하는 이태리키친입니다.</p>
</div>
</li>

<li className="restaurant">
<div className="restaurant__category">
<img src={categoryAsian} alt="아시안" className="category-icon"/>
</div>
<div className="restaurant__info">
<h3 className="restaurant__name text-subtitle">호아빈 삼성점</h3>
<p className="restaurant__description text-body">푸짐한 양에 국물이 일품인 쌀국수</p>
</div>
</li>

<li className="restaurant">
<div className="restaurant__category">
<img src={categoryEtc} alt="기타" className="category-icon"/>
</div>
<div className="restaurant__info">
<h3 className="restaurant__name text-subtitle">도스타코스 선릉점</h3>
<p className="restaurant__description text-body">멕시칸 캐주얼 그릴</p>
</div>
</li>
{restaurants.map((restaurant) => (
<li key={restaurant.id} className="restaurant">
<div className="restaurant__category">
<img src={getImage(restaurant.category)} alt={restaurant.category} className="category-icon"/>
</div>
<div className="restaurant__info">
<h3 className="restaurant__name text-subtitle">{restaurant.name}</h3>
<p className="restaurant__description text-body">{restaurant.description}</p>
</div>
</li>
))}
</ul>
</section>
</>
Expand Down