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

src/App.jsx

@@ -9,41 +9,43 @@ 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 [isModalOpen, setIsModalOpen] = useState(false);
-  const [restaurantName, setRestaurantName] = useState("");
-  const [restaurantInfo, setRestaurantInfo] = useState("");
+  const [modal, setModal] = useState({
+    isOpen: false,
+    restaurant: {
+      name: "",
+      description: "",
+    },
+  });
 
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const handleAddRestaurant = (newRestaurant) => {
+    setRestaurants((prevRestaurants) => [...prevRestaurants, newRestaurant]);
+  };
 
   return (
     <>
       <Header setIsAddModalOpen={setIsAddModalOpen} />
       <main>
         <CategoryFilter category={category} onChangeCategory={setCategory} />
-        <RestaurantList
-          restaurants={filteredRestaurants}
-          SetIsModalOpen={setIsModalOpen}
-          setRestaurantName={setRestaurantName}
-          setRestaurantInfo={setRestaurantInfo}
-        />
+        <RestaurantList restaurants={filteredRestaurants} setModal={setModal} modal={modal} />
       </main>
       <aside>
-        {isModalOpen && (
-          <RestaurantDetailModal
-            SetIsModalOpen={setIsModalOpen}
-            restaurantName={restaurantName}
-            restaurantInfo={restaurantInfo}
+        {modal.isOpen && <RestaurantDetailModal setModal={setModal} modal={modal} />}
+        {isAddModalOpen && (
+          <AddRestaurantModal
+            setIsAddModalOpen={setIsAddModalOpen}
+            handleAddRestaurant={handleAddRestaurant}
           />
         )}
-        {isAddModalOpen && <AddRestaurantModal setIsAddModalOpen={setIsAddModalOpen} />}
       </aside>
     </>
   );

src/components/AddRestaurantModal.jsx

@@ -1,26 +1,20 @@
 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("");
+function AddRestaurantModal({ setIsAddModalOpen, handleAddRestaurant }) {
+  const [newRestaurant, setNewRestaurant] = useState({
+    id: Date.now(),
+    name: "",
+    description: "",
+    category: "",
+  });
 
   const handleAddBtnClick = () => {
-    event.preventDefault();
-
-    restaurantsData.push({
-      id: Date.now(),
-      name: restaurantName,
-      description: restaurantInfo,
-      category: selectedCategory,
-    });
+    handleAddRestaurant(newRestaurant);
     setIsAddModalOpen(false);
   };
 
-  const [restaurantName, setRestaurantName] = useState("");
-  const [restaurantInfo, setRestaurantInfo] = useState("");
-
   return (
     <div className="modal modal--open">
       <div className="modal-backdrop" onClick={() => setIsAddModalOpen(false)}></div>
@@ -33,7 +27,9 @@ function AddRestaurantModal({ setIsAddModalOpen }) {
               name="category"
               id="category"
               required
-              onChange={(selected) => setSelectedCategory(selected.target.value)}
+              onChange={(event) =>
+                setNewRestaurant({ ...newRestaurant, category: event.target.value })
+              }
             >
               <option value="">선택해 주세요</option>
               {CATEGORY_DATA.slice(1).map((category) => (
@@ -49,7 +45,7 @@ function AddRestaurantModal({ setIsAddModalOpen }) {
               name="name"
               id="name"
               required
-              onChange={(input) => setRestaurantName(input.target.value)}
+              onChange={(event) => setNewRestaurant({ ...newRestaurant, name: event.target.value })}
             />
           </div>
 
@@ -60,7 +56,10 @@ function AddRestaurantModal({ setIsAddModalOpen }) {
               id="description"
               cols="30"
               rows="5"
-              onChange={(input) => setRestaurantInfo(input.target.value)}
+              value={newRestaurant.description}
+              onChange={(event) =>
+                setNewRestaurant({ ...newRestaurant, description: event.target.value })
+              }
             ></textarea>
             <span className="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
           </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/RestaurantDetailModal.jsx

@@ -1,19 +1,19 @@
 import "../styles/RestaurantDetailModalStyle.css";
 
-function RestaurantDetailModal({ setIsModalOpen, restaurantName, restaurantInfo }) {
+function RestaurantDetailModal({ setModal, modal }) {
   return (
     <>
       <div className="modal modal--open">
-        <div className="modal-backdrop" onClick={() => setIsModalOpen(false)}></div>
+        <div className="modal-backdrop" onClick={() => setModal({ ...modal, isOpen: false })}></div>
         <div className="modal-container">
-          <h2 className="modal-title text-title">{restaurantName}</h2>
+          <h2 className="modal-title text-title">{modal.restaurant.name}</h2>
           <div className="restaurant-info">
-            <p className="restaurant-info__description text-body">{restaurantInfo}</p>
+            <p className="restaurant-info__description text-body">{modal.restaurant.description}</p>
           </div>
           <div className="button-container">
             <button
               className="button button--primary text-caption"
-              onClick={() => setIsModalOpen(false)}
+              onClick={() => setModal({ ...modal, isOpen: false })}
             >
               닫기
             </button>

src/components/RestaurantList.jsx

@@ -9,19 +9,28 @@ const CATEGORY_IN_ENGLISH = Object.freeze({
   기타: "etc",
 });
 
-function RestaurantList({ restaurants, SetIsModalOpen, setRestaurantName, setRestaurantInfo }) {
-  const handleClick = (restaurant) => {
-    SetIsModalOpen(true);
-    setRestaurantName(restaurant.name);
-    setRestaurantInfo(restaurant.description);
+function RestaurantList({ restaurants, setModal, modal }) {
+  const handleRestaurantClick = (restaurant) => {
+    setModal({
+      ...modal,
+      isOpen: true,
+      restaurant: {
+        name: restaurant.name,
+        description: restaurant.description,
+      },
+    });
   };
 
   return (
     <>
       <section className="restaurant-list-container">
         <ul className="restaurant-list">
           {restaurants.map((restaurant) => (
-            <li key={restaurant.id} className="restaurant" onClick={() => handleClick(restaurant)}>
+            <li
+              key={restaurant.id}
+              className="restaurant"
+              onClick={() => handleRestaurantClick(restaurant)}
+            >
               <div className="restaurant__category">
                 <img
                   src={`../../templates/category-${CATEGORY_IN_ENGLISH[restaurant.category]}.png`}