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/05-effects/README.md b/05-effects/README.md
new file mode 100644
index 0000000..3c445ae
--- /dev/null
+++ b/05-effects/README.md
@@ -0,0 +1,49 @@
+# 05. API 연동하기: side-effect(feat. effects)
+
+## 🎯 요구 사항
+- API로 레스토랑 목록을 불러와 `<RestaurantList />`에 내려줍니다.
+  - 로딩 상태, 에러 상태 등은 고려하지 않습니다.
+- 레스토랑 추가 모달에서 추가하기 버튼을 클릭하면 POST 요청을 보냅니다. 모달이 닫히고, 레스토랑 목록을 다시 불러옵니다. 
+
+## ✅ 키워드
+- effect (feat. side effect)
+  - useEffect
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행 시간: 2시간 내에 완료하는 것을 목표로 합니다. 
+
+### `json-server`로 가짜 서버 띄워 활용하기     
+연습용 앱이기 때문에 [`json-server`](https://github.com/typicode/json-server)를 활용해 간단한 가짜 REST API를 구축해 사용합니다.         
+- `npm run server`를 실행합니다. (혹은 `npx json-server db.json` 를 직접 실행해도 상관없습니다)
+- `GET http://localhost:3000/restaurants`으로 `db.json`에 있는 레스토랑 목록을 불러올 수 있습니다.
+```javascript
+// GET 예시
+const response = await fetch("http://localhost:3000/restaurants");
+
+// POST 예시
+const response = await fetch("http://localhost:3000/restaurants", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: JSON.stringify(restaurant),
+});
+```     
+
+## 🔗 참고 문서
+- [Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects)
+> Effects let you specify side effects that are caused by rendering itself, rather than by a particular event.     
+  - [API Reference: useEffect](https://react.dev/reference/react/useEffect)
+  > useEffect is a React Hook that lets you synchronize a component with an external system. 
+- [API Reference: useSate > updater function](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state) 
+  > `set` function에 함수를 넘겨주면 `updater function`으로 동작합니다. 함수가 아닌 값을 넘겨줄 때와 어떻게 다른지 알아보세요.  
+
+구현을 다 해본 뒤에 Introduction에서 살펴보았던 설계 원칙과 관련해 조금 더 학습해보고 싶다면 아래 문서들도 추가로 확인해 보세요.
+- [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
+> You do need Effects to synchronize with external systems.  
+> In React, data flows from the parent components to their children. 
+- [Components and Hooks must be pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure)
+> Purity in Components and Hooks is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code.
+> Side effects should not run in render, as React can render components multiple times to create the best possible user experience.
+> One important principle in React is local reasoning: the ability to understand what a component or hook does by looking at its code in isolation. Hooks should be treated like “black boxes” when they are called.
\ No newline at end of file
diff --git a/README.md b/README.md
index e206bd7..e9671f0 100644
--- a/README.md
+++ b/README.md
@@ -1,181 +1,387 @@
-# 재사용 가능한 컴포넌트 설계
+# API 요청과 비동기 처리
 
 ## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드
 
 이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다.
 
-1. controlled 컴포넌트와 uncontrolled 컴포넌트의 차이를 이해하고, 각각 어떤 상황에서 선택하는지 기준을 세운다.
-2. 어떤 state를 어느 컴포넌트가 소유해야 하는지 판단하고, 필요한 경우 공통 부모로 끌어올리는 패턴(Lifting State Up)을 경험한다.
-3. `children` props를 활용해 재사용 가능한 Modal 컴포넌트를 설계하는 방법을 익힌다.
+1. side effect가 무엇인지 이해하고, `useEffect`가 왜 필요한지 설명할 수 있다.
+2. Promise가 무엇인지 이해하고, async/await가 Promise를 어떻게 다루는지 설명할 수 있다.
+3. `fetch`로 GET/POST 요청을 보내고 응답을 처리하는 방법을 익히고, `await`를 어디에 붙여야 하는지 스스로 판단할 수 있다.
 
 ---
 
 ## 📝 기능 구현 목록
 
-- [x] Header의 음식점 추가 버튼 클릭 시 AddRestaurantModal 열기
-- [x] 추가하기 버튼 클릭 시 음식점 목록에 항목 추가
-- [x] 재사용 가능한 Modal 컴포넌트로 AddRestaurantModal, RestaurantDetailModal 개선
+- [x] API로 음식점 목록을 불러와 RestaurantList에 렌더링
+- [x] 음식점 추가 시 POST 요청 후 목록 재조회
 
 ---
 
 ## 📚 학습 내용
 
-### Controlled vs Uncontrolled Component
+### useEffect와 side effect
 
-컴포넌트의 중요한 정보가 **props**에 의해 결정되면 controlled, **지역 state**로 자체 관리되면 uncontrolled이다.
+React 컴포넌트는 렌더링 중에 외부 시스템(서버, 타이머, DOM 직접 조작 등)에 영향을 주면 안 된다. 이런 작업을 side effect라고 하고, `useEffect`는 렌더링이 끝난 뒤 이를 안전하게 실행하는 공간이다.
 
-| | Controlled | Uncontrolled |
-|---|---|---|
-| 정보 출처 | props (부모가 제공) | 지역 state (자체 관리) |
-| 부모의 영향 | 동작을 완전히 지정 가능 | 영향을 줄 수 없음 |
-| 유연성 | 여러 컴포넌트와 조정 용이 | 독립적이지만 협력 어려움 |
-| 사용 난이도 | 부모에서 props 설정 필요 | 설정이 적어 사용하기 쉬움 |
-
-**언제 선택하나?**
-- **Controlled** — 부모 컴포넌트와 state를 공유하거나, 여러 컴포넌트의 동작을 함께 조정해야 할 때
-- **Uncontrolled** — 부모와 상태를 공유할 필요 없이 독립적으로 동작해도 될 때
+```jsx
+useEffect(() => {
+  // 렌더링 이후 실행 — 서버 요청, 구독, DOM 조작 등
+}, []);
+```
 
-**이 미션에서의 선택:**
+의존성 배열 `[]`를 넘기면 컴포넌트가 처음 마운트될 때 한 번만 실행된다. 배열을 아예 생략하면 매 렌더링마다 실행되어 무한 루프가 생길 수 있다.
 
-controlled/uncontrolled는 컴포넌트 전체에 붙이는 레이블이 아니라, 어떤 정보가 어디서 관리되는지를 기준으로 판단한다. AddRestaurantModal은 두 가지가 혼재한다.
+### useEffect 안에서 async/await 쓰는 법
 
-- **폼 데이터** (category, name, description) → 지역 state로 자체 관리 → **uncontrolled**
-- **모달 열림/닫힘** → App이 소유 → **controlled**
+`useEffect`의 콜백은 직접 `async`로 만들 수 없다. `async` 함수는 항상 Promise를 반환하는데, React는 `useEffect` 콜백의 반환값을 cleanup 함수로 기대하기 때문이다.
 
-모달 열림 상태를 App이 소유하는 이유는 트리거(Header의 추가 버튼)와 모달이 형제 관계이기 때문이다. 형제끼리는 서로의 state에 접근할 수 없으므로 공통 부모인 App으로 state를 끌어올렸다(Lifting State Up).
+```jsx
+// ❌ 이렇게 하면 안 됨 — async 콜백이 Promise를 반환해서 React가 경고
+useEffect(async () => {
+  const data = await getRestaurants();
+  setRestaurants(data);
+}, []);
+
+// ✅ 내부에서 async 함수를 정의하고 호출
+useEffect(() => {
+  const fetchRestaurants = async () => {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  };
+  fetchRestaurants();
+}, []);
+```
 
-`onSubmit`, `onClose`는 state가 아닌 콜백이다. "어떤 값을 누가 소유하냐"의 문제가 아니라 이벤트를 부모로 전달하는 통로이므로 controlled/uncontrolled 구분과는 별개다.
+### async/await를 어디에 붙여야 하는가
 
-### form submit 기본 동작과 e.preventDefault()
+`await`는 Promise를 반환하는 함수 앞에 붙인다. `await`를 쓰는 함수 자신은 반드시 `async`여야 한다. 이 규칙이 호출 체인을 따라 전파된다.
 
-`<form onSubmit={handler}>`에서 submit 이벤트가 발생하면 브라우저는 기본적으로 페이지를 새로고침한다. React SPA에서는 이 기본 동작을 막아야 state 업데이트가 유지된다.
+```
+fetch()                    → Promise 반환
+getRestaurants()           → 내부에서 await fetch() → async 필요
+handleRestaurantSubmit()   → 내부에서 await getRestaurants() → async 필요
+```
 
-리팩토링 후 `e.preventDefault()`는 폼을 소유한 AddRestaurantModal 내부에 있다. 완성된 데이터만 `onSubmit`을 통해 App으로 전달한다.
+실수하기 쉬운 패턴: `async` 함수를 호출할 때 `await`를 빠뜨리면 Promise가 풀리기 전에 다음 줄이 실행된다.
 
 ```jsx
-// AddRestaurantModal.jsx
-function handleFormSubmit(e) {
-  e.preventDefault(); // 없으면 setRestaurants 실행 직후 페이지 리로드로 state 초기화
-  onSubmit({ category, name, description });
+// ❌ await 누락 — POST가 완료되기 전에 GET 실행, 새 항목이 목록에 없을 수 있음
+async function handleRestaurantSubmit(restaurant) {
+  addRestaurant(restaurant);  // await 없음
+  const data = await getRestaurants();
+  setRestaurants(data);
 }
 
-// App.jsx — 이벤트 객체가 아닌 데이터 객체를 받음
-function handleRestaurantSubmit({ category, name, description }) {
-  setRestaurants([...restaurants, { id: Date.now(), category, name, description }]);
+// ✅ POST 완료를 기다린 뒤 GET
+async function handleRestaurantSubmit(restaurant) {
+  await addRestaurant(restaurant);
+  const data = await getRestaurants();
+  setRestaurants(data);
 }
 ```
 
-### 폼 state를 부모로 끌어올리기 (Lifting State Up)
+### api.js 파일 위치
 
-초기 구현에서는 `restaurants` state가 `App`에 있어서 폼 state도 `App`으로 끌어올려 props로 전달했다. 그러나 App이 실제로 필요한 것은 추가 완료 시점의 최종 데이터뿐이므로, 리팩토링을 통해 폼 state를 `AddRestaurantModal` 안으로 내리고 완성된 데이터만 부모로 전달하도록 변경했다. (자세한 내용은 리팩토링 섹션 참고)
+현재 `src/api.js`에 두었다. 프로젝트 규모에 따라 관례가 다르다.
 
-### 추가 후 상태 초기화
+| 규모 | 구조 | 예시 |
+|---|---|---|
+| 소규모 | 단일 파일 | `src/api.js` |
+| 중규모 | 도메인별 분리 | `src/api/restaurants.js`, `src/api/users.js` |
+| 대규모 | services 레이어 | `src/services/restaurantService.js` |
+
+`api/`와 `services/`의 차이는 뉘앙스 차이다. `api/`는 서버와의 통신 함수 모음이라는 의미가 강하고, `services/`는 비즈니스 로직까지 포함할 수 있다는 의미로 쓰이기도 한다. 팀마다 다르므로 프로젝트 컨벤션을 따르면 된다. 현재 프로젝트처럼 API 함수가 몇 개 없을 때는 `src/api.js` 하나로 충분하다.
+
+---
 
-음식점을 추가한 뒤 폼 입력값을 초기화하지 않으면 모달을 다시 열었을 때 이전 값이 남아있다.
+## 🤔 고민했던 문제와 해결 과정에서 배운 점
+
+### async 함수를 정의만 하고 호출하지 않은 문제
 
-초기 구현에서는 폼 state가 App에 있었기 때문에 추가 완료 시점에 명시적으로 초기화했다.
+`useEffect` 안에서 async 함수를 정의했지만 호출하지 않아 API 요청이 실행되지 않았다. 같은 실수를 두 번 했다.
 
 ```jsx
-setIsAddRestaurantModalOpen(false);
-setCategory("");
-setName("");
-setDescription("");
+// ❌ 정의만 하고 호출하지 않음 — 아무 일도 일어나지 않음
+useEffect(() => {
+  async () => {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  };
+}, []);
+
+// ✅ 정의 후 호출
+useEffect(() => {
+  const fetchRestaurants = async () => {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  };
+  fetchRestaurants();  // 호출
+}, []);
 ```
 
-리팩토링 후에는 폼 state를 AddRestaurantModal 내부로 내렸기 때문에 명시적 초기화가 불필요해졌다. `isAddRestaurantModalOpen`이 `false`가 되면 AddRestaurantModal이 언마운트되고, 다시 열릴 때 새로 마운트되면서 `useState("")`의 초기값으로 자동 초기화된다.
+### 커스텀 훅 분리 — `useRestaurants`
 
----
+`App`이 렌더링 구조와 UI 상태를 다루는 컴포넌트인데, 서버 통신과 데이터 관리 로직까지 함께 들어있어 역할이 섞여 있었다. `restaurants` state, `useEffect`, fetch 로직을 커스텀 훅으로 추출했다.
 
-## 🤔 고민했던 문제와 해결 과정에서 배운 점
+### `fetchRestaurants`를 `useCallback`으로 추출
 
-### 어떤 state를 어느 컴포넌트가 소유해야 하는가
+`fetchRestaurants`가 `useEffect` 내부에 정의되어 있어 `addRestaurant`에서 같은 로직을 중복으로 작성해야 했다. 함수를 훅 스코프로 꺼내 재사용하려면 `useCallback`이 필요하다.
 
-음식점 추가 기능을 구현하면서 다음 state들이 필요하다고 생각했다.
+`useCallback` 없이 일반 함수로 선언하면 렌더링마다 새 함수 참조가 생성되어 `useEffect([fetchRestaurants])`가 매 렌더링마다 실행되는 무한 루프가 발생한다. `useCallback`의 빈 의존성 배열 `[]`이 참조를 고정해 이를 방지한다.
 
-- `restaurants` — 음식점 목록
-- `category`, `name`, `description` — 폼 입력값
-- `isAddRestaurantModalOpen` - 모달 열림/닫힘
+```js
+// Before: fetchRestaurants가 useEffect 안에 갇혀 있어 addRestaurant에서 로직을 중복 작성
+export function useRestaurants() {
+  const [restaurants, setRestaurants] = useState([]);
 
-이 state들을 어느 컴포넌트에 선언할지 결정하기 위해 "이 state를 누가 필요로 하는가"를 기준으로 판단했다.
+  useEffect(() => {
+    const fetchRestaurants = async () => {
+      const data = await getRestaurants();
+      setRestaurants(data);
+    };
+    fetchRestaurants();
+  }, []);
 
-`restaurants`는 AddRestaurantModal(추가 시 갱신)과 RestaurantList(목록 렌더링) 모두 필요하다. 두 컴포넌트는 형제 관계라 서로의 state에 직접 접근할 수 없으므로, 공통 부모인 App으로 끌어올렸다(Lifting State Up).
+  async function addRestaurant(restaurant) {
+    await createRestaurant(restaurant);
+    const data = await getRestaurants(); // 중복
+    setRestaurants(data);               // 중복
+  }
 
-`category`, `name`, `description`은 폼을 입력하는 동안 AddRestaurantModal 안에서만 쓰인다. 추가 완료 시점에 최종 데이터만 부모로 전달하면 되므로, 굳이 App까지 올릴 필요가 없다. AddRestaurantModal이 직접 소유한다.
+  return { restaurants, addRestaurant };
+}
+
+// After: useCallback으로 추출해 재사용, 의존성 배열도 명시적으로 선언
+export function useRestaurants() {
+  const [restaurants, setRestaurants] = useState([]);
 
-`isAddRestaurantModalOpen`도 같은 기준으로 판단했다. 모달을 여는 트리거는 Header의 추가 버튼이고, 실제로 열리는 것은 AddRestaurantModal이다. 두 컴포넌트는 형제 관계라 서로의 state에 접근할 수 없으므로 공통 부모인 App이 소유해야 한다.
+  const fetchRestaurants = useCallback(async () => {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  }, []);
 
-### 식당을 추가해도 목록이 업데이트되지 않는 문제
+  useEffect(() => {
+    void fetchRestaurants();
+  }, [fetchRestaurants]);
 
-`handleSubmit`에서 `setRestaurants`가 호출되는데도 목록이 바뀌지 않아서 원인을 찾아봤다. `e.preventDefault()`가 없어서 submit 시 페이지가 새로고침되고, state 업데이트가 반영되기 전에 초기 상태로 되돌아가는 것이었다. state 업데이트 자체는 올바르게 작성되어 있었지만 브라우저 기본 동작을 막지 않아서 생긴 문제였다.
+  async function addRestaurant(restaurant) {
+    await createRestaurant(restaurant);
+    await fetchRestaurants(); // 재사용
+  }
 
-### setRestaurants 인자 오류
+  return { restaurants, addRestaurant };
+}
+```
 
-처음에 `setRestaurants(...restaurants, { ... })`로 작성했다. 이렇게 하면 배열이 아닌 여러 인자를 `setRestaurants`에 넘기는 것이라 새 배열이 만들어지지 않는다. 배열 리터럴 안에서 스프레드해야 한다.
+App에서는 서버 통신 로직이 모두 사라지고, 모달 열림/닫힘 같은 UI 상태만 남았다.
 
 ```jsx
-// ❌ 인자를 여러 개 전달하는 것
-setRestaurants(...restaurants, { id: Date.now(), ... });
+// Before: App이 서버 통신까지 담당
+const [restaurants, setRestaurants] = useState([]);
+useEffect(() => { /* fetch 로직 */ }, []);
+async function handleRestaurantSubmit(...) {
+  await postRestaurant(...);
+  const data = await getRestaurants();
+  setRestaurants(data);
+}
 
-// ✅ 기존 항목을 펼쳐서 새 배열 생성
-setRestaurants([...restaurants, { id: Date.now(), ... }]);
+// After: 훅이 데이터 관리를 담당
+const { restaurants, addRestaurant } = useRestaurants();
+async function handleRestaurantSubmit(restaurant) {
+  await addRestaurant(restaurant);
+  setIsAddRestaurantModalOpen(false);
+}
 ```
 
----
-
 ## 🛠 리팩토링
 
-### 이벤트 핸들러 네이밍 규칙
+### state 네이밍 — 용도가 아닌 값의 성격으로
 
-`handle` + `[대상]` + `[동작]` 패턴을 사용한다. 대상은 항상 붙인다.
+`filterCategory`는 이 state가 필터링에 쓰인다는 **용도**를 표현한다. state 이름은 어디에 쓰이는지가 아니라 **어떤 값을 담고 있는지**를 나타내는 게 좋다.
 
 ```jsx
-handleFormSubmit       // Form + Submit
-handleCategoryChange   // Category + Change
-handleDetailModalClose // DetailModal + Close
+// Before: 용도 표현
+const [filterCategory, setFilterCategory] = useState("전체");
+
+// After: 값의 성격 표현
+const [selectedCategory, setSelectedCategory] = useState("전체");
 ```
 
-props로 넘길 때는 `on-`으로 통일한다. `on-`은 인터페이스(계약), `handle-`은 구현이다.
+### API 함수명 — HTTP 메서드가 아닌 의도로
 
-```jsx
-// 정의는 handle-
-function handleNameChange(e) { ... }
+`postRestaurant`는 HTTP 메서드 이름(`post`)을 그대로 쓴 것이다. 함수명은 어떻게 동작하는지가 아니라 무엇을 하려는지를 나타내야 한다.
 
-// props로 넘길 때는 on-
-<AddRestaurantModal onNameChange={handleNameChange} />
+```js
+// Before: 구현 방법 표현
+export async function postRestaurant(restaurant) { ... }
+
+// After: 의도 표현
+export async function addRestaurant(restaurant) { ... }
 ```
 
-### 폼 state를 자식으로 내리기
+### BASE_URL 상수 추출
+
+`http://localhost:3000`이 `getRestaurants`와 `addRestaurant` 두 곳에 반복됐다. 상수로 추출해 한 곳에서 관리한다.
 
-처음 구현에서는 폼 입력값(category, name, description)을 App에서 관리했다. `restaurants` state가 App에 있어서 폼 데이터도 App까지 올려야 한다고 생각했기 때문이다. 결과적으로 AddRestaurantModal에 props가 8개가 됐다.
+```js
+const BASE_URL = "http://localhost:3000";
+```
 
-그러나 App이 실제로 필요한 것은 **추가 완료 시점의 최종 데이터**뿐이다. 폼을 채우는 중간 과정의 입력값은 App이 알 필요가 없다. 폼 state를 AddRestaurantModal 안으로 내리고, 완료 시에만 부모로 전달하도록 변경했다.
+### try/catch 추가
+
+`fetch`는 네트워크 오류에서만 throw하고, HTTP 4xx/5xx 응답은 throw하지 않는다. 두 가지를 모두 처리하려면 `response.ok` 확인과 `try/catch`가 함께 필요하다.
+
+```js
+export async function getRestaurants() {
+  try {
+    const response = await fetch(`${BASE_URL}/restaurants`);
+    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+    const restaurants = await response.json();
+    return restaurants;
+  } catch (error) {
+    console.error("음식점 목록 조회 실패:", error);
+    throw error;  // 호출한 쪽이 에러를 알 수 있도록 다시 던짐
+  }
+}
+```
 
-```jsx
-// Before: App이 중간 입력값까지 관리
-<AddRestaurantModal
-  category={category}
-  name={name}
-  description={description}
-  onCategoryChange={handleCategoryChange}
-  onNameChange={handleNameChange}
-  onDescriptionChange={handleDescriptionChange}
-  onSubmit={handleSubmit}
-  onClose={handleAddRestaurantModalClose}
-/>
+catch에서 `throw error`를 다시 던지는 이유: 로그만 남기고 삼켜버리면 호출한 쪽(`App.jsx`)이 에러 발생 여부를 알 수 없다.
 
-// After: 완성된 데이터만 부모로 전달
-<AddRestaurantModal
-  onSubmit={handleRestaurantSubmit}   // { category, name, description } 객체를 받음
-  onClose={handleAddRestaurantModalClose}
-/>
+### api.js에서 try/catch 제거
+
+`api.js`에서 `try/catch`로 잡고 `throw`로 다시 던지는 건 `try/catch`를 안 쓴 것과 결과가 같다. 콘솔 로그만 남기고 에러를 그대로 위로 올리기 때문이다. 에러를 처리할 수 있는 곳(훅, 컴포넌트)에서만 잡도록 `api.js`는 단순하게 throw만 하게 변경했다.
+
+```js
+// Before: try/catch로 잡았다가 다시 throw — 의미 없는 중간 처리
+export async function getRestaurants() {
+  try {
+    const response = await fetch(`${BASE_URL}/restaurants`);
+    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+    return await response.json();
+  } catch (error) {
+    console.error("음식점 목록 조회 실패:", error);
+    throw error;
+  }
+}
+
+// After: 단순하게 throw만
+export async function getRestaurants() {
+  const response = await fetch(`${BASE_URL}/restaurants`);
+  if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+  return response.json();
+}
+```
+
+### 에러 핸들링 추가
+
+에러는 사용자에게 보여줄 수 있는 가장 가까운 곳에서 한 번만 잡는다. 중간 함수(`addRestaurant`)에서 잡으면 에러가 거기서 소멸되어 최종 호출자가 실패 여부를 알 수 없다.
+
+- 초기 로딩 실패: `fetchRestaurants`의 `try/catch`에서 `error` state에 담아 화면에 표시
+- 음식점 추가 실패: `handleRestaurantSubmit`의 `try/catch`에서 alert로 사용자에게 알림
+
+```js
+// useRestaurants.js — 초기 로딩 에러 처리
+const fetchRestaurants = useCallback(async () => {
+  setIsLoading(true);
+  try {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  } catch (error) {
+    setError("음식점 목록을 불러오지 못했습니다.");
+  } finally {
+    setIsLoading(false);
+  }
+}, []);
+
+// App.jsx — 추가 실패 에러 처리
+async function handleRestaurantSubmit(restaurant) {
+  try {
+    await addRestaurant(restaurant);
+    setIsAddRestaurantModalOpen(false);
+  } catch {
+    alert("음식점 추가에 실패했습니다. 다시 시도해주세요.");
+  }
+}
 ```
 
-props가 8개 → 2개로 줄었고, 폼 내부 관심사가 AddRestaurantModal 안에 캡슐화됐다.
+### 매직 스트링 상수화 — `ALL_CATEGORY`
 
-### Modal 래퍼 div 제거
+`"전체"` 문자열이 `App.jsx`, `CategoryFilter.jsx`, `filterRestaurants.js` 세 곳에 흩어져 있었다. 하나라도 수정하면 나머지도 함께 바꿔야 하는 암묵적 결합이다. 상수로 추출해 한 곳에서 관리한다.
 
-`display: none` / `display: block` 패턴은 템플릿(`templates/style.css`)에서 그대로 가져온 것이다. 템플릿은 순수 HTML/CSS 기반으로, 모달이 DOM에 항상 존재하면서 `.modal--open` 클래스를 붙이고 떼는 방식으로 보이고 숨겼다.
+```js
+// Before: 세 곳에 흩어진 매직 스트링
+useState("전체");
+<option value="전체">전체</option>
+if (category === "전체") return restaurants;
+
+// After: 상수로 단일화
+export const ALL_CATEGORY = "전체";
+
+useState(ALL_CATEGORY);
+<option value={ALL_CATEGORY}>{ALL_CATEGORY}</option>
+if (category === ALL_CATEGORY) return restaurants;
+```
+
+### import 확장자 일관성
+
+Vite 프로젝트에서 일부 파일은 `.jsx`/`.js` 확장자를 명시하고 일부는 생략해 혼재된 상태였다. Vite는 ESM 표준에 가깝게 확장자 명시를 권장하므로 모든 로컬 import에 확장자를 추가했다.
+
+```js
+// Before
+import Modal from "../Modal/Modal";
+import { CATEGORIES } from "../../constants/categories";
+
+// After
+import Modal from "../Modal/Modal.jsx";
+import { CATEGORIES } from "../../constants/categories.js";
+```
 
-React로 전환하면서 조건부 렌더링(`{isOpen && <Modal />}`)을 사용하게 되면서 CSS 토글이 불필요해졌다. 템플릿의 구조를 그대로 쓰면서 생긴 불필요한 패턴을 뒤늦게 제거했다.
+### isLoading state 추가
 
-래퍼 `<div>`도 함께 제거했다. backdrop과 container가 둘 다 `position: fixed`라 부모 요소의 레이아웃에 영향을 받지 않아 래퍼가 없어도 동작이 동일하다. 불필요한 DOM 노드를 줄이기 위해 Fragment로 교체했다.
+데이터를 불러오는 동안 화면이 빈 상태로 보이는 문제를 해결하기 위해 `isLoading` state를 추가했다. `finally`를 사용해 성공/실패 여부와 관계없이 로딩 상태가 반드시 해제되도록 했다.
+
+```js
+const [isLoading, setIsLoading] = useState(false);
+
+const fetchRestaurants = useCallback(async () => {
+  setIsLoading(true);
+  try {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  } catch (error) {
+    setError("음식점 목록을 불러오지 못했습니다.");
+  } finally {
+    setIsLoading(false); // 성공/실패 모두 로딩 해제
+  }
+}, []);
+
+return { restaurants, addRestaurant, isLoading, error };
+```
+
+### Modal Escape 키 처리
+
+backdrop 클릭으로만 모달을 닫을 수 있어 키보드 사용자가 닫을 수 없는 접근성 문제가 있었다. `useEffect`로 keydown 이벤트를 등록해 Escape 키로도 닫히도록 했다.
+
+cleanup 함수로 이벤트 리스너를 제거하지 않으면 모달이 닫혀도 리스너가 남아, 모달을 여러 번 열고 닫을수록 리스너가 누적되어 `onClose`가 중복 호출된다.
+
+```js
+useEffect(() => {
+  function handleKeyDown(e) {
+    if (e.key === "Escape") onClose();
+  }
+  document.addEventListener("keydown", handleKeyDown);
+  return () => document.removeEventListener("keydown", handleKeyDown);
+}, [onClose]);
+```
+
+### Header 이미지 alt 중복 제거
+
+버튼에 `aria-label="음식점 추가"`가 있는데 내부 이미지에도 `alt="음식점 추가"`가 있어 스크린 리더가 "음식점 추가 음식점 추가"를 두 번 읽는 문제가 있었다. 버튼 안의 이미지는 버튼 자체가 의미를 전달하므로 장식적 역할이다. `alt` 속성을 제거해 스크린 리더가 이미지를 건너뛰도록 했다.
+
+```jsx
+// Before
+<img src={addButton} alt="음식점 추가" />
+
+// After
+<img src={addButton} />
+```
diff --git a/src/App.jsx b/src/App.jsx
index 3c4bb06..485546e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,22 +4,23 @@ import CategoryFilter from "./components/CategoryFilter/CategoryFilter.jsx";
 import RestaurantList from "./components/RestaurantList/RestaurantList.jsx";
 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";
+import { useRestaurants } from "./hooks/useRestaurants.js";
+import { ALL_CATEGORY } from "./constants/categories.js";
 
 function App() {
-  const [filterCategory, setFilterCategory] = useState("전체");
+  const [selectedCategory, setSelectedCategory] = useState(ALL_CATEGORY);
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddRestaurantModalOpen, setIsAddRestaurantModalOpen] =
     useState(false);
-  const [restaurants, setRestaurants] = useState(RESTAURANTS);
+  const { restaurants, addRestaurant, isLoading, error } = useRestaurants();
 
   const isRestaurantDetailModalOpen = !!clickedRestaurant;
-  const filteredRestaurants = filterRestaurants(restaurants, filterCategory);
+  const filteredRestaurants = filterRestaurants(restaurants, selectedCategory);
 
-  function handleFilterCategoryChange(e) {
-    setFilterCategory(e.target.value);
+  function handleCategoryChange(e) {
+    setSelectedCategory(e.target.value);
   }
 
   function handleRestaurantClick(restaurant) {
@@ -38,26 +39,24 @@ function App() {
     setIsAddRestaurantModalOpen(false);
   }
 
-  function handleRestaurantSubmit({ category, name, description }) {
-    setRestaurants([
-      ...restaurants,
-      {
-        id: Date.now(),
-        category,
-        name,
-        description,
-      },
-    ]);
-    setIsAddRestaurantModalOpen(false);
+  async function handleRestaurantSubmit(restaurant) {
+    try {
+      await addRestaurant(restaurant);
+      setIsAddRestaurantModalOpen(false);
+    } catch {
+      alert("음식점 추가에 실패했습니다. 다시 시도해주세요.");
+    }
   }
 
   return (
     <>
       <Header onAddButtonClick={handleAddButtonClick} />
       <main>
+        {isLoading && <p>불러오는 중...</p>}
+        {error && <p>{error}</p>}
         <CategoryFilter
-          category={filterCategory}
-          onCategoryChange={handleFilterCategoryChange}
+          category={selectedCategory}
+          onCategoryChange={handleCategoryChange}
         />
         <RestaurantList
           restaurants={filteredRestaurants}
diff --git a/src/api.js b/src/api.js
new file mode 100644
index 0000000..450f0b9
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,16 @@
+const BASE_URL = "http://localhost:3000";
+
+export async function getRestaurants() {
+  const response = await fetch(`${BASE_URL}/restaurants`);
+  if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+  return response.json();
+}
+
+export async function createRestaurant(restaurant) {
+  const response = await fetch(`${BASE_URL}/restaurants`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(restaurant),
+  });
+  if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+}
diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index 8aee4d1..0bb7c55 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 Modal from "../Modal/Modal.jsx";
+import { CATEGORIES } from "../../constants/categories.js";
 
 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..fdf1d99 100644
--- a/src/components/CategoryFilter/CategoryFilter.jsx
+++ b/src/components/CategoryFilter/CategoryFilter.jsx
@@ -1,3 +1,4 @@
+import { ALL_CATEGORY, CATEGORIES } from "../../constants/categories.js";
 import styles from "./CategoryFilter.module.css";
 
 export default function CategoryFilter({ category, onCategoryChange }) {
@@ -11,13 +12,12 @@ export default function CategoryFilter({ category, onCategoryChange }) {
         value={category}
         onChange={onCategoryChange}
       >
-        <option value="전체">전체</option>
-        <option value="한식">한식</option>
-        <option value="중식">중식</option>
-        <option value="일식">일식</option>
-        <option value="양식">양식</option>
-        <option value="아시안">아시안</option>
-        <option value="기타">기타</option>
+        <option value={ALL_CATEGORY}>{ALL_CATEGORY}</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 512a3c9..1451cbd 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -11,7 +11,7 @@ export default function Header({ onAddButtonClick }) {
         aria-label="음식점 추가"
         onClick={onAddButtonClick}
       >
-        <img src={addButton} alt="음식점 추가" />
+        <img src={addButton} />
       </button>
     </header>
   );
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index 1164c19..7c55306 100644
--- a/src/components/Modal/Modal.jsx
+++ b/src/components/Modal/Modal.jsx
@@ -1,6 +1,15 @@
+import { useEffect } from "react";
 import styles from "./Modal.module.css";
 
 export default function Modal({ children, title, onClose }) {
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
   return (
     <>
       <div className={styles.modal__backdrop} onClick={onClose}></div>
diff --git a/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx b/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
index 93256b1..9318891 100644
--- a/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
+++ b/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
@@ -1,5 +1,5 @@
 import styles from "./RestaurantDetailModal.module.css";
-import Modal from "../Modal/Modal";
+import Modal from "../Modal/Modal.jsx";
 
 export default function RestaurantDetailModal({ restaurant, onClose }) {
   return (
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..49b8f39
--- /dev/null
+++ b/src/constants/categories.js
@@ -0,0 +1,2 @@
+export const ALL_CATEGORY = "전체";
+export const CATEGORIES = ["한식", "중식", "일식", "양식", "아시안", "기타"];
diff --git a/src/constants/restaurants.js b/src/constants/restaurants.js
deleted file mode 100644
index 7fc92cf..0000000
--- a/src/constants/restaurants.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export const RESTAURANTS = [
-  {
-    id: "a01",
-    name: "피양콩할마니",
-    description:
-      "평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.",
-    category: "한식",
-  },
-  {
-    id: "a02",
-    name: "친친",
-    description:
-      "Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다",
-    category: "중식",
-  },
-  {
-    id: "a03",
-    name: "잇쇼우",
-    description:
-      "잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 음식에 최선을 다하는 잇쇼우는 고객 한분 한분께 최선을 다하겠습니다",
-    category: "일식",
-  },
-  {
-    id: "a04",
-    name: "이태리키친",
-    description: "늘 변화를 추구하는 이태리키친입니다.",
-    category: "양식",
-  },
-  {
-    id: "a05",
-    name: "호아빈 삼성점",
-    description: "푸짐한 양에 국물이 일품인 쌀국수",
-    category: "아시안",
-  },
-  {
-    id: "a06",
-    name: "도스타코스 선릉점",
-    description: "멕시칸 캐주얼 그릴",
-    category: "기타",
-  },
-];
diff --git a/src/hooks/useRestaurants.js b/src/hooks/useRestaurants.js
new file mode 100644
index 0000000..e9130eb
--- /dev/null
+++ b/src/hooks/useRestaurants.js
@@ -0,0 +1,31 @@
+import { useState, useEffect, useCallback } from "react";
+import { getRestaurants, createRestaurant } from "../api.js";
+
+export function useRestaurants() {
+  const [restaurants, setRestaurants] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchRestaurants = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const data = await getRestaurants();
+      setRestaurants(data);
+    } catch (error) {
+      setError("음식점 목록을 불러오지 못했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchRestaurants();
+  }, [fetchRestaurants]);
+
+  async function addRestaurant(restaurant) {
+    await createRestaurant(restaurant);
+    await fetchRestaurants();
+  }
+
+  return { restaurants, addRestaurant, isLoading, error };
+}
diff --git a/src/utils/filterRestaurants.js b/src/utils/filterRestaurants.js
index 4069992..c45a877 100644
--- a/src/utils/filterRestaurants.js
+++ b/src/utils/filterRestaurants.js
@@ -1,6 +1,6 @@
+import { ALL_CATEGORY } from "../constants/categories.js";
+
 export function filterRestaurants(restaurants, category) {
-  if (category === "전체") return restaurants;
-  else {
-    return restaurants.filter((restaurant) => restaurant.category === category);
-  }
+  if (category === ALL_CATEGORY) return restaurants;
+  return restaurants.filter((restaurant) => restaurant.category === category);
 }