🚀 해커톤 D-Day 타이머

해커톤 행사장 앞 스크린에 표시할 각 STEP별 타이머 프로그램입니다. 참가자들이 언제든지 마감까지 남은 시간을 실시간으로 확인할 수 있습니다.

📋 프로젝트 개요

목적: 해커톤 동안 행사장 앞 스크린에 각 STEP별로 타이머를 보여주는 프로그램을 제작하여, 참가자들이 언제든지 마감까지 남은 시간을 볼 수 있게 함

목표: 디데이 설명과 날짜를 커스터마이징할 수 있는 대형 스크린용 타이머 제작

✨ 주요 기능

• 🎯 커스텀 이벤트 설정: 이벤트명과 목표 날짜/시간을 자유롭게 설정
• ⏰ 실시간 카운트다운: 시간, 분, 초 단위로 정확한 카운트다운 표시
• 🖥️ 대형 스크린 최적화: 행사장에서 멀리서도 잘 보이는 큰 글씨 크기
• 📱 반응형 디자인: 데스크탑, 태블릿, 모바일 모든 화면에 최적화
• 💾 자동 저장: 설정한 정보를 브라우저에 자동 저장 및 복원
• 🚨 임박 알림: 1시간 미만 남았을 때 특별 알림 표시
• 🎉 완료 축하: D-Day 도달 시 축하 메시지와 애니메이션 효과
• 🔧 간편한 관리: 설정 변경 및 초기화 기능

🛠️ 기술 스택

• Frontend: HTML5, CSS3, Vanilla JavaScript
• 배포: GitHub Pages
• CI/CD: GitHub Actions (자동 배포)
• 저장소: 브라우저 Local Storage

🚀 사용법

1. 설정 단계

1. 페이지 접속
2. 목표 이벤트명 입력 (예: "아이디어 발표", "코딩 마감", "최종 발표")
3. 목표 날짜 및 시간 설정
4. "카운트다운 시작" 버튼 클릭

2. 표시 단계

1. 자동으로 dday-display.html로 이동
2. 대형 스크린에 실시간 카운트다운 표시
3. 필요시 설정 변경 또는 초기화 가능

🌐 배포 정보

• Live Demo: https://haedalprogramming.github.io/d-day-timer/
• Repository: https://github.com/haedalprogramming/d-day-timer
• 배포 방식: GitHub Pages 자동 배포 (master 브랜치 push 시)

📖 운영 시나리오

해커톤 진행 예시

1. 개회식 전: "해커톤 시작까지" 카운트다운
2. 아이디어 구상: "아이디어 발표까지" 타이머
3. 개발 단계: "중간 점검까지" 또는 "개발 마감까지"
4. 발표 준비: "최종 발표까지" 카운트다운
5. 심사 진행: "결과 발표까지" 타이머

각 단계별로 간단히 설정을 변경하여 참가자들에게 명확한 시간 정보를 제공할 수 있습니다.

📁 프로젝트 구조

d-day-timer/
├── index.html          # D-Day 설정 페이지 (메인)
├── dday-setup.html     # D-Day 설정 페이지 (백업)
├── dday-display.html   # 카운트다운 표시 페이지
├── .github/
│   └── workflows/
│       └── deploy.yml  # GitHub Actions 배포 설정
└── README.md          # 프로젝트 문서

🎨 화면 구성

설정 페이지 (index.html, dday-setup.html)

• 깔끔한 폼 인터페이스
• 이벤트명 입력 필드
• 날짜/시간 선택 필드
• 입력 검증 및 오류 메시지

표시 페이지 (dday-display.html)

• 대형 타이머 디스플레이
• 이벤트명 표시
• 시간/분/초 단위 카운트다운
• 임박 알림 및 완료 메시지
• 설정 변경/초기화 버튼

🔧 개발자 정보

• 개발: 해달프로그래밍
• 목적: 해커톤 행사 운영 지원
• 라이선스: MIT License