TONE은 사용자에게 매일 팬톤컬러 기반의 색상과 그에 어울리는 플레이리스트를 제공하고
하루의 감정을 색과 음악으로 기록할 수 있는 모바일 뮤직 플랫폼입니다.

🔗 https://toneapp.dothome.co.kr

⚙ 기술 스택

프론트엔드

백엔드 & AI

배포 & 인프라

협업 & 개발 도구

🖥️ 주요 기능 & 화면

[ 소셜 로그인 ] 카카오 / 네이버 / 구글	[ 메인 페이지 ] 컬러차트 / 팔레트로그 / 카테고리	[ 데일리 스펙트럼 ] 설문을 통한 색 추천과 AI 해설

[ 플레이어 ] 미니&메인플레이어 전환 / MV재생	[ 검색 ] AI 기반 플레이리스트 추천과 설명	[ 캘린더 ] 오늘의 색과 감정을 아카이빙

🛠 구현 포인트

• 백엔드 API 및 DB 연동 : 모든 주요 기능을 PHP API와 데이터베이스에 연결해 직접 구현했습니다.
• Pinia 상태 관리 : 인증, 플레이어, 캘린더, 팔레트 로그 상태를 Pinia로 관리했습니다.
• OpenAI API 연동 : OpenAI의 API를 활용해 데일리스펙트럼 추천과 자연어 검색 기능을 구현했습니다.
• 소셜 로그인 연동 : 카카오, 구글, 네이버 Oauth를 통해 소셜 로그인을 구현했습니다.
• 배포 자동화 : main 머지 시 GitHub Actions를 통해 빌드와 닷홈 서버 배포까지의 자동화를 구현했습니다.
• 미디어 분리 운영 : Cloudflare R2 기반으로 커버, 음원, 영상 리소스를 분리해서 관리했습니다.

📂 폴더 구조

TONE/
├─ .github/                    # GitHub 협업/배포 설정
│  ├─ workflows/               # GitHub Actions 워크플로우
│  │  └─ deploy.yml            # 프론트 빌드 + 닷홈 FTP 자동 배포
│  ├─ deploy-exclude.txt       # 배포 패키지 제외 목록
│  └─ pull_request_template.md # PR 작성 템플릿
├─ .vscode/                    # 에디터 공통 설정
├─ backend/
│  ├─ api/                     # 엔드포인트 진입점 모음
│  │  ├─ auth/                 # 일반 로그인, 소셜 로그인, 프로필 관련 API
│  │  ├─ calendar/             # 감정 기록 캘린더 API
│  │  ├─ categories/           # 카테고리/플레이리스트 목록 API
│  │  ├─ palette-logs/         # 저장/좋아요 기록 API
│  │  └─ playlist/             # 일일 추천, 상세, 좋아요 API
│  ├─ database/                # schema.sql, reset.sql, track_list.json
│  ├─ prompts/                 # 추천 생성용 프롬프트 템플릿
│  ├─ src/                     # Auth, Database, MediaUrl 공통 로직
│  ├─ vendor/                  # Composer 의존성
│  ├─ .env.example             # 백엔드 환경변수 예시
│  ├─ bootstrap.php            # 백엔드 공통 초기화
│  ├─ composer.json            # 백엔드 의존성 설정
│  └─ composer.lock            # Composer 의존성 잠금 파일
├─ frontend/
│  ├─ public/                  # favicon, 배포용 정적 파일
│  ├─ src/                     # 프론트 애플리케이션 소스
│  │  ├─ assets/               # 이미지, 아이콘, 공통 스타일
│  │  ├─ components/           # 재사용 UI 컴포넌트
│  │  ├─ data/                 # 설문/추천 관련 정적 데이터
│  │  ├─ layouts/              # 앱/인증 레이아웃
│  │  ├─ router/               # Vue Router 설정
│  │  ├─ services/             # axios 기반 API 요청 로직
│  │  ├─ stores/               # Pinia 상태 관리
│  │  ├─ utils/                # 인증 검증, alert 유틸
│  │  ├─ views/                # 페이지 단위 화면
│  │  ├─ App.vue               # 최상위 Vue 앱 컴포넌트
│  │  └─ main.js               # 프론트 앱 진입 파일
│  ├─ index.html               # Vite HTML 엔트리
│  ├─ package.json             # 프론트 스크립트/의존성 설정
│  └─ vite.config.js           # Vite 개발/빌드 설정
├─ .gitattributes              # Git 텍스트/줄바꿈 속성
├─ .gitignore                  # Git 추적 제외 규칙
├─ .prettierrc                 # 코드 포맷팅 규칙
└─ README.md                   # 프로젝트 소개 및 가이드

📜 컨벤션

브랜치 전략

• main : 운영 배포 브랜치
• develop : 기능 통합 및 배포 전 검증 브랜치
• feat/*, fix/*, refactor/*, chore/* : 개별 작업 브랜치

브랜치명

• feat/작업명 : 기능 추가
• fix/작업명 : 버그 수정
• refactor/작업명 : 구조 정리, 코드 개선
• style/작업명 : 스타일 수정
• chore/작업명 : 설정, 환경, 파일 정리
• 예시 : feat/calendar-api

커밋 메시지

• feat: 내용
• fix: 내용
• refactor: 내용
• style: 내용
• chore: 내용
• 예시 : feat: 캘린더 API 연결