# UpBit FrontEnd

- Node.js v20+

### 설치

```bash
npm install
# 또는
npm i
```

### 개발 서버 실행

```bash
npm run dev
```


## 기술 스택
- **Framework**: Nuxt 3 (Vue 3)
- **Styling**: SCSS
- **Animation**: Motion One (motion-v)

## 주요 기능

- 인트로 페이지 (첫 방문 시 필수, 6시간 자동 만료)
- UP/DOWN 배팅 및 결과 애니메이션
- 채팅 기능
- 배팅 랭킹 및 히스토리
- 로그인, 회원가입, 비밀번호 찾기 (헤더 모달), 마이페이지
- Google Translate 통합

## 프로젝트 구조

```
upbitfront/
├── assets/          # 정적 자산 (이미지, 폰트, 스타일)
│   ├── fonts/       # 폰트 파일 (Inter, Pretendard)
│   ├── icons/       # 아이콘 SVG 파일
│   ├── images/      # 이미지 파일
│   └── scss/        # SCSS 스타일 파일
├── components/      # Vue 컴포넌트
│   ├── common/      # 공통 컴포넌트
│   ├── layout/      # 레이아웃 컴포넌트
│   └── main/        # 메인 페이지 컴포넌트
├── composables/     # Composable 함수
│   ├── common/      # 공통 composables (axios, oauth, storage)
│   └── utils/       # 유틸리티 함수
├── layouts/         # 레이아웃 컴포넌트
├── pages/           # 페이지 컴포넌트
│   ├── index.vue    # 메인 페이지 (차트, 배팅 상태, 배팅이력, 순위)
│   ├── intro/       # 인트로 페이지 (첫 방문 시 필수)
│   └── mypage/      # 마이페이지
├── middleware/      # 라우트 미들웨어
│   └── intro.global.js  # 인트로 접근 제어 미들웨어
├── plugins/         #
├── public/          # 공개 정적 파일
├── scripts/         #
└── server/          #
```

## 스크립트

### 개발

```bash
npm run dev              # 개발 서버 실행 (.env.local 사용)
```

## 스타일 가이드

### SCSS 구조

```
assets/scss/
├── base/          # 기본 스타일 (reset, variables, mixins 등)
├── components/    # 컴포넌트별 스타일
├── layout/        # 레이아웃 스타일
└── pages/         # 페이지별 스타일
```

### 반응형 브레이크포인트

- 모바일: `<= 992px`
- 데스크탑: `> 992px`

## 개발 가이드

자세한 개발 가이드는 [development-guide.md](./development-guide.md)를 참고하세요.