From 693a48331e25f0a8697714d1f5edf7c832929711 Mon Sep 17 00:00:00 2001 From: pjs Date: Mon, 16 Feb 2026 01:57:31 +0900 Subject: [PATCH] =?UTF-8?q?Add=20walkthrough:=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2026-02-16-이벤트-페이지-개선.md | 79 ++++++++++++++++++++++++++++++++ _Sidebar.md | 2 + 2 files changed, 81 insertions(+) create mode 100644 2026-02-16-이벤트-페이지-개선.md create mode 100644 _Sidebar.md diff --git a/2026-02-16-이벤트-페이지-개선.md b/2026-02-16-이벤트-페이지-개선.md new file mode 100644 index 0000000..c2859f3 --- /dev/null +++ b/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* diff --git a/_Sidebar.md b/_Sidebar.md new file mode 100644 index 0000000..0c54d6c --- /dev/null +++ b/_Sidebar.md @@ -0,0 +1,2 @@ +### 📋 Walkthroughs +- [이벤트 페이지 개선](2026-02-16-이벤트-페이지-개선)