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
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
diff --git a/README.md b/README.md
index 1d0f3a4..e206bd7 100644
--- a/README.md
+++ b/README.md
@@ -1,130 +1,181 @@
-# 조건부 렌더링 활용
+# 재사용 가능한 컴포넌트 설계
 
 ## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드
 
 이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다.
 
-1. 이벤트 핸들러를 통해 사용자 인터랙션에 반응하는 방법을 이해한다.
-2. 조건부 렌더링(`&&`)을 활용해 상황에 따라 컴포넌트를 보여주고 숨긴다.
-3. 어떤 값을 state로 선언해야 하는지 기준을 세운다.
+1. controlled 컴포넌트와 uncontrolled 컴포넌트의 차이를 이해하고, 각각 어떤 상황에서 선택하는지 기준을 세운다.
+2. 어떤 state를 어느 컴포넌트가 소유해야 하는지 판단하고, 필요한 경우 공통 부모로 끌어올리는 패턴(Lifting State Up)을 경험한다.
+3. `children` props를 활용해 재사용 가능한 Modal 컴포넌트를 설계하는 방법을 익힌다.
 
 ---
 
 ## 📝 기능 구현 목록
 
-- [x] 음식점 아이템 클릭 시 모달 열기
-- [x] 닫기 버튼 또는 backdrop 클릭 시 모달 닫기
-- [x] 클릭한 음식점 정보를 모달에 전달하여 표시
+- [x] Header의 음식점 추가 버튼 클릭 시 AddRestaurantModal 열기
+- [x] 추가하기 버튼 클릭 시 음식점 목록에 항목 추가
+- [x] 재사용 가능한 Modal 컴포넌트로 AddRestaurantModal, RestaurantDetailModal 개선
 
 ---
 
 ## 📚 학습 내용
 
-### 이벤트 핸들러와 데이터 전달
+### Controlled vs Uncontrolled Component
 
-이벤트 핸들러에 함수를 직접 연결하면 React가 이벤트 객체(`e`)를 자동으로 넘겨준다. 클릭된 아이템의 데이터를 함께 전달하려면 화살표 함수로 한 번 감싸야 한다.
+컴포넌트의 중요한 정보가 **props**에 의해 결정되면 controlled, **지역 state**로 자체 관리되면 uncontrolled이다.
 
-```jsx
-// 이벤트 객체(e)만 전달됨
-onClick={onRestaurantClick}
+| | Controlled | Uncontrolled |
+|---|---|---|
+| 정보 출처 | props (부모가 제공) | 지역 state (자체 관리) |
+| 부모의 영향 | 동작을 완전히 지정 가능 | 영향을 줄 수 없음 |
+| 유연성 | 여러 컴포넌트와 조정 용이 | 독립적이지만 협력 어려움 |
+| 사용 난이도 | 부모에서 props 설정 필요 | 설정이 적어 사용하기 쉬움 |
 
-// 클릭된 restaurant 데이터를 직접 전달
-onClick={() => onRestaurantClick(restaurant)}
-```
+**언제 선택하나?**
+- **Controlled** — 부모 컴포넌트와 state를 공유하거나, 여러 컴포넌트의 동작을 함께 조정해야 할 때
+- **Uncontrolled** — 부모와 상태를 공유할 필요 없이 독립적으로 동작해도 될 때
 
-`() => onRestaurantClick(restaurant)`는 `map` 순회 중인 `restaurant`를 부모까지 전달하는 역할을 한다.
+**이 미션에서의 선택:**
 
-### 조건부 렌더링
+controlled/uncontrolled는 컴포넌트 전체에 붙이는 레이블이 아니라, 어떤 정보가 어디서 관리되는지를 기준으로 판단한다. AddRestaurantModal은 두 가지가 혼재한다.
 
