개인 프로젝트 - 🍿팝콘로그(Spring Boot(MyBatis), Nuxt3(Vue3), MySQL)

안녕하세요.

 

개인적인 시간이 조금 생겨서 본업하면서 혼자 미니 프로젝트를 시작해보려고 합니다.

개발자라면 응당..개인 프젝 하나쯤은 있어야 한다는게 제 생각인데..실천까지 너무 오래 걸렸네요^^;

 

주제를 뭐로 할까 고민을 많이 했는데요.

영화/드라마 평점 기록하는 애플리케이션으로 하기로 결정했습니다!

ex. 왓챠피디아

 

너무 뻔하다구요?

맞습니다.

하지만 Vue3, TypeScript 공부가 목적인지라 간단하면서 제가 관심있는걸 해보고 싶었습니다.ㅎㅎ

 

이번 글은 간단히 기획/개요만 작성해놓고

내일부터 설계 및 ui 레이아웃 설정할 것 같습니다.

 

간만에 혼자 하려니까 생각이 안나고 막막한데 혼자 A to Z 할 생각에 조금은 설레기도 합니다.

부디 이 프로젝트가 무사히 끝나길 바라며..시작해보겠습니다.

---

프로젝트 개요

• 이름: 팝콘로그
• 목적: 사용자가 본 영화/드라마를 기록하고 평가할 수 있는 앱.
• 기능:
  • 영화/드라마 검색 및 인기 작품 조회
  • 평가(별점 및 리뷰 작성)
  • 개인 통계(평가한 작품 수, 최고 평점 작품 등)
  • 필터 및 정렬 기능(장르, 평점 등)
  • 사용자 인증(로그인/회원가입)

기술 스택

• 프론트엔드: Vue 3 + TypeScript
• 백엔드: Spring Boot
• DB: MySQL
• 외부 API: TMDB API

기능 상세

1. 사용자 인증 및 프로필

• Spring Security로 사용자 인증 처리
• JWT 토큰 기반 인증
• 프로필 사진 업로드 및 관리

2. 작품 검색

• TMDB API를 활용해 영화/드라마를 검색
• 검색 결과에서 작품 선택 후 사용자 컬렉션에 추가

3. 평가 및 기록

• 별점(0~5점) 및 리뷰 작성
• 시청 날짜 기록
• 시청 상태(본 작품, 보고 싶은 작품) 관리

4. 컬렉션 관리

• 내가 평가한 작품 리스트 보기
• 장르, 평점, 시청 상태별 필터링
• 최근 기록 순/평점 순/알파벳 순 정렬

5. 통계 대시보드

• 내가 평가한 작품 개수
• 평균 평점
• 최고 평점 작품, 최저 평점 작품
• 장르별 평가 통계(예: 액션, 로맨스 등)

페이지 구성

1. 메인

• 인기 영화/드라마 슬라이드 쇼
• 최근 추가된 작품 리스트

2. 검색 페이지

• 검색 바 및 결과 리스트
• 작품 클릭 시 상세 페이지 이동

3. 작품 상세 페이지

• 작품 정보(TMDB API 데이터 기반)
• 사용자 리뷰 및 별점 표시
• 시청 상태와 별점/리뷰 추가 버튼

4. 통계 페이지

• 사용자 평가 데이터 시각화
• Chart.js를 활용해 그래프 표시

5. 프로필 페이지

• 개인 정보 관리(이름, 이메일 등)
• 내가 평가한 작품 리스트