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 연결