-`{condition && <Component />}` 패턴으로 조건이 참일 때만 컴포넌트를 렌더링한다.
+- **폼 데이터** (category, name, description) → 지역 state로 자체 관리 → **uncontrolled**
+- **모달 열림/닫힘** → App이 소유 → **controlled**
 
-```jsx
-{clickedRestaurant && (
-  <RestaurantDetailModal restaurant={clickedRestaurant} onClose={handleModalClose} />
-)}
-```
+모달 열림 상태를 App이 소유하는 이유는 트리거(Header의 추가 버튼)와 모달이 형제 관계이기 때문이다. 형제끼리는 서로의 state에 접근할 수 없으므로 공통 부모인 App으로 state를 끌어올렸다(Lifting State Up).
+
+`onSubmit`, `onClose`는 state가 아닌 콜백이다. "어떤 값을 누가 소유하냐"의 문제가 아니라 이벤트를 부모로 전달하는 통로이므로 controlled/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("")`의 초기값으로 자동 초기화된다.
+
+---
+
+## 🤔 고민했던 문제와 해결 과정에서 배운 점
+
+### 어떤 state를 어느 컴포넌트가 소유해야 하는가
+
+음식점 추가 기능을 구현하면서 다음 state들이 필요하다고 생각했다.
+
+- `restaurants` — 음식점 목록
+- `category`, `name`, `description` — 폼 입력값
+- `isAddRestaurantModalOpen` - 모달 열림/닫힘
+
+이 state들을 어느 컴포넌트에 선언할지 결정하기 위해 "이 state를 누가 필요로 하는가"를 기준으로 판단했다.
 
-### Lifting State Up
+`restaurants`는 AddRestaurantModal(추가 시 갱신)과 RestaurantList(목록 렌더링) 모두 필요하다. 두 컴포넌트는 형제 관계라 서로의 state에 직접 접근할 수 없으므로, 공통 부모인 App으로 끌어올렸다(Lifting State Up).
 
-클릭된 음식점 정보를 `RestaurantList`와 `RestaurantDetailModal` 두 컴포넌트가 공유해야 하므로, 공통 부모인 `App`에서 state를 관리한다.
+`category`, `name`, `description`은 폼을 입력하는 동안 AddRestaurantModal 안에서만 쓰인다. 추가 완료 시점에 최종 데이터만 부모로 전달하면 되므로, 굳이 App까지 올릴 필요가 없다. AddRestaurantModal이 직접 소유한다.
 
-### `!!` 이중 부정 연산자
+`isAddRestaurantModalOpen`도 같은 기준으로 판단했다. 모달을 여는 트리거는 Header의 추가 버튼이고, 실제로 열리는 것은 AddRestaurantModal이다. 두 컴포넌트는 형제 관계라 서로의 state에 접근할 수 없으므로 공통 부모인 App이 소유해야 한다.
 
-자바스크립트에서 값의 truthy/falsy 평가 결과를 명시적으로 불리언 값으로 변환하기 위해 사용된다. 주로 조건식의 결과를 일관된 불리언 타입으로 정규화할 때 활용된다.
+### 식당을 추가해도 목록이 업데이트되지 않는 문제
+
+`handleSubmit`에서 `setRestaurants`가 호출되는데도 목록이 바뀌지 않아서 원인을 찾아봤다. `e.preventDefault()`가 없어서 submit 시 페이지가 새로고침되고, state 업데이트가 반영되기 전에 초기 상태로 되돌아가는 것이었다. state 업데이트 자체는 올바르게 작성되어 있었지만 브라우저 기본 동작을 막지 않아서 생긴 문제였다.
+
+### setRestaurants 인자 오류
+
+처음에 `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로 교체했다.
diff --git a/src/App.jsx b/src/App.jsx
index 86cbe2d..b07d0c0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,30 +6,59 @@ 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 isRestaurantDetailModalOpen = !!clickedRestaurant;
-  const filteredRestaurants = filterRestaurants(RESTAURANTS, category);
+  const filteredRestaurants = filterRestaurants(restaurants, filterCategory);
 
