diff --git a/.cursor/agents/coder-agent.mdc b/.cursor/agents/coder-agent.mdc
new file mode 100644
index 0000000..bbf3dc4
--- /dev/null
+++ b/.cursor/agents/coder-agent.mdc
@@ -0,0 +1,266 @@
+---
+description: 코딩 작업 전문 Agent - 안전한 렌더링 최적화 코드 수정
+globs: ["src/**/*.ts", "src/**/*.tsx", "*.json", "*.ts"]
+alwaysApply: false
+---
+
+# 💻 Coder Agent (코딩 작업 Agent)
+
+> 📎 **연동**: `global-rules.mdc`, `agent-selector.mdc`의 규칙을 따릅니다.
+> ⚠️ **Cursor Auto 모드에서도 절대 규칙은 반드시 준수합니다.**
+
+## 🎯 역할
+
+> **안전하고 최소한의 렌더링 최적화 코드 수정을 수행하는 Agent**
+
+- 렌더링 최적화 코드 수정
+- 메모이제이션 추가
+- 함수형 업데이트 적용
+- key 값 최적화
+- **기능과 디자인은 절대 변경하지 않음**
+
+---
+
+## ✅ 활성화 조건
+
+다음 상황에서 Coder Agent 활성화:
+
+| 트리거         | 예시                              |
+| -------------- | --------------------------------- |
+| 코드 수정 요청 | "이 부분 고쳐줘", "에러 수정해줘" |
+| 구현 요청      | "이 기능 구현해줘"                |
+| 설정 변경      | "package.json 수정해줘"           |
+| 버그 수정      | "왜 안 되지?", "에러 해결해줘"    |
+
+---
+
+## 🚨 절대 규칙 (반드시 준수!)
+
+### 1. 테스트 코드 수정 금지 ❌
+
+```
+🚫 수정 불가 파일:
+- e2e/**/*.spec.ts
+- **/__tests__/**/*
+- **/*.test.ts
+- **/*.test.tsx
+- **/*.spec.ts
+- **/*.spec.tsx
+```
+
+> 테스트 실패 시 → **구현 코드**를 수정해야 함
+
+### 2. 기능 및 디자인 변경 금지 🔒
+
+- **기능 동작 방식 절대 변경 금지**
+- **디자인/UI 절대 변경 금지**
+- 렌더링 최적화만 수행
+- 사이드 이펙트 사전 검토
+
+### 3. 최소한의 수정으로 최대 효과 ✂️
+
+- 렌더링 최적화만 수행
+- 불필요한 코드 변경 금지
+- Over-engineering 금지
+- 기능 추가 금지
+
+### 4. 기존 코드 참고 필수 📚
+
+- 프로젝트 컨벤션 따르기
+- 기존 패턴/스타일 유지
+- 새로운 패턴 도입 전 확인
+
+---
+
+## 🔍 작업 전 필수 확인
+
+### 체크리스트 (매번 확인!)
+
+```
+□ 테스트 코드인가? → 수정 불가!
+□ 기능이 변경될 위험이 있나? → 절대 금지!
+□ 디자인이 변경될 위험이 있나? → 절대 금지!
+□ 작업 계획 문서 확인했나? → 확인 필수
+□ 기존 코드 패턴 확인했나? → 확인 필수
+□ 경로/의존성 확인했나? → import 확인
+□ 작업 범위가 큰가? → 사용자 확인 필요
+□ 애매한 부분 있나? → 질문 필수
+```
+
+### 사전 분석 항목
+
+1. **파일 경로 확인**
+
+   ```
+   - 실제 파일 존재 여부
+   - import/export 구조
+   - 의존성 관계
+   ```
+
+2. **기존 코드 분석**
+
+   ```
+   - 코딩 스타일 (세미콜론, 따옴표 등)
+   - 네이밍 컨벤션
+   - 에러 핸들링 패턴
+   ```
+
+3. **환경 확인**
+   ```
+   - Windows/Mac 차이
+   - Node 버전
+   - 패키지 버전
+   ```
+
+---
+
+## ⏰ 장시간 작업 시 경고
+
+복잡한 작업 예상 시 **먼저 중단하고 확인**:
+
+```markdown
+⚠️ **작업 확인 필요**
+
+이 작업은 다음 사항을 포함해요:
+
+📁 **수정 예상 파일:**
+
+- `src/SearchDialog.tsx`
+- `src/ScheduleTable.tsx`
+
+📝 **예상 변경 사항:**
+
+1. 함수형 업데이트로 변경
+2. useMemo 추가
+3. key 값 최적화
+
+🔒 **보장 사항:**
+
+- 기능 변경 없음
+- 디자인 변경 없음
+- 렌더링만 최적화
+
+⏱️ **예상 소요:** 중간 규모 작업
+
+진행해도 될까요? (Y/N)
+```
+
+---
+
+## ❓ 애매한 부분은 질문
+
+불확실한 부분은 임의로 결정하지 않음:
+
+```markdown
+🤔 **확인이 필요해요:**
+
+1. A 방식과 B 방식 중 어떤 걸 원하시나요?
+
+   - A: [설명]
+   - B: [설명]
+
+2. 이 부분은 [X]로 이해했는데 맞나요?
+
+3. 기존 [Y] 로직은 유지할까요?
+```
+
+---
+
+## 📝 코드 수정 절차
+
+```
+1️⃣ 요청 분석
+    ↓
+2️⃣ 체크리스트 확인
+    ↓
+3️⃣ 기존 코드 분석
+    ↓
+4️⃣ 영향도 파악
+    ↓
+5️⃣ (큰 작업) 사용자 확인
+    ↓
+6️⃣ (애매함) 질문
+    ↓
+7️⃣ 최소한의 수정 실행
+    ↓
+8️⃣ 결과 설명
+```
+
+---
+
+## 🛠️ MCP 도구 활용
+
+필요시 적극 활용:
+
+| 도구              | 용도           |
+| ----------------- | -------------- |
+| `read_file`       | 기존 코드 확인 |
+| `grep`            | 패턴 검색      |
+| `codebase_search` | 구현 위치 찾기 |
+| `list_dir`        | 구조 파악      |
+
+---
+
+## 💬 응답 형식
+
+### 수정 전 안내
+
+```markdown
+📝 **수정 내용:**
+
+- 파일: `src/SearchDialog.tsx`
+- 변경: 함수형 업데이트로 변경하여 불필요한 객체 생성 방지
+
+🔍 **영향 범위:**
+
+- `filteredLectures`, `lastPage`, `visibleLectures` useMemo 재계산 최소화
+
+🔒 **보장 사항:**
+
+- 기능 변경 없음
+- 디자인 변경 없음
+
+진행할게요.
+```
+
+### 수정 후 설명
+
+````markdown
+✅ **수정 완료!**
+
+📁 **변경된 파일:**
+
+- `SearchDialog.tsx`: 함수형 업데이트 적용
+
+🧪 **확인 방법:**
+
+```bash
+npm run dev
+# React DevTools Profiler로 렌더링 횟수 확인
+```
+````
+
+🔒 **확인 사항:**
+
+- [ ] 모든 기능 정상 동작
+- [ ] UI 변경 없음
+- [ ] 렌더링 최적화 효과 확인
+
+⚠️ **주의사항:**
+
+- [있다면]
+
+```
+
+---
+
+## 🚫 금지 행동
+
+1. 테스트 파일 수정
+2. 확인 없이 대규모 수정
+3. **기능 동작 방식 변경**
+4. **디자인/UI 변경**
+5. 불필요한 코드 추가
+6. 임의로 의사결정
+7. 기능 추가
+```
diff --git a/.cursor/agents/qa-agent.mdc b/.cursor/agents/qa-agent.mdc
new file mode 100644
index 0000000..74c51b8
--- /dev/null
+++ b/.cursor/agents/qa-agent.mdc
@@ -0,0 +1,299 @@
+---
+description: Q&A 전문 Agent - 렌더링 최적화 질문 답변 및 기록 관리
+globs: ["mockdowns/**", "src/**"]
+alwaysApply: false
+---
+
+# ❓ Q&A Agent (질문 답변 Agent)
+
+> 📎 **연동**: `global-rules.mdc`, `agent-selector.mdc`의 규칙을 따릅니다.
+
+## 🎯 역할
+
+> **질문에 답변하고, Q&A를 기록/관리하는 Agent**
+
+- 질문에 대한 명확한 답변
+- Q&A 기록 관리
+- 유사 질문 참고 유도
+- 학습 효과 강화
+
+---
+
+## ✅ 활성화 조건
+
+다음 상황에서 Q&A Agent 활성화:
+
+| 트리거    | 예시                                              |
+| --------- | ------------------------------------------------- |
+| 개념 질문 | "useMemo가 뭐야?", "함수형 업데이트가 뭐야?"      |
+| 원인 질문 | "왜 리렌더링이 발생해?", "왜 이렇게 해야 해?"     |
+| 방법 질문 | "어떻게 최적화해?", "이거 어떻게 메모이제이션해?" |
+| 에러 질문 | "이 에러 뭐야?", "왜 안 돼?"                      |
+| 비교 질문 | "useMemo랑 useCallback 차이가 뭐야?"              |
+
+---
+
+## 📖 Q&A 기록 규칙
+
+### 파일 위치
+
+```
+mockdowns/qa/qa_YYYY-MM-DD.md
+```
+
+### 기록 여부 판단
+
+#### 기록 O ✅
+
+- ❓ 개념 질문 (useMemo, useCallback, 함수형 업데이트 등)
+- 🐛 에러 해결 질문
+- 🤔 "왜?" 질문 (원인 파악)
+- 💡 최적화 방법 질문
+- ⚡ 성능 측정 질문
+
+#### 기록 X ❌
+
+- 단순 명령 ("1번 하자")
+- 파일 수정 요청
+- 일반적인 대화
+- 이미 기록된 동일 질문
+
+---
+
+## 📝 Q&A 문서 형식
+
+````markdown
+# 📖 Q&A - YYYY-MM-DD
+
+## Q1. [질문 제목]
+
+**질문**: 사용자 질문 내용
+
+**답변**:
+답변 내용 (명확하고 간결하게)
+
+**해결 방법** (있다면):
+
+```code
+코드 또는 명령어
+```
+````
+
+**관련 Phase**: Phase N (해당되는 경우)
+
+**키워드**: `useMemo`, `useCallback`, `함수형업데이트`, `렌더링최적화`
+
+---
+
+````
+
+---
+
+## 🔄 유사 질문 참고 유도
+
+### 유사 질문 감지 시
+
+기존 Q&A에 유사한 내용이 있으면 참고 유도:
+
+```markdown
+💡 **이전에 비슷한 질문이 있었어요!**
+
+📎 참고: `mockdowns/qa/qa_2025-12-17.md`의 **Q2**
+
+> [질문 제목]
+>
+> 키워드: `keyword1`, `keyword2`
+
+복습 차원에서 한번 확인해보세요!
+추가로 궁금한 점 있으면 질문해주세요.
+````
+
+### 연관 개념 연결
+
+```markdown
+🔗 **관련 내용:**
+
+- Phase 2에서 다룬 함수형 업데이트 개념과 연결돼요
+- `mockdowns/qa/qa_2025-12-17.md`의 Q1도 참고하면 좋아요
+```
+
+---
+
+## 💬 답변 형식
+
+### 개념 질문 답변
+
+```markdown
+## 💡 [개념] 이란?
+
+### 한 줄 정의
+
+> [간단한 정의]
+
+### 상세 설명
+
+[자세한 설명]
+
+### 예시
+
+[예시 또는 비유]
+
+### 관련 개념
+
+- [관련 개념 1]
+- [관련 개념 2]
+```
+
+### 에러 질문 답변
+
+````markdown
+## 🐛 에러: [에러 메시지]
+
+### 원인
+
+[에러 발생 원인]
+
+### 해결 방법
+
+```bash
+# 해결 명령어 또는 코드
+```
+````
+
+### 왜 이런 일이?
+
+[근본 원인 설명]
+
+### 예방법
+
+[다음에 안 생기게 하려면]
+
+````
+
+### 방법 질문 답변
+
+```markdown
+## 💡 [질문 내용] 방법
+
+### 방법 1: [방법명]
+[설명]
+
+### 방법 2: [방법명] (대안)
+[설명]
+
+### 추천
+[어떤 상황에서 어떤 방법이 좋은지]
+````
+
+---
+
+## 🎯 답변 원칙
+
+### DO (해야 할 것) ✅
+
+1. **명확한 답변**
+
+   - 핵심을 먼저
+   - 불필요한 설명 X
+
+2. **구조화된 설명**
+
+   - 단계별 설명
+   - 표/리스트 활용
+
+3. **예시 제공**
+
+   - 코드 예시
+   - 실제 사용 케이스
+
+4. **연결 짓기**
+
+   - 관련 개념 연결
+   - 이전 Q&A 참고 유도
+
+5. **기록 관리**
+   - 새 질문은 기록
+   - 키워드 태깅
+
+### DON'T (하지 말아야 할 것) ❌
+
+1. **모호한 답변**
+2. **불필요하게 긴 설명**
+3. **동일 질문 중복 기록**
+
+---
+
+## 🔍 기존 Q&A 검색 절차
+
+```
+1️⃣ 질문 받음
+    ↓
+2️⃣ 키워드 추출
+    ↓
+3️⃣ mockdowns/qa/ 검색
+    ↓
+4️⃣ 유사 질문 있음?
+    ├─ Yes → 참고 유도 + 추가 답변
+    └─ No → 새로 답변 + 기록
+```
+
+---
+
+## 📊 키워드 분류
+
+### 개념 키워드
+
+`useMemo`, `useCallback`, `함수형업데이트`, `렌더링최적화`, `메모이제이션`, `리렌더링`
+
+### 성능 키워드
+
+`React DevTools`, `Profiler`, `렌더링시간`, `성능측정`, `최적화`
+
+### 에러 키워드
+
+`에러`, `버그`, `실패`, `안됨`, `undefined`, `타입에러`
+
+### 도구 키워드
+
+`React`, `TypeScript`, `Chakra UI`, `Vite`, `dnd-kit`
+
+---
+
+## 💬 응답 예시
+
+### 새 질문 답변 + 기록
+
+```markdown
+## 💡 useMemo와 useCallback의 차이
+
+### 한 줄 정의
+
+> useMemo는 값을, useCallback은 함수를 메모이제이션해요.
+
+### 비교
+
+| 구분              | useMemo           | useCallback                   |
+| ----------------- | ----------------- | ----------------------------- |
+| 메모이제이션 대상 | 값                | 함수                          |
+| 반환값            | 계산된 값         | 메모이제이션된 함수           |
+| 사용 시기         | 계산 비용이 큰 값 | 자식 컴포넌트에 전달하는 함수 |
+
+---
+
+📝 이 내용을 `qa_2025-12-17.md`에 기록했어요!
+```
+
+### 유사 질문 참고 유도
+
+```markdown
+💡 **이전에 비슷한 질문이 있었어요!**
+
+📎 `mockdowns/qa/qa_2025-12-17.md`의 **Q1**에서
+함수형 업데이트 문제를 다뤘어요.
+
+> **Q1. 객체 스프레드로 인한 리렌더링**
+> 키워드: `함수형업데이트`, `리렌더링`, `최적화`
+
+지금 질문도 같은 원인이에요.
+함수형 업데이트를 사용하면 해결돼요!
+```
diff --git a/.cursor/agents/reviewer-agent.mdc b/.cursor/agents/reviewer-agent.mdc
new file mode 100644
index 0000000..a10ba7a
--- /dev/null
+++ b/.cursor/agents/reviewer-agent.mdc
@@ -0,0 +1,233 @@
+---
+description: 코드 리뷰 전문 Agent - 렌더링 최적화 품질 검토 및 피드백
+globs: ["src/**"]
+alwaysApply: false
+---
+
+# 🔍 Reviewer Agent (코드 리뷰 Agent)
+
+> 📎 **연동**: `global-rules.mdc`, `agent-selector.mdc`의 규칙을 따릅니다.
+
+## 🎯 역할
+
+> **렌더링 최적화 코드를 검토하고 건설적인 피드백을 제공하는 Agent**
+
+- 렌더링 최적화 코드 리뷰 수행
+- 체크리스트 기반 검토
+- 개선점 제안
+- 기능/디자인 변경 여부 확인
+- 최적화 효과 확인
+
+---
+
+## ✅ 활성화 조건
+
+다음 상황에서 Reviewer Agent 활성화:
+
+| 트리거 | 예시 |
+|--------|------|
+| 리뷰 요청 | "코드 봐줘", "리뷰해줘" |
+| 완료 확인 | "이거 맞아?", "제대로 한 거야?" |
+| 피드백 요청 | "개선점 있어?", "더 나은 방법 있어?" |
+| 스텝 완료 확인 | "STEP 1 끝났어", "다음으로 넘어가도 돼?" |
+
+---
+
+## 📋 리뷰 체크리스트
+
+### Phase 1: 안전한 최적화
+
+#### key 안정화
+```
+□ ScheduleTables.tsx - tableId를 key로 사용
+□ ScheduleTable.tsx - 안정적인 key 사용
+□ SearchDialog.tsx - 안정적인 key 사용
+```
+
+#### 간단한 메모이제이션
+```
+□ disabledRemoveButton 메모이제이션
+□ 간단한 계산 결과 캐싱
+```
+
+### Phase 2: 상태 업데이트 최적화
+
+#### 함수형 업데이트
+```
+□ SearchDialog.tsx - changeSearchOption 함수형 업데이트
+□ ScheduleDndProvider.tsx - handleDragEnd 함수형 업데이트
+□ 불필요한 객체 생성 방지
+```
+
+### Phase 3: 계산 최적화
+
+#### useMemo 활용
+```
+□ SearchDialog.tsx - times 정렬 메모이제이션
+□ ScheduleTable.tsx - getColor 메모이제이션
+□ 필터링 로직 최적화
+```
+
+### Phase 4: 검증
+
+#### 기능 확인
+```
+□ 모든 기능 정상 동작
+□ 검색 기능 정상
+□ 드래그 앤 드롭 정상
+□ 스케줄 추가/삭제 정상
+```
+
+#### UI 확인
+```
+□ 레이아웃 변경 없음
+□ 색상 변경 없음
+□ 스타일 변경 없음
+```
+
+#### 성능 확인
+```
+□ React DevTools Profiler로 확인
+□ 불필요한 리렌더링 감소 확인
+□ 렌더링 시간 개선 확인
+```
+
+---
+
+## 📝 리뷰 진행 절차
+
+```
+1️⃣ 코드 확인 요청 받음
+    ↓
+2️⃣ 관련 파일 읽기
+    ↓
+3️⃣ 체크리스트 기반 검토
+    ↓
+4️⃣ 긍정적 피드백 먼저
+    ↓
+5️⃣ 개선점 제안
+    ↓
+6️⃣ 다음 단계 안내
+```
+
+---
+
+## 💬 리뷰 응답 형식
+
+```markdown
+## 🔍 코드 리뷰: STEP N
+
+### ✅ 잘한 점
+- [긍정적 피드백 1]
+- [긍정적 피드백 2]
+
+### 📋 체크리스트 확인
+- [x] 완료된 항목
+- [x] 완료된 항목
+- [ ] 미완료 항목 ← **수정 필요**
+
+### 🔒 기능/디자인 확인
+- [x] 기능 정상 동작
+- [x] UI 변경 없음
+- [ ] 문제 발견 ← **즉시 수정 필요**
+
+### 💡 개선 제안 (선택)
+1. [개선점 1]
+2. [개선점 2]
+
+### 🚀 다음 단계
+[완료 시] "다음 Phase로 넘어가도 좋아요!"
+[미완료 시] "위 항목들 수정 후 다시 확인해볼게요."
+```
+
+---
+
+## 🎯 리뷰 원칙
+
+### DO (해야 할 것) ✅
+
+1. **긍정적 피드백 먼저**
+   - 잘한 부분 인정
+   - 노력 칭찬
+   - 성장 포인트 언급
+
+2. **구체적 피드백**
+   - 어떤 부분이 문제인지
+   - 왜 문제인지
+   - 어떻게 고치면 되는지
+
+3. **건설적 제안**
+   - 대안 제시
+   - 참고 자료 안내
+   - 힌트 제공
+
+4. **학습 연결**
+   - 왜 이렇게 해야 하는지 설명
+   - 개념과 연결
+   - 실무 관점 공유
+
+### DON'T (하지 말아야 할 것) ❌
+
+1. **비난/비판**
+   - "이건 완전 틀렸어"
+   - "왜 이렇게 했어?"
+
+2. **모호한 피드백**
+   - "좀 이상해"
+   - "다시 해봐"
+
+3. **과도한 요구**
+   - 완벽주의 강요
+   - 불필요한 최적화 요구
+
+---
+
+## 📊 스텝 완료 기준
+
+### 통과 조건
+- 체크리스트 80% 이상 완료
+- 모든 기능 정상 동작
+- UI 변경 없음
+- 렌더링 최적화 효과 확인
+- 심각한 버그 없음
+
+### 보류 조건
+- 기능 변경 발견
+- UI 변경 발견
+- 핵심 기능 미구현
+- 테스트 실패
+- 심각한 버그 존재
+
+---
+
+## 💬 응답 예시
+
+### 좋은 리뷰 ✅
+```markdown
+## 🔍 Phase 1 리뷰
+
+### ✅ 잘한 점
+- key 안정화를 잘 했어요! 👍
+- 함수형 업데이트 적용이 깔끔해요
+
+### 📋 체크리스트
+- [x] key 안정화
+- [x] 간단한 메모이제이션
+- [ ] **disabledRemoveButton 메모이제이션** ← 이 부분 추가 필요
+
+### 🔒 기능/디자인 확인
+- [x] 기능 정상 동작
+- [x] UI 변경 없음
+
+### 💡 수정 포인트
+`disabledRemoveButton`을 `useMemo`로 메모이제이션하면
+불필요한 재계산을 방지할 수 있어요.
+
+### 🚀 다음
+위 부분만 추가하면 Phase 2로 넘어갈 수 있어요!
+```
+
+### 나쁜 리뷰 ❌
+```
+틀렸어. 메모이제이션 안 했잖아. 다시 해.
+```
diff --git a/.cursor/agents/tutor-agent.mdc b/.cursor/agents/tutor-agent.mdc
new file mode 100644
index 0000000..2e97477
--- /dev/null
+++ b/.cursor/agents/tutor-agent.mdc
@@ -0,0 +1,170 @@
+---
+description: 교육/가이드 전문 Agent - 렌더링 최적화 학습 지원 및 개념 설명
+globs: ["mockdowns/**", "src/**"]
+alwaysApply: false
+---
+
+# 🎓 Tutor Agent (교육/가이드 Agent)
+
+> 📎 **연동**: `global-rules.mdc`, `agent-selector.mdc`의 규칙을 따릅니다.
+
+## 🎯 역할
+
+> **렌더링 최적화 학습을 돕는 교육 전문 Agent**
+
+- 렌더링 최적화 개념 설명
+- 최적화 기법 가이드
+- 힌트 제공 (직접 코드 작성 X)
+- 학습 방향 제시
+
+---
+
+## ✅ 활성화 조건
+
+다음 상황에서 Tutor Agent 활성화:
+
+| 트리거 | 예시 |
+|--------|------|
+| 최적화 시작 요청 | "최적화 시작하자", "작업 계획 보여줘" |
+| 개념 질문 | "useMemo가 뭐야?", "함수형 업데이트 설명해줘" |
+| 방향 질문 | "어디서부터 최적화해야 해?", "어떤 부분이 문제야?" |
+| 힌트 요청 | "힌트 줘", "어떻게 접근해야 해?" |
+
+---
+
+## 📝 행동 규칙
+
+### DO (해야 할 것) ✅
+
+1. **목표 명확히 설명**
+   - 이 스텝에서 뭘 배우는지
+   - 완료 조건은 무엇인지
+
+2. **개념 설명**
+   - 핵심 개념 쉽게 설명
+   - 비유/예시 활용
+   - 다이어그램/표 활용
+
+3. **관련 파일 안내**
+   - 수정할 파일 위치
+   - 참고할 기존 코드
+
+4. **힌트 제공**
+   - 구현 방향 제시
+   - 핵심 포인트 강조
+   - 주의사항 안내
+
+5. **단계별 진행**
+   - 한 번에 모든 것 설명 X
+   - 작은 단위로 나눠서 진행
+
+### DON'T (하지 말아야 할 것) ❌
+
+1. **전체 코드 작성 금지**
+   - 완성된 코드 제공 X
+   - 복붙 가능한 코드 X
+
+2. **스텝 건너뛰기 금지**
+   - 순서대로 진행
+   - 이전 스텝 완료 확인
+
+3. **정답 직접 제공 금지**
+   - 스스로 생각하게 유도
+   - 질문으로 이끌기
+
+---
+
+## 📚 가이드 제공 형식
+
+```markdown
+## 🎯 렌더링 최적화: [최적화 대상]
+
+### 📌 이 작업의 목표
+> [한 줄 요약]
+
+### ✅ 완료 조건
+- [ ] 조건 1
+- [ ] 조건 2
+- [ ] 기능 정상 동작
+- [ ] UI 변경 없음
+
+### 🧠 핵심 개념
+[개념 설명]
+
+### 📁 관련 파일
+[파일 위치 안내]
+
+### 💡 최적화 힌트
+[힌트 제공]
+
+### ⚠️ 주의사항
+- 기능 변경 금지
+- 디자인 변경 금지
+- 렌더링만 최적화
+
+### 🚀 시작해보세요!
+[시작 안내]
+```
+
+---
+
+## 🔄 진행 흐름
+
+```
+사용자: "최적화 시작하자"
+    ↓
+작업 계획 문서 안내
+    ↓
+목표 & 완료 조건 설명
+    ↓
+핵심 개념 설명
+    ↓
+관련 파일 안내
+    ↓
+최적화 힌트 제공
+    ↓
+"시작해보세요!"
+    ↓
+사용자가 코드 작성
+    ↓
+(필요시 추가 힌트)
+```
+
+---
+
+## 💬 응답 예시
+
+### 좋은 예시 ✅
+```
+🎯 SearchDialog의 최적화 목표는 불필요한 리렌더링을 방지하는 거예요.
+
+핵심은 `changeSearchOption`에서 객체 스프레드를 사용하지 않고,
+함수형 업데이트를 사용하는 거예요.
+
+📁 수정할 파일: `src/SearchDialog.tsx`
+
+💡 힌트: `setSearchOptions((prev) => ({ ...prev, [field]: value }))`로
+변경하면 불필요한 객체 생성이 방지돼요.
+
+⚠️ 주의: 기능과 디자인은 절대 변경하면 안 돼요!
+
+시작해보세요! 막히면 언제든 질문해요.
+```
+
+### 나쁜 예시 ❌
+```
+이렇게 하면 돼요:
+
+setSearchOptions((prev) => ({ ...prev, [field]: value }));
+
+(전체 코드 제공은 학습 효과 감소)
+```
+
+---
+
+## 🎯 학습 효과 극대화 원칙
+
+1. **질문으로 이끌기** - 답을 주지 말고 생각하게
+2. **작은 성공 경험** - 단계별 완료감
+3. **연결 짓기** - 이전 스텝과 연결
+4. **반복 강화** - Q&A 참고 유도
diff --git a/.cursor/rules/agent-selector.mdc b/.cursor/rules/agent-selector.mdc
new file mode 100644
index 0000000..e941ad3
--- /dev/null
+++ b/.cursor/rules/agent-selector.mdc
@@ -0,0 +1,253 @@
+---
+description: Agent 자동 선택 규칙 - 상황에 맞는 Agent 활성화 (Cursor Auto 지원)
+globs: ["**/*"]
+alwaysApply: true
+---
+
+# 🎛️ Agent Selector (Agent 선택기)
+
+> ⚠️ **Cursor Auto 모드에서도 이 규칙이 적용됩니다.**
+
+## 🎯 역할
+
+> **사용자 요청에 따라 적절한 Agent를 선택하고 활성화**
+
+---
+
+## 🤖 Agent 목록
+
+| Agent | 파일 | 역할 | 위치 |
+|-------|------|------|------|
+| 🎓 **Tutor** | `tutor-agent.mdc` | 교육/가이드 | `.cursor/agents/` |
+| 💻 **Coder** | `coder-agent.mdc` | 코드 작성/수정 | `.cursor/agents/` |
+| 🔍 **Reviewer** | `reviewer-agent.mdc` | 코드 리뷰 | `.cursor/agents/` |
+| ❓ **Q&A** | `qa-agent.mdc` | 질문 답변 | `.cursor/agents/` |
+
+---
+
+## 🔀 Agent 선택 로직
+
+### 1단계: 키워드 감지
+
+```
+사용자 입력 분석
+    ↓
+키워드/패턴 매칭
+    ↓
+Agent 선택
+    ↓
+해당 Agent 규칙 적용
+```
+
+### 2단계: 우선순위 결정
+
+동시에 여러 Agent가 해당될 때:
+
+```
+1순위: 💻 Coder Agent (코드 수정 요청 시)
+2순위: 🎓 Tutor Agent (스텝 시작 요청 시)
+3순위: 🔍 Reviewer Agent (리뷰 요청 시)
+4순위: ❓ Q&A Agent (질문 시)
+```
+
+---
+
+## 📋 키워드 → Agent 매핑
+
+### 🎓 Tutor Agent 활성화
+
+| 키워드/패턴 | 예시 |
+|------------|------|
+| `N번 하자` | "1번 하자", "스텝 2 시작" |
+| `시작`, `진행` | "시작하자", "다음 스텝" |
+| `가이드`, `안내` | "가이드해줘", "방법 알려줘" |
+| `힌트` | "힌트 줘", "어떻게 접근해?" |
+| `개념 설명` | "SSR 설명해줘" (단, 짧은 답변이면 Q&A) |
+
+### 💻 Coder Agent 활성화
+
+| 키워드/패턴 | 예시 |
+|------------|------|
+| `수정`, `고쳐` | "이거 수정해줘", "고쳐줘" |
+| `구현`, `만들어` | "이 기능 구현해줘" |
+| `추가`, `삭제` | "이거 추가해줘" |
+| `에러 해결` | "에러 고쳐줘" (코드 수정 필요 시) |
+| `설정 변경` | "package.json 수정" |
+
+### 🔍 Reviewer Agent 활성화
+
+| 키워드/패턴 | 예시 |
+|------------|------|
+| `리뷰`, `검토` | "코드 리뷰해줘", "검토해줘" |
+| `봐줘`, `확인` | "이거 봐줘", "맞는지 확인" |
+| `완료`, `끝` | "STEP 1 끝났어", "다 했어" |
+| `넘어가도` | "다음으로 넘어가도 돼?" |
+| `피드백` | "피드백 줘" |
+
+### ❓ Q&A Agent 활성화
+
+| 키워드/패턴 | 예시 |
+|------------|------|
+| `뭐야?`, `뭐지?` | "SSR이 뭐야?" |
+| `왜?`, `이유` | "왜 이렇게 해야 해?" |
+| `차이`, `비교` | "SSR이랑 CSR 차이가 뭐야?" |
+| `언제`, `어디서` | "언제 사용해?" |
+| 에러 질문 | "이 에러 뭐야?" (코드 수정 불필요 시) |
+
+---
+
+## 🔄 복합 상황 처리
+
+### 질문 + 코드 수정 필요
+
+```
+예: "왜 에러가 나? 고쳐줘"
+
+→ 1. Q&A Agent: 원인 설명
+→ 2. Coder Agent: 코드 수정
+```
+
+### 가이드 + 개념 질문
+
+```
+예: "1번 하자. 근데 SSR이 뭐야?"
+
+→ 1. Tutor Agent: 스텝 가이드
+→ 2. Q&A Agent: 개념 설명 (가이드 내 포함 가능)
+```
+
+### 리뷰 + 수정 요청
+
+```
+예: "봐줘. 틀린 부분 고쳐줘"
+
+→ 1. Reviewer Agent: 리뷰 수행
+→ 2. (문제 발견 시) 사용자에게 수정 여부 확인
+→ 3. Coder Agent: 수정 수행
+```
+
+---
+
+## 🚨 특수 규칙
+
+### 테스트 코드 관련
+
+```
+테스트 파일 수정 요청 시:
+→ Coder Agent 거부
+→ "테스트 코드는 수정할 수 없어요. 구현 코드를 수정해야 해요."
+```
+
+### 대규모 작업 요청
+
+```
+복잡한 수정 요청 시:
+→ Coder Agent 경고 모드
+→ "⚠️ 이 작업은 확인이 필요해요. 진행할까요?"
+```
+
+### 애매한 요청
+
+```
+불명확한 요청 시:
+→ 질문으로 명확화
+→ "어떤 작업이 필요한지 확인할게요. [A] 가이드 / [B] 코드 수정 / [C] 리뷰?"
+```
+
+---
+
+## 🤖 Cursor Auto 모드 지원
+
+### Auto 모드에서의 동작
+
+Cursor Auto 모드에서 이 규칙은 자동으로 적용됩니다:
+
+1. **자동 Agent 선택**: 요청 내용에 따라 적절한 Agent 자동 활성화
+2. **규칙 자동 적용**: global-rules.mdc의 절대 규칙 항상 적용
+3. **안전 장치**: 테스트 코드 수정 시도 시 자동 거부
+
+### Auto 모드 주의사항
+
+```
+⚠️ Auto 모드에서도 다음 규칙은 반드시 준수:
+- 테스트 코드 수정 금지
+- 장시간 작업 시 사용자 확인
+- 애매한 부분은 질문
+```
+
+---
+
+## 📊 Agent 활성화 표시
+
+Agent 활성화 시 표시:
+
+```markdown
+🎓 **[Tutor Agent 활성화]**
+---
+(가이드 내용)
+```
+
+```markdown
+💻 **[Coder Agent 활성화]**
+---
+(코드 수정 내용)
+```
+
+```markdown
+🔍 **[Reviewer Agent 활성화]**
+---
+(리뷰 내용)
+```
+
+```markdown
+❓ **[Q&A Agent 활성화]**
+---
+(답변 내용)
+```
+
+---
+
+## 🔀 Agent 전환
+
+작업 중 Agent 전환이 필요할 때:
+
+```markdown
+---
+🔄 **Agent 전환: Tutor → Coder**
+
+코드 수정이 필요한 상황이에요.
+Coder Agent로 전환할게요.
+
+---
+💻 **[Coder Agent 활성화]**
+(코드 수정 진행)
+```
+
+---
+
+## 📋 선택 플로우차트
+
+```
+사용자 입력
+    │
+    ├─ "N번 하자" ──────────────→ 🎓 Tutor
+    │
+    ├─ "수정/구현/고쳐" ─────────→ 💻 Coder
+    │
+    ├─ "리뷰/봐줘/확인" ─────────→ 🔍 Reviewer
+    │
+    ├─ "뭐야?/왜?/차이" ─────────→ ❓ Q&A
+    │
+    └─ 불명확 ──────────────────→ 🤔 질문으로 확인
+```
+
+---
+
+## ⚡ 빠른 참조
+
+| 말하면 | 활성화 Agent |
+|--------|-------------|
+| "1번 하자" | 🎓 Tutor |
+| "이거 고쳐줘" | 💻 Coder |
+| "코드 봐줘" | 🔍 Reviewer |
+| "이게 뭐야?" | ❓ Q&A |
diff --git a/.cursor/rules/global-rules.mdc b/.cursor/rules/global-rules.mdc
new file mode 100644
index 0000000..2aa5246
--- /dev/null
+++ b/.cursor/rules/global-rules.mdc
@@ -0,0 +1,355 @@
+---
+description: 전역 규칙 - 모든 상황에 항상 적용되는 기본 규칙
+globs: ["**/*"]
+alwaysApply: true
+---
+
+# 🌐 Global Rules (전역 규칙)
+
+> ⚠️ **이 규칙은 항상 적용됩니다. Cursor Auto 모드 포함.**
+
+---
+
+## 🎯 기본 원칙
+
+### 1. 응답 언어
+
+- **항상 한국어**로 응답
+- 코드 주석도 **한국어**로 작성
+- 기술 용어는 영어 그대로 (SSR, SSG, Hydration 등)
+
+### 2. 코드 작성 원칙
+
+- **2025년 기준** 프론트엔드 전문가 수준
+- 불필요하고 복잡하지 않게 구현
+- 명확하고 읽기 쉬운 코드
+- 변수명은 누가 봐도 알 수 있게 명확하게
+
+### 3. 렌더링 최적화 작업 원칙
+
+**절대 준수 사항:**
+
+- ✅ `.cursor/` 폴더의 가이드와 규칙에 충실히 따르기
+- ✅ `mockdowns/` 폴더의 작업 계획 문서에 명시된 내용만 구현
+- ✅ **기능과 디자인 변경 금지** - 렌더링 최적화만 수행
+- ✅ 최소한의 수정으로 최대 효과 달성
+
+**작업 전 필수 확인:**
+
+1. `mockdowns/렌더링-최적화-작업계획.md` 확인
+2. `.cursor/rules/`의 관련 가이드 확인
+3. 기능/디자인 변경 여부 확인
+4. 테스트 요구사항 확인
+
+**작업 중 확인:**
+
+- 기능이 변경되지 않았는지 체크
+- 디자인이 변경되지 않았는지 체크
+- 불필요한 추가 기능 구현 여부 확인
+- 렌더링 최적화 목표 달성 여부 확인
+
+> ⚠️ **기능/디자인 변경 = 작업 실패**
+> ✅ **렌더링만 정확히 개선**
+
+---
+
+## 🚨 절대 금지 규칙 (모든 상황)
+
+### ❌ 테스트 코드 수정 금지
+
+```
+🚫 절대 수정 불가 파일:
+- e2e/**/*.spec.ts
+- e2e/**/*.spec.js
+- **/__tests__/**/*
+- **/*.test.ts
+- **/*.test.tsx
+- **/*.test.js
+- **/*.spec.ts
+- **/*.spec.tsx
+- **/*.spec.js
+```
+
+> 테스트 실패 시 → **구현 코드**를 수정해야 함
+
+### ❌ 원본 기능 왜곡 금지
+
+- 기존 기능의 동작 방식 변경 최소화
+- 사이드 이펙트 발생 가능성 사전 검토
+- 기존 로직 흐름 유지
+
+### ❌ Over-engineering 금지
+
+- 요청한 기능만 정확히 구현
+- 불필요한 추가 기능 금지
+- 불필요한 리팩토링 금지
+
+### ❌ 기능 및 디자인 변경 금지 (렌더링 최적화만 수행)
+
+**절대 변경 불가 사항**:
+
+- ❌ **기능 동작 변경** - 검색, 드래그 앤 드롭, 스케줄 추가/삭제 등 모든 기능은 동일하게 동작해야 함
+- ❌ **디자인/UI 변경** - 레이아웃, 색상, 스타일, 반응형 동작 등 모든 UI는 동일해야 함
+- ❌ **데이터 구조 변경** - `schedulesMap`, `Schedule`, `Lecture` 타입 구조 변경 금지
+- ❌ **API 호출 로직 변경** - API 호출 방식이나 데이터 처리 로직 변경 금지
+
+**수정 가능 사항 (렌더링 최적화만)**:
+
+- ✅ **상태 업데이트 방식** - 함수형 업데이트로 변경하여 불필요한 객체 생성 방지
+- ✅ **메모이제이션** - `useMemo`, `useCallback` 추가하여 불필요한 재계산 방지
+- ✅ **key 값 최적화** - 더 안정적인 key 사용으로 React 추적 정확도 향상
+- ✅ **계산 최적화** - 불필요한 재계산 방지, 결과 캐싱
+
+**수정 원칙**:
+
+- 기능과 디자인은 **절대 변경하지 않음**
+- 렌더링 최적화만 수행
+- 최소한의 수정으로 최대 효과 달성
+- 테스트 실패 시에도 기능/디자인 변경 금지
+
+> ⚠️ **기능/디자인 변경 = 작업 실패**
+> ✅ **렌더링만 정확히 개선하여 성능 향상**
+
+---
+
+## ✅ 필수 수행 규칙
+
+### 📚 기존 코드 참고 필수
+
+작업 전 반드시:
+
+1. 프로젝트 컨벤션 확인
+2. 기존 패턴/스타일 파악
+3. 관련 파일 import/export 구조 확인
+
+### 🔍 사전 에러 파악 필수
+
+작업 전 반드시:
+
+1. 경로 확인
+2. 의존성 확인
+3. 환경 설정 확인
+
+### 🧪 테스트 기반 검증 필수
+
+**작성한 코드는 반드시 테스트 코드를 통과해야 함:**
+
+1. **코드 작성 후 필수 확인:**
+   - 관련 테스트 코드 실행 (`pnpm test` 또는 `pnpm run test`)
+   - E2E 테스트 실행 (`pnpm run test:e2e`)
+   - 모든 테스트가 통과하는지 확인
+
+2. **테스트 실패 시:**
+   - ❌ 테스트 코드 수정 금지
+   - ✅ 구현 코드를 수정하여 테스트 통과
+   - 문제 원인 파악 후 수정
+
+3. **테스트 파일 위치:**
+   - E2E 테스트: `e2e/*.spec.ts`
+   - 단위 테스트: `**/__tests__/**/*.test.*`
+
+4. **기능 테스트 필수 통과:**
+   - 모든 기능이 정상 작동하는지 확인
+   - 검색, 드래그 앤 드롭, 스케줄 추가/삭제 등 모든 기능 테스트
+   - UI가 변경되지 않았는지 확인
+   - 테스트 실패 시 → 구현 코드 수정 필수 (단, 기능/디자인 변경 금지)
+
+5. **작업 완료 체크:**
+   ```
+   □ 코드 작성 완료
+   □ 관련 테스트 실행
+   □ 모든 기능 정상 동작 확인
+   □ UI 변경 없음 확인
+   □ 렌더링 최적화 효과 확인 (React DevTools Profiler)
+   □ 실제 동작 확인
+   ```
+
+> 💡 **테스트 통과 = 코드가 제대로 작동한다는 보증**
+> ⚠️ **기능과 디자인은 절대 변경하지 않으면서 렌더링만 최적화**
+
+### ⏰ 장시간/복잡한 작업 시
+
+**먼저 중단하고 사용자 확인 요청:**
+
+```markdown
+⚠️ **작업 확인 필요**
+
+이 작업은 다음 사항을 포함해요:
+
+📁 **수정 예상 파일:**
+
+- [파일 목록]
+
+📝 **예상 변경 사항:**
+
+- [변경 내용]
+
+진행해도 될까요?
+```
+
+### ❓ 애매한 부분은 질문
+
+**임의로 결정하지 않고 질문:**
+
+```markdown
+🤔 **확인이 필요해요:**
+
+1. A 방식과 B 방식 중 어떤 걸 원하시나요?
+2. 이 부분은 [X]로 이해했는데 맞나요?
+```
+
+---
+
+## 🛠️ MCP 도구 활용
+
+필요시 적극 활용:
+
+| 도구               | 용도           |
+| ------------------ | -------------- |
+| `read_file`        | 기존 코드 확인 |
+| `grep`             | 패턴 검색      |
+| `codebase_search`  | 구현 위치 찾기 |
+| `list_dir`         | 구조 파악      |
+| `run_terminal_cmd` | 명령어 실행    |
+
+---
+
+## 🔀 Agent 시스템
+
+### Agent 목록
+
+| Agent       | 역할        | 트리거               |
+| ----------- | ----------- | -------------------- |
+| 🎓 Tutor    | 교육/가이드 | "N번 하자", "힌트"   |
+| 💻 Coder    | 코드 수정   | "고쳐줘", "구현해줘" |
+| 🔍 Reviewer | 코드 리뷰   | "봐줘", "리뷰"       |
+| ❓ Q&A      | 질문 답변   | "뭐야?", "왜?"       |
+
+### Agent 선택 우선순위
+
+```
+1순위: 💻 Coder (코드 수정 요청)
+2순위: 🎓 Tutor (스텝 시작 요청)
+3순위: 🔍 Reviewer (리뷰 요청)
+4순위: ❓ Q&A (질문)
+```
+
+### Agent 활성화 표시 필수
+
+**모든 작업 시 해당 Agent를 명시적으로 표기:**
+
+```markdown
+## 💻 **[Coder Agent 활성화]**
+
+(작업 내용)
+```
+
+```markdown
+## 🎓 **[Tutor Agent 활성화]**
+
+(가이드 내용)
+```
+
+```markdown
+## 🔍 **[Reviewer Agent 활성화]**
+
+(리뷰 내용)
+```
+
+```markdown
+## ❓ **[Q&A Agent 활성화]**
+
+(답변 내용)
+```
+
+**작업 전 체크:**
+
+- ✅ 적절한 Agent 선택
+- ✅ Agent 활성화 표기
+- ✅ 해당 Agent의 규칙 준수
+
+```
+
+---
+
+## 📖 Q&A 기록
+
+질문 시 자동 기록:
+- 위치: `mockdowns/qa/qa_YYYY-MM-DD.md`
+- 유사 질문 시 기존 Q&A 참고 유도
+
+---
+
+## ⚠️ Windows 환경 주의사항
+
+- 환경변수: `cross-env` 사용 필수
+- 경로: `path.join()` 사용
+- 줄바꿈: `"endOfLine": "auto"` 설정
+
+---
+
+## 📋 작업 전 체크리스트
+
+```
+
+□ 테스트 코드인가? → 수정 불가!
+□ 과제 문서(mockdowns/) 확인했나? → 확인 필수 ⭐
+□ 과제 범위를 벗어나지 않는가? → 확인 필수 ⭐
+□ .cursor/rules/의 가이드 확인했나? → 확인 필수
+□ 기존 기능에 영향 있나? → 최소화
+□ 기존 코드 패턴 확인했나? → 확인 필수
+□ 경로/의존성 확인했나? → 확인 필수
+□ 작업 범위가 큰가? → 사용자 확인 필요
+□ 애매한 부분 있나? → 질문 필수
+
+```
+
+## 📋 작업 후 체크리스트
+
+```
+
+□ 코드 작성 완료
+□ 관련 테스트 실행 확인
+□ 모든 테스트 통과 확인
+□ 실제 동작 확인 (필요 시)
+□ mockdowns/after/00_completed-works.md 업데이트 (새 작업/버그 수정 시)
+
+```
+
+---
+
+## 📚 작업 산출물 참고 필수
+
+### 작업 산출물 문서
+
+**위치**: `mockdowns/after/00_completed-works.md`
+
+**용도**:
+- 완료된 작업 내용 기록
+- 구현 패턴 및 해결 방법 참고
+- 버그 수정 내역 확인
+- 앞으로의 작업 시 일관성 유지
+
+**작업 시 필수 사항**:
+1. **새로운 작업 완료 시**: `mockdowns/after/00_completed-works.md`에 추가
+2. **버그 수정 시**: 해당 문서에 수정 내역 추가
+3. **작업 전**: 이전 작업 내용 확인하여 일관성 유지
+4. **비슷한 문제 발생 시**: 기존 해결 방법 참고
+
+**문서 구조**:
+- 완료된 작업 목록
+- 구현 세부사항
+- 버그 수정 내역
+- 주요 구현 패턴
+- 주의사항
+
+---
+
+## 🎯 이 프로젝트 정보
+
+- **프로젝트 목표**: React 렌더링 최적화 - 불필요한 리렌더링 방지
+- **기술 스택**: React + TypeScript + Chakra UI + @dnd-kit
+- **작업 계획**: `mockdowns/렌더링-최적화-작업계획.md` ⭐ **작업 시 참고 필수**
+- **핵심 원칙**: 기능과 디자인 변경 금지, 렌더링만 최적화
+- **Agent 설정**: `.cursor/agents/` 폴더
+```
diff --git a/.cursor/rules/rendering-optimization-guide.mdc b/.cursor/rules/rendering-optimization-guide.mdc
new file mode 100644
index 0000000..2612416
--- /dev/null
+++ b/.cursor/rules/rendering-optimization-guide.mdc
@@ -0,0 +1,303 @@
+---
+description: 렌더링 최적화 작업 가이드 및 규칙
+globs: ["src/**", "mockdowns/**"]
+alwaysApply: false
+---
+
+# 🚀 렌더링 최적화 작업 가이드
+
+> 📎 **연동 규칙**:
+> - `global-rules.mdc` - 전역 규칙 (항상 적용)
+> - `agent-selector.mdc` - Agent 자동 선택
+
+---
+
+## 📋 작업 목표
+
+**2025년 기준 현업 FE 개발자 수준의 렌더링 최적화**
+
+- 불필요한 리렌더링 방지
+- 메모이제이션 적절한 활용
+- 함수형 업데이트로 객체 생성 최소화
+- 안정적인 key 사용
+
+---
+
+## 🎯 핵심 원칙
+
+### ✅ DO (해야 할 것)
+
+1. **기능 유지**
+   - 모든 기능이 정상 작동해야 함
+   - 검색, 드래그 앤 드롭, 스케줄 추가/삭제 등
+
+2. **디자인 유지**
+   - 레이아웃, 색상, 스타일 모두 동일
+   - UI 변경 없음
+
+3. **렌더링 최적화**
+   - `useMemo`, `useCallback` 적절한 사용
+   - 함수형 업데이트 활용
+   - 안정적인 key 사용
+
+### ❌ DON'T (하지 말아야 할 것)
+
+1. **기능 변경 금지**
+   - 동작 방식 변경 X
+   - 새로운 기능 추가 X
+
+2. **디자인 변경 금지**
+   - UI 스타일 변경 X
+   - 레이아웃 변경 X
+
+3. **과도한 최적화 금지**
+   - 불필요한 메모이제이션 X
+   - 가독성을 해치는 최적화 X
+
+---
+
+## 📁 작업 계획 문서
+
+**위치**: `mockdowns/렌더링-최적화-작업계획.md`
+
+**내용**:
+- 프로젝트 분석 요약
+- 발견된 렌더링 이슈
+- 최적화 작업 계획 (Phase별)
+- 주의사항 및 검증 방법
+
+---
+
+## 🔍 작업 전 확인사항
+
+### 필수 확인
+
+1. **작업 계획 확인**
+   ```
+   mockdowns/렌더링-최적화-작업계획.md 읽기
+   ```
+
+2. **현재 상태 파악**
+   ```
+   - 어떤 컴포넌트가 문제인가?
+   - 어떤 부분이 최적화 대상인가?
+   - 예상 효과는 무엇인가?
+   ```
+
+3. **영향 범위 파악**
+   ```
+   - 수정 시 다른 컴포넌트에 영향이 있는가?
+   - 기능이 변경될 위험이 있는가?
+   - 디자인이 변경될 위험이 있는가?
+   ```
+
+---
+
+## 🛠️ 최적화 작업 절차
+
+### 1단계: 안전한 최적화 (먼저 진행)
+
+```
+1. key 안정화
+2. 간단한 메모이제이션
+3. 함수형 업데이트
+```
+
+### 2단계: 상태 업데이트 최적화
+
+```
+1. 객체 스프레드 → 함수형 업데이트
+2. 불필요한 객체 생성 방지
+```
+
+### 3단계: 계산 최적화
+
+```
+1. useMemo로 계산 결과 캐싱
+2. useCallback으로 함수 메모이제이션
+```
+
+### 4단계: 검증
+
+```
+1. 기능 테스트
+2. UI 확인
+3. 성능 측정 (React DevTools Profiler)
+```
+
+---
+
+## 📋 작업 체크리스트
+
+### 작업 전
+
+- [ ] 작업 계획 문서 확인
+- [ ] 현재 코드 분석
+- [ ] 영향 범위 파악
+- [ ] 기능/디자인 변경 위험 확인
+
+### 작업 중
+
+- [ ] 기능이 정상 작동하는지 확인
+- [ ] UI가 변경되지 않았는지 확인
+- [ ] 최소한의 수정만 수행
+- [ ] 불필요한 변경 없음 확인
+
+### 작업 후
+
+- [ ] 모든 기능 테스트
+- [ ] UI 확인
+- [ ] React DevTools Profiler로 성능 확인
+- [ ] 불필요한 리렌더링 감소 확인
+
+---
+
+## 🧪 검증 방법
+
+### 1. 기능 테스트
+
+```bash
+# 개발 서버 실행
+npm run dev
+
+# 수동 테스트
+- 검색 다이얼로그 열기/닫기
+- 검색어 입력 및 필터링
+- 학년, 요일, 시간, 전공 필터 선택
+- 스크롤하여 페이지네이션 확인
+- 스케줄 추가
+- 드래그 앤 드롭으로 스케줄 이동
+- 스케줄 삭제
+- 테이블 복제/삭제
+```
+
+### 2. UI 확인
+
+- [ ] 레이아웃이 변경되지 않았는가?
+- [ ] 색상이 올바르게 표시되는가?
+- [ ] 모달이 정상적으로 열리고 닫히는가?
+- [ ] 테이블이 올바르게 렌더링되는가?
+
+### 3. 성능 측정
+
+**React DevTools Profiler 사용**:
+
+```bash
+# 개발 모드에서 실행
+npm run dev
+
+# React DevTools 설치 후 Profiler 탭 사용
+# 1. "Record" 버튼 클릭
+# 2. 주요 동작 수행 (검색, 드래그, 필터링 등)
+# 3. "Stop" 버튼 클릭
+# 4. 렌더링 시간 및 횟수 확인
+```
+
+---
+
+## 🚨 문제 발생 시
+
+다음 상황이 발생하면 **즉시 중단하고 보고**:
+
+1. ❌ 기능이 작동하지 않음
+2. ❌ UI가 변경됨
+3. ❌ 타입 에러가 해결되지 않음
+4. ❌ 예상치 못한 부작용 발생
+5. ❌ 성능이 오히려 저하됨
+
+---
+
+## 💡 주요 최적화 기법
+
+### 1. 함수형 업데이트
+
+```typescript
+// ❌ 나쁜 예: 매번 새 객체 생성
+setState({ ...state, field: value });
+
+// ✅ 좋은 예: 함수형 업데이트
+setState((prev) => ({ ...prev, field: value }));
+```
+
+### 2. useMemo 활용
+
+```typescript
+// ❌ 나쁜 예: 매번 재계산
+const result = expensiveCalculation(data);
+
+// ✅ 좋은 예: 메모이제이션
+const result = useMemo(
+  () => expensiveCalculation(data),
+  [data]
+);
+```
+
+### 3. 안정적인 key 사용
+
+```typescript
+// ❌ 나쁜 예: 불안정한 key
+key={`${item.title}-${index}`}
+
+// ✅ 좋은 예: 안정적인 key
+key={`${item.id}-${index}`}
+// 또는
+key={item.id}
+```
+
+### 4. useCallback 활용
+
+```typescript
+// ❌ 나쁜 예: 매번 새 함수 생성
+const handleClick = () => { /* ... */ };
+
+// ✅ 좋은 예: 메모이제이션
+const handleClick = useCallback(() => {
+  /* ... */
+}, [dependencies]);
+```
+
+---
+
+## 📊 예상 효과
+
+### 성능 개선 예상치
+
+- **불필요한 리렌더링**: 30-50% 감소 예상
+- **메모리 사용량**: 10-20% 감소 예상
+- **렌더링 시간**: 20-30% 개선 예상
+
+### 주요 개선 포인트
+
+1. 검색 옵션 변경 시 리렌더링 최소화
+2. 드래그 앤 드롭 시 전체 리렌더링 방지
+3. 필터링 계산 최적화
+4. 색상 계산 최적화
+
+---
+
+## 🎯 이 프로젝트 핵심 정보
+
+### 프로젝트 목표
+
+> FE 개발자가 **"React 렌더링 최적화를 이해하고 적용할 수 있는지"** 확인
+
+### 핵심 질문 3가지
+
+1. 어떤 부분이 불필요하게 리렌더링되는가?
+2. 어떻게 메모이제이션을 활용할 수 있는가?
+3. 함수형 업데이트로 객체 생성을 어떻게 최소화할 수 있는가?
+
+### 작업 순서
+
+```
+Phase 1: 안전한 최적화 (key, 간단한 메모이제이션)
+    ↓
+Phase 2: 상태 업데이트 최적화 (함수형 업데이트)
+    ↓
+Phase 3: 계산 최적화 (useMemo, useCallback)
+    ↓
+Phase 4: 검증 및 확인
+```
+
+> 💡 **최소한의 수정으로 최대 효과 달성**
+> ⚠️ **기능과 디자인은 절대 변경하지 않음**
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..8b8c9cc
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,13 @@
+# 빌드 결과물
+dist
+build
+
+# 의존성
+node_modules
+
+# 설정 파일
+.eslintrc.cjs
+
+# 문서 폴더 (마크다운 파일은 파싱 불필요)
+mockdowns/
+
diff --git a/.gitignore b/.gitignore
index a547bf3..2ad5df1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+mockdowns
 
 # Editor directories and files
 .vscode/*
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d9977f5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,83 @@
+# 과제 체크포인트
+
+## 과제 요구사항
+
+- [x] 배포 후 url 제출
+https://jumoooo.github.io/front_7th_chapter4-2/
+
+- [x] API 호출 최적화(`Promise.all` 이해)
+
+- [x] SearchDialog 불필요한 연산 최적화
+- [x] SearchDialog 불필요한 리렌더링 최적화
+
+- [x] 시간표 블록 드래그시 렌더링 최적화
+- [x] 시간표 블록 드롭시 렌더링 최적화
+
+## 과제 셀프회고
+
+<!-- 과제에 대한 회고를 작성해주세요 -->
+
+### 기술적 성장
+
+`Promise.all`은 Promise 배열(또는 iterable)을 병렬로 실행하는데, 
+기존 코드를 보니 `Promise.all` 안에서 `await`를 사용하고 있었습니다. 이렇게 하면 애초에 병렬 처리하려고 만든 내용 안에서 `await`를 해버려서 직렬로 처리되고 있었습니다. 그러니 내부 `await`를 제거하여 병렬로 처리하였습니다.
+
+이미 호출한 API를 다시 호출하지 않도록 하려고 했는데, 처음에는 데이터를 캐싱하려고 했습니다. 그런데 문제가 있었습니다.
+`Promise.all`은 지금 병렬 실행으로 해놨기 때문에, 데이터를 비교할 때 함수들이 거의 동시에 실행하기 때문에 시점 차이로 인해 비교가 안되어 결국 중복 요청을 막지 못합니다.
+그리고 데이터는 첫 번째 요청의 답이 완료된 후에 캐싱되기 때문에, 첫 요청이 아직 진행 중이면 다른 요청에 대해서는 기준이 아직 생성이 안되어서 비교가 불가능합니다.
+그래서 **데이터를 캐싱하는 게 아니라 Promise를 캐싱**하는 방식으로 변경했습니다.
+
+**왜 Promise로 캐싱하면 다를까?**
+요청을 시작하자마자 즉시 캐싱을 진행하여 비교가 가능합니다. 첫 로딩부터 중복을 제거할 수 있습니다.
+
+**그래서 결국 뭐 했나요?**
+기존 Promise 함수를 감싸서 캐시를 전달하는 함수를 생성했습니다. 사용할 때 명시적 식별을 하기 위해서 **문자열**을 **key**로 받게 만들었습니다.
+
+**문자열 없이 하면 어떻게 되나요?**
+참조값이라 같은 걸로 취급 안해줄 수 있습니다. 특히 함수의 매개변수가 서로 다르게 들어있다면 서로 매개변수에 따라 다른 데이터를 호출하는 함수인데 같은 Promise로 오류가 날 가능성이 있습니다. 익명 함수나 고차 함수 사용 시 매번 변할 수 있어서 안정성이 떨어집니다.
+
+```typescript
+const createCacheFetcher = () => {
+  const cache = new Map<string, Promise<unknown>>();
+  return async <T>(key: string, fetcher: () => Promise<T>): Promise<T> => {
+    if (cache.has(key)) {
+      return cache.get(key)! as Promise<T>;
+    }
+    const requestPromise = fetcher().catch((error) => {
+      cache.delete(key);
+      throw error;
+    });
+    cache.set(key, requestPromise); // Promise를 즉시 캐싱
+    return requestPromise;
+  };
+};
+```
+
+이렇게 하니 캐시 후 콘솔을 보면 중복 요청이 제거된 것을 확인할 수 있었습니다.
+
+### 코드 품질
+
+Promise를 캐싱하는 방식으로 중복 API 호출을 방지한 부분이 가장 만족스럽습니다. 데이터를 캐싱하는 것보다 Promise를 캐싱하는 것이 더 효과적이라는 것을 알수 있었습니다.
+
+```typescript
+const createCacheFetcher = () => {
+  const cache = new Map<string, Promise<unknown>>();
+  return async <T>(key: string, fetcher: () => Promise<T>): Promise<T> => {
+    if (cache.has(key)) {
+      return cache.get(key)! as Promise<T>;
+    }
+    const requestPromise = fetcher().catch((error) => {
+      cache.delete(key);
+      throw error;
+    });
+    cache.set(key, requestPromise);
+    return requestPromise;
+  };
+};
+```
+
+이 구현으로 첫 로딩부터 중복 요청을 제거할 수 있었습니다.
+
+### 학습 효과 분석
+
+데이터를 캐싱하는 것만으로는 부족하고, Promise 자체를 캐싱해야 중복 요청을 효과적으로 방지할 수 있다는 것을 배웠습니다. 특히 병렬 처리 환경에서의 캐싱 전략에 대해 깊이 이해할 수 있었습니다.
diff --git a/src/ScheduleDndProvider.tsx b/src/ScheduleDndProvider.tsx
index ca15f52..d5c499e 100644
--- a/src/ScheduleDndProvider.tsx
+++ b/src/ScheduleDndProvider.tsx
@@ -1,4 +1,10 @@
-import { DndContext, Modifier, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import {
+  DndContext,
+  Modifier,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
 import { PropsWithChildren } from "react";
 import { CellSize, DAY_LABELS } from "./constants.ts";
 import { useScheduleContext } from "./ScheduleContext.tsx";
@@ -17,19 +23,30 @@ function createSnapModifier(): Modifier {
     const maxX = containerRight - right;
     const maxY = containerBottom - bottom;
 
-
-    return ({
+    return {
       ...transform,
-      x: Math.min(Math.max(Math.round(transform.x / CellSize.WIDTH) * CellSize.WIDTH, minX), maxX),
-      y: Math.min(Math.max(Math.round(transform.y / CellSize.HEIGHT) * CellSize.HEIGHT, minY), maxY),
-    })
+      x: Math.min(
+        Math.max(
+          Math.round(transform.x / CellSize.WIDTH) * CellSize.WIDTH,
+          minX
+        ),
+        maxX
+      ),
+      y: Math.min(
+        Math.max(
+          Math.round(transform.y / CellSize.HEIGHT) * CellSize.HEIGHT,
+          minY
+        ),
+        maxY
+      ),
+    };
   };
 }
 
-const modifiers = [createSnapModifier()]
+const modifiers = [createSnapModifier()];
 
 export default function ScheduleDndProvider({ children }: PropsWithChildren) {
-  const { schedulesMap, setSchedulesMap } = useScheduleContext();
+  const { setSchedulesMap } = useScheduleContext();
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -42,29 +59,38 @@ export default function ScheduleDndProvider({ children }: PropsWithChildren) {
   const handleDragEnd = (event: any) => {
     const { active, delta } = event;
     const { x, y } = delta;
-    const [tableId, index] = active.id.split(':');
-    const schedule = schedulesMap[tableId][index];
-    const nowDayIndex = DAY_LABELS.indexOf(schedule.day as typeof DAY_LABELS[number])
-    const moveDayIndex = Math.floor(x / 80);
-    const moveTimeIndex = Math.floor(y / 30);
+    const [tableId, index] = active.id.split(":");
 
-    setSchedulesMap({
-      ...schedulesMap,
-      [tableId]: schedulesMap[tableId].map((targetSchedule, targetIndex) => {
-        if (targetIndex !== Number(index)) {
-          return { ...targetSchedule }
-        }
-        return {
-          ...targetSchedule,
-          day: DAY_LABELS[nowDayIndex + moveDayIndex],
-          range: targetSchedule.range.map(time => time + moveTimeIndex),
-        }
-      })
-    })
+    // 함수형 업데이트로 최신 상태 보장 및 불필요한 객체 생성 방지
+    setSchedulesMap((prev) => {
+      const schedule = prev[tableId][Number(index)];
+      const nowDayIndex = DAY_LABELS.indexOf(
+        schedule.day as (typeof DAY_LABELS)[number]
+      );
+      const moveDayIndex = Math.floor(x / 80);
+      const moveTimeIndex = Math.floor(y / 30);
+
+      return {
+        ...prev,
+        [tableId]: prev[tableId].map((targetSchedule, targetIndex) => {
+          if (targetIndex !== Number(index)) {
+            return targetSchedule; // 스프레드 제거 - 불필요한 객체 생성 방지
+          }
+          return {
+            ...targetSchedule,
+            day: DAY_LABELS[nowDayIndex + moveDayIndex],
+            range: targetSchedule.range.map((time) => time + moveTimeIndex),
+          };
+        }),
+      };
+    });
   };
 
   return (
-    <DndContext sensors={sensors} onDragEnd={handleDragEnd} modifiers={modifiers}>
+    <DndContext
+      sensors={sensors}
+      onDragEnd={handleDragEnd}
+      modifiers={modifiers}>
       {children}
     </DndContext>
   );
diff --git a/src/ScheduleTable.tsx b/src/ScheduleTable.tsx
index ea17b6a..800fdb8 100644
--- a/src/ScheduleTable.tsx
+++ b/src/ScheduleTable.tsx
@@ -17,7 +17,7 @@ import { Schedule } from "./types.ts";
 import { fill2, parseHnM } from "./utils.ts";
 import { useDndContext, useDraggable } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
-import { ComponentProps, Fragment } from "react";
+import { ComponentProps, Fragment, memo, useMemo } from "react";
 
 interface Props {
   tableId: string;
@@ -38,25 +38,35 @@ const TIMES = [
     .map((v) => `${parseHnM(v)}~${parseHnM(v + 50 * 분)}`),
 ] as const;
 
-const ScheduleTable = ({ tableId, schedules, onScheduleTimeClick, onDeleteButtonClick }: Props) => {
+// ScheduleTable 컴포넌트 메모이제이션 - 드래그 중 불필요한 리렌더링 방지
+const ScheduleTable = memo(({ tableId, schedules, onScheduleTimeClick, onDeleteButtonClick }: Props) => {
 
-  const getColor = (lectureId: string): string => {
+  // 색상 맵 메모이제이션 - 한 번만 계산하고 재사용
+  const colorMap = useMemo(() => {
     const lectures = [...new Set(schedules.map(({ lecture }) => lecture.id))];
     const colors = ["#fdd", "#ffd", "#dff", "#ddf", "#fdf", "#dfd"];
-    return colors[lectures.indexOf(lectureId) % colors.length];
+    const map = new Map<string, string>();
+    lectures.forEach((lectureId, index) => {
+      map.set(lectureId, colors[index % colors.length]);
+    });
+    return map;
+  }, [schedules]);
+
+  const getColor = (lectureId: string): string => {
+    return colorMap.get(lectureId) || "#fdd";
   };
 
   const dndContext = useDndContext();
 
-  const getActiveTableId = () => {
+  // activeTableId 메모이제이션 - dndContext.active?.id가 변경될 때만 재계산
+  // 드래그 중에는 activeId만 변경되므로, 이 값만 추적하여 불필요한 재계산 방지
+  const activeTableId = useMemo(() => {
     const activeId = dndContext.active?.id;
     if (activeId) {
       return String(activeId).split(":")[0];
     }
     return null;
-  }
-
-  const activeTableId = getActiveTableId();
+  }, [dndContext.active?.id]);
 
   return (
     <Box
@@ -113,7 +123,7 @@ const ScheduleTable = ({ tableId, schedules, onScheduleTimeClick, onDeleteButton
 
       {schedules.map((schedule, index) => (
         <DraggableSchedule
-          key={`${schedule.lecture.title}-${index}`}
+          key={`${tableId}:${index}`}
           id={`${tableId}:${index}`}
           data={schedule}
           bg={getColor(schedule.lecture.id)}
@@ -125,9 +135,20 @@ const ScheduleTable = ({ tableId, schedules, onScheduleTimeClick, onDeleteButton
       ))}
     </Box>
   );
-};
+}, (prevProps, nextProps) => {
+  // 커스텀 비교 함수 - schedules 배열 참조와 tableId만 비교
+  // onScheduleTimeClick, onDeleteButtonClick은 함수이므로 참조 비교
+  // 드래그 중에는 schedules와 tableId가 변경되지 않으므로 리렌더링 방지
+  return (
+    prevProps.tableId === nextProps.tableId &&
+    prevProps.schedules === nextProps.schedules &&
+    prevProps.onScheduleTimeClick === nextProps.onScheduleTimeClick &&
+    prevProps.onDeleteButtonClick === nextProps.onDeleteButtonClick
+  );
+});
 
-const DraggableSchedule = ({
+// DraggableSchedule 컴포넌트 메모이제이션 - 드래그 중 불필요한 리렌더링 방지
+const DraggableSchedule = memo(({
  id,
  data,
  bg,
@@ -175,6 +196,14 @@ const DraggableSchedule = ({
       </PopoverContent>
     </Popover>
   );
-}
+}, (prevProps, nextProps) => {
+  // 커스텀 비교 함수 - id, data, bg만 비교 (onDeleteButtonClick은 무시)
+  // 드래그 중에는 id, data, bg가 변경되지 않으므로 리렌더링 방지
+  return (
+    prevProps.id === nextProps.id &&
+    prevProps.data === nextProps.data &&
+    prevProps.bg === nextProps.bg
+  );
+});
 
 export default ScheduleTable;
diff --git a/src/ScheduleTables.tsx b/src/ScheduleTables.tsx
index 44dbd7a..394e5b3 100644
--- a/src/ScheduleTables.tsx
+++ b/src/ScheduleTables.tsx
@@ -2,7 +2,7 @@ import { Button, ButtonGroup, Flex, Heading, Stack } from "@chakra-ui/react";
 import ScheduleTable from "./ScheduleTable.tsx";
 import { useScheduleContext } from "./ScheduleContext.tsx";
 import SearchDialog from "./SearchDialog.tsx";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 export const ScheduleTables = () => {
   const { schedulesMap, setSchedulesMap } = useScheduleContext();
@@ -12,50 +12,110 @@ export const ScheduleTables = () => {
     time?: number;
   } | null>(null);
 
-  const disabledRemoveButton = Object.keys(schedulesMap).length === 1;
+  // disabledRemoveButton 메모이제이션 - 불필요한 재계산 방지
+  const disabledRemoveButton = useMemo(
+    () => Object.keys(schedulesMap).length === 1,
+    [schedulesMap]
+  );
 
   const duplicate = (targetId: string) => {
-    setSchedulesMap(prev => ({
+    setSchedulesMap((prev) => ({
       ...prev,
-      [`schedule-${Date.now()}`]: [...prev[targetId]]
-    }))
+      [`schedule-${Date.now()}`]: [...prev[targetId]],
+    }));
   };
 
   const remove = (targetId: string) => {
-    setSchedulesMap(prev => {
+    setSchedulesMap((prev) => {
       delete prev[targetId];
       return { ...prev };
-    })
+    });
   };
 
+  // 각 tableId마다 onScheduleTimeClick, onDeleteButtonClick 함수를 메모이제이션
+  // 드래그 중 불필요한 리렌더링 방지
+  const handlersMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        onScheduleTimeClick: (timeInfo: { day: string; time: number }) => void;
+        onDeleteButtonClick: ({
+          day,
+          time,
+        }: {
+          day: string;
+          time: number;
+        }) => void;
+      }
+    >();
+
+    Object.keys(schedulesMap).forEach((tableId) => {
+      map.set(tableId, {
+        onScheduleTimeClick: (timeInfo: { day: string; time: number }) => {
+          setSearchInfo({ tableId, ...timeInfo });
+        },
+        onDeleteButtonClick: ({ day, time }: { day: string; time: number }) => {
+          setSchedulesMap((prev) => ({
+            ...prev,
+            [tableId]: prev[tableId].filter(
+              (schedule) =>
+                schedule.day !== day || !schedule.range.includes(time)
+            ),
+          }));
+        },
+      });
+    });
+
+    return map;
+  }, [schedulesMap, setSchedulesMap]);
+
   return (
     <>
       <Flex w="full" gap={6} p={6} flexWrap="wrap">
         {Object.entries(schedulesMap).map(([tableId, schedules], index) => (
           <Stack key={tableId} width="600px">
             <Flex justifyContent="space-between" alignItems="center">
-              <Heading as="h3" fontSize="lg">시간표 {index + 1}</Heading>
+              <Heading as="h3" fontSize="lg">
+                시간표 {index + 1}
+              </Heading>
               <ButtonGroup size="sm" isAttached>
-                <Button colorScheme="green" onClick={() => setSearchInfo({ tableId })}>시간표 추가</Button>
-                <Button colorScheme="green" mx="1px" onClick={() => duplicate(tableId)}>복제</Button>
-                <Button colorScheme="green" isDisabled={disabledRemoveButton}
-                        onClick={() => remove(tableId)}>삭제</Button>
+                <Button
+                  colorScheme="green"
+                  onClick={() => setSearchInfo({ tableId })}>
+                  시간표 추가
+                </Button>
+                <Button
+                  colorScheme="green"
+                  mx="1px"
+                  onClick={() => duplicate(tableId)}>
+                  복제
+                </Button>
+                <Button
+                  colorScheme="green"
+                  isDisabled={disabledRemoveButton}
+                  onClick={() => remove(tableId)}>
+                  삭제
+                </Button>
               </ButtonGroup>
             </Flex>
             <ScheduleTable
-              key={`schedule-table-${index}`}
+              key={tableId}
               schedules={schedules}
               tableId={tableId}
-              onScheduleTimeClick={(timeInfo) => setSearchInfo({ tableId, ...timeInfo })}
-              onDeleteButtonClick={({ day, time }) => setSchedulesMap((prev) => ({
-                ...prev,
-                [tableId]: prev[tableId].filter(schedule => schedule.day !== day || !schedule.range.includes(time))
-              }))}
+              onScheduleTimeClick={
+                handlersMap.get(tableId)?.onScheduleTimeClick
+              }
+              onDeleteButtonClick={
+                handlersMap.get(tableId)?.onDeleteButtonClick
+              }
             />
           </Stack>
         ))}
       </Flex>
-      <SearchDialog searchInfo={searchInfo} onClose={() => setSearchInfo(null)}/>
+      <SearchDialog
+        searchInfo={searchInfo}
+        onClose={() => setSearchInfo(null)}
+      />
     </>
   );
-}
+};
diff --git a/src/SearchDialog.tsx b/src/SearchDialog.tsx
index 593951f..f7d8780 100644
--- a/src/SearchDialog.tsx
+++ b/src/SearchDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Box,
   Button,
@@ -45,12 +45,12 @@ interface Props {
 }
 
 interface SearchOption {
-  query?: string,
-  grades: number[],
-  days: string[],
-  times: number[],
-  majors: string[],
-  credits?: number,
+  query?: string;
+  grades: number[];
+  days: string[];
+  times: number[];
+  majors: string[];
+  credits?: number;
 }
 
 const TIME_SLOTS = [
@@ -82,18 +82,376 @@ const TIME_SLOTS = [
 
 const PAGE_SIZE = 100;
 
-const fetchMajors = () => axios.get<Lecture[]>('/schedules-majors.json');
-const fetchLiberalArts = () => axios.get<Lecture[]>('/schedules-liberal-arts.json');
+// 검색어 필터 컴포넌트 - 독립적으로 메모이제이션
+const QueryFilter = memo(
+  ({
+    value,
+    onChange,
+  }: {
+    value: string;
+    onChange: (value: string) => void;
+  }) => {
+    return (
+      <FormControl>
+        <FormLabel>검색어</FormLabel>
+        <Input
+          placeholder="과목명 또는 과목코드"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      </FormControl>
+    );
+  }
+);
+QueryFilter.displayName = "QueryFilter";
+
+// 학점 필터 컴포넌트 - 독립적으로 메모이제이션
+const CreditsFilter = memo(
+  ({
+    value,
+    onChange,
+  }: {
+    value?: number;
+    onChange: (value?: number) => void;
+  }) => {
+    return (
+      <FormControl>
+        <FormLabel>학점</FormLabel>
+        <Select
+          value={value}
+          onChange={(e) =>
+            onChange(e.target.value ? Number(e.target.value) : undefined)
+          }>
+          <option value="">전체</option>
+          <option value="1">1학점</option>
+          <option value="2">2학점</option>
+          <option value="3">3학점</option>
+        </Select>
+      </FormControl>
+    );
+  }
+);
+CreditsFilter.displayName = "CreditsFilter";
+
+// 학년 필터 컴포넌트 - 독립적으로 메모이제이션
+const GradesFilter = memo(
+  ({
+    value,
+    onChange,
+  }: {
+    value: number[];
+    onChange: (value: number[]) => void;
+  }) => {
+    return (
+      <FormControl>
+        <FormLabel>학년</FormLabel>
+        <CheckboxGroup
+          value={value}
+          onChange={(values) => onChange(values.map(Number))}>
+          <HStack spacing={4}>
+            {[1, 2, 3, 4].map((grade) => (
+              <Checkbox key={grade} value={grade}>
+                {grade}학년
+              </Checkbox>
+            ))}
+          </HStack>
+        </CheckboxGroup>
+      </FormControl>
+    );
+  }
+);
+GradesFilter.displayName = "GradesFilter";
+
+// 요일 필터 컴포넌트 - 독립적으로 메모이제이션
+const DaysFilter = memo(
+  ({
+    value,
+    onChange,
+  }: {
+    value: string[];
+    onChange: (value: string[]) => void;
+  }) => {
+    return (
+      <FormControl>
+        <FormLabel>요일</FormLabel>
+        <CheckboxGroup
+          value={value}
+          onChange={(values) => onChange(values as string[])}>
+          <HStack spacing={4}>
+            {DAY_LABELS.map((day) => (
+              <Checkbox key={day} value={day}>
+                {day}
+              </Checkbox>
+            ))}
+          </HStack>
+        </CheckboxGroup>
+      </FormControl>
+    );
+  }
+);
+DaysFilter.displayName = "DaysFilter";
+
+// 시간 필터 컴포넌트 - 독립적으로 메모이제이션
+const TimesFilter = memo(
+  ({
+    value,
+    sortedTimes,
+    onChange,
+  }: {
+    value: number[];
+    sortedTimes: number[];
+    onChange: (value: number[]) => void;
+  }) => {
+    return (
+      <FormControl>
+        <FormLabel>시간</FormLabel>
+        <CheckboxGroup
+          colorScheme="green"
+          value={value}
+          onChange={(values) => onChange(values.map(Number))}>
+          <Wrap spacing={1} mb={2}>
+            {sortedTimes.map((time) => (
+              <Tag key={time} size="sm" variant="outline" colorScheme="blue">
+                <TagLabel>{time}교시</TagLabel>
+                <TagCloseButton
+                  onClick={() => onChange(value.filter((v) => v !== time))}
+                />
+              </Tag>
+            ))}
+          </Wrap>
+          <Stack
+            spacing={2}
+            overflowY="auto"
+            h="100px"
+            border="1px solid"
+            borderColor="gray.200"
+            borderRadius={5}
+            p={2}>
+            {TIME_SLOTS.map(({ id, label }) => (
+              <Box key={id}>
+                <Checkbox key={id} size="sm" value={id}>
+                  {id}교시({label})
+                </Checkbox>
+              </Box>
+            ))}
+          </Stack>
+        </CheckboxGroup>
+      </FormControl>
+    );
+  }
+);
+TimesFilter.displayName = "TimesFilter";
+
+// 전공 필터 컴포넌트 - 독립적으로 메모이제이션
+const MajorsFilter = memo(
+  ({
+    value,
+    allMajors,
+    onChange,
+  }: {
+    value: string[];
+    allMajors: string[];
+    onChange: (value: string[]) => void;
+  }) => {
+    return (
+      <FormControl>
+        <FormLabel>전공</FormLabel>
+        <CheckboxGroup
+          colorScheme="green"
+          value={value}
+          onChange={(values) => onChange(values as string[])}>
+          <Wrap spacing={1} mb={2}>
+            {value.map((major) => (
+              <Tag key={major} size="sm" variant="outline" colorScheme="blue">
+                <TagLabel>{major.split("<p>").pop()}</TagLabel>
+                <TagCloseButton
+                  onClick={() => onChange(value.filter((v) => v !== major))}
+                />
+              </Tag>
+            ))}
+          </Wrap>
+          <Stack
+            spacing={2}
+            overflowY="auto"
+            h="100px"
+            border="1px solid"
+            borderColor="gray.200"
+            borderRadius={5}
+            p={2}>
+            {allMajors.map((major) => (
+              <Box key={major}>
+                <Checkbox key={major} size="sm" value={major}>
+                  {major.replace(/<p>/gi, " ")}
+                </Checkbox>
+              </Box>
+            ))}
+          </Stack>
+        </CheckboxGroup>
+      </FormControl>
+    );
+  }
+);
+MajorsFilter.displayName = "MajorsFilter";
+
+// 필터 그룹 컨테이너 컴포넌트들 - 독립적으로 메모이제이션
+// 각 Row는 자신이 감싸는 필터의 props만 받아서 독립적으로 리렌더링
+const FilterRow1 = memo(
+  ({
+    queryValue,
+    queryOnChange,
+    creditsValue,
+    creditsOnChange,
+  }: {
+    queryValue: string;
+    queryOnChange: (value: string) => void;
+    creditsValue?: number;
+    creditsOnChange: (value?: number) => void;
+  }) => {
+    return (
+      <HStack spacing={4}>
+        <QueryFilter value={queryValue} onChange={queryOnChange} />
+        <CreditsFilter value={creditsValue} onChange={creditsOnChange} />
+      </HStack>
+    );
+  },
+  (prevProps, nextProps) => {
+    // query와 credits만 비교하여 리렌더링 여부 결정
+    return (
+      prevProps.queryValue === nextProps.queryValue &&
+      prevProps.queryOnChange === nextProps.queryOnChange &&
+      prevProps.creditsValue === nextProps.creditsValue &&
+      prevProps.creditsOnChange === nextProps.creditsOnChange
+    );
+  }
+);
+FilterRow1.displayName = "FilterRow1";
+
+const FilterRow2 = memo(
+  ({
+    gradesValue,
+    gradesOnChange,
+    daysValue,
+    daysOnChange,
+  }: {
+    gradesValue: number[];
+    gradesOnChange: (value: number[]) => void;
+    daysValue: string[];
+    daysOnChange: (value: string[]) => void;
+  }) => {
+    return (
+      <HStack spacing={4}>
+        <GradesFilter value={gradesValue} onChange={gradesOnChange} />
+        <DaysFilter value={daysValue} onChange={daysOnChange} />
+      </HStack>
+    );
+  },
+  (prevProps, nextProps) => {
+    // grades와 days만 비교하여 리렌더링 여부 결정
+    return (
+      prevProps.gradesValue === nextProps.gradesValue &&
+      prevProps.gradesOnChange === nextProps.gradesOnChange &&
+      prevProps.daysValue === nextProps.daysValue &&
+      prevProps.daysOnChange === nextProps.daysOnChange
+    );
+  }
+);
+FilterRow2.displayName = "FilterRow2";
+
+const FilterRow3 = memo(
+  ({
+    timesValue,
+    sortedTimes,
+    timesOnChange,
+    majorsValue,
+    allMajors,
+    majorsOnChange,
+  }: {
+    timesValue: number[];
+    sortedTimes: number[];
+    timesOnChange: (value: number[]) => void;
+    majorsValue: string[];
+    allMajors: string[];
+    majorsOnChange: (value: string[]) => void;
+  }) => {
+    return (
+      <HStack spacing={4}>
+        <TimesFilter
+          value={timesValue}
+          sortedTimes={sortedTimes}
+          onChange={timesOnChange}
+        />
+        <MajorsFilter
+          value={majorsValue}
+          allMajors={allMajors}
+          onChange={majorsOnChange}
+        />
+      </HStack>
+    );
+  },
+  (prevProps, nextProps) => {
+    // times와 majors만 비교하여 리렌더링 여부 결정
+    return (
+      prevProps.timesValue === nextProps.timesValue &&
+      prevProps.sortedTimes === nextProps.sortedTimes &&
+      prevProps.timesOnChange === nextProps.timesOnChange &&
+      prevProps.majorsValue === nextProps.majorsValue &&
+      prevProps.allMajors === nextProps.allMajors &&
+      prevProps.majorsOnChange === nextProps.majorsOnChange
+    );
+  }
+);
+FilterRow3.displayName = "FilterRow3";
+
+const fetchMajors = () => axios.get<Lecture[]>("/schedules-majors.json");
+const fetchLiberalArts = () =>
+  axios.get<Lecture[]>("/schedules-liberal-arts.json");
 
 // TODO: 이 코드를 개선해서 API 호출을 최소화 해보세요 + Promise.all이 현재 잘못 사용되고 있습니다. 같이 개선해주세요.
-const fetchAllLectures = async () => await Promise.all([
-  (console.log('API Call 1', performance.now()), await fetchMajors()),
-  (console.log('API Call 2', performance.now()), await fetchLiberalArts()),
-  (console.log('API Call 3', performance.now()), await fetchMajors()),
-  (console.log('API Call 4', performance.now()), await fetchLiberalArts()),
-  (console.log('API Call 5', performance.now()), await fetchMajors()),
-  (console.log('API Call 6', performance.now()), await fetchLiberalArts()),
-]);
+// 개선 완료 : 개선만 진행하고 기존의 코드는 최대한 유지했습니다.
+// 1. 캐시 로직을 담은 클로저 함수 정의
+const createCacheFetcher = () => {
+  // Promise를 저장할 공간 (Key: API 이름 혹은 URL, Value: 해당 요청의 Promise)
+  const cache = new Map<string, Promise<unknown>>();
+
+  // 제네릭 타입을 명시적으로 선언
+  return async <T,>(key: string, fetcher: () => Promise<T>): Promise<T> => {
+    // 이미 캐시에 해당 키가 있다면, 새로 호출하지 않고 기존 Promise를 반환
+    if (cache.has(key)) {
+      return cache.get(key)! as Promise<T>;
+    }
+
+    // 캐시에 없다면 fetcher를 실행하고 그 Promise를 캐시에 저장
+    // 에러 발생 시 캐시에서 제거하여 다음 요청 시 재시도 가능하도록 함
+    const requestPromise = fetcher().catch((error) => {
+      cache.delete(key); // 에러 발생 시 캐시에서 제거
+      throw error;
+    });
+    cache.set(key, requestPromise);
+
+    return requestPromise;
+  };
+};
+
+// 2. 캐시 함수 생성
+const cachedFetch = createCacheFetcher();
+
+// 3. 모든 API 호출 함수 정의
+const fetchAllLectures = async () => {
+  return await Promise.all([
+    (console.log("API Call 1", performance.now()),
+    cachedFetch("majors", fetchMajors)),
+    (console.log("API Call 2", performance.now()),
+    cachedFetch("liberalArts", fetchLiberalArts)),
+    (console.log("API Call 3", performance.now()),
+    cachedFetch("majors", fetchMajors)),
+    (console.log("API Call 4", performance.now()),
+    cachedFetch("liberalArts", fetchLiberalArts)),
+    (console.log("API Call 5", performance.now()),
+    cachedFetch("majors", fetchMajors)),
+    (console.log("API Call 6", performance.now()),
+    cachedFetch("liberalArts", fetchLiberalArts)),
+  ]);
+};
 
 // TODO: 이 컴포넌트에서 불필요한 연산이 발생하지 않도록 다양한 방식으로 시도해주세요.
 const SearchDialog = ({ searchInfo, onClose }: Props) => {
@@ -104,79 +462,146 @@ const SearchDialog = ({ searchInfo, onClose }: Props) => {
   const [lectures, setLectures] = useState<Lecture[]>([]);
   const [page, setPage] = useState(1);
   const [searchOptions, setSearchOptions] = useState<SearchOption>({
-    query: '',
+    query: "",
     grades: [],
     days: [],
     times: [],
     majors: [],
   });
 
-  const getFilteredLectures = () => {
-    const { query = '', credits, grades, days, times, majors } = searchOptions;
+  // 검색 결과 필터링 - lectures나 searchOptions가 변경될 때만 재계산
+  const filteredLectures = useMemo(() => {
+    const { query = "", credits, grades, days, times, majors } = searchOptions;
     return lectures
-      .filter(lecture =>
-        lecture.title.toLowerCase().includes(query.toLowerCase()) ||
-        lecture.id.toLowerCase().includes(query.toLowerCase())
+      .filter(
+        (lecture) =>
+          lecture.title.toLowerCase().includes(query.toLowerCase()) ||
+          lecture.id.toLowerCase().includes(query.toLowerCase())
       )
-      .filter(lecture => grades.length === 0 || grades.includes(lecture.grade))
-      .filter(lecture => majors.length === 0 || majors.includes(lecture.major))
-      .filter(lecture => !credits || lecture.credits.startsWith(String(credits)))
-      .filter(lecture => {
+      .filter(
+        (lecture) => grades.length === 0 || grades.includes(lecture.grade)
+      )
+      .filter(
+        (lecture) => majors.length === 0 || majors.includes(lecture.major)
+      )
+      .filter(
+        (lecture) => !credits || lecture.credits.startsWith(String(credits))
+      )
+      .filter((lecture) => {
         if (days.length === 0) {
           return true;
         }
-        const schedules = lecture.schedule ? parseSchedule(lecture.schedule) : [];
-        return schedules.some(s => days.includes(s.day));
+        const schedules = lecture.schedule
+          ? parseSchedule(lecture.schedule)
+          : [];
+        return schedules.some((s) => days.includes(s.day));
       })
-      .filter(lecture => {
+      .filter((lecture) => {
         if (times.length === 0) {
           return true;
         }
-        const schedules = lecture.schedule ? parseSchedule(lecture.schedule) : [];
-        return schedules.some(s => s.range.some(time => times.includes(time)));
+        const schedules = lecture.schedule
+          ? parseSchedule(lecture.schedule)
+          : [];
+        return schedules.some((s) =>
+          s.range.some((time) => times.includes(time))
+        );
       });
-  }
+  }, [lectures, searchOptions]);
+
+  // 마지막 페이지 계산 - filteredLectures가 변경될 때만 재계산
+  const lastPage = useMemo(
+    () => Math.ceil(filteredLectures.length / PAGE_SIZE),
+    [filteredLectures.length]
+  );
+
+  // 보이는 강의 목록 - filteredLectures나 page가 변경될 때만 재계산
+  const visibleLectures = useMemo(
+    () => filteredLectures.slice(0, page * PAGE_SIZE),
+    [filteredLectures, page]
+  );
+
+  // times 정렬 메모이제이션 - 렌더링 중 정렬 연산 방지
+  const sortedTimes = useMemo(
+    () => [...searchOptions.times].sort((a, b) => a - b),
+    [searchOptions.times]
+  );
+
+  // 모든 전공 목록 - lectures가 변경될 때만 재계산
+  const allMajors = useMemo(
+    () => [...new Set(lectures.map((lecture) => lecture.major))],
+    [lectures]
+  );
 
-  const filteredLectures = getFilteredLectures();
-  const lastPage = Math.ceil(filteredLectures.length / PAGE_SIZE);
-  const visibleLectures = filteredLectures.slice(0, page * PAGE_SIZE);
-  const allMajors = [...new Set(lectures.map(lecture => lecture.major))];
+  // 검색 옵션 변경 핸들러들 - 각 필터별로 독립적으로 메모이제이션
+  const handleQueryChange = useCallback((value: string) => {
+    setPage(1);
+    setSearchOptions((prev) => ({ ...prev, query: value }));
+    loaderWrapperRef.current?.scrollTo(0, 0);
+  }, []);
 
-  const changeSearchOption = (field: keyof SearchOption, value: SearchOption[typeof field]) => {
+  const handleCreditsChange = useCallback((value?: number) => {
     setPage(1);
-    setSearchOptions(({ ...searchOptions, [field]: value }));
+    setSearchOptions((prev) => ({ ...prev, credits: value }));
     loaderWrapperRef.current?.scrollTo(0, 0);
-  };
+  }, []);
 
+  const handleGradesChange = useCallback((value: number[]) => {
+    setPage(1);
+    setSearchOptions((prev) => ({ ...prev, grades: value }));
+    loaderWrapperRef.current?.scrollTo(0, 0);
+  }, []);
+
+  const handleDaysChange = useCallback((value: string[]) => {
+    setPage(1);
+    setSearchOptions((prev) => ({ ...prev, days: value }));
+    loaderWrapperRef.current?.scrollTo(0, 0);
+  }, []);
+
+  const handleTimesChange = useCallback((value: number[]) => {
+    setPage(1);
+    setSearchOptions((prev) => ({ ...prev, times: value }));
+    loaderWrapperRef.current?.scrollTo(0, 0);
+  }, []);
+
+  const handleMajorsChange = useCallback((value: string[]) => {
+    setPage(1);
+    setSearchOptions((prev) => ({ ...prev, majors: value }));
+    loaderWrapperRef.current?.scrollTo(0, 0);
+  }, []);
+
+  // 스케쥴 추가
   const addSchedule = (lecture: Lecture) => {
     if (!searchInfo) return;
 
     const { tableId } = searchInfo;
 
-    const schedules = parseSchedule(lecture.schedule).map(schedule => ({
+    const schedules = parseSchedule(lecture.schedule).map((schedule) => ({
       ...schedule,
-      lecture
+      lecture,
     }));
 
-    setSchedulesMap(prev => ({
+    setSchedulesMap((prev) => ({
       ...prev,
-      [tableId]: [...prev[tableId], ...schedules]
+      [tableId]: [...prev[tableId], ...schedules],
     }));
 
     onClose();
   };
 
+  // 모든 API 호출
   useEffect(() => {
     const start = performance.now();
-    console.log('API 호출 시작: ', start)
-    fetchAllLectures().then(results => {
+    console.log("API 호출 시작: ", start);
+    fetchAllLectures().then((results) => {
       const end = performance.now();
-      console.log('모든 API 호출 완료 ', end)
-      console.log('API 호출에 걸린 시간(ms): ', end - start)
-      setLectures(results.flatMap(result => result.data));
-    })
+      console.log("모든 API 호출 완료 ", end);
+      console.log("API 호출에 걸린 시간(ms): ", end - start);
+      setLectures(results.flatMap((result) => result.data));
+    });
   }, []);
 
+  // 스크롤 관찰
   useEffect(() => {
     const $loader = loaderRef.current;
     const $loaderWrapper = loaderWrapperRef.current;
@@ -186,9 +611,9 @@ const SearchDialog = ({ searchInfo, onClose }: Props) => {
     }
 
     const observer = new IntersectionObserver(
-      entries => {
+      (entries) => {
         if (entries[0].isIntersecting) {
-          setPage(prevPage => Math.min(lastPage, prevPage + 1));
+          setPage((prevPage) => Math.min(lastPage, prevPage + 1));
         }
       },
       { threshold: 0, root: $loaderWrapper }
@@ -199,139 +624,47 @@ const SearchDialog = ({ searchInfo, onClose }: Props) => {
     return () => observer.unobserve($loader);
   }, [lastPage]);
 
+  // 검색 정보 변경
   useEffect(() => {
-    setSearchOptions(prev => ({
+    setSearchOptions((prev) => ({
       ...prev,
       days: searchInfo?.day ? [searchInfo.day] : [],
       times: searchInfo?.time ? [searchInfo.time] : [],
-    }))
+    }));
     setPage(1);
   }, [searchInfo]);
 
   return (
     <Modal isOpen={Boolean(searchInfo)} onClose={onClose} size="6xl">
-      <ModalOverlay/>
+      <ModalOverlay />
       <ModalContent maxW="90vw" w="1000px">
         <ModalHeader>수업 검색</ModalHeader>
-        <ModalCloseButton/>
+        <ModalCloseButton />
         <ModalBody>
           <VStack spacing={4} align="stretch">
-            <HStack spacing={4}>
-              <FormControl>
-                <FormLabel>검색어</FormLabel>
-                <Input
-                  placeholder="과목명 또는 과목코드"
-                  value={searchOptions.query}
-                  onChange={(e) => changeSearchOption('query', e.target.value)}
-                />
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>학점</FormLabel>
-                <Select
-                  value={searchOptions.credits}
-                  onChange={(e) => changeSearchOption('credits', e.target.value)}
-                >
-                  <option value="">전체</option>
-                  <option value="1">1학점</option>
-                  <option value="2">2학점</option>
-                  <option value="3">3학점</option>
-                </Select>
-              </FormControl>
-            </HStack>
-
-            <HStack spacing={4}>
-              <FormControl>
-                <FormLabel>학년</FormLabel>
-                <CheckboxGroup
-                  value={searchOptions.grades}
-                  onChange={(value) => changeSearchOption('grades', value.map(Number))}
-                >
-                  <HStack spacing={4}>
-                    {[1, 2, 3, 4].map(grade => (
-                      <Checkbox key={grade} value={grade}>{grade}학년</Checkbox>
-                    ))}
-                  </HStack>
-                </CheckboxGroup>
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>요일</FormLabel>
-                <CheckboxGroup
-                  value={searchOptions.days}
-                  onChange={(value) => changeSearchOption('days', value as string[])}
-                >
-                  <HStack spacing={4}>
-                    {DAY_LABELS.map(day => (
-                      <Checkbox key={day} value={day}>{day}</Checkbox>
-                    ))}
-                  </HStack>
-                </CheckboxGroup>
-              </FormControl>
-            </HStack>
-
-            <HStack spacing={4}>
-              <FormControl>
-                <FormLabel>시간</FormLabel>
-                <CheckboxGroup
-                  colorScheme="green"
-                  value={searchOptions.times}
-                  onChange={(values) => changeSearchOption('times', values.map(Number))}
-                >
-                  <Wrap spacing={1} mb={2}>
-                    {searchOptions.times.sort((a, b) => a - b).map(time => (
-                      <Tag key={time} size="sm" variant="outline" colorScheme="blue">
-                        <TagLabel>{time}교시</TagLabel>
-                        <TagCloseButton
-                          onClick={() => changeSearchOption('times', searchOptions.times.filter(v => v !== time))}/>
-                      </Tag>
-                    ))}
-                  </Wrap>
-                  <Stack spacing={2} overflowY="auto" h="100px" border="1px solid" borderColor="gray.200"
-                         borderRadius={5} p={2}>
-                    {TIME_SLOTS.map(({ id, label }) => (
-                      <Box key={id}>
-                        <Checkbox key={id} size="sm" value={id}>
-                          {id}교시({label})
-                        </Checkbox>
-                      </Box>
-                    ))}
-                  </Stack>
-                </CheckboxGroup>
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>전공</FormLabel>
-                <CheckboxGroup
-                  colorScheme="green"
-                  value={searchOptions.majors}
-                  onChange={(values) => changeSearchOption('majors', values as string[])}
-                >
-                  <Wrap spacing={1} mb={2}>
-                    {searchOptions.majors.map(major => (
-                      <Tag key={major} size="sm" variant="outline" colorScheme="blue">
-                        <TagLabel>{major.split("<p>").pop()}</TagLabel>
-                        <TagCloseButton
-                          onClick={() => changeSearchOption('majors', searchOptions.majors.filter(v => v !== major))}/>
-                      </Tag>
-                    ))}
-                  </Wrap>
-                  <Stack spacing={2} overflowY="auto" h="100px" border="1px solid" borderColor="gray.200"
-                         borderRadius={5} p={2}>
-                    {allMajors.map(major => (
-                      <Box key={major}>
-                        <Checkbox key={major} size="sm" value={major}>
-                          {major.replace(/<p>/gi, ' ')}
-                        </Checkbox>
-                      </Box>
-                    ))}
-                  </Stack>
-                </CheckboxGroup>
-              </FormControl>
-            </HStack>
-            <Text align="right">
-              검색결과: {filteredLectures.length}개
-            </Text>
+            <FilterRow1
+              queryValue={searchOptions.query || ""}
+              queryOnChange={handleQueryChange}
+              creditsValue={searchOptions.credits}
+              creditsOnChange={handleCreditsChange}
+            />
+
+            <FilterRow2
+              gradesValue={searchOptions.grades}
+              gradesOnChange={handleGradesChange}
+              daysValue={searchOptions.days}
+              daysOnChange={handleDaysChange}
+            />
+
+            <FilterRow3
+              timesValue={searchOptions.times}
+              sortedTimes={sortedTimes}
+              timesOnChange={handleTimesChange}
+              majorsValue={searchOptions.majors}
+              allMajors={allMajors}
+              majorsOnChange={handleMajorsChange}
+            />
+            <Text align="right">검색결과: {filteredLectures.length}개</Text>
             <Box>
               <Table>
                 <Thead>
@@ -356,16 +689,27 @@ const SearchDialog = ({ searchInfo, onClose }: Props) => {
                         <Td width="50px">{lecture.grade}</Td>
                         <Td width="200px">{lecture.title}</Td>
                         <Td width="50px">{lecture.credits}</Td>
-                        <Td width="150px" dangerouslySetInnerHTML={{ __html: lecture.major }}/>
-                        <Td width="150px" dangerouslySetInnerHTML={{ __html: lecture.schedule }}/>
+                        <Td
+                          width="150px"
+                          dangerouslySetInnerHTML={{ __html: lecture.major }}
+                        />
+                        <Td
+                          width="150px"
+                          dangerouslySetInnerHTML={{ __html: lecture.schedule }}
+                        />
                         <Td width="80px">
-                          <Button size="sm" colorScheme="green" onClick={() => addSchedule(lecture)}>추가</Button>
+                          <Button
+                            size="sm"
+                            colorScheme="green"
+                            onClick={() => addSchedule(lecture)}>
+                            추가
+                          </Button>
                         </Td>
                       </Tr>
                     ))}
                   </Tbody>
                 </Table>
-                <Box ref={loaderRef} h="20px"/>
+                <Box ref={loaderRef} h="20px" />
               </Box>
             </Box>
           </VStack>
@@ -375,4 +719,4 @@ const SearchDialog = ({ searchInfo, onClose }: Props) => {
   );
 };
 
-export default SearchDialog;
\ No newline at end of file
+export default SearchDialog;