이벤트 페이지 개선 작업 요약
작업 개요
이벤트 관련 화면 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