[4단계 미션] 박예은 미션 제출합니다

.eslintrc.cjs

@@ -15,5 +15,6 @@ module.exports = {
     "react/jsx-no-target-blank": "off",
     "react/prop-types": "off",
     "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "no-unused-vars": "warn",
   },
 };

src/App.jsx

@@ -1,21 +1,49 @@
 import "./App.css";
-import Header from "./components/Header";
-import CategoryFilter from "./components/CategoryFilter";
-import RestaurantList from "./components/RestaurantList";
-import AddRestaurantModal from "./components/AddRestaurantModal";
-import RestaurantDetailModal from "./components/RestaurantDetailModal";
+import { useState } from "react";
+import Header from "./components/Header.jsx";
+import CategoryFilter from "./components/CategoryFilter.jsx";
+import RestaurantList from "./components/RestaurantList.jsx";
+import AddRestaurantModal from "./components/AddRestaurantModal.jsx";
+import RestaurantDetailModal from "./components/RestaurantDetailModal.jsx";
+import restaurantsData from "./data/restaurantsData.js";
 
 function App() {
+  const [category, setCategory] = useState("전체");
+
+  const filterRestaurants = (category) => {
+    if (category === "전체") return restaurantsData;
+    else return restaurantsData.filter((restaurant) => restaurant.category === category);
+  };
+
+  const filteredRestaurants = filterRestaurants(category);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [restaurantName, setRestaurantName] = useState("");
+  const [restaurantInfo, setRestaurantInfo] = useState("");
+
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+
   return (
     <>
-      <Header />
+      <Header setIsAddModalOpen={setIsAddModalOpen} />
       <main>
-        <CategoryFilter />
-        <RestaurantList />
+        <CategoryFilter category={category} onChangeCategory={setCategory} />
+        <RestaurantList
+          restaurants={filteredRestaurants}
+          SetIsModalOpen={setIsModalOpen}
+          setRestaurantName={setRestaurantName}
+          setRestaurantInfo={setRestaurantInfo}
+        />
       </main>
       <aside>
-        <RestaurantDetailModal />
-        <AddRestaurantModal />
+        {isModalOpen && (
+          <RestaurantDetailModal
+            SetIsModalOpen={setIsModalOpen}
+            restaurantName={restaurantName}
+            restaurantInfo={restaurantInfo}
+          />
+        )}
+        {isAddModalOpen && <AddRestaurantModal setIsAddModalOpen={setIsAddModalOpen} />}
       </aside>
     </>
   );

src/components/AddRestaurantModal.jsx

@@ -1,48 +1,78 @@
 import "../styles/AddRestaurantModalStyle.css";
+import { CATEGORY_DATA } from "../data/categoryData";
+import restaurantsData from "../data/restaurantsData";
+import { useState } from "react";
+
+function AddRestaurantModal({ setIsAddModalOpen }) {
+  const [selectedCategory, setSelectedCategory] = useState("");
+
+  const handleAddBtnClick = () => {
+    event.preventDefault();
+
+    restaurantsData.push({
+      id: Date.now(),
+      name: restaurantName,
+      description: restaurantInfo,
+      category: selectedCategory,
+    });
+    setIsAddModalOpen(false);
+  };
+
+  const [restaurantName, setRestaurantName] = useState("");
+  const [restaurantInfo, setRestaurantInfo] = useState("");
 
-function AddRestaurantModal() {
   return (
-    <>
-      <div className="modal modal--open">
-        <div className="modal-backdrop"></div>
-        <div className="modal-container">
-          <h2 className="modal-title text-title">새로운 음식점</h2>
-          <form>
-            {/* 카테고리 */}
-            <div className="form-item form-item--required">
-              <label htmlFor="category text-caption">카테고리</label>
-              <select name="category" id="category" required>
-                <option value="">선택해 주세요</option>
-                <option value="한식">한식</option>
-                <option value="중식">중식</option>
-                <option value="일식">일식</option>
-                <option value="양식">양식</option>
-                <option value="아시안">아시안</option>
-                <option value="기타">기타</option>
-              </select>
-            </div>
-
-            {/* 음식점 이름 */}
-            <div className="form-item form-item--required">
-              <label htmlFor="name text-caption">이름</label>
-              <input type="text" name="name" id="name" required />
-            </div>
-
-            {/* 설명 */}
-            <div className="form-item">
-              <label htmlFor="description text-caption">설명</label>
-              <textarea name="description" id="description" cols="30" rows="5"></textarea>
-              <span className="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
-            </div>
-
-            {/* 추가 버튼 */}
-            <div className="button-container">
-              <button className="button button--primary text-caption">추가하기</button>
-            </div>
-          </form>
-        </div>
+    <div className="modal modal--open">
+      <div className="modal-backdrop" onClick={() => setIsAddModalOpen(false)}></div>
+      <div className="modal-container">
+        <h2 className="modal-title text-title">새로운 음식점</h2>
+        <form>
+          <div className="form-item form-item--required">
+            <label htmlFor="category text-caption">카테고리</label>
+            <select
+              name="category"
+              id="category"
+              required
+              onChange={(selected) => setSelectedCategory(selected.target.value)}
+            >
+              <option value="">선택해 주세요</option>
+              {CATEGORY_DATA.slice(1).map((category) => (
+                <option key={category}>{category}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="form-item form-item--required">
+            <label htmlFor="name text-caption">이름</label>
+            <input
+              type="text"
+              name="name"
+              id="name"
+              required
+              onChange={(input) => setRestaurantName(input.target.value)}
+            />
+          </div>
+
+          <div className="form-item">
+            <label htmlFor="description text-caption">설명</label>
+            <textarea
+              name="description"
+              id="description"
+              cols="30"
+              rows="5"
+              onChange={(input) => setRestaurantInfo(input.target.value)}
+            ></textarea>
+            <span className="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
+          </div>
+
+          <div className="button-container">
+            <button className="button button--primary text-caption" onClick={handleAddBtnClick}>
+              추가하기
+            </button>
+          </div>
+        </form>
       </div>
-    </>
+    </div>
   );
 }
 

src/components/CategoryFilter.jsx

@@ -1,6 +1,7 @@
 import "../styles/CategoryFilterStyle.css";
+import { CATEGORY_DATA } from "../data/categoryData";
 
-function CategoryFilter() {
+function CategoryFilter({ category, onChangeCategory }) {
   return (
     <>
       <section className="restaurant-filter-container">
@@ -9,14 +10,12 @@ function CategoryFilter() {
           id="category-filter"
           className="restaurant-filter"
           aria-label="음식점 카테고리 필터"
+          value={category}
+          onChange={() => onChangeCategory(event.target.value)}
         >
-          <option value="전체">전체</option>
-          <option value="한식">한식</option>
-          <option value="중식">중식</option>
-          <option value="일식">일식</option>
-          <option value="양식">양식</option>
-          <option value="아시안">아시안</option>
-          <option value="기타">기타</option>
+          {CATEGORY_DATA.map((category) => (
+            <option key={category}>{category}</option>
+          ))}
         </select>
       </section>
     </>

src/components/Header.jsx

@@ -1,12 +1,17 @@
 import "../styles/HeaderStyle.css";
 
-function Header() {
+function Header({ setIsAddModalOpen }) {
   return (
     <>
       <header className="gnb">
         <h1 className="gnb__title text-title">점심 뭐 먹지</h1>
-        <button type="button" className="gnb__button" aria-label="음식점 추가">
-          <img src="./add-button.png" alt="음식점 추가" />
+        <button
+          type="button"
+          className="gnb__button"
+          aria-label="음식점 추가"
+          onClick={() => setIsAddModalOpen(true)}
+        >
+          <img src="../../templates/add-button.png" alt="음식점 추가" />
         </button>
       </header>
     </>

src/components/RestaurantDetailModal.jsx

@@ -1,18 +1,22 @@
 import "../styles/RestaurantDetailModalStyle.css";
 
-function RestaurantDetailModal() {
+function RestaurantDetailModal({ setIsModalOpen, restaurantName, restaurantInfo }) {
   return (
     <>
       <div className="modal modal--open">
-        <div className="modal-backdrop"></div>
+        <div className="modal-backdrop" onClick={() => setIsModalOpen(false)}></div>
         <div className="modal-container">
-          <h2 className="modal-title text-title">음식점 이름</h2>
+          <h2 className="modal-title text-title">{restaurantName}</h2>
           <div className="restaurant-info">
-            <p className="restaurant-info__description text-body">음식점 소개 문구</p>
+            <p className="restaurant-info__description text-body">{restaurantInfo}</p>
           </div>
-          {/* 닫기 버튼 */}
           <div className="button-container">
-            <button className="button button--primary text-caption">닫기</button>
+            <button
+              className="button button--primary text-caption"
+              onClick={() => setIsModalOpen(false)}
+            >
+              닫기
+            </button>
           </div>
         </div>
       </div>

src/components/RestaurantList.jsx

@@ -1,84 +1,40 @@
 import "../styles/RestaurantListStyle.css";
 
-function RestaurantList() {
+const CATEGORY_IN_ENGLISH = Object.freeze({
+  한식: "korean",
+  중식: "chinese",
+  일식: "japanese",
+  양식: "western",
+  아시안: "asian",
+  기타: "etc",
+});
+
+function RestaurantList({ restaurants, SetIsModalOpen, setRestaurantName, setRestaurantInfo }) {
+  const handleClick = (restaurant) => {
+    SetIsModalOpen(true);
+    setRestaurantName(restaurant.name);
+    setRestaurantInfo(restaurant.description);
+  };
+
   return (
     <>
       <section className="restaurant-list-container">
         <ul className="restaurant-list">
-          <li className="restaurant">
-            <div className="restaurant__category">
-              <img src="/category-korean.png" 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="/category-chinese.png" 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="/category-japanese.png" 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="/category-western.png" 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="/category-asian.png" 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="/category-etc.png" 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" onClick={() => handleClick(restaurant)}>
+              <div className="restaurant__category">
+                <img
+                  src={`../../templates/category-${CATEGORY_IN_ENGLISH[restaurant.category]}.png`}
+                  alt=""
+                  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>
     </>

src/data/categoryData.js

@@ -0,0 +1,9 @@
+export const CATEGORY_DATA = Object.freeze([
+  "전체",
+  "한식",
+  "중식",
+  "일식",
+  "양식",
+  "아시안",
+  "기타",
+]);