Skip to content

ApptiveDev/KillingPoint-FE

Repository files navigation

🎵 KillingPart_FE ; 짧게 들어도, 길게 남는 순간

image

🚀 Quick Links

  • 🎬 홍보 영상 링크 👉 YouTube
  • 🎬 기능 소개 링크 👉 YouTube
  • 📲 Google Play 링크 👉 Google Play

📱 App Info

Version Min SDK Target SDK
2.0.1 (13) Android 10 (29) Android 14 (36)

⁉️ 왜 만들었나요?

1. 음악의 특정 순간에 매료되는 경험

많은 사람들이 음악을 들을 때 특정 부분에 강하게 매료됩니다. 그 순간의 감동과 추억을 간직하고 싶지만, 기존의 방법으로는 그 순간을 제대로 기록하고 기억하기 어려웠습니다. KillingPart는 가장 기억에 남는 순간을 기억할 수 있는 장치를 제공합니다.

2. 기존 음악 공유 서비스의 한계

기존 음악 공유 서비스들은 대부분 노래 전체를 공유합니다. 인스타그램과 같은 플랫폼에서 부분 공유가 가능하더라도, 그것은 핵심 기능이 아닙니다. 우리는 음악의 특정 킬링 파트만을 정확하게 공유할 수 있는 서비스가 필요하다고 생각했습니다.

3. 공유하고 싶은 마음

우리는 음악을 주제로 사람들이 자신의 흥미와 관심사를 공유하고 싶어 하는 심리를 고려했습니다. 단순히 음악을 공유하는 것을 넘어, 그 순간의 감정과 이야기를 곁들여 더 풍부한 경험을 나눌 수 있는 공간이 필요했습니다.

4. Killing Part의 성장 : 나 → 너 → 우리

프로젝트는 세 가지 단계로 나누어 개발되었습니다:

  • Phase 01, "나" (나의 경험): 킬링파트 검색 및 저장, 코멘트 작성, 플레이리스트 듣기, 나의 컬렉션 생성, 캘린더 형태로 킬링파트 기록 보기
  • Phase 02, "너" (너와의 공유): 친구 킬링파트 듣기, 친구 코멘트 읽기
  • Phase 03, "우리" (우리 모두의 공간): 무제한 킬링파트 숏폼, 프로필 설정

이러한 단계적 접근을 통해 개인의 음악 경험에서 시작하여 친구와의 공유, 그리고 커뮤니티로 확장되는 자연스러운 성장을 목표로 했습니다.

📝 주요기능

🎵 음악 기반 다이어리

  • Spotify와 YouTube를 통한 음악 검색 및 추가
  • 음악과 함께 감정과 추억을 기록하는 다이어리 작성
  • 음악 재생 시간 구간 선택 기능
  • 앨범 커버와 함께 다이어리 작성

📅 다이어리 관리

  • 캘린더를 통한 다이어리 날짜별 조회
  • 컬렉션을 통한 내 다이어리 모아보기
  • 다이어리 상세 보기 및 수정

👥 소셜 기능

  • 친구들의 다이어리 피드 확인
  • 좋아요 및 댓글 기능
  • 친구 프로필 조회
  • 다이어리 신고 기능

👤 사용자 기능

  • 카카오 소셜 로그인
  • 프로필 이미지 및 태그 관리
  • 사용자 통계 확인

🔨 기술스택

개발 환경

androidstudio kotlin gradle

UI/UX

jetpack-compose

미디어

exoplayer youtube coil

인증 & 저장소

kakao

아키텍처

mvvm navigation viewmodel

스택 설명 용도
Jetpack Compose 선언적 UI 프레임워크 전체 UI 구성
Retrofit HTTP 클라이언트 라이브러리 REST API 통신
OkHttp HTTP 클라이언트 네트워크 요청 및 로깅
DataStore 비동기 데이터 저장소 토큰 및 사용자 정보 저장
Media3 ExoPlayer 미디어 재생 라이브러리 YouTube 영상 재생
Kakao SDK 카카오 로그인 SDK 소셜 로그인
Coil 이미지 로딩 라이브러리 비동기 이미지 로딩
Navigation Compose 네비게이션 컴포저블 화면 간 이동
ViewModel UI 관련 데이터 관리 상태 관리 및 비즈니스 로직

📁 프로젝트 구조

app/src/main/java/com/killingpart/killingpoint/
├── auth/                    # 인증 관련
│   └── KakaoLoginClient.kt
├── data/                    # 데이터 레이어
│   ├── local/              # 로컬 저장소
│   ├── model/              # 데이터 모델
│   ├── remote/             # API 서비스
│   ├── repository/         # 리포지토리
│   └── spotify/            # Spotify 관련
├── navigation/             # 네비게이션
│   └── NavGraph.kt
├── ui/                     # UI 레이어
│   ├── component/          # 공통 컴포넌트
│   ├── screen/             # 화면 컴포저블
│   ├── theme/              # 테마 및 스타일
│   └── viewmodel/          # ViewModel
└── MainActivity.kt          # 메인 액티비티