-  function handleChange(e) {
-    setCategory(e.target.value);
+  function handleFilterCategoryChange(e) {
+    setFilterCategory(e.target.value);
   }
 
   function handleRestaurantClick(restaurant) {
     setClickedRestaurant(restaurant);
   }
 
-  function handleModalClose() {
+  function handleDetailModalClose() {
     setClickedRestaurant(null);
   }
 
+  function handleAddButtonClick() {
+    setIsAddRestaurantModalOpen(true);
+  }
+
+  function handleAddRestaurantModalClose() {
+    setIsAddRestaurantModalOpen(false);
+  }
+
+  function handleRestaurantSubmit({ category, name, description }) {
+    setRestaurants((prev) => [
+      ...prev,
+      {
+        id: Date.now(),
+        category,
+        name,
+        description,
+      },
+    ]);
+    setIsAddRestaurantModalOpen(false);
+  }
+
   return (
     <>
-      <Header />
+      <Header onAddButtonClick={handleAddButtonClick} />
       <main>
-        <CategoryFilter category={category} onChangeCategory={handleChange} />
+        <CategoryFilter
+          category={filterCategory}
+          onCategoryChange={handleFilterCategoryChange}
+        />
         <RestaurantList
           restaurants={filteredRestaurants}
           onRestaurantClick={handleRestaurantClick}
@@ -39,7 +68,13 @@ function App() {
         {isRestaurantDetailModalOpen && (
           <RestaurantDetailModal
             restaurant={clickedRestaurant}
-            onClose={handleModalClose}
+            onClose={handleDetailModalClose}
+          />
+        )}
+        {isAddRestaurantModalOpen && (
+          <AddRestaurantModal
+            onSubmit={handleRestaurantSubmit}
+            onClose={handleAddRestaurantModalClose}
           />
         )}
       </aside>
diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index 87531f8..0e3e3e5 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -1,58 +1,80 @@
+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("");
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  function handleFormSubmit(e) {
+    e.preventDefault();
+    onSubmit({ category, name, description });
+  }
 
-export default function AddRestaurantModal() {
   return (
-    <div className={`${styles.modal} ${styles["modal--open"]}`}>
-      <div className={styles.modal__backdrop}></div>
-      <div className={styles.modal__container}>
-        <h2 className={`${styles.modal__title} text-title`}>새로운 음식점</h2>
-        <form>
-          <div className={`${styles.formItem} ${styles["formItem--required"]}`}>
-            <label htmlFor="category" className="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>
+    <Modal title="새로운 음식점" onClose={onClose}>
+      <form onSubmit={handleFormSubmit}>
+        <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>
+            {CATEGORIES.map((value) => (
+              <option key={value} value={value}>
+                {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" 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"
-            ></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/CategoryFilter/CategoryFilter.jsx b/src/components/CategoryFilter/CategoryFilter.jsx
index c2789c5..60f56b7 100644
--- a/src/components/CategoryFilter/CategoryFilter.jsx
+++ b/src/components/CategoryFilter/CategoryFilter.jsx
@@ -1,6 +1,7 @@
+import { CATEGORIES } from "../../constants/categories";
 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,15 +10,14 @@ export default function CategoryFilter({ category, onChangeCategory }) {
         className={styles.categoryFilter__select}
         aria-label="음식점 카테고리 필터"
         value={category}
-        onChange={onChangeCategory}
+        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/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>
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
new file mode 100644
index 0000000..1164c19
--- /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__backdrop} onClick={onClose}></div>
+      <div className={styles.modal__container}>
+        <h2 className={`${styles.modal__title} text-title`}>{title}</h2>
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
new file mode 100644
index 0000000..0937846
--- /dev/null
+++ b/src/components/Modal/Modal.module.css
@@ -0,0 +1,24 @@
+.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;
 }
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 {
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 = ["한식", "중식", "일식", "양식", "아시안", "기타"];