MyPli

🎧 MyPli

테스트 메일: [email protected]
테스트 비밀번호: test444

프로젝트 소개

MyPli는 사용자들이 좋아하는 영상을 모아 플레이리스트를 만들고, 이를 통해 취향을 공유하며 즐길 수 있는 새로운 웹 서비스입니다.
사용자는 YouTube API를 활용하여 자신만의 영상 컬렉션을 만들고 관리할 수 있습니다.
또한, 다른 사용자가 생성한 다양한 플레이리스트를 탐색하며 새로운 콘텐츠를 발견할 수 있습니다.
그리고, 마음에 드는 플레이리스트에 좋아요를 남기며 사용자 간의 상호작용을 즐길 수 있습니다.
간단하고 직관적인 인터페이스를 통해 나만의 음악, 영상 컬렉션을 생성하고, 다른 사람들의 플레이리스트를 탐색하며 소통할 수 있습니다.

MyPli 팀

정동구	심채윤	조성민	김난영

FE	FE	BE	BE

프로젝트 실행하기

$ git clone https://github.com/MyPli/front.git
$ npm install
$ npm run dev

개발 환경

프론트엔드

백엔드

협업 도구 및 배포

폴더 구조

front/
├── action/                 # 서버 액션 (Server Actions)
│
├── app/                    # Next.js App Router
│   ├── (root)/             # 페이지 라우팅
│   └── fonts/              # 폰트 파일
│
├── components/             # UI 컴포넌트
│   ├── commons/            # 공통 컴포넌트 (버튼, 인풋 등)
│   └── layout/             # 레이아웃 관련 컴포넌트
│
├── hooks/                  # 커스텀 훅 관리
│   ├── queries/            # React Query 관련 훅
│   └── utils/              # 유틸리티 커스텀 훅
│
├── models/                 # 타입스크립트 인터페이스/타입
├── public/                 # 정적 소스 (이미지, 아이콘 등)
├── store/                  # Zustand 상태 관리
└── utils/                  # 유틸리티 함수

backend/
├── auth/                    # 인증 관련 로직 (JWT, Google OAuth)
│   ├── dto/                 # 인증 데이터 전송 객체
│   ├── guards/              # 인증 및 권한 관리
│   ├── strategies/          # 인증 전략
│   └── auth.*               # 인증 API, 서비스, 모듈
│
├── playlist/                # 플레이리스트 생성 및 관리
│   ├── dto/                 # 데이터 전송 객체
│   ├── entities/            # 플레이리스트 엔티티
│   └── playlist.*           # API, 서비스, 모듈
│
├── video/                   # 비디오 관리 기능
│   ├── dto/                 # 데이터 전송 객체
│   ├── entities/            # 비디오 엔티티
│   └── video.*              # API, 서비스, 모듈
│
├── user/                    # 사용자 정보 관리
│   ├── dto/                 # 사용자 데이터 전송 객체
│   ├── entities/            # 사용자 엔티티
│   └── user.*               # API, 서비스, 모듈
│
├── like/                    # 좋아요 기능
│   └── like.*               # API, 서비스, 모듈
│
├── search/                  # 검색 기능
│   └── search.*             # API, 서비스, 모듈
│
├── prisma/                  # 데이터베이스 설정 및 연동
│   └── prisma.*             # 서비스 및 모듈
│
├── s3/                      # AWS S3 연동
│   └── s3.*                 # 서비스 및 모듈
│
├── app.*                    # 메인 애플리케이션 설정 및 진입점
├── main.ts                  # 서버 엔트리포인트
└── schema.prisma            # Prisma 스키마 정의