🤝 개발협업

🌲 Branch

main ------- backend/<이름>/(<이슈번호>-)<작업명>    (백엔드 작업)
     \------ frontend/<이름>/(<이슈번호>-)<작업명>   (프론트 작업)

ex) backend/wonseok/#10-add-animation
ex) frontend/wonseok/fix-login-not-allowed   (이슈가 없으면)

브랜치 관리 전략은 main과 개인 브랜치만이 존재하는 간단한 Github Flow를 따릅니다.

  • main 브랜치는 항상 작동 가능한 안정된 상태여야 한다.
    • 직접 커밋하지 않으며, Pull Request만으로 변경한다.
  • 개인 브랜치에서 작업을 진행한다.
  • 브랜치명은 작업 내용과 직군이 구체적으로 드러나도록 한다.
    • 브랜치명에 backend, frontend를 구분한다.
    • 띄어쓰기는 하이픈(-)으로 구분한다.
    • 브랜치명은 전부 소문자를 사용한다.

프로젝트에 CI/CD를 구성하는 등 규모가 커지면 develop 브랜치를 추가하거나 git flow로 전환할 수 있습니다.

🍪 Pull Request

main    ---●---●---●---------● abc (Squash Merge)
                \           /
개인브랜치          a---b---c   ('abc' 합쳐진 하나의 커밋으로 병합)

PR 제목: [Backend/Frontend] <이슈번호> <작업명>
ex) [Backend] #10 프로필 화면에서 로그인 불가하던 문제 해결
ex) [Backend] 프로필 화면에서 로그인 불가하던 문제 해결     (이슈가 없으면)

main 브랜치의 커밋은 Pull Request 단위로 쌓으며 이를 위해 Squash Merge를 원칙으로 합니다. Squash Merge는 브랜치가 병합될 때 커밋들이 PR 제목으로 합쳐지게 됩니다. 커밋은 개인마다 기준이 조금씩 다른 반면, PR/브랜치는 이슈 단위로 생성하므로 일관된 기준으로 커밋을 쌓을 수 있어 히스토리 추적을 용이하게 합니다.

  • 커밋 제목은 PR 제목으로 한다.
    • Backend/Frontend를 구분한다.
    • 작업 내용을 구체적으로 드러나게 적는다.
  • 커밋 내용은 PR 내용으로 한다.
    • 브랜치에서의 변경점을 상세히 적는다.
  • Pull Request는 작은 작업 단위(200줄 이내 권장)로 한다.

📥 다운로드

Google Play Store에서 바로 다운로드하실 수 있습니다!

Google Play

🛠 개발 환경 설정

프로젝트를 로컬에서 빌드하고 실행하려면 다음 단계를 따르세요.

사전 요구사항

  • JDK 11 이상
  • Android SDK 29 이상
  • Gradle 8.11.1 이상
  • Android Studio

💻 Frontend (Android)

  1. 저장소 클론

    git clone <repository-url>
    cd KillingPoint_FE
  2. Kakao SDK 설정 : app/src/main/res/values/strings.xml 파일에 카카오 네이티브 앱 키 추가

    <string name="kakao_native_app_key">YOUR_KAKAO_APP_KEY</string>
  3. 프로젝트 빌드

    ./gradlew build
  4. 앱 실행

    • Android Studio에서 프로젝트 열기
    • 에뮬레이터 또는 실제 기기 연결
    • Run 버튼 클릭 또는 ./gradlew installDebug

환경 변수 설정

  • 카카오 네이티브 앱 키가 필요합니다.
  • spotify api 키가 필요합니다.
  • 백엔드 API 서버 URL이 필요할 수 있습니다. (RetrofitClient.kt에서 확인)

💻 Backend

백엔드 저장소를 별도로 확인해주세요.

📱 주요 화면

  • 스플래시 & 튜토리얼: 앱 첫 실행 시 안내 화면
  • 홈 화면: 로그인 및 환영 화면
  • 메인 화면:
    • Play 탭: 음악 재생 및 다이어리 작성
    • Profile 탭: 사용자 프로필 및 설정
    • Calendar 탭: 다이어리 캘린더 뷰
  • 음악 추가: Spotify/YouTube 음악 검색 및 추가
  • 다이어리 작성: 음악과 함께 다이어리 작성
  • 소셜 피드: 친구들의 다이어리 피드
  • 친구 프로필: 친구의 다이어리 및 통계 확인

🧑‍💻 팀원

김태란 여채언
💻 Android 💻 Android
22기 22기

About

22기 킬링파트 프로젝트(앱)

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages