[Step2] cactus - Props와 State

.claude/steps-config.json

@@ -0,0 +1,9 @@
+{
+  "oldRepo": "cho-log/self-paced-react",
+  "steps": {
+    "step1": { "oldPR": 77 },
+    "step2": { "oldPR": 79 },
+    "step3_4": { "oldPR": 84 },
+    "step5": { "oldPR": 87 }
+  }
+}

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,12 @@
+## 개인 목표 달성 여부
+
+- [ ] 
+- [ ] 
+- [ ] 
+
+---
+
+## 리뷰어에게
+
+- [ ] 
+- [ ] 

02-rendering-lists/README.md

@@ -0,0 +1,80 @@
+# 02. 목록 UI 구현하기: Props와 State
+
+## 🎯 요구 사항
+
+- `RestaurantList` 가 restaurants 배열을 받아서 그릴 수 있도록 변경해 보세요.
+  - restaurants 배열을 `RestaurantList` 의 props로 내려받도록 변경해 보세요.
+- 카테고리 필터에 따라 필터된 음식점 목록을 보여줄 수 있도록 변경해 보세요.
+
+### 구현 결과 예시
+
+```javascript
+// App.jsx
+<CategoryFilter category={category} onChangeCategory={setCategory} />
+<RestaurantList restaurants={filteredRestaurants} />
+```
+
+```javascript
+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: "기타",
+  },
+];
+```
+
+## ✅ 키워드
+
+- Props
+- State
+  - useState
+- Keys
+
+> [Rendering Lists](https://react.dev/learn/rendering-lists) 문서에 ['Why does React need keys?'](https://react.dev/learn/rendering-lists#why-does-react-need-keys)는 지금 꼭 이해하지 않아도 괜찮습니다. 그냥 React에서 목록을 동적으로 그릴 때에는 이런 것들을 사용해야 하는구나~ 정도로만 알고 일단 넘어가세요. 우선 사용하는 법에 익숙해지는 것이 먼저입니다 :)
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행 시간: 1시간 내에 완료하는 것을 목표로 합니다.
+
+## 🔗 참고 문서
+
+- [Thinking in React](https://react.dev/learn/thinking-in-react)의 Step3-4
+- [Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component)
+- [Rendering Lists](https://react.dev/learn/rendering-lists)
+- [State: A Component's Memory](https://react.dev/learn/state-a-components-memory)
+  - [API Reference: useState](https://react.dev/reference/react/useState)

CLAUDE.md

@@ -0,0 +1,41 @@
+# 프로젝트 가이드
+
+## 미션 진행 방식
+
+- 힌트 우선, 답은 명시적으로 요청할 때만 제공
+- README 수정 시 초안을 먼저 보여주고 승인 후 반영 (포트폴리오 용도, heading 구조 고정)
+
+## 과거 코드 비교 자동화
+
+새 스텝 README의 `## 과거 코드와 비교` 섹션 작성 시:
+
+1. `.claude/steps-config.json`에서 해당 스텝의 `oldPR` 번호와 `oldRepo`를 읽는다
+2. `gh api repos/{oldRepo}/pulls/{oldPR}/comments`로 인라인 리뷰를 fetch한다
+3. `gh pr diff {oldPR} --repo {oldRepo}`로 핵심 코드 변경사항을 확인한다
+4. 현재 브랜치 코드와 비교하여 달라진 점, 리뷰에서 배운 점을 정리한다
+
+스텝 번호 매핑: step1 → step1, step2 → step2, step3/4 → step3_4, step5 → step5
+
+## README 양식
+
+heading 구조는 고정 템플릿이며 절대 변경하지 않는다. README는 포트폴리오 용도로 작성한다.
+
+```
+# 미션 제목
+
+## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드
+
+## 📝 기능 구현 목록
+
+## 📚 학습 내용
+
+## 🤔 고민했던 문제와 해결 과정에서 배운 점
+
+## 🛠 리팩토링
+
+## 과거 코드와 비교
+
+### 달라진 점
+
+### 과거 코드에서 배운 점
+```