🍿 2025 Teen POPcorn Party - 공식 티저 사이트

Flask로 제작된 '2025 Teen POPcorn Party'의 공식 티저 웹사이트입니다. 이벤트 포스터의 디자인을 기반으로 제작되었으며, Python(Flask)을 통해 쉽게 모달 콘텐츠를 관리할 수 있도록 설계되었습니다.

---

✨ 주요 기능

• 동적 모달 시스템: app.py에 정의된 리스트를 기반으로 여러 개의 모달 팝업을 동적으로 생성합니다.
• 컴포넌트 기반 구조: 헤더, 푸터, 모달을 별도 파일로 분리하여 Jinja2 템플릿으로 관리합니다.
• 간편한 콘텐츠 관리: HTML을 직접 수정할 필요 없이, app.py의 modal_list만 수정하면 모달 내용(이미지, 제목)이 변경됩니다.
• 이미지 다운로드: 모든 모달 팝업에 원본 이미지 다운로드 버튼이 포함되어 있습니다.
• 반응형 디자인: 640px 이상 해상도에서 Hero 섹션이 화면 높이에 맞춰 조정됩니다.
• 스타일링: CSS 변수(Variables)를 사용하여 포스터의 메인 컬러 팔레트(#0A1931, #F7B500 등)를 일관되게 적용했습니다.

---

🚀 프로젝트 실행 방법

1. 프로젝트 복제 (Clone)

git clone [https://github.com/](https://github.com/)[Your-Username]/[Your-Project-Name].git
cd [Your-Project-Name]

2. 가상 환경 생성 및 활성화

# Windows
python -m venv venv
.\venv\Scripts\activate

# macOS / Linux
python3 -m venv venv
source venv/bin/activate

3. 의존성 설치

pip install Flask

4. 이미지 준비

static/images/ 폴더에 app.py의 modal_list에 명시된 이미지 파일들을 넣어주세요. (예: image_8709da.jpg, lineup_image.jpg 등)

5. 서버 실행

flask run
# 또는
python app.py

서버가 실행되면 브라우저에서 http://127.0.0.1:5000 로 접속합니다.

🔧 모달 추가 및 수정 방법

1단계 : app.py 수정

app.py 파일의 상단에 있는 modal_list 리스트를 수정합니다.

• id : 모달을 식별하는 고유 ID (HTML 버튼과 연결됨)

• title : 모달에 표시될 제목

• image_url : static/images/ 폴더 내의 이미지 경로

• download_url : 다운로드할 이미지 경로

# app.py

modal_list = [
    {
        "id": "promoModal", # 1번 모달 ID
        "title": "2025 Teen POPcorn Party!",
        "image_url": "images/image_8709da.jpg", # static/images/image_8709da.jpg
        "download_url": "images/image_8709da.jpg"
    },
    {
        "id": "lineupModal", # 2번 모달 ID
        "title": "특별 라인업 소개",
        "image_url": "images/lineup_image.jpg",
        "download_url": "images/lineup_image.jpg"
    },
    # 여기에 새 모달 딕셔너리를 추가
    {
        "id": "newModal", # 새 모달 ID
        "title": "새로운 공지사항",
        "image_url": "images/new_notice.jpg",
        "download_url": "images/new_notice.jpg"
    }
]

2단계 : template/index.html에 버튼 추가

index.html에서 모달을 열고 싶은 위치에 버튼을 추가합니다. data-modal-id 속성값이 app.py에서 설정한 id와 반드시 일치해야 합니다.

<div class="hero-buttons">
    <button class="modal-trigger btn" data-modal-id="promoModal">
        홍보 포스터 보기
    </button>
    <button class="modal-trigger btn" data-modal-id="lineupModal">
        라인업 정보
    </button>
    
    <button class="modal-trigger btn" data-modal-id="newModal">
        새로운 공지사항
    </button>
</div>

서버를 재시작하면 새 모달이 버튼과 함꼐 적용됩니다.

📂 프로젝트 구조

├── app.py              # Flask 메인 서버 파일 (모달 데이터 관리)
├── static/
│   ├── css/
│   │   └── style.css   # 메인 스타일시트
│   ├── js/
│   │   └── main.js     # 모달 JS 스크립트
│   └── images/
│       ├── image_8709da.jpg
│       └── ... (모달 이미지)
└── templates/
    ├── layout.html     # 사이트 전체 레이아웃 (헤더/푸터 포함)
    ├── index.html      # 메인 페이지
    └── includes/
        ├── _header.html
        ├── _footer.html
        └── _modal.html   # 재사용 가능한 모달 템플릿