# 🔄 Claude 인계 문서 — 탑에듀프렙 (TOP EDU PREP) 웹사이트

> 새 Claude 대화를 시작할 때 **이 문서 전체를 붙여넣고 HTML 파일을 첨부**하면 이전 작업을 바로 이어받습니다.

---

## 📌 프로젝트 개요

- **프로젝트명**: 탑에듀프렙 (TOP EDU PREP) 랜딩 페이지
- **파일명**: `topeduprep.html` (단일 HTML 파일, 약 2,131줄)
- **URL**: https://topeduprep.uk
- **목적**: 수학·영어·과학 전문 과외 연결 및 학습 정보 플랫폼
- **호스팅**: 단일 HTML 파일 — Firebase Hosting 또는 GitHub Pages에 그대로 업로드 가능

---

## 🏗️ 구현된 섹션 전체 목록

| 섹션 | ID / 클래스 | 내용 |
|------|------------|------|
| 공지 티커 | `#ticker` | 상단 스크롤 배너 (ticker 애니메이션) |
| 네비게이션 | `nav` | 고정 헤더, 언어 전환(KO/EN), 로그인/회원가입, 관리자 링크, 모바일 햄버거 |
| 히어로 | `.hero` | 타이틀, 통계 3개, 우측 철학 카드 스택 + floating badge |
| 철학 스트립 | `.philosophy-strip` | 다크 배경, Math Kim의 5가지 공부 원칙 |
| 과목 | `#subjects` | 6개 과목 카드 (수학/영어/과학/SAT/IB·A-Level/의대공대) |
| 프로세스 | `#process` | 5단계 카카오 단카방 수업 방식 |
| 시험 정보 | `#exams` | 수능/SAT/IB/AP 탭 패널 (각 2개 info-block) |
| 대학 정보 | `#universities` | 미국/영국/캐나다 대학 카드 + 필터 버튼 |
| 멤버십 | `.membership-strip` | 학생/선생님(featured·골드)/학부모 3개 카드 |
| 지점 | `#branches` | 잠실/센텀/줌온라인 3개 카드 |
| 상담 신청 | `#contact` | 좌: 연락처 정보 / 우: 상담 신청 폼 |
| 푸터 | `footer` | 4열 링크, 어드민 링크, 카카오 CTA |
| 모달 | `#modal` | 로그인/회원가입 공용 (역할 선택 포함) |
| 관리자 모달 | `#admin-modal` | 비밀번호 잠금 + 대시보드 영역 |

---

## 🎨 디자인 시스템

```css
--ink: #0e0e0e           /* 기본 텍스트 */
--ink-muted: #5a5a5a     /* 보조 텍스트 */
--ink-faint: #a8a8a8     /* 희미한 텍스트 */
--cream: #f7f4ef         /* 기본 배경 */
--cream-dark: #ede8e0    /* 섹션 구분 배경 */
--accent: #1a3a2a        /* 진한 녹색 (주요 색) */
--accent-bright: #2d6a4a /* 밝은 녹색 */
--gold: #c9a84c          /* 골드 포인트 */
--gold-light: #f0dfa0    /* 골드 연한 배경 */
--red-point: #c0392b     /* 레드 포인트 */
--white: #ffffff
```

**폰트**: `Playfair Display` (제목·display) / `DM Sans` (본문) / `Space Mono` (모노/라벨)

**반응형 브레이크포인트**: 1024px (태블릿) / 768px (모바일)

---

## ⚙️ 기술 스택 & 구조

- **순수 HTML/CSS/JS** — 외부 프레임워크 없음, 파일 1개로 완결
- **Firebase SDK v10.12.2** (CDN ESM 모듈): Authentication + Firestore
- **i18n**: 한국어/영어 전환 — `setLang('ko'|'en')` 함수, `T.ko` / `T.en` 객체
- **스크립트 2개**:
  - `<script type="module">` — Firebase 연동, 회원가입/로그인, 상담 저장, 관리자 인증
  - `<script>` (일반) — 언어 전환, 시험 탭, 대학 필터, 모달, 모바일 Nav, 스크롤 애니메이션

---

## 🔥 Firebase 연동 상태

**⚠️ 현재 미연동 — config 플레이스홀더 상태 (1729~1737줄)**

```js
const firebaseConfig = {
  apiKey:            "여기에_apiKey_붙여넣기",
  authDomain:        "여기에_authDomain_붙여넣기",
  projectId:         "여기에_projectId_붙여넣기",
  storageBucket:     "여기에_storageBucket_붙여넣기",
  messagingSenderId: "여기에_messagingSenderId_붙여넣기",
  appId:             "여기에_appId_붙여넣기"
};
```

