53 lines
2.0 KiB
Markdown
53 lines
2.0 KiB
Markdown
# 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)
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
접속 주소: `http://localhost:5173`
|
|
|
|
### 2. Docker 환경 실행 (Production - Nginx 서빙)
|
|
```bash
|
|
docker compose up --build -d
|
|
```
|
|
접속 주소: `http://localhost:8080`
|
|
|
|
### 3. Docker 개발 환경 실행 (Hot Reload)
|
|
```bash
|
|
docker compose --profile dev up landing-dev
|
|
```
|
|
접속 주소: `http://localhost:5173`
|