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

src/App.jsx

@@ -9,14 +9,15 @@ import restaurantsData from "./data/restaurantsData.js";
 
 function App() {
   const [category, setCategory] = useState("전체");
+  const [restaurants, setRestaurants] = useState(restaurantsData);
 
   const filterRestaurants = (category) => {
-    if (category === "전체") return restaurantsData;
-    else return restaurantsData.filter((restaurant) => restaurant.category === category);
+    if (category === "전체") return restaurants;
+    else return restaurants.filter((restaurant) => restaurant.category === category);
   };
 
   const filteredRestaurants = filterRestaurants(category);
-  
+
   const [modal, setModal] = useState({
     isOpen: false,
     restaurant: {
@@ -25,16 +26,26 @@ function App() {
     },
   });
 
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const handleAddRestaurant = (newRestaurant) => {
+    setRestaurants((prevRestaurants) => [...prevRestaurants, newRestaurant]);
+  };
+
   return (
     <>
-      <Header />
+      <Header setIsAddModalOpen={setIsAddModalOpen} />
       <main>
         <CategoryFilter category={category} onChangeCategory={setCategory} />
         <RestaurantList restaurants={filteredRestaurants} setModal={setModal} modal={modal} />
       </main>
       <aside>
         {modal.isOpen && <RestaurantDetailModal setModal={setModal} modal={modal} />}
-        {/* <AddRestaurantModal /> */}
+        {isAddModalOpen && (
+          <AddRestaurantModal
+            setIsAddModalOpen={setIsAddModalOpen}
+            handleAddRestaurant={handleAddRestaurant}
+          />
+        )}
       </aside>
     </>
   );

src/components/AddRestaurantModal.jsx

@@ -1,36 +1,73 @@
 import "../styles/AddRestaurantModalStyle.css";
 import { CATEGORY_DATA } from "../data/categoryData";
+import { useState } from "react";
+
+function AddRestaurantModal({ setIsAddModalOpen, handleAddRestaurant }) {
+  const [newRestaurant, setNewRestaurant] = useState({
+    id: Date.now(),
+    name: "",
+    description: "",
+    category: "",
+  });
+
+  const handleAddBtnClick = () => {
+    handleAddRestaurant(newRestaurant);
+    setIsAddModalOpen(false);
+  };
 
-function AddRestaurantModal() {
   return (
     <div className="modal modal--open">
-      <div className="modal-backdrop"></div>
+      <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>
+            <select
+              name="category"
+              id="category"
+              required
+              onChange={(event) =>
+                setNewRestaurant({ ...newRestaurant, category: event.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 />
+            <input
+              type="text"
+              name="name"
+              id="name"
+              required
+              onChange={(event) => setNewRestaurant({ ...newRestaurant, name: event.target.value })}
+            />
           </div>
 
           <div className="form-item">
             <label htmlFor="description text-caption">설명</label>
-            <textarea name="description" id="description" cols="30" rows="5"></textarea>
+            <textarea
+              name="description"
+              id="description"
+              cols="30"
+              rows="5"
+              value={newRestaurant.description}
+              onChange={(event) =>
+                setNewRestaurant({ ...newRestaurant, description: event.target.value })
+              }
+            ></textarea>
             <span className="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
           </div>
 
           <div className="button-container">
-            <button className="button button--primary text-caption">추가하기</button>
+            <button className="button button--primary text-caption" onClick={handleAddBtnClick}>
+              추가하기
+            </button>
           </div>
         </form>
       </div>

src/components/CategoryFilter.jsx

@@ -11,7 +11,7 @@ function CategoryFilter({ category, onChangeCategory }) {
           className="restaurant-filter"
           aria-label="음식점 카테고리 필터"
           value={category}
-          onChange={() => onChangeCategory(event.target.value)}
+          onChange={(event) => onChangeCategory(event.target.value)}
         >
           {CATEGORY_DATA.map((category) => (
             <option key={category}>{category}</option>

src/components/Header.jsx

@@ -1,11 +1,16 @@
 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="음식점 추가">
+        <button
+          type="button"
+          className="gnb__button"
+          aria-label="음식점 추가"
+          onClick={() => setIsAddModalOpen(true)}
+        >
           <img src="../../templates/add-button.png" alt="음식점 추가" />
         </button>
       </header>

src/components/RestaurantList.jsx

@@ -34,7 +34,7 @@ function RestaurantList({ restaurants, setModal, modal }) {
               <div className="restaurant__category">
                 <img
                   src={`../../templates/category-${CATEGORY_IN_ENGLISH[restaurant.category]}.png`}
-                  alt="한식"
+                  alt=""
                   className="category-icon"
                 />
               </div>