From c4b60ebc076ffc0af97b4bcd1feb5def14a84c6b Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 7 Jun 2026 17:18:43 +0900
Subject: [PATCH 01/13] =?UTF-8?q?docs:=204=EB=8B=A8=EA=B3=84=20=EB=AF=B8?=
 =?UTF-8?q?=EC=85=98=20=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 04-form/README.md | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 04-form/README.md

diff --git a/04-form/README.md b/04-form/README.md
new file mode 100644
index 0000000..b029ec9
--- /dev/null
+++ b/04-form/README.md
@@ -0,0 +1,38 @@
+# 04. 폼 UI 구현하기: controlled vs uncontrolled
+
+## 🎯 요구 사항
+- `Header`의 레스토랑 추가 버튼을 클릭하면 레스토랑 추가 폼이 모달로 뜨도록 구현해 주세요
+  - 이전 단계에서 만들어두었던 `AddRestaurantModal`을 그대로 사용합니다. 
+- 카테고리를 선택하고, `<input/>`, `<textarea/>`에 값을 입력한 뒤 '추가하기' 버튼을 클릭하면 레스토랑 목록에 추가되도록 구현해 주세요. 
+  - 유효성 검사는 하지 않습니다. 아주 간단하게 입력값을 처리해보는 구현만 해도 충분합니다.
+  - id는 `Date.now()`값을 임의로 할당합니다. 
+- (optional) 재사용할 수 있는 Modal 컴포넌트를 만들어서 `AddRestaurantModal`, `RestaurantDetailModal`을 Modal 컴포넌트를 활용해 구현하는 것으로 개선해 보세요
+
+## ✅ 키워드
+- controlled vs uncontrolled
+- children props
+
+> 재사용할 수 있는 모달을 만들 때 `children`을 활용해 보세요. 아래와 같은 식으로 UI를 구성할 수 있습니다.      
+
+```javascript
+// 설명을 위한 예시용 마크업입니다. 실제로 사용하는 마크업은 template/ 하위의 html을 참고하거나 직접 원하는대로 구현하여 사용해 주세요.
+// 반드시 아래와 같은 형식으로 쓸 필요는 없습니다. 원하는 방식대로 재사용 가능한 <Modal/> 컴포넌트를 만들어 보세요.
+
+// AddRestaurantModal.jsx 
+<Modal title="새로운 음식점" onClose={onClose}>
+  <form></form>
+</Modal>
+
+// RestaurantDetailModal.jsx 
+<Modal title={restaurant.name} onClose={onClose}>
+  <div className="restaurant-info"></div>
+  <div className="button-container"></div>
+</Modal>
+```
+
+## 🧙‍♀️ 진행 가이드
+- 진행 시간: (optional 제외) 2시간 내에 완료하는 것을 목표로 합니다.  
+
+## 🔗 참고 문서
+- [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components)
+- [API Reference: <input>](https://react.dev/reference/react-dom/components/input)
\ No newline at end of file

From 4f4a79c6e0fd4ead5758125a4edf92c1520f8841 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 7 Jun 2026 19:21:05 +0900
Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=EC=9D=8C=EC=8B=9D=EC=A0=90=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=ED=8F=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   | 72 +++++++++++++++++--
 .../AddRestaurantModal/AddRestaurantModal.jsx | 34 +++++++--
 src/components/Header/Header.jsx              |  3 +-
 3 files changed, 98 insertions(+), 11 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 86cbe2d..cec5892 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,15 +6,23 @@ import { useState } from "react";
 import { filterRestaurants } from "./utils/filterRestaurants.js";
 import { RESTAURANTS } from "./constants/restaurants.js";
 import RestaurantDetailModal from "./components/RestaurantDetailModal/RestaurantDetailModal.jsx";
+import AddRestaurantModal from "./components/AddRestaurantModal/AddRestaurantModal.jsx";
 
 function App() {
-  const [category, setCategory] = useState("전체");
+  const [filterCategory, setFilterCategory] = useState("전체");
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
+  const [isAddRestaurantModalOpen, setIsAddRestaurantModalOpen] =
+    useState(false);
+  const [restaurants, setRestaurants] = useState(RESTAURANTS);
+  const [category, setCategory] = useState("");
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
   const isRestaurantDetailModalOpen = !!clickedRestaurant;
-  const filteredRestaurants = filterRestaurants(RESTAURANTS, category);
+  const filteredRestaurants = filterRestaurants(restaurants, filterCategory);
 
   function handleChange(e) {
-    setCategory(e.target.value);
+    setFilterCategory(e.target.value);
   }
 
   function handleRestaurantClick(restaurant) {
@@ -25,11 +33,53 @@ function App() {
     setClickedRestaurant(null);
   }
 
+  function handleAddButtonClick() {
+    setIsAddRestaurantModalOpen(true);
+  }
+
+  function handleAddRestaurantModalClose() {
+    setIsAddRestaurantModalOpen(false);
+  }
+
+  function handleCategoryChange(e) {
+    setCategory(e.target.value);
+  }
+
+  function handleNameChange(e) {
+    setName(e.target.value);
+  }
+
+  function handleDescriptionChange(e) {
+    setDescription(e.target.value);
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    setRestaurants([
+      ...restaurants,
+      {
+        id: Date.now(),
+        category,
+        name,
+        description,
+      },
+    ]);
+
+    setIsAddRestaurantModalOpen(false);
+    setCategory("");
+    setName("");
+    setDescription("");
+  }
+
   return (
     <>
-      <Header />
+      <Header onAddButtonClick={handleAddButtonClick} />
       <main>
-        <CategoryFilter category={category} onChangeCategory={handleChange} />
+        <CategoryFilter
+          category={filterCategory}
+          onChangeCategory={handleChange}
+        />
         <RestaurantList
           restaurants={filteredRestaurants}
           onRestaurantClick={handleRestaurantClick}
@@ -42,6 +92,18 @@ function App() {
             onClose={handleModalClose}
           />
         )}
+        {isAddRestaurantModalOpen && (
+          <AddRestaurantModal
+            category={category}
+            name={name}
+            description={description}
+            handleCategoryChange={handleCategoryChange}
+            handleNameChange={handleNameChange}
+            handleDescriptionChange={handleDescriptionChange}
+            onSubmit={handleSubmit}
+            onClose={handleAddRestaurantModalClose}
+          />
+        )}
       </aside>
     </>
   );
diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index 87531f8..fc8bbb2 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -1,17 +1,32 @@
 import styles from "./AddRestaurantModal.module.css";
 
-export default function AddRestaurantModal() {
+export default function AddRestaurantModal({
+  category,
+  name,
+  description,
+  handleCategoryChange,
+  handleNameChange,
+  handleDescriptionChange,
+  onSubmit,
+  onClose,
+}) {
   return (
     <div className={`${styles.modal} ${styles["modal--open"]}`}>
-      <div className={styles.modal__backdrop}></div>
+      <div className={styles.modal__backdrop} onClick={onClose}></div>
       <div className={styles.modal__container}>
         <h2 className={`${styles.modal__title} text-title`}>새로운 음식점</h2>
-        <form>
+        <form onSubmit={onSubmit}>
           <div className={`${styles.formItem} ${styles["formItem--required"]}`}>
             <label htmlFor="category" className="text-caption">
               카테고리
             </label>
-            <select name="category" id="category" required>
+            <select
+              name="category"
+              id="category"
+              value={category}
+              onChange={handleCategoryChange}
+              required
+            >
               <option value="">선택해 주세요</option>
               <option value="한식">한식</option>
               <option value="중식">중식</option>
@@ -26,7 +41,14 @@ export default function AddRestaurantModal() {
             <label htmlFor="name" className="text-caption">
               이름
             </label>
-            <input type="text" name="name" id="name" required />
+            <input
+              type="text"
+              name="name"
+              id="name"
+              value={name}
+              onChange={handleNameChange}
+              required
+            />
           </div>
 
           <div className={styles.formItem}>
@@ -38,6 +60,8 @@ export default function AddRestaurantModal() {
               id="description"
               cols="30"
               rows="5"
+              value={description}
+              onChange={handleDescriptionChange}
             ></textarea>
             <span className={`${styles.formItem__helpText} text-caption`}>
               메뉴 등 추가 정보를 입력해 주세요.
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 01c061e..512a3c9 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,7 +1,7 @@
 import styles from "./Header.module.css";
 import addButton from "../../assets/add-button.png";
 
-export default function Header() {
+export default function Header({ onAddButtonClick }) {
   return (
     <header className={styles.gnb}>
       <h1 className={`${styles.gnb__title} text-title`}>점심 뭐 먹지</h1>
@@ -9,6 +9,7 @@ export default function Header() {
         type="button"
         className={styles.gnb__button}
         aria-label="음식점 추가"
+        onClick={onAddButtonClick}
       >
         <img src={addButton} alt="음식점 추가" />
       </button>

From b218d728ee7899ef81757e776cda6d6d94b3440e Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 7 Jun 2026 21:32:29 +0900
Subject: [PATCH 03/13] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?=
 =?UTF-8?q?=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EB=B0=8F=20props=20=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=BB=A8=EB=B2=A4=EC=85=98=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                        | 14 +++++++-------
 .../AddRestaurantModal/AddRestaurantModal.jsx      | 12 ++++++------
 src/components/CategoryFilter/CategoryFilter.jsx   |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index cec5892..8bb6253 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -21,7 +21,7 @@ function App() {
   const isRestaurantDetailModalOpen = !!clickedRestaurant;
   const filteredRestaurants = filterRestaurants(restaurants, filterCategory);
 
-  function handleChange(e) {
+  function handleFilterCategoryChange(e) {
     setFilterCategory(e.target.value);
   }
 
@@ -29,7 +29,7 @@ function App() {
     setClickedRestaurant(restaurant);
   }
 
-  function handleModalClose() {
+  function handleDetailModalClose() {
     setClickedRestaurant(null);
   }
 
@@ -78,7 +78,7 @@ function App() {
       <main>
         <CategoryFilter
           category={filterCategory}
-          onChangeCategory={handleChange}
+          onCategoryChange={handleFilterCategoryChange}
         />
         <RestaurantList
           restaurants={filteredRestaurants}
@@ -89,7 +89,7 @@ function App() {
         {isRestaurantDetailModalOpen && (
           <RestaurantDetailModal
             restaurant={clickedRestaurant}
-            onClose={handleModalClose}
+            onClose={handleDetailModalClose}
           />
         )}
         {isAddRestaurantModalOpen && (
@@ -97,9 +97,9 @@ function App() {
             category={category}
             name={name}
             description={description}
-            handleCategoryChange={handleCategoryChange}
-            handleNameChange={handleNameChange}
-            handleDescriptionChange={handleDescriptionChange}
+            onCategoryChange={handleCategoryChange}
+            onNameChange={handleNameChange}
+            onDescriptionChange={handleDescriptionChange}
             onSubmit={handleSubmit}
             onClose={handleAddRestaurantModalClose}
           />
diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index fc8bbb2..1c065fa 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -4,9 +4,9 @@ export default function AddRestaurantModal({
   category,
   name,
   description,
-  handleCategoryChange,
-  handleNameChange,
-  handleDescriptionChange,
+  onCategoryChange,
+  onNameChange,
+  onDescriptionChange,
   onSubmit,
   onClose,
 }) {
@@ -24,7 +24,7 @@ export default function AddRestaurantModal({
               name="category"
               id="category"
               value={category}
-              onChange={handleCategoryChange}
+              onChange={onCategoryChange}
               required
             >
               <option value="">선택해 주세요</option>
@@ -46,7 +46,7 @@ export default function AddRestaurantModal({
               name="name"
               id="name"
               value={name}
-              onChange={handleNameChange}
+              onChange={onNameChange}
               required
             />
           </div>
@@ -61,7 +61,7 @@ export default function AddRestaurantModal({
               cols="30"
               rows="5"
               value={description}
-              onChange={handleDescriptionChange}
+              onChange={onDescriptionChange}
             ></textarea>
             <span className={`${styles.formItem__helpText} text-caption`}>
               메뉴 등 추가 정보를 입력해 주세요.
diff --git a/src/components/CategoryFilter/CategoryFilter.jsx b/src/components/CategoryFilter/CategoryFilter.jsx
index c2789c5..184edb6 100644
--- a/src/components/CategoryFilter/CategoryFilter.jsx
+++ b/src/components/CategoryFilter/CategoryFilter.jsx
@@ -1,6 +1,6 @@
 import styles from "./CategoryFilter.module.css";
 
-export default function CategoryFilter({ category, onChangeCategory }) {
+export default function CategoryFilter({ category, onCategoryChange }) {
   return (
     <section className={styles.categoryFilter}>
       <select
@@ -9,7 +9,7 @@ export default function CategoryFilter({ category, onChangeCategory }) {
         className={styles.categoryFilter__select}
         aria-label="음식점 카테고리 필터"
         value={category}
-        onChange={onChangeCategory}
+        onChange={onCategoryChange}
       >
         <option value="전체">전체</option>
         <option value="한식">한식</option>

From fc5a81d77b9e3a4abc921fd4566562cb3ce08f7b Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 7 Jun 2026 21:51:15 +0900
Subject: [PATCH 04/13] =?UTF-8?q?refactor:=20=ED=8F=BC=20state=EB=A5=BC=20?=
 =?UTF-8?q?=EC=9E=90=EC=8B=9D=EC=9C=BC=EB=A1=9C=20=EB=82=B4=EB=A6=AC?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   | 29 +------------------
 .../AddRestaurantModal/AddRestaurantModal.jsx | 29 ++++++++++---------
 2 files changed, 16 insertions(+), 42 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 8bb6253..4073019 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,9 +14,6 @@ function App() {
   const [isAddRestaurantModalOpen, setIsAddRestaurantModalOpen] =
     useState(false);
   const [restaurants, setRestaurants] = useState(RESTAURANTS);
-  const [category, setCategory] = useState("");
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
 
   const isRestaurantDetailModalOpen = !!clickedRestaurant;
   const filteredRestaurants = filterRestaurants(restaurants, filterCategory);
@@ -41,21 +38,7 @@ function App() {
     setIsAddRestaurantModalOpen(false);
   }
 
-  function handleCategoryChange(e) {
-    setCategory(e.target.value);
-  }
-
-  function handleNameChange(e) {
-    setName(e.target.value);
-  }
-
-  function handleDescriptionChange(e) {
-    setDescription(e.target.value);
-  }
-
-  function handleSubmit(e) {
-    e.preventDefault();
-
+  function handleSubmit({ category, name, description }) {
     setRestaurants([
       ...restaurants,
       {
@@ -65,11 +48,7 @@ function App() {
         description,
       },
     ]);
-
     setIsAddRestaurantModalOpen(false);
-    setCategory("");
-    setName("");
-    setDescription("");
   }
 
   return (
@@ -94,12 +73,6 @@ function App() {
         )}
         {isAddRestaurantModalOpen && (
           <AddRestaurantModal
-            category={category}
-            name={name}
-            description={description}
-            onCategoryChange={handleCategoryChange}
-            onNameChange={handleNameChange}
-            onDescriptionChange={handleDescriptionChange}
             onSubmit={handleSubmit}
             onClose={handleAddRestaurantModalClose}
           />
diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index 1c065fa..fd4c569 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -1,21 +1,22 @@
+import { useState } from "react";
 import styles from "./AddRestaurantModal.module.css";
 
-export default function AddRestaurantModal({
-  category,
-  name,
-  description,
-  onCategoryChange,
-  onNameChange,
-  onDescriptionChange,
-  onSubmit,
-  onClose,
-}) {
+export default function AddRestaurantModal({ onSubmit, onClose }) {
+  const [category, setCategory] = useState("");
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    onSubmit({ category, name, description });
+  }
+
   return (
     <div className={`${styles.modal} ${styles["modal--open"]}`}>
       <div className={styles.modal__backdrop} onClick={onClose}></div>
       <div className={styles.modal__container}>
         <h2 className={`${styles.modal__title} text-title`}>새로운 음식점</h2>
-        <form onSubmit={onSubmit}>
+        <form onSubmit={handleSubmit}>
           <div className={`${styles.formItem} ${styles["formItem--required"]}`}>
             <label htmlFor="category" className="text-caption">
               카테고리
@@ -24,7 +25,7 @@ export default function AddRestaurantModal({
               name="category"
               id="category"
               value={category}
-              onChange={onCategoryChange}
+              onChange={(e) => setCategory(e.target.value)}
               required
             >
               <option value="">선택해 주세요</option>
@@ -46,7 +47,7 @@ export default function AddRestaurantModal({
               name="name"
               id="name"
               value={name}
-              onChange={onNameChange}
+              onChange={(e) => setName(e.target.value)}
               required
             />
           </div>
@@ -61,7 +62,7 @@ export default function AddRestaurantModal({
               cols="30"
               rows="5"
               value={description}
-              onChange={onDescriptionChange}
+              onChange={(e) => setDescription(e.target.value)}
             ></textarea>
             <span className={`${styles.formItem__helpText} text-caption`}>
               메뉴 등 추가 정보를 입력해 주세요.

From 8d8c858069bc56789262d3ae9facfb4012001bab Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 7 Jun 2026 22:08:04 +0900
Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=EC=9E=AC=EC=82=AC=EC=9A=A9=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=9C=20Modal=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AddRestaurantModal/AddRestaurantModal.jsx | 125 +++++++++---------
 .../AddRestaurantModal.module.css             |  33 -----
 src/components/Modal/Modal.jsx                |  13 ++
 src/components/Modal/Modal.module.css         |  32 +++++
 .../RestaurantDetailModal.jsx                 |  31 ++---
 .../RestaurantDetailModal.module.css          |  33 -----
 6 files changed, 119 insertions(+), 148 deletions(-)
 create mode 100644 src/components/Modal/Modal.jsx
 create mode 100644 src/components/Modal/Modal.module.css

diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index fd4c569..081ebe7 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import styles from "./AddRestaurantModal.module.css";
+import Modal from "../Modal/Modal";
 
 export default function AddRestaurantModal({ onSubmit, onClose }) {
   const [category, setCategory] = useState("");
@@ -12,72 +13,68 @@ export default function AddRestaurantModal({ onSubmit, onClose }) {
   }
 
   return (
-    <div className={`${styles.modal} ${styles["modal--open"]}`}>
-      <div className={styles.modal__backdrop} onClick={onClose}></div>
-      <div className={styles.modal__container}>
-        <h2 className={`${styles.modal__title} text-title`}>새로운 음식점</h2>
-        <form onSubmit={handleSubmit}>
-          <div className={`${styles.formItem} ${styles["formItem--required"]}`}>
-            <label htmlFor="category" className="text-caption">
-              카테고리
-            </label>
-            <select
-              name="category"
-              id="category"
-              value={category}
-              onChange={(e) => setCategory(e.target.value)}
-              required
-            >
-              <option value="">선택해 주세요</option>
-              <option value="한식">한식</option>
-              <option value="중식">중식</option>
-              <option value="일식">일식</option>
-              <option value="양식">양식</option>
-              <option value="아시안">아시안</option>
-              <option value="기타">기타</option>
-            </select>
-          </div>
+    <Modal title="새로운 음식점" onClose={onClose}>
+      <form onSubmit={handleSubmit}>
+        <div className={`${styles.formItem} ${styles["formItem--required"]}`}>
+          <label htmlFor="category" className="text-caption">
+            카테고리
+          </label>
+          <select
+            name="category"
+            id="category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            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={`${styles.formItem} ${styles["formItem--required"]}`}>
-            <label htmlFor="name" className="text-caption">
-              이름
-            </label>
-            <input
-              type="text"
-              name="name"
-              id="name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              required
-            />
-          </div>
+        <div className={`${styles.formItem} ${styles["formItem--required"]}`}>
+          <label htmlFor="name" className="text-caption">
+            이름
+          </label>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
 
-          <div className={styles.formItem}>
-            <label htmlFor="description" className="text-caption">
-              설명
-            </label>
-            <textarea
-              name="description"
-              id="description"
-              cols="30"
-              rows="5"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-            ></textarea>
-            <span className={`${styles.formItem__helpText} text-caption`}>
-              메뉴 등 추가 정보를 입력해 주세요.
-            </span>
-          </div>
+        <div className={styles.formItem}>
+          <label htmlFor="description" className="text-caption">
+            설명
+          </label>
+          <textarea
+            name="description"
+            id="description"
+            cols="30"
+            rows="5"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          ></textarea>
+          <span className={`${styles.formItem__helpText} text-caption`}>
+            메뉴 등 추가 정보를 입력해 주세요.
+          </span>
+        </div>
 
-          <div className={styles.modal__buttonContainer}>
-            <button
-              className={`${styles.button} ${styles["button--primary"]} text-caption`}
-            >
-              추가하기
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+        <div className={styles.modal__buttonContainer}>
+          <button
+            className={`${styles.button} ${styles["button--primary"]} text-caption`}
+          >
+            추가하기
+          </button>
+        </div>
+      </form>
+    </Modal>
   );
 }
diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.module.css b/src/components/AddRestaurantModal/AddRestaurantModal.module.css
index e9ee9e7..58dd401 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.module.css
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.module.css
@@ -1,36 +1,3 @@
-.modal {
-  display: none;
-}
-
-.modal--open {
-  display: block;
-}
-
-.modal__backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  background: rgba(0, 0, 0, 0.35);
-}
-
-.modal__container {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-
-  padding: 32px 16px;
-
-  border-radius: 8px 8px 0px 0px;
-  background: var(--grey-100);
-}
-
-.modal__title {
-  margin-bottom: 36px;
-}
-
 .formItem {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
new file mode 100644
index 0000000..35507cc
--- /dev/null
+++ b/src/components/Modal/Modal.jsx
@@ -0,0 +1,13 @@
+import styles from "./Modal.module.css";
+
+export default function Modal({ children, title, onClose }) {
+  return (
+    <div className={`${styles.modal} ${styles["modal--open"]}`}>
+      <div className={styles.modal__backdrop} onClick={onClose}></div>
+      <div className={styles.modal__container}>
+        <h2 className={`${styles.modal__title} text-title`}>{title}</h2>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
new file mode 100644
index 0000000..8aef078
--- /dev/null
+++ b/src/components/Modal/Modal.module.css
@@ -0,0 +1,32 @@
+.modal {
+  display: none;
+}
+
+.modal--open {
+  display: block;
+}
+
+.modal__backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.modal__container {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+
+  padding: 32px 16px;
+
+  border-radius: 8px 8px 0px 0px;
+  background: var(--grey-100);
+}
+
+.modal__title {
+  margin-bottom: 36px;
+}
diff --git a/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx b/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
index 00e7937..93256b1 100644
--- a/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
+++ b/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
@@ -1,25 +1,20 @@
 import styles from "./RestaurantDetailModal.module.css";
+import Modal from "../Modal/Modal";
 
 export default function RestaurantDetailModal({ restaurant, onClose }) {
   return (
-    <div className={`${styles.modal} ${styles["modal--open"]}`}>
-      <div className={styles.modal__backdrop} onClick={onClose}></div>
-      <div className={styles.modal__container}>
-        <h2 className={`${styles.modal__title} text-title`}>
-          {restaurant.name}
-        </h2>
-        <div className={styles.modal__restaurantInfo}>
-          <p className="text-body">{restaurant.description}</p>
-        </div>
-        <div className={styles.modal__buttonContainer}>
-          <button
-            className={`${styles.button} ${styles["button--primary"]} text-caption`}
-            onClick={onClose}
-          >
-            닫기
-          </button>
-        </div>
+    <Modal title={restaurant.name} onClose={onClose}>
+      <div className={styles.modal__restaurantInfo}>
+        <p className="text-body">{restaurant.description}</p>
       </div>
-    </div>
+      <div className={styles.modal__buttonContainer}>
+        <button
+          className={`${styles.button} ${styles["button--primary"]} text-caption`}
+          onClick={onClose}
+        >
+          닫기
+        </button>
+      </div>
+    </Modal>
   );
 }
diff --git a/src/components/RestaurantDetailModal/RestaurantDetailModal.module.css b/src/components/RestaurantDetailModal/RestaurantDetailModal.module.css
index 0ae7b8d..56deefd 100644
--- a/src/components/RestaurantDetailModal/RestaurantDetailModal.module.css
+++ b/src/components/RestaurantDetailModal/RestaurantDetailModal.module.css
@@ -1,36 +1,3 @@
-.modal {
-  display: none;
-}
-
-.modal--open {
-  display: block;
-}
-
-.modal__backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  background: rgba(0, 0, 0, 0.35);
-}
-
-.modal__container {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-
-  padding: 32px 16px;
-
-  border-radius: 8px 8px 0px 0px;
-  background: var(--grey-100);
-}
-
-.modal__title {
-  margin-bottom: 36px;
-}
-
 .modal__buttonContainer {
   display: flex;
 }

From e2cc78bdb9b8cb923060b635df35a18da10a9793 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 7 Jun 2026 23:00:30 +0900
Subject: [PATCH 06/13] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20Modal=20=EB=9E=98=ED=8D=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Modal.jsx        | 4 ++--
 src/components/Modal/Modal.module.css | 8 --------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index 35507cc..1164c19 100644
--- a/src/components/Modal/Modal.jsx
+++ b/src/components/Modal/Modal.jsx
@@ -2,12 +2,12 @@ import styles from "./Modal.module.css";
 
 export default function Modal({ children, title, onClose }) {
   return (
-    <div className={`${styles.modal} ${styles["modal--open"]}`}>
+    <>
       <div className={styles.modal__backdrop} onClick={onClose}></div>
       <div className={styles.modal__container}>
         <h2 className={`${styles.modal__title} text-title`}>{title}</h2>
         {children}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
index 8aef078..0937846 100644
--- a/src/components/Modal/Modal.module.css
+++ b/src/components/Modal/Modal.module.css
@@ -1,11 +1,3 @@
-.modal {
-  display: none;
-}
-
-.modal--open {
-  display: block;
-}
-
 .modal__backdrop {
   position: fixed;
   top: 0;

From f2d9a318b173c83900fbab97b9a77d452b2a3a42 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 7 Jun 2026 23:01:05 +0900
Subject: [PATCH 07/13] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?=
 =?UTF-8?q?=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?=
 =?UTF-8?q?=EA=B7=9C=EC=B9=99=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                              | 4 ++--
 src/components/AddRestaurantModal/AddRestaurantModal.jsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4073019..3c4bb06 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -38,7 +38,7 @@ function App() {
     setIsAddRestaurantModalOpen(false);
   }
 
-  function handleSubmit({ category, name, description }) {
+  function handleRestaurantSubmit({ category, name, description }) {
     setRestaurants([
       ...restaurants,
       {
@@ -73,7 +73,7 @@ function App() {
         )}
         {isAddRestaurantModalOpen && (
           <AddRestaurantModal
-            onSubmit={handleSubmit}
+            onSubmit={handleRestaurantSubmit}
             onClose={handleAddRestaurantModalClose}
           />
         )}
diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index 081ebe7..8aee4d1 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -7,14 +7,14 @@ export default function AddRestaurantModal({ onSubmit, onClose }) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
 
-  function handleSubmit(e) {
+  function handleFormSubmit(e) {
     e.preventDefault();
     onSubmit({ category, name, description });
   }
 
   return (
     <Modal title="새로운 음식점" onClose={onClose}>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleFormSubmit}>
         <div className={`${styles.formItem} ${styles["formItem--required"]}`}>
           <label htmlFor="category" className="text-caption">
             카테고리

From 7536b66f87f36be81444c889b9a899c887890468 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 7 Jun 2026 23:01:18 +0900
Subject: [PATCH 08/13] =?UTF-8?q?docs:=20README=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 165 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 94 insertions(+), 71 deletions(-)

diff --git a/README.md b/README.md
index 1d0f3a4..a3581c4 100644
--- a/README.md
+++ b/README.md
@@ -1,130 +1,153 @@
-# 조건부 렌더링 활용
+# 재사용 가능한 컴포넌트 설계
 
 ## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드
 
 이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다.
 
-1. 이벤트 핸들러를 통해 사용자 인터랙션에 반응하는 방법을 이해한다.
-2. 조건부 렌더링(`&&`)을 활용해 상황에 따라 컴포넌트를 보여주고 숨긴다.
-3. 어떤 값을 state로 선언해야 하는지 기준을 세운다.
+1. controlled 컴포넌트와 uncontrolled 컴포넌트의 차이를 이해하고, 각각 어떤 상황에서 선택하는지 기준을 세운다.
+2. 폼 입력값을 state로 관리하고 부모 컴포넌트로 끌어올리는 패턴(Lifting State Up)을 경험한다.
+3. `children` props를 활용해 재사용 가능한 Modal 컴포넌트를 설계하는 방법을 익힌다.
 
 ---
 
 ## 📝 기능 구현 목록
 
-- [x] 음식점 아이템 클릭 시 모달 열기
-- [x] 닫기 버튼 또는 backdrop 클릭 시 모달 닫기
-- [x] 클릭한 음식점 정보를 모달에 전달하여 표시
+- [x] Header의 레스토랑 추가 버튼 클릭 시 AddRestaurantModal 열기
+- [x] 폼 입력값(카테고리, 이름, 설명)을 controlled 방식으로 state 관리
+- [x] 추가하기 버튼 클릭 시 레스토랑 목록에 항목 추가
+- [x] (optional) 재사용 가능한 Modal 컴포넌트로 AddRestaurantModal, RestaurantDetailModal 개선
 
 ---
 
 ## 📚 학습 내용
 
-### 이벤트 핸들러와 데이터 전달
+### Controlled Component
 
-이벤트 핸들러에 함수를 직접 연결하면 React가 이벤트 객체(`e`)를 자동으로 넘겨준다. 클릭된 아이템의 데이터를 함께 전달하려면 화살표 함수로 한 번 감싸야 한다.
+`value`와 `onChange`를 React state에 연결하면 controlled 컴포넌트가 된다. 입력값이 항상 state를 통해 흐르므로 React가 폼 데이터를 완전히 제어한다.
 
 ```jsx
-// 이벤트 객체(e)만 전달됨
-onClick={onRestaurantClick}
-
-// 클릭된 restaurant 데이터를 직접 전달
-onClick={() => onRestaurantClick(restaurant)}
+<input
+  value={name}
+  onChange={(e) => setName(e.target.value)}
+/>
 ```
 
-`() => onRestaurantClick(restaurant)`는 `map` 순회 중인 `restaurant`를 부모까지 전달하는 역할을 한다.
-
-### 조건부 렌더링
-
-`{condition && <Component />}` 패턴으로 조건이 참일 때만 컴포넌트를 렌더링한다.
-
-```jsx
-{clickedRestaurant && (
-  <RestaurantDetailModal restaurant={clickedRestaurant} onClose={handleModalClose} />
-)}
-```
+반대로 `value`를 연결하지 않으면 DOM이 자체적으로 값을 관리하는 uncontrolled 컴포넌트가 된다.
 
-### State로 선언할 것과 아닌 것
+### form submit 기본 동작과 e.preventDefault()
 
-**State가 필요한 경우**: 시간이 지나면서 변하고, 렌더링에 영향을 주며, 다른 state나 props로부터 계산할 수 없는 값
+`<form onSubmit={handler}>`에서 submit 이벤트가 발생하면 브라우저는 기본적으로 페이지를 새로고침한다. React SPA에서는 이 기본 동작을 막아야 state 업데이트가 유지된다.
 
-**State가 불필요한 경우**: 기존 state나 props로부터 계산 가능한 파생값(derived value)
+리팩토링 후 `e.preventDefault()`는 폼을 소유한 AddRestaurantModal 내부에 있다. 완성된 데이터만 `onSubmit`을 통해 App으로 전달한다.
 
 ```jsx
-// category state에서 계산 가능 → state 불필요
-const filteredRestaurants = filterRestaurants(RESTAURANTS, category);
+// AddRestaurantModal.jsx
+function handleFormSubmit(e) {
+  e.preventDefault(); // 없으면 setRestaurants 실행 직후 페이지 리로드로 state 초기화
+  onSubmit({ category, name, description });
+}
 
-// clickedRestaurant state에서 계산 가능 → state 불필요
-const isRestaurantDetailModalOpen = !!clickedRestaurant;
+// App.jsx — 이벤트 객체가 아닌 데이터 객체를 받음
+function handleRestaurantSubmit({ category, name, description }) {
+  setRestaurants([...restaurants, { id: Date.now(), category, name, description }]);
+}
 ```
 
-파생 변수는 state와 달리 setter가 없어 동기화 버그가 생기지 않고, 렌더링마다 자동으로 최신값을 계산한다.
+### 폼 state를 부모로 끌어올리기 (Lifting State Up)
 
-### `&&` 조건부 렌더링 주의사항
+초기 구현에서는 `restaurants` state가 `App`에 있어서 폼 state도 `App`으로 끌어올려 props로 전달했다. 그러나 App이 실제로 필요한 것은 추가 완료 시점의 최종 데이터뿐이므로, 리팩토링을 통해 폼 state를 `AddRestaurantModal` 안으로 내리고 완성된 데이터만 부모로 전달하도록 변경했다. (자세한 내용은 리팩토링 섹션 참고)
 
-`&&` 앞에 숫자나 빈 문자열 같은 falsy 값이 오면, `false`로 평가되지 않고 값 자체가 화면에 출력된다.
+### 추가 후 상태 초기화
 
-```jsx
-// ⚠️ count가 0이면 "0"이 화면에 렌더링됨
-{count && <Modal />}
+레스토랑을 추가한 뒤 폼 입력값을 초기화하지 않으면 모달을 다시 열었을 때 이전 값이 남아있다.
+
+초기 구현에서는 폼 state가 App에 있었기 때문에 추가 완료 시점에 명시적으로 초기화했다.
 
-// ✅ 명시적으로 불리언으로 변환
-{!!count && <Modal />}
-{count > 0 && <Modal />}
+```jsx
+setIsAddRestaurantModalOpen(false);
+setCategory("");
+setName("");
+setDescription("");
 ```
 
-이 미션에서 `clickedRestaurant`는 객체 또는 `null`만 들어오므로 문제없지만, 숫자나 문자열을 조건으로 쓸 때는 주의해야 한다. `!!`를 사용하는 이유 중 하나이기도 하다.
+리팩토링 후에는 폼 state를 AddRestaurantModal 내부로 내렸기 때문에 명시적 초기화가 불필요해졌다. `isAddRestaurantModalOpen`이 `false`가 되면 AddRestaurantModal이 언마운트되고, 다시 열릴 때 새로 마운트되면서 `useState("")`의 초기값으로 자동 초기화된다.
+
+---
+
+## 🤔 고민했던 문제와 해결 과정에서 배운 점
 
-### Lifting State Up
+### 식당을 추가해도 목록이 업데이트되지 않는 문제
 
-클릭된 음식점 정보를 `RestaurantList`와 `RestaurantDetailModal` 두 컴포넌트가 공유해야 하므로, 공통 부모인 `App`에서 state를 관리한다.
+`handleSubmit`에서 `setRestaurants`가 호출되는데도 목록이 바뀌지 않아서 원인을 찾아봤다. `e.preventDefault()`가 없어서 submit 시 페이지가 새로고침되고, state 업데이트가 반영되기 전에 초기 상태로 되돌아가는 것이었다. state 업데이트 자체는 올바르게 작성되어 있었지만 브라우저 기본 동작을 막지 않아서 생긴 문제였다.
 
-### `!!` 이중 부정 연산자
+### setRestaurants 인자 오류
 
-자바스크립트에서 값의 truthy/falsy 평가 결과를 명시적으로 불리언 값으로 변환하기 위해 사용된다. 주로 조건식의 결과를 일관된 불리언 타입으로 정규화할 때 활용된다.
+처음에 `setRestaurants(...restaurants, { ... })`로 작성했다. 이렇게 하면 배열이 아닌 여러 인자를 `setRestaurants`에 넘기는 것이라 새 배열이 만들어지지 않는다. 배열 리터럴 안에서 스프레드해야 한다.
 
 ```jsx
-!!null       // → false (모달 닫힌 상태)
-!!{ id: 1 } // → true  (모달 열린 상태)
+// ❌ 인자를 여러 개 전달하는 것
+setRestaurants(...restaurants, { id: Date.now(), ... });
+
+// ✅ 기존 항목을 펼쳐서 새 배열 생성
+setRestaurants([...restaurants, { id: Date.now(), ... }]);
 ```
 
 ---
 
-## 🤔 고민했던 문제와 해결 과정에서 배운 점
-
-### 무엇을 state로 선언할지
-
-가장 고민이 된 부분은 `restaurant`를 state로 만들어야 하는가였다. `filteredRestaurants`로 계산할 수 있을 것 같아 state가 불필요하다고 생각했는데, 실제로는 두 값의 역할이 다르다.
+## 🛠 리팩토링
 
-- `filteredRestaurants` — 화면에 보여줄 **목록** → `category`에서 파생, state 불필요
-- `clickedRestaurant` — 모달에 보여줄 **선택된 하나** → 클릭 전까지 알 수 없으므로 state 필요
+### 이벤트 핸들러 네이밍 규칙
 
-**기준**: 다른 값으로부터 계산할 수 없다면 state, 계산할 수 있다면 파생 변수
+`handle` + `[대상]` + `[동작]` 패턴을 사용한다. 대상은 항상 붙인다.
 
-### isModalOpen과 clickedRestaurant를 따로 두면 생기는 문제
+```jsx
+handleFormSubmit       // Form + Submit
+handleCategoryChange   // Category + Change
+handleDetailModalClose // DetailModal + Close
+```
 
-처음엔 `isModalOpen` boolean과 `clickedRestaurant` 두 state를 동시에 관리하려 했다. 이 경우 둘을 항상 함께 업데이트해야 하는데, 하나라도 빠지면 모달은 열려 있지만 `clickedRestaurant`가 `null`인 상황이 발생해 런타임 에러가 난다.
+props로 넘길 때는 `on-`으로 통일한다. `on-`은 인터페이스(계약), `handle-`은 구현이다.
 
 ```jsx
-function handleRestaurantClick(restaurant) {
-  setClickedRestaurant(restaurant);
-  setIsModalOpen(true); // 둘 중 하나라도 빠지면 버그
-}
+// 정의는 handle-
+function handleNameChange(e) { ... }
+
+// props로 넘길 때는 on-
+<AddRestaurantModal onNameChange={handleNameChange} />
 ```
 
-**해결:** `clickedRestaurant` 하나로 통합. `null`이면 닫힌 상태, 값이 있으면 열린 상태다. `isRestaurantDetailModalOpen`은 이를 기반으로 계산한 파생 변수로 가독성을 확보했다.
+### 폼 state를 자식으로 내리기
+
+처음 구현에서는 폼 입력값(category, name, description)을 App에서 관리했다. `restaurants` state가 App에 있어서 폼 데이터도 App까지 올려야 한다고 생각했기 때문이다. 결과적으로 AddRestaurantModal에 props가 8개가 됐다.
+
+그러나 App이 실제로 필요한 것은 **추가 완료 시점의 최종 데이터**뿐이다. 폼을 채우는 중간 과정의 입력값은 App이 알 필요가 없다. 폼 state를 AddRestaurantModal 안으로 내리고, 완료 시에만 부모로 전달하도록 변경했다.
 
 ```jsx
-const [clickedRestaurant, setClickedRestaurant] = useState(null);
-const isRestaurantDetailModalOpen = !!clickedRestaurant; // 파생 변수
+// Before: App이 중간 입력값까지 관리
+<AddRestaurantModal
+  category={category}
+  name={name}
+  description={description}
+  onCategoryChange={handleCategoryChange}
+  onNameChange={handleNameChange}
+  onDescriptionChange={handleDescriptionChange}
+  onSubmit={handleSubmit}
+  onClose={handleAddRestaurantModalClose}
+/>
+
+// After: 완성된 데이터만 부모로 전달
+<AddRestaurantModal
+  onSubmit={handleRestaurantSubmit}   // { category, name, description } 객체를 받음
+  onClose={handleAddRestaurantModalClose}
+/>
 ```
 
----
+props가 8개 → 2개로 줄었고, 폼 내부 관심사가 AddRestaurantModal 안에 캡슐화됐다.
 
-## 🛠 리팩토링
+### Modal 래퍼 div 제거
+
+`display: none` / `display: block` 패턴은 템플릿(`templates/style.css`)에서 그대로 가져온 것이다. 템플릿은 순수 HTML/CSS 기반으로, 모달이 DOM에 항상 존재하면서 `.modal--open` 클래스를 붙이고 떼는 방식으로 보이고 숨겼다.
 
-State 설계를 단계적으로 개선하며 사고 과정을 커밋으로 기록했다.
+React로 전환하면서 조건부 렌더링(`{isOpen && <Modal />}`)을 사용하게 되면서 CSS 토글이 불필요해졌다. 템플릿의 구조를 그대로 쓰면서 생긴 불필요한 패턴을 뒤늦게 제거했다.
 
-1. **Stage 1** — `isModalOpen` boolean state로 모달 열고 닫기만 구현 (restaurant 데이터 없음)
-2. **Stage 2** — `isModalOpen` + `clickedRestaurant` 두 state로 실제 데이터 전달 (동기화 문제 내포)
-3. **Stage 3** — `clickedRestaurant` 단일 state로 통합, `isRestaurantDetailModalOpen`을 파생 변수로 개선
+래퍼 `<div>`도 함께 제거했다. backdrop과 container가 둘 다 `position: fixed`라 부모 요소의 레이아웃에 영향을 받지 않아 래퍼가 없어도 동작이 동일하다. 불필요한 DOM 노드를 줄이기 위해 Fragment로 교체했다.

From 746e609a61a77e156e38ebc22c706f91331304ae Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Mon, 8 Jun 2026 00:55:31 +0900
Subject: [PATCH 09/13] =?UTF-8?q?docs:=20README=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 42 +++++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index a3581c4..b17162c 100644
--- a/README.md
+++ b/README.md
@@ -5,34 +5,46 @@
 이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다.
 
 1. controlled 컴포넌트와 uncontrolled 컴포넌트의 차이를 이해하고, 각각 어떤 상황에서 선택하는지 기준을 세운다.
-2. 폼 입력값을 state로 관리하고 부모 컴포넌트로 끌어올리는 패턴(Lifting State Up)을 경험한다.
+2. 어떤 state를 어느 컴포넌트가 소유해야 하는지 판단하고, 필요한 경우 공통 부모로 끌어올리는 패턴(Lifting State Up)을 경험한다.
 3. `children` props를 활용해 재사용 가능한 Modal 컴포넌트를 설계하는 방법을 익힌다.
 
 ---
 
 ## 📝 기능 구현 목록
 
-- [x] Header의 레스토랑 추가 버튼 클릭 시 AddRestaurantModal 열기
-- [x] 폼 입력값(카테고리, 이름, 설명)을 controlled 방식으로 state 관리
-- [x] 추가하기 버튼 클릭 시 레스토랑 목록에 항목 추가
-- [x] (optional) 재사용 가능한 Modal 컴포넌트로 AddRestaurantModal, RestaurantDetailModal 개선
+- [x] Header의 음식점 추가 버튼 클릭 시 AddRestaurantModal 열기
+- [x] 추가하기 버튼 클릭 시 음식점 목록에 항목 추가
+- [x] 재사용 가능한 Modal 컴포넌트로 AddRestaurantModal, RestaurantDetailModal 개선
 
 ---
 
 ## 📚 학습 내용
 
-### Controlled Component
+### Controlled vs Uncontrolled Component
 
-`value`와 `onChange`를 React state에 연결하면 controlled 컴포넌트가 된다. 입력값이 항상 state를 통해 흐르므로 React가 폼 데이터를 완전히 제어한다.
+컴포넌트의 중요한 정보가 **props**에 의해 결정되면 controlled, **지역 state**로 자체 관리되면 uncontrolled이다.
 
-```jsx
-<input
-  value={name}
-  onChange={(e) => setName(e.target.value)}
-/>
-```
+| | Controlled | Uncontrolled |
+|---|---|---|
+| 정보 출처 | props (부모가 제공) | 지역 state (자체 관리) |
+| 부모의 영향 | 동작을 완전히 지정 가능 | 영향을 줄 수 없음 |
+| 유연성 | 여러 컴포넌트와 조정 용이 | 독립적이지만 협력 어려움 |
+| 사용 난이도 | 부모에서 props 설정 필요 | 설정이 적어 사용하기 쉬움 |
+
+**언제 선택하나?**
+- **Controlled** — 부모 컴포넌트와 state를 공유하거나, 여러 컴포넌트의 동작을 함께 조정해야 할 때
+- **Uncontrolled** — 부모와 상태를 공유할 필요 없이 독립적으로 동작해도 될 때
+
+**이 미션에서의 선택:**
+
+controlled/uncontrolled는 컴포넌트 전체에 붙이는 레이블이 아니라, 어떤 정보가 어디서 관리되는지를 기준으로 판단한다. AddRestaurantModal은 두 가지가 혼재한다.
+
+- **폼 데이터** (category, name, description) → 지역 state로 자체 관리 → **uncontrolled**
+- **모달 열림/닫힘** → App이 소유 → **controlled**
+
+모달 열림 상태를 App이 소유하는 이유는 트리거(Header의 추가 버튼)와 모달이 형제 관계이기 때문이다. 형제끼리는 서로의 state에 접근할 수 없으므로 공통 부모인 App으로 state를 끌어올렸다(Lifting State Up).
 
-반대로 `value`를 연결하지 않으면 DOM이 자체적으로 값을 관리하는 uncontrolled 컴포넌트가 된다.
+`onSubmit`, `onClose`는 state가 아닌 콜백이다. "어떤 값을 누가 소유하냐"의 문제가 아니라 이벤트를 부모로 전달하는 통로이므로 controlled/uncontrolled 구분과는 별개다.
 
 ### form submit 기본 동작과 e.preventDefault()
 
@@ -59,7 +71,7 @@ function handleRestaurantSubmit({ category, name, description }) {
 
 ### 추가 후 상태 초기화
 
-레스토랑을 추가한 뒤 폼 입력값을 초기화하지 않으면 모달을 다시 열었을 때 이전 값이 남아있다.
+음식점을 추가한 뒤 폼 입력값을 초기화하지 않으면 모달을 다시 열었을 때 이전 값이 남아있다.
 
 초기 구현에서는 폼 state가 App에 있었기 때문에 추가 완료 시점에 명시적으로 초기화했다.
 

From 78b748b390d793de1750e2cb87b7fe1898445c47 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Mon, 8 Jun 2026 01:22:19 +0900
Subject: [PATCH 10/13] =?UTF-8?q?docs:=20README=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/README.md b/README.md
index b17162c..e206bd7 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,22 @@ setDescription("");
 
 ## 🤔 고민했던 문제와 해결 과정에서 배운 점
 
+### 어떤 state를 어느 컴포넌트가 소유해야 하는가
+
+음식점 추가 기능을 구현하면서 다음 state들이 필요하다고 생각했다.
+
+- `restaurants` — 음식점 목록
+- `category`, `name`, `description` — 폼 입력값
+- `isAddRestaurantModalOpen` - 모달 열림/닫힘
+
+이 state들을 어느 컴포넌트에 선언할지 결정하기 위해 "이 state를 누가 필요로 하는가"를 기준으로 판단했다.
+
+`restaurants`는 AddRestaurantModal(추가 시 갱신)과 RestaurantList(목록 렌더링) 모두 필요하다. 두 컴포넌트는 형제 관계라 서로의 state에 직접 접근할 수 없으므로, 공통 부모인 App으로 끌어올렸다(Lifting State Up).
+
+`category`, `name`, `description`은 폼을 입력하는 동안 AddRestaurantModal 안에서만 쓰인다. 추가 완료 시점에 최종 데이터만 부모로 전달하면 되므로, 굳이 App까지 올릴 필요가 없다. AddRestaurantModal이 직접 소유한다.
+
+`isAddRestaurantModalOpen`도 같은 기준으로 판단했다. 모달을 여는 트리거는 Header의 추가 버튼이고, 실제로 열리는 것은 AddRestaurantModal이다. 두 컴포넌트는 형제 관계라 서로의 state에 접근할 수 없으므로 공통 부모인 App이 소유해야 한다.
+
 ### 식당을 추가해도 목록이 업데이트되지 않는 문제
 
 `handleSubmit`에서 `setRestaurants`가 호출되는데도 목록이 바뀌지 않아서 원인을 찾아봤다. `e.preventDefault()`가 없어서 submit 시 페이지가 새로고침되고, state 업데이트가 반영되기 전에 초기 상태로 되돌아가는 것이었다. state 업데이트 자체는 올바르게 작성되어 있었지만 브라우저 기본 동작을 막지 않아서 생긴 문제였다.

From 6df29871aa15c680be1514028f8d49e602a19ac8 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Tue, 9 Jun 2026 09:24:00 +0900
Subject: [PATCH 11/13] chore: add .coderabbit.yaml

---
 .coderabbit.yaml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 .coderabbit.yaml

diff --git a/.coderabbit.yaml b/.coderabbit.yaml
new file mode 100644
index 0000000..ecb145c
--- /dev/null
+++ b/.coderabbit.yaml
@@ -0,0 +1,14 @@
+language: ko-KR
+early_access: false
+reviews:
+  profile: "chill"
+  request_changes_workflow: false
+  high_level_summary: true
+  poem: false
+  review_status: true
+  collapse_walkthrough: false
+  auto_review:
+    enabled: true
+    drafts: false
+chat:
+  auto_reply: true

From 572399b9c32139a60ab2ba0e8e70e0d2cab09e83 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sat, 13 Jun 2026 19:20:53 +0900
Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=83=81=EC=88=98=20=EC=B6=94=EC=B6=9C=20=EB=B0=8F?=
 =?UTF-8?q?=20map=EC=9C=BC=EB=A1=9C=20=EC=98=B5=EC=85=98=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AddRestaurantModal/AddRestaurantModal.jsx        | 12 ++++++------
 src/components/CategoryFilter/CategoryFilter.jsx     | 12 ++++++------
 src/constants/categories.js                          |  1 +
 3 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 src/constants/categories.js

diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index 8aee4d1..0e3e3e5 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import styles from "./AddRestaurantModal.module.css";
 import Modal from "../Modal/Modal";
+import { CATEGORIES } from "../../constants/categories";
 
 export default function AddRestaurantModal({ onSubmit, onClose }) {
   const [category, setCategory] = useState("");
@@ -27,12 +28,11 @@ export default function AddRestaurantModal({ onSubmit, onClose }) {
             required
           >
             <option value="">선택해 주세요</option>
-            <option value="한식">한식</option>
-            <option value="중식">중식</option>
-            <option value="일식">일식</option>
-            <option value="양식">양식</option>
-            <option value="아시안">아시안</option>
-            <option value="기타">기타</option>
+            {CATEGORIES.map((value) => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
           </select>
         </div>
 
diff --git a/src/components/CategoryFilter/CategoryFilter.jsx b/src/components/CategoryFilter/CategoryFilter.jsx
index 184edb6..60f56b7 100644
--- a/src/components/CategoryFilter/CategoryFilter.jsx
+++ b/src/components/CategoryFilter/CategoryFilter.jsx
@@ -1,3 +1,4 @@
+import { CATEGORIES } from "../../constants/categories";
 import styles from "./CategoryFilter.module.css";
 
 export default function CategoryFilter({ category, onCategoryChange }) {
@@ -12,12 +13,11 @@ export default function CategoryFilter({ category, onCategoryChange }) {
         onChange={onCategoryChange}
       >
         <option value="전체">전체</option>
-        <option value="한식">한식</option>
-        <option value="중식">중식</option>
-        <option value="일식">일식</option>
-        <option value="양식">양식</option>
-        <option value="아시안">아시안</option>
-        <option value="기타">기타</option>
+        {CATEGORIES.map((value) => (
+          <option key={value} value={value}>
+            {value}
+          </option>
+        ))}
       </select>
     </section>
   );
diff --git a/src/constants/categories.js b/src/constants/categories.js
new file mode 100644
index 0000000..cac9f9e
--- /dev/null
+++ b/src/constants/categories.js
@@ -0,0 +1 @@
+export const CATEGORIES = ["한식", "중식", "일식", "양식", "아시안", "기타"];

From 1693b413e80a405c6b58fa2d75866a430640f121 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sat, 13 Jun 2026 19:21:51 +0900
Subject: [PATCH 13/13] =?UTF-8?q?refactor:=20RestaurantList=20button=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=ED=98=95=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   |  4 +-
 .../RestaurantList/RestaurantList.jsx         | 38 +++++++++----------
 .../RestaurantList/RestaurantList.module.css  | 10 ++++-
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 3c4bb06..b07d0c0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -39,8 +39,8 @@ function App() {
   }
 
   function handleRestaurantSubmit({ category, name, description }) {
-    setRestaurants([
-      ...restaurants,
+    setRestaurants((prev) => [
+      ...prev,
       {
         id: Date.now(),
         category,
diff --git a/src/components/RestaurantList/RestaurantList.jsx b/src/components/RestaurantList/RestaurantList.jsx
index 7fbdb78..0150f7f 100644
--- a/src/components/RestaurantList/RestaurantList.jsx
+++ b/src/components/RestaurantList/RestaurantList.jsx
@@ -7,26 +7,24 @@ export default function RestaurantList({ restaurants, onRestaurantClick }) {
       <ul>
         {restaurants.map((restaurant) => {
           return (
-            <li
-              key={restaurant.id}
-              className={styles.restaurant}
-              onClick={() => onRestaurantClick(restaurant)}
-            >
-              <div className={styles.restaurant__category}>
-                <img
-                  src={CATEGORY_IMAGES[restaurant.category]}
-                  alt={restaurant.category}
-                  className={styles.restaurant__categoryIcon}
-                />
-              </div>
-              <div className={styles.restaurant__info}>
-                <h3 className={`${styles.restaurant__name} text-subtitle`}>
-                  {restaurant.name}
-                </h3>
-                <p className={`${styles.restaurant__description} text-body`}>
-                  {restaurant.description}
-                </p>
-              </div>
+            <li key={restaurant.id} className={styles.restaurant}>
+              <button className={styles.restaurant__button} onClick={() => onRestaurantClick(restaurant)}>
+                <div className={styles.restaurant__category}>
+                  <img
+                    src={CATEGORY_IMAGES[restaurant.category]}
+                    alt={restaurant.category}
+                    className={styles.restaurant__categoryIcon}
+                  />
+                </div>
+                <div className={styles.restaurant__info}>
+                  <h3 className={`${styles.restaurant__name} text-subtitle`}>
+                    {restaurant.name}
+                  </h3>
+                  <p className={`${styles.restaurant__description} text-body`}>
+                    {restaurant.description}
+                  </p>
+                </div>
+              </button>
             </li>
           );
         })}
diff --git a/src/components/RestaurantList/RestaurantList.module.css b/src/components/RestaurantList/RestaurantList.module.css
index a1f4ffe..f7bdbdf 100644
--- a/src/components/RestaurantList/RestaurantList.module.css
+++ b/src/components/RestaurantList/RestaurantList.module.css
@@ -7,12 +7,20 @@
 }
 
 .restaurant {
+  border-bottom: 1px solid #e9eaed;
+}
+
+.restaurant__button {
   display: flex;
   align-items: flex-start;
 
+  width: 100%;
   padding: 16px 8px;
 
-  border-bottom: 1px solid #e9eaed;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
 }
 
 .restaurant__category {