Educo Pick - Vue 3 & Docker 기반 랜딩 페이지

Docker 및 Vue 3 (Vite) 기반의 모던 랜딩 페이지 템플릿입니다. 각 섹션이 독립적인 컴포넌트로 모듈화되어 있으며, 이미지(img)와 비디오(video) 자원을 분리하여 관리할 수 있도록 구성되어 있습니다.

📂 디렉토리 구조

pick/
├── public/
│   ├── img/                   # 정적 이미지 자원 디렉토리 (/img/파일명 으로 접근)
│   └── video/                 # 정적 비디오 자원 디렉토리 (/video/파일명 으로 접근)
├── src/
│   ├── assets/
│   │   ├── img/               # 번들 대상 이미지 자원
│   │   └── video/             # 번들 대상 비디오 자원
│   ├── components/
│   │   └── sections/          # 각 섹션별 분리된 컴포넌트
│   │       ├── HeaderSection.vue
│   │       ├── HeroSection.vue
│   │       ├── FeaturesSection.vue
│   │       ├── MediaSection.vue
│   │       ├── CtaSection.vue
│   │       └── FooterSection.vue
│   ├── App.vue                # 메인 레이아웃 및 섹션 조립
│   ├── main.js
│   └── style.css              # 글로벌 모던 디자인 시스템 토큰 & 스타일
├── Dockerfile                 # Multi-stage 빌드 (Node -> Nginx)
├── docker-compose.yml         # 도커 컨테이너 실행 구성
├── nginx.conf                 # Nginx SPA & 미디어 캐싱 설정
└── package.json

🚀 실행 가이드

1. 로컬 개발 환경 (Node.js)

npm install
npm run dev

접속 주소: http://localhost:5173

2. Docker 환경 실행 (Production - Nginx 서빙)

docker compose up --build -d

접속 주소: http://localhost:8080

3. Docker 개발 환경 실행 (Hot Reload)

docker compose --profile dev up landing-dev

접속 주소: http://localhost:5173