Add walkthrough: 이벤트 페이지 개선

2026-02-16-이벤트-페이지-개선.md

@@ -0,0 +1,79 @@
+# 이벤트 페이지 개선 작업 요약
+
+## 작업 개요
+
+이벤트 관련 화면 2개(**이벤트 상세**, **이벤트 목록**)의 코드를 정리하고,
+**종료된 이벤트를 클릭했을 때 안내 팝업**이 뜨도록 기능을 추가했습니다.
+
+> 다이어트홈(`madeu_diet_home`)과 쁘띠홈(`madeu_petit_home`) **양쪽 프로젝트에 동일하게 적용**했습니다.
+
+---
+
+## 1. 코드 정리 (이벤트 상세 화면)
+
+**대상 화면**: 이벤트를 클릭하면 나오는 **상세 페이지** (시술 선택, 가격 계산, 예약 버튼)
+
+| 항목 | 변경 전 | 변경 후 |
+|------|---------|---------|
+| HTML 파일 크기 | 약 780줄 (스타일·기능 코드가 한 파일에 섞여있음) | 약 80줄 (화면 구조만 남김) |
+| 스타일(CSS) | HTML 안에 포함 | 별도 CSS 파일로 분리 |
+| 기능(JS) | HTML 안에 포함 | 별도 JS 파일로 분리 |
+
+> 💡 **왜 이렇게 바꾸나요?** — 파일이 800줄이면 수정할 곳을 찾기 어렵습니다. 스타일·기능·구조를 각각의 파일로 나누면 유지보수가 훨씬 쉬워집니다.
+
+---
+
+## 2. 코드 정리 + 기능 추가 (이벤트 목록 화면)
+
+**대상 화면**: 이벤트 카테고리별 목록이 카드 형태로 나열되는 **목록 페이지**
+
+### 코드 정리
+
+| 항목 | 변경 전 | 변경 후 |
+|------|---------|---------|
+| HTML 파일 크기 | 약 600줄 | 약 60줄 |
+| 스타일(CSS) | HTML 안에 포함 | 별도 CSS 파일로 분리 |
+| 기능(JS) | HTML 안에 포함 | 별도 JS 파일로 분리 |
+
+### 새로 추가된 기능: 지난 이벤트 처리
+
+이벤트마다 **시작일**과 **종료일**이 있는데, 종료일이 지난 이벤트에 대해 다음과 같이 처리합니다:
+
+| 구분 | 진행 중인 이벤트 | 종료된 이벤트 |
+|------|-----------------|--------------|
+| 카드 모양 | 일반 (밝게 표시) | 흐리게 표시 (반투명) |
+| 배지 | 없음 | 우상단에 **"종료된 이벤트"** 표시 |
+| 클릭 | 상세 페이지로 이동 | ❌ 이동 차단 → **"지난 이벤트" 팝업** 표시 |
+| 이벤트 기간 | 📅 시작일 ~ 종료일 표시 | 📅 시작일 ~ 종료일 표시 |
+
+### 팝업 화면 구성
+
+팝업에는 다음 내용이 표시됩니다:
+- ⏰ 아이콘
+- **"지난 이벤트"** 제목
+- "이 이벤트는 종료되었습니다. 다른 진행 중인 이벤트를 확인해 주세요." 안내 문구
+- **확인** 버튼 (클릭하면 팝업 닫힘)
+
+---
+
+## 3. 데이터베이스 변경
+
+이벤트 목록을 조회할 때 **이벤트 시작일/종료일** 정보가 함께 내려오도록 조회 쿼리를 수정했습니다.
+
+- 기존: 제목, 내용, 가격 정보만 조회
+- 변경: **이벤트 시작일(`EVENT_START_DT`)**, **종료일(`EVENT_END_DT`)** 추가
+
+---
+
+## 적용 프로젝트
+
+| 프로젝트 | 설명 |
+|---------|------|
+| **madeu_diet_home** | 다이어트홈 (이벤트 카테고리 코드: 02) |
+| **madeu_petit_home** | 쁘띠홈 (이벤트 카테고리 코드: 04) |
+
+두 프로젝트 모두 동일한 변경이 적용되었습니다.
+
+---
+
+*작성일: 2026-02-16*

_Sidebar.md

@@ -0,0 +1,2 @@
+### 📋 Walkthroughs
+- [이벤트 페이지 개선](2026-02-16-이벤트-페이지-개선)