2024-WinterProject-Frontend

(웹서비스 이름)

인천대학교 정보통신공학과 프로그래밍 소모임 ComWith
**개발기간: 2024.12.28 ~

배포 주소

개발 버전 : http://...
프론트 서버 : http://...
백엔드 서버 : http://...

개발자 소개

김경재	박병욱	전민경
@silly0302	@Rockernun	@jeon1105
인천대학교 정보통신공학과	인천대학교 정보통신공학과	인천대학교 정보통신공학과

프로젝트 소개

(웹서비스 이름)는 연주하고 싶은 곡의 악보가 없을 때, 누구나 쉽게 해당 음악의 악보를 얻을 수 있도록 한다. 악보를 찾거나 제작하는 데 들이는 시간과 비용을 절약하고, 음악 연주에 더 집중할 수 있는 환경을 제공한다.

시작 가이드

Requirements

For building and running the application you need: (예시)

• Node.js 14.19.3
• Npm 9.2.0
• Strapi 3.6.6

Stacks 🪄

Environment

Config

Development

Communication

화면 구성 📺

메인 페이지	OO 페이지
OO 페이지	OO 페이지

주요 기능 🔥

⭐️ 업로드한 음악 파일을 자동으로 악보로 변환

• AI Music Analysis API | Klangio를 이용하여 음악 파일을 원하는 악보 형식으로 변경한다.

 

⭐️ 무슨 악기의 악보를 원하는지 선택

• AI Music Analysis API | Klangio를 이용하여 악보로 변환할 때 사용자가 원하는 악기 선택 가능

 

⭐️ 난이도 단계별 악보 표출

a. 초급

• 목표: 초보자도 쉽게 따라 할 수 있는 간단한 멜로디 제공
• 기준:
  1. 단순 멜로디: 곡의 주 멜로디만 추출. 화음(코드)나 복잡한 리듬은 생략
  2. 기본 코드: 멜로디와 함께 간단한 코드명 표시
  • 이유: 초급자는 화음 연주 대신 멜로디를 치는 데 집중하거나, 코드만 알아도 반주 가능

b. 중급

• 목표: 연주자의 표현력을 높이고, 음악적 이해를 확장.
• 기준:
  1. 코드 추가: 멜로디와 함께 코드 진행을 악보에 포함
  2. 리듬 추가: 원곡의 리듬감을 표현할 수 있도록 리듬 표기 추가
  3. 장식음: 꾸밈음, 이음줄 등을 추가해 악보를 풍부하게 구성
  • 이유: 중급자는 단순한 멜로디만 연주하기엔 지루할 수 있고, 리듬과 장식음은 더 자연스러운 연주로 이어짐

c. 고급

• 목표: 원곡에 최대한 가까운 연주를 위한 상세 정보 제공.
• 기준:
  1. 세부 화음: 코드뿐 아니라 화음의 세부 구성음까지 악보에 표시
  2. 복잡한 리듬: 빠른 음표, 복합 박자, 다이내믹 마크 등을 포함
  3. 연주 기법: 트릴, 글리산도, 스트로크, 핑거링 등 연주 기법 추가
  • 이유: 숙련자는 곡의 원곡 느낌을 살리는 디테일한 표현에 관심이 많음

아키텍쳐

디렉토리 구조

src/
├── app/                   # 어플리케이션 레이어 (글로벌 설정, 라우팅)
│   ├── providers/         # 글로벌 Provider (React Query, Zustand 등)
│   ├── routes/            # Page Router
│   ├── styles/            # 글로벌 스타일
│   
├── entities/              # 주요 엔티티 (도메인 모델)
│   └── user/              # 유저 관련 기능 (User Entity)
├── features/              # 독립적인 기능들
│   ├── file-upload/       # 파일 업로드 기능
│   ├── music-conversion/  # 음악-악보 변환 기능
│   └── notifications/     # 알림 관련 기능
├── pages/                 # Next.js Page Router
│   ├── upload.tsx         # 업로드 페이지
│   ├── result.tsx         # 결과 페이지
│   └── index.tsx          # 홈 페이지
├── shared/                # 공용 코드
│   ├── api/               # API 클라이언트
│   ├── config/            # 환경 설정 (env, API URL)
│   ├── libs/              # 라이브러리 (유틸 함수)
│   ├── ui/                # 공용 UI 컴포넌트 (Button, Input 등)
│   └── utils/             # 범용 유틸리티
└── widgets/               # 복합 UI 위젯
    ├── header/            # 헤더
    └── footer/            # 푸터


커밋 메시지

• feat: 새로운 기능 추가
• fix: 버그 수정
• refactor: 코드 리팩토링 (기능 변경 없음)
• style: 코드 스타일 변경 (포매팅, 세미콜론 추가/삭제 등)
• docs: 문서 수정
• test: 테스트 추가 또는 수정
• chore: 빌드 프로세스, 패키지 관리 등의 변경
• perf: 성능 개선
• ci: CI/CD 구성 변경