diff --git a/03-modal/README.md b/03-modal/README.md
deleted file mode 100644
index 6a97651..0000000
--- a/03-modal/README.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# 03. 모달 UI 구현하기: side-effect(feat. event handler)
-
-## 🎯 요구 사항
-
-- `RestaurantList` 의 아이템을 클릭하면, 클릭한 아이템의 정보를 보여주는 모달이 뜨도록 변경해 주세요. '확인' 버튼을 클릭하거나 모달 뒤의 backdrop을 클릭하면 모달이 닫혀야 합니다.
-  - (작은 단계로 구현해보기 1) 아이템을 클릭하면 정해진 텍스트를 그대로 보여주는 모달을 열고 닫습니다.
-  - (작은 단계로 구현해보기 2) 클릭한 아이템의 정보를 모달에 내려줄 수 있도록 개선합니다.
-
-### 구현 결과 예시
-
-```javascript
-// App.jsx
-{isModalOpen && <RestaurantDetailModal {/** 적절한 props */}/>}
-```
-
-## ✅ 키워드
-
-- event handler (feat. side effect)
-- conditional rendering
-- lifting state up
-
-## 🧙‍♀️ 진행 가이드
-
-- 진행 시간: 1시간 내에 완료하는 것을 목표로 합니다.
-
-## 🔗 참고 문서
-
-- [Thinking in React](https://react.dev/learn/thinking-in-react)의 Step5
-- [Responding to Events](https://react.dev/learn/responding-to-events)
diff --git a/04-form/README.md b/04-form/README.md
new file mode 100644
index 0000000..6518ccb
--- /dev/null
+++ b/04-form/README.md
@@ -0,0 +1,42 @@
+# 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)
diff --git a/README.md b/README.md
index eac4582..71b298f 100644
--- a/README.md
+++ b/README.md
@@ -1,162 +1,211 @@
-# Self-Paced React Step 3
+# Self-Paced React Step 4
 
 ## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드
 
 이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다.
 
-**1. 이벤트 핸들러를 통한 데이터 전달 이해**
+**1. Controlled vs Uncontrolled Input 이해**
 
-자식 컴포넌트에서 발생한 이벤트가 부모로 어떻게 전달되는지 이해하고,
-클릭 이벤트와 함께 데이터를 넘기는 패턴을 직접 구현한다.
+폼 입력 상태를 React state로 직접 관리하는 방식(controlled)과
+DOM에서 직접 읽는 방식(uncontrolled)의 차이를 이해하고,
+각각 어느 상황에 적합한지 판단할 수 있게 된다.
 
-**2. 조건부 렌더링 이해**
+**2. children prop 패턴 이해**
 
-`&&` 연산자를 활용하여 특정 조건일 때만 컴포넌트를 렌더링하는 방식을 익힌다.
+`children`을 활용하여 재사용 가능한 Modal 컴포넌트를 설계하고,
+두 종류의 모달(`AddRestaurantModal`, `RestaurantDetailModal`)에 공통 구조를 적용한다.
 
-**3. 파생 상태(Derived State) 이해**
+**3. 폼 데이터 처리 및 state 업데이트 흐름 이해**
 
-모달 열림 여부처럼 기존 상태에서 계산 가능한 값은 별도 state로 선언하지 않고
-기존 state를 활용하는 방식을 이해한다.
+폼 제출 시 입력값을 수집하여 상위 컴포넌트의 state를 업데이트하고,
+목록에 새 항목이 추가되는 전체 흐름을 직접 구현한다.
 
 ---
 
 ## 📝 기능 구현 목록
 
-**1. 음식점 아이템 클릭 시 상세 모달 열기**
+**1. 헤더 추가 버튼 클릭 시 음식점 추가 모달 열기**
 
-- `clickedRestaurant` state를 App.jsx에 추가한다. (초기값: null)
-- `handleRestaurantClick(restaurant)` 핸들러를 정의하여 `RestaurantList`에 전달한다.
-- `RestaurantList`는 아이템 클릭 시 해당 restaurant 객체를 핸들러에 넘긴다.
-- `clickedRestaurant`가 null이 아닐 때만 `RestaurantDetailModal`을 렌더링한다.
+- 음식점 추가 모달 열림 여부를 boolean state로 관리한다.
+- 버튼 클릭 시 모달을 조건부 렌더링한다.
 
-**2. 모달 닫기**
+**2. 음식점 추가 폼 제출 시 목록에 추가**
 
-- `handleModalClose` 핸들러를 정의하여 `setClickedRestaurant(null)`로 모달을 닫는다.
-- 닫기 버튼과 backdrop 클릭 시 `onClose` props를 통해 핸들러를 호출한다.
+- 폼 입력값을 controlled input으로 관리한다.
+- 폼 제출 시 입력값을 상위 컴포넌트로 전달해 목록에 추가하고 모달을 닫는다.
 
-**3. 클릭한 음식점 정보 모달에 표시**
+**3. 모달 닫기**
 
-- `clickedRestaurant` 객체를 `RestaurantDetailModal`에 props로 전달한다.
-- 모달에서 `clickedRestaurant.name`, `clickedRestaurant.description`을 렌더링한다.
+- backdrop 클릭 또는 폼 제출 완료 시 모달을 닫는다.
+
+**[optional] 재사용 가능한 Modal 컴포넌트 구현**
+
+- 두 모달의 공통 구조를 `Modal` 컴포넌트로 추출한다.
+- 각 모달의 고유 내용은 `children`으로 전달한다.
 
 ---
 
 ## 📚 학습 내용
 
-### 1. 조건부 렌더링
+### 1. Controlled vs Uncontrolled Input
 
-특정 조건일 때만 컴포넌트를 렌더링할 때 `&&` 연산자를 사용한다.
+폼 입력값을 다루는 두 가지 방식이다.
 
-```jsx
-{clickedRestaurant && <RestaurantDetailModal restaurant={clickedRestaurant} />}
-```
+**Controlled** — 입력값을 React state로 관리한다. `value`로 state를 바인딩하고, `onChange`로 변화를 감지해 state를 업데이트한다. React가 값의 단일 출처(source of truth)가 된다.
 
-좌측 값이 falsy(null, undefined, false)이면 렌더링하지 않고, truthy이면 우측 컴포넌트를 렌더링한다.
+```jsx
+const [name, setName] = useState("");
 
-### 2. State 불변성과 리렌더링
+<input
+  value={name}
+  onChange={(e) => setName(e.target.value)}
+/>
+```
 
-React에서 state는 직접 수정하면 리렌더링이 트리거되지 않는다. 반드시 setter 함수를 통해야 React가 변화를 감지하고 화면을 다시 그린다.
+**Uncontrolled** — state 없이, 제출 시점에 DOM에서 값을 직접 읽는다. `e.target.elements` 또는 `FormData`를 활용한다.
 
 ```jsx
-// ❌ 직접 수정 — 리렌더링 안 됨
-clickedRestaurant = restaurant;
-
-// ✅ setter 사용 — 리렌더링 트리거
-setClickedRestaurant(restaurant);
+const handleSubmit = (e) => {
+  e.preventDefault();
+  const name = e.target.elements.name.value;
+};
 ```
 
-### 3. 파생 상태 (Derived State)
+| | Controlled | Uncontrolled |
+|---|---|---|
+| 값 관리 | React state | DOM |
+| 값 접근 시점 | 언제든지 | 제출 시 |
+| 실시간 유효성 검사 | 가능 | 어려움 |
+| 코드량 | 많음 | 적음 |
+
+이번 미션에서는 Controlled 방식을 사용했다.
 
-모달 열림 여부를 관리하기 위해 별도 boolean state(`isModalOpen`)를 선언하지 않아도 된다. `clickedRestaurant`가 null이면 닫힘, 객체면 열림 — 기존 state에서 의미를 도출할 수 있기 때문이다.
+### 2. 배열 state 업데이트
 
-### 4. 웹 접근성 (a11y) — 클릭 가능한 비버튼 요소
+배열 state에 항목을 추가할 때 `push`는 직접 변경이라 리렌더링이 트리거되지 않는다. 스프레드 연산자로 새 배열을 만들어야 한다.
 
-`<li>` 같은 비인터랙티브 요소에 `onClick`을 달면 마우스 사용자는 동작하지만, 키보드 사용자는 접근할 수 없다. 다음 세 가지를 함께 추가해야 한다.
+```jsx
+setNewRestaurants([...newRestaurants, newRestaurant]);
+```
+
+### 3. children prop
 
-- `role="button"`: 스크린 리더에게 이 요소가 버튼처럼 동작함을 알린다.
-- `tabIndex={0}`: Tab 키로 포커스를 받을 수 있게 한다.
-- `onKeyDown`: Enter 또는 Space 키 입력 시 onClick과 동일한 동작을 수행한다.
+컴포넌트 태그 사이에 넣은 JSX가 `children`이라는 특수 prop으로 전달된다.
 
 ```jsx
-<li
-  role="button"
-  tabIndex={0}
-  onClick={() => onRestaurantClick(restaurant)}
-  onKeyDown={(e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      onRestaurantClick(restaurant);
-    }
-  }}
->
+<Modal title="새로운 음식점" onClose={onClose}>
+  <form>...</form>   {/* 이게 children */}
+</Modal>
+
+function Modal({ title, onClose, children }) {
+  return (
+    <div>
+      <div onClick={onClose}></div>
+      <div>
+        <h2>{title}</h2>
+        {children}  {/* <form>...</form>이 여기에 렌더링됨 */}
+      </div>
+    </div>
+  );
+}
 ```
 
+공통 구조(껍데기)는 `Modal`이 담당하고, 각 모달은 고유한 내용만 children으로 전달하면 된다.
+
 ---
 
 ## 🤔 고민했던 문제와 해결 과정에서 배운 점
 
-### 1. 이벤트 핸들러 인자 전달
+### 1. e.preventDefault() 위치
 
-**고민했던 점**
+폼 submit 이벤트의 기본 동작(페이지 새로고침)을 막으려면 `e.preventDefault()`를 이벤트가 발생하는 곳에서 호출해야 한다. App의 `handleFormSubmit`이 받는 건 이벤트가 아니라 음식점 객체이기 때문에, `AddRestaurantModal` 내부의 `handleFormSubmit`에서 처리해야 한다.
 
-`handleRestaurantClick` 핸들러에서 인자를 선언하지 않아 `setClickedRestaurant`에 항상 null이 저장되는 문제가 발생했다.
+### 2. `<select>`의 controlled input 연결
 
-**해결 과정 및 배운 점**
+`value`와 `onChange`는 `<option>`이 아닌 `<select>`에 달아야 한다. `<option>`의 `value`는 해당 옵션이 선택됐을 때 `e.target.value`로 읽히는 값이고, `<select>`의 `value`가 현재 선택된 상태를 React state와 동기화한다.
 
-RestaurantList에서 `onClick={() => onRestaurantClick(restaurant)}`로 restaurant 객체를 인자로 넘기고, App의 핸들러에서 `(restaurant) => setClickedRestaurant(restaurant)` 형태로 받아야 한다는 것을 이해했다. 이벤트가 발생하는 곳에서 인자를 넘기고, 핸들러에서 매개변수로 받는 흐름을 체득했다.
+### 3. 어떤 state를 어느 컴포넌트가 소유해야 하는가
 
-```jsx
-// RestaurantList — 클릭 시 restaurant 객체를 넘김
-onClick={() => onRestaurantClick(restaurant)}
+"이 state를 누가 필요로 하는가"를 기준으로 가장 가까운 공통 부모가 소유해야 한다. 스터디를 통해 이 기준을 정립하게 됐다.
 
-// App.jsx — 넘겨받은 객체를 state에 저장
-const handleRestaurantClick = (restaurant) => {
-  setClickedRestaurant(restaurant);
-};
-```
+- `newRestaurants`, `isAddModalOpen` — App 전체가 필요로 하므로 App 소유
+- 폼 입력값(`category`, `name`, `description`) — `AddRestaurantModal`만 사용하므로 해당 컴포넌트 소유
+- `id` — 데이터의 고유 식별자로 App의 관심사이므로 App에서 생성
 
 ## 🛠 리팩토링
 
-**1. 클릭 가능한 `<li>`에 웹 접근성 속성 추가**
+**1. 재사용 가능한 Modal 컴포넌트 추출**
 
-`<li>`에 `onClick`만 달면 키보드 사용자는 접근할 수 없다. 과거 코드 리뷰에서 받은 피드백을 반영하여 `role="button"`, `tabIndex={0}`, `onKeyDown`을 추가했다.
+`AddRestaurantModal`과 `RestaurantDetailModal`이 backdrop, container, title 구조를 중복으로 갖고 있었다. 공통 구조를 `Modal` 컴포넌트로 분리하고, 각 모달은 `children`으로 고유 내용만 넘기도록 리팩토링했다.
 
----
+**2. 배열 state 업데이트를 함수형 업데이트로 변경**
+
+`[...newRestaurants, newRestaurant]`에서 `(prev) => [...prev, newRestaurant]`로 변경했다. 이전 state에 의존하는 업데이트는 함수형 업데이트가 더 안전하다.
+
+**3. id 생성을 `crypto.randomUUID()`로 변경**
+
+`Date.now()` 대신 `crypto.randomUUID()`를 사용하도록 변경했다. 밀리초 단위 충돌 가능성을 제거하고 고유성을 보장한다.
+
+**4. 이벤트 핸들러 네이밍 규칙 통일 + id 생성 위치 이동**
+
+핸들러는 `handle + [대상] + [동작]`, props는 `on + [대상] + [동작]` 패턴으로 통일했다. on-/handle- 대칭이 맞지 않던 세 곳을 수정했다.
+
+| 이전 | 이후 |
+|------|------|
+| `onSubmit` | `onFormSubmit` |
+| `onChangeCategory` | `onCategoryChange` |
+| `onClick` (Header) | `onAddModalOpen` |
+
+id 생성도 `AddRestaurantModal`에서 App으로 이동했다. 폼은 입력값만 올려보내고, 데이터 식별자 생성은 state를 소유한 App의 관심사이기 때문이다.
+
+**5. Modal 래퍼 `<div>` → Fragment, CSS 토글 패턴 제거**
+
+템플릿(순수 HTML/CSS)에서 `.modal--open` 클래스를 붙이고 떼는 방식으로 모달을 보이고 숨겼는데, React 조건부 렌더링으로 전환하면서 CSS 토글이 불필요해졌다. 래퍼 `<div>`도 Fragment로 교체했다. backdrop과 container가 모두 `position: fixed`라 부모 요소의 레이아웃에 영향을 받지 않기 때문에 래퍼가 없어도 동작이 동일하다.
 
 ## 과거 코드와 비교
 
 ### 달라진 점
 
-**1. State 통합 — boolean 분리 → 단일 객체 state**
+**1. 폼 입력값 읽기 방식 — Uncontrolled → Controlled**
 
 | 구분 | 과거 코드 | 현재 코드 |
 |------|---------|---------|
-| 모달 상태 관리 | `selected` + `isModalOpen` 2개 | `clickedRestaurant` 1개 |
-
-과거엔 `selected`(선택된 음식점)와 `isModalOpen`(열림 여부)를 따로 관리했다. 두 상태는 항상 함께 변하기 때문에 불필요한 중복이 생긴다. 현재는 `clickedRestaurant`가 null이면 닫힘, 객체면 열림으로 하나의 state에서 두 의미를 모두 표현했다.
+| 방식 | Uncontrolled (`FormData`) | Controlled (`useState`) |
+| 값 접근 | 제출 시 DOM에서 읽음 | state로 실시간 관리 |
+| 코드량 | 적음 | 많음 |
 
-### 과거 코드에서 배운 점
+과거 코드는 state 없이 폼 제출 시 `FormData`로 DOM에서 한 번에 읽었다. 각 input에 `name` 속성이 있으면 키-값 쌍으로 꺼낼 수 있어 코드가 간결하다.
 
-**1. 파생 상태는 state로 선언하지 않는다**
+```jsx
+// 과거 — Uncontrolled
+const fd = new FormData(e.currentTarget);
+onAdd({ category: fd.get("category"), name: fd.get("name") });
 
-리뷰어 피드백: *"두 상태가 서로 의존적인 관계인데 분리해서 관리할 경우 일관성이 깨질 수 있습니다. 불필요한 상태는 제거해 하나의 상태로 관리해보는 건 어떨까요?"*
+// 현재 — Controlled
+const [name, setName] = useState("");
+<input value={name} onChange={(e) => setName(e.target.value)} />
+```
 
-다른 state에서 계산 가능한 값을 별도 state로 선언하면 두 상태가 불일치할 위험이 생긴다. 기존 state만으로 표현 가능하다면 파생 상태로 처리하는 것이 더 안전하다.
+### 과거 코드에서 배운 점
 
-**2. 웹 접근성 — 클릭 가능한 `<li>`**
+**1. 함수형 업데이트**
 
-리뷰어 피드백: *"`<li>`에 onClick 이벤트를 사용할 경우 role, tabIndex, onKeyDown을 추가해 키보드 사용자도 접근할 수 있도록 해야 합니다."*
+리뷰어 코드에서 배열 state 업데이트 시 함수형 업데이트를 사용했다.
 
 ```jsx
-<li
-  role="button"
-  tabIndex={0}
-  onClick={() => onRestaurantClick(restaurant)}
-  onKeyDown={(e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      onRestaurantClick(restaurant);
-    }
-  }}
->
+// 기존 코드 — newRestaurants를 직접 참조
+setNewRestaurants([...newRestaurants, newRestaurant]);
+
+// 함수형 업데이트 — React가 최신 state를 prev로 전달
+setNewRestaurants((prev) => [...prev, newRestaurant]);
 ```
 
-마우스 없이 Tab + Enter로도 동작하도록 보장하는 것이 웹 접근성의 기본이다.
+React의 state 업데이트는 즉시 반영되지 않아 렌더링 사이클 사이에 `newRestaurants`가 오래된 값일 수 있다. `prev`는 React가 보장하는 최신 state이므로, 이전 state를 기반으로 새 state를 만들 때는 함수형 업데이트가 더 안전하다.
+
+`prev`는 관례적인 이름일 뿐이며, 각 setter에 묶인 해당 state의 최신값이 전달된다. state가 여러 개여도 setter가 다르므로 섞이지 않는다.
+
+**2. `crypto.randomUUID()`**
+
+리뷰어 피드백: *"아주 짧은 시간 안에 여러 항목이 추가될 경우 `Date.now()`는 중복된 id가 생성될 가능성이 있습니다. `crypto.randomUUID()`를 고려해보세요."*
+
+`Date.now()`는 밀리초 단위 숫자라 짧은 시간 안에 두 번 호출되면 같은 값이 나올 수 있다. `crypto.randomUUID()`는 브라우저 내장 함수로 `"550e8400-e29b-41d4-a716-446655440000"` 형태의 충돌 없는 고유 ID를 생성한다.
diff --git a/src/App.jsx b/src/App.jsx
index f707746..2221d48 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import "./App.css";
-import { restaurants } from "./constants/restaurants";
+import { RESTAURANTS } from "./constants/restaurants";
 import Header from "./components/Header/Header";
 import CategoryFilter from "./components/CategoryFilter/CategoryFilter";
 import RestaurantList from "./components/RestaurantList/RestaurantList";
@@ -10,13 +10,23 @@ import AddRestaurantModal from "./components/Modal/AddRestaurantModal";
 function App() {
   const [category, setCategory] = useState("전체");
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const [newRestaurants, setNewRestaurants] = useState(RESTAURANTS);
+
+  const handleFormSubmit = (newRestaurant) => {
+    setNewRestaurants((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), ...newRestaurant },
+    ]);
+    setIsAddModalOpen(false);
+  };
 
   const filteredRestaurants =
     category === "전체"
-      ? restaurants
-      : restaurants.filter((restaurant) => restaurant.category === category);
+      ? newRestaurants
+      : newRestaurants.filter((restaurant) => restaurant.category === category);
 
-  const handleSelectChange = (e) => {
+  const handleCategoryChange = (e) => {
     setCategory(e.target.value);
   };
 
@@ -24,17 +34,25 @@ function App() {
     setClickedRestaurant(restaurant);
   };
 
-  const handleModalClose = () => {
+  const handleDetailModalClose = () => {
     setClickedRestaurant(null);
   };
 
+  const handleAddModalOpen = () => {
+    setIsAddModalOpen(true);
+  };
+
+  const handleAddModalClose = () => {
+    setIsAddModalOpen(false);
+  };
+
   return (
     <>
-      <Header />
+      <Header onAddModalOpen={handleAddModalOpen} />
       <main>
         <CategoryFilter
           category={category}
-          onChangeCategory={handleSelectChange}
+          onCategoryChange={handleCategoryChange}
         />
         <RestaurantList
           restaurants={filteredRestaurants}
@@ -45,10 +63,15 @@ function App() {
         {clickedRestaurant && (
           <RestaurantDetailModal
             clickedRestaurant={clickedRestaurant}
-            onClose={handleModalClose}
+            onClose={handleDetailModalClose}
+          />
+        )}
+        {isAddModalOpen && (
+          <AddRestaurantModal
+            onFormSubmit={handleFormSubmit}
+            onClose={handleAddModalClose}
           />
         )}
-        <AddRestaurantModal />
       </aside>
     </>
   );
diff --git a/src/components/CategoryFilter/CategoryFilter.jsx b/src/components/CategoryFilter/CategoryFilter.jsx
index 651dbd2..1be5742 100644
--- a/src/components/CategoryFilter/CategoryFilter.jsx
+++ b/src/components/CategoryFilter/CategoryFilter.jsx
@@ -1,7 +1,7 @@
 import styles from "./CategoryFilter.module.css";
 import { FILTER_OPTIONS } from "../../constants/categories";
 
-export default function CategoryFilter({ category, onChangeCategory }) {
+export default function CategoryFilter({ category, onCategoryChange }) {
   return (
     <section className={styles["restaurant-filter__container"]}>
       <select
@@ -10,7 +10,7 @@ export default function CategoryFilter({ category, onChangeCategory }) {
         className={styles["restaurant-filter"]}
         aria-label="음식점 카테고리 필터"
         value={category}
-        onChange={onChangeCategory}
+        onChange={onCategoryChange}
       >
         {FILTER_OPTIONS.map((option) => (
           <option key={option} value={option}>{option}</option>
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index a1876df..6a05ff9 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,7 +1,7 @@
 import styles from "./Header.module.css";
 import addButtonImg from "../../assets/add-button.png";
 
-export default function Header() {
+export default function Header({ onAddModalOpen }) {
   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={onAddModalOpen}
       >
         <img src={addButtonImg} alt="음식점 추가" />
       </button>
diff --git a/src/components/Modal/AddRestaurantModal.jsx b/src/components/Modal/AddRestaurantModal.jsx
index 36d11f5..1478295 100644
--- a/src/components/Modal/AddRestaurantModal.jsx
+++ b/src/components/Modal/AddRestaurantModal.jsx
@@ -1,62 +1,94 @@
 import modalStyles from "./Modal.module.css";
 import formStyles from "./AddRestaurantModal.module.css";
 import { CATEGORIES } from "../../constants/categories";
+import { useState } from "react";
+import Modal from "./Modal";
+
+export default function AddRestaurantModal({ onFormSubmit, onClose }) {
+  const [category, setCategory] = useState("");
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    onFormSubmit({ category, name, description });
+  };
 
-export default function AddRestaurantModal() {
   return (
-    <div className={modalStyles.modal}>
-      <div className={modalStyles.modal__backdrop}></div>
-      <div className={modalStyles.modal__container}>
-        <h2 className={`${modalStyles.modal__title} text-title`}>새로운 음식점</h2>
-        <form>
-          {/* 카테고리 */}
-          <div
-            className={`${formStyles["form-item"]} ${formStyles["form-item--required"]}`}
+    <Modal title="새로운 음식점" onClose={onClose}>
+      <form onSubmit={handleFormSubmit}>
+        {/* 카테고리 */}
+        <div
+          className={`${formStyles["form-item"]} ${formStyles["form-item--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((category) => (
+              <option key={category} value={category}>
+                {category}
+              </option>
+            ))}
+          </select>
+        </div>
+        {/* 음식점 이름 */}
+        <div
+          className={`${formStyles["form-item"]} ${formStyles["form-item--required"]}`}
+        >
+          <label htmlFor="name" className="text-caption">
+            이름
+          </label>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            required
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value);
+            }}
+          />
+        </div>
+        {/* 설명 */}
+        <div className={formStyles["form-item"]}>
+          <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={`${formStyles["form-item__help-text"]} text-caption`}
           >
-            <label htmlFor="category" className="text-caption">
-              카테고리
-            </label>
-            <select name="category" id="category" required>
-              <option value="">선택해 주세요</option>
-              {CATEGORIES.map((category) => (
-                <option key={category} value={category}>{category}</option>
-              ))}
-            </select>
-          </div>
-          {/* 음식점 이름 */}
-          <div
-            className={`${formStyles["form-item"]} ${formStyles["form-item--required"]}`}
+            메뉴 등 추가 정보를 입력해 주세요.
+          </span>
+        </div>
+        {/* 추가 버튼 */}
+        <div className={modalStyles["modal__button-container"]}>
+          <button
+            className={`${modalStyles.button} ${modalStyles["button--primary"]} text-caption`}
           >
-            <label htmlFor="name" className="text-caption">
-              이름
-            </label>
-            <input type="text" name="name" id="name" required />
-          </div>
-          {/* 설명 */}
-          <div className={formStyles["form-item"]}>
-            <label htmlFor="description" className="text-caption">
-              설명
-            </label>
-            <textarea
-              name="description"
-              id="description"
-              cols="30"
-              rows="5"
-            ></textarea>
-            <span className={`${formStyles["form-item__help-text"]} text-caption`}>
-              메뉴 등 추가 정보를 입력해 주세요.
-            </span>
-          </div>
-          {/* 추가 버튼 */}
-          <div className={modalStyles["modal__button-container"]}>
-            <button
-              className={`${modalStyles.button} ${modalStyles["button--primary"]} text-caption`}
-            >
-              추가하기
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+            추가하기
+          </button>
+        </div>
+      </form>
+    </Modal>
   );
 }
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
new file mode 100644
index 0000000..456873b
--- /dev/null
+++ b/src/components/Modal/Modal.jsx
@@ -0,0 +1,13 @@
+import modalStyles from "./Modal.module.css";
+
+export default function Modal({ title, onClose, children }) {
+  return (
+    <>
+      <div className={modalStyles.modal__backdrop} onClick={onClose}></div>
+      <div className={modalStyles.modal__container}>
+        <h2 className={`${modalStyles.modal__title} text-title`}>{title}</h2>
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Modal/RestaurantDetailModal.jsx b/src/components/Modal/RestaurantDetailModal.jsx
index 51ed8d5..fcc38a3 100644
--- a/src/components/Modal/RestaurantDetailModal.jsx
+++ b/src/components/Modal/RestaurantDetailModal.jsx
@@ -1,26 +1,21 @@
 import styles from "./Modal.module.css";
+import Modal from "./Modal";
 
 export default function RestaurantDetailModal({ clickedRestaurant, 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`}>
-          {clickedRestaurant.name}
-        </h2>
-        <div className={styles["modal__restaurant-info"]}>
-          <p className="text-body">{clickedRestaurant.description}</p>
-        </div>
-        {/* 닫기 버튼 */}
-        <div className={styles["modal__button-container"]}>
-          <button
-            className={`${styles.button} ${styles["button--primary"]} text-caption`}
-            onClick={onClose}
-          >
-            닫기
-          </button>
-        </div>
+    <Modal title={clickedRestaurant.name} onClose={onClose}>
+      <div className={styles["modal__restaurant-info"]}>
+        <p className="text-body">{clickedRestaurant.description}</p>
       </div>
-    </div>
+      {/* 닫기 버튼 */}
+      <div className={styles["modal__button-container"]}>
+        <button
+          className={`${styles.button} ${styles["button--primary"]} text-caption`}
+          onClick={onClose}
+        >
+          닫기
+        </button>
+      </div>
+    </Modal>
   );
 }
diff --git a/src/components/RestaurantList/RestaurantList.jsx b/src/components/RestaurantList/RestaurantList.jsx
index 30292c2..45ae6c8 100644
--- a/src/components/RestaurantList/RestaurantList.jsx
+++ b/src/components/RestaurantList/RestaurantList.jsx
@@ -1,38 +1,32 @@
 import styles from "./RestaurantList.module.css";
-import { categoryImages } from "../../constants/categoryImages";
+import { CATEGORY_IMAGES } from "../../constants/categoryImages";
 
 export default function RestaurantList({ restaurants, onRestaurantClick }) {
   return (
     <section className={styles["restaurant-list__container"]}>
       <ul className={styles["restaurant-list"]}>
         {restaurants.map((restaurant) => (
-          <li
-            className={styles.restaurant}
-            key={restaurant.id}
-            role="button"
-            tabIndex={0}
-            onClick={() => onRestaurantClick(restaurant)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                onRestaurantClick(restaurant);
-              }
-            }}
-          >
-            <div className={styles.restaurant__category}>
-              <img
-                src={categoryImages[restaurant.category]}
-                alt={restaurant.category}
-                className={styles["restaurant__category-icon"]}
-              />
-            </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 className={styles.restaurant} key={restaurant.id}>
+            <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__category-icon"]}
+                />
+              </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>
         ))}
       </ul>
diff --git a/src/components/RestaurantList/RestaurantList.module.css b/src/components/RestaurantList/RestaurantList.module.css
index ffa6c7f..1d91c5d 100644
--- a/src/components/RestaurantList/RestaurantList.module.css
+++ b/src/components/RestaurantList/RestaurantList.module.css
@@ -7,14 +7,24 @@
 }
 
 .restaurant {
-  display: flex;
-  align-items: flex-start;
-
   padding: 16px 8px;
 
   border-bottom: 1px solid #e9eaed;
 }
 
+.restaurant__button {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+
 .restaurant__category {
   display: flex;
   justify-content: center;
diff --git a/src/constants/categoryImages.js b/src/constants/categoryImages.js
index dd6d29e..daba5dd 100644
--- a/src/constants/categoryImages.js
+++ b/src/constants/categoryImages.js
@@ -5,7 +5,7 @@ import westernImg from "../assets/category-western.png";
 import asianImg from "../assets/category-asian.png";
 import etcImg from "../assets/category-etc.png";
 
-export const categoryImages = {
+export const CATEGORY_IMAGES = {
   한식: koreanImg,
   중식: chineseImg,
   일식: japaneseImg,
diff --git a/src/constants/restaurants.js b/src/constants/restaurants.js
index 30fe97e..7fc92cf 100644
--- a/src/constants/restaurants.js
+++ b/src/constants/restaurants.js
@@ -1,4 +1,4 @@
-export const restaurants = [
+export const RESTAURANTS = [
   {
     id: "a01",
     name: "피양콩할마니",