연동하지 않아도 **UI 데모 모드로 작동** (콘솔에 경고만 표시).

**연동 방법**:
1. https://console.firebase.google.com → 프로젝트 생성 (이름: `topeduprep`)
2. 웹 앱 등록 → `firebaseConfig` 값 복사 후 위 위치에 붙여넣기
3. Authentication → 이메일/비밀번호 활성화
4. Firestore Database 생성 (리전: `asia-northeast3` 서울)

---

## 🐛 발견된 버그 / 주의사항

| # | 위치 | 문제 | 해결 방법 |
|---|------|------|----------|
| 1 | 상담폼 (1804~1826줄) | `submitForm()`에서 `document.getElementById('consult-name')` 등을 사용하지만 HTML에는 해당 `id`가 없음 — `input`에 `id` 미설정 | 상담폼 `<input>` 태그들에 `id="consult-name"`, `id="consult-phone"`, `id="consult-grade"`, `id="consult-exam"`, `id="consult-msg"` 추가 필요. 결과 표시용 `<p id="consult-result">` 도 폼 아래에 추가 필요 |
| 2 | 모달 (openModal 함수) | `'teacher-signup'` 타입 호출 시 (`선생님 등록 신청` 버튼) 처리 분기가 없어 기본 signup 모달로 열림 | `openModal()` 함수에 `teacher-signup` 케이스 추가 또는 별도 안내 필요 |
| 3 | Firebase module script | `currentUser` 변수가 module 내부에 선언되어 있어 일반 script의 `nav-login-btn` 클릭 핸들러에서 `currentUser`를 참조할 때 `ReferenceError` 발생 가능 | `window.currentUser = null;` 로 전역 노출하거나 로그아웃 로직을 module 내부로 이동 |
| 4 | 대학 필터 | 페이지 최초 로드 시 영국/캐나다 카드가 `style="display:none"` 하드코딩 — JS 없이 접근 불가 | 초기 필터 상태를 JS로 관리하거나 현행 유지 (기능상 문제 없음, SEO에만 영향) |

---

## ✅ 완료된 작업 / ❌ 다음 작업

### ✅ 완료
- [x] 전체 랜딩 페이지 레이아웃 및 디자인 (2,131줄)
- [x] 한/영 언어 전환 기능 (T.ko / T.en)
- [x] 로그인/회원가입 모달 UI (역할 선택 포함)
- [x] 시험 정보 탭 (수능/SAT/IB/AP)
- [x] 대학 정보 필터 (미국/영국/캐나다)
- [x] 모바일 반응형 (768px / 1024px)
- [x] 스크롤 인터섹션 애니메이션
- [x] Firebase 인증 & Firestore 저장 코드 (미연동 데모 모드)
- [x] 관리자 비밀번호 잠금 모달

### ❌ 다음에 할 작업
- [ ] **버그 #1 수정** — 상담폼 input에 id 추가 (consult-name 등)
- [ ] **버그 #3 수정** — currentUser 전역 노출
- [ ] Firebase 실제 config 값 입력 후 연동 테스트
- [ ] 선생님 등록 신청 전용 모달 or 별도 페이지 구현
- [ ] 관리자 대시보드 내용 구현 (현재 빈 영역)
- [ ] _(다음 작업을 여기에 추가하세요)_

---

## 📝 작업 메모

- **어드민 비밀번호**: `topedu2025!` (HTML 1829줄 `ADMIN_PW` 변수 — 반드시 변경)
- **카카오톡 채널**: `https://pf.kakao.com/_minhokimm` (히어로 & 상담 섹션에 사용 중)
- **전화번호**: `1555-0982` (지점 카드 및 상담 섹션)
- **Firestore 컬렉션**: `users` (회원), `consultations` (상담 신청)

---

## 💬 새 Claude에게 전달할 프롬프트 (복사해서 사용)

```
안녕! 이전 Claude와 함께 작업하던 "탑에듀프렙(TOP EDU PREP)" 웹사이트 프로젝트야.
아래 인계 문서를 읽고 첨부한 HTML 파일을 기반으로 작업을 이어받아줘.

[이 인계 문서 전체 내용 붙여넣기]

첨부 파일: topeduprep.html (현재 최신 작업 파일)

오늘 할 작업:
- [구체적으로 무엇을 할지 적기]

코드 수정 시 전체 파일을 다시 만들지 말고 수정이 필요한 부분만 알려줘.
변경 전/후 코드를 보여주면 내가 직접 교체할게.
```

---

*마지막 업데이트: 전체 코드 재분석 후 버그 목록 및 상세 정보 추가*