DRF를 기반으로 Machine Learning 기능을 추가한 노래 추천 커뮤니티 사이트

AI로 노래를 추천 받고, 유저들 간에 서로 노래를 추천해주면서 다양한 음악을 공유할 수 있는 커뮤니티 사이트

• 23.05.22 - 23.05.29

• 팀장😄 구민정
  [BE] 댓글 좋아요, 게시글 북마크, 검색 기능, 테스트코드
  [FE] 메인페이지, 게시글 목록, 댓글 좋아요, 게시글 북마크
• 팀원😄 김혁준
  [BE] 게시글 모델(CRUD), 이미지 CloudFlare와 연동
  [FE] 게시글 CRUD, 게시글 및 유저 프로필 이미지 업로드
• 팀원😄 김광운
  [BE] 유저 모델, 로그인(토큰 방식), 회원가입, 소셜 로그인
  [FE] 게시글 상세보기, 댓글 유튜브 iframe, Header, Footer, 소셜 로그인
• 팀원😄 문영오
  [BE] 유저 프로필(RUD), 팔로잉, 유저시리얼라이저
  [FE] 프로필페이지, 팔로잉 리스트, 유저 정보수정
• 팀원😄 이기웅
  [BE] 댓글 모델(CRUD), OPENAI , YOUTUBE API 연동
  [FE] 댓글 CRUD, 수정&삭제 버튼 권한부여

• Language : Python 3.11
• IDE : Visual Studio Code
• Framework : Django-Rest-Framework 3.14.0
• Database : Mysql DB 8.0.33
• Packaging-tool : Poetry 1.5.0
• CloudFlare : https://www.cloudflare.com/ko-kr/
• FRONTEND : https://github.com/goodminjeong/AI_5-A4-Song-Frontend

$ git init
$ git clone <레파지토리 주소>

$ poetry shell
$ poetry install

$ python manage.py makemigrations
$ python manage.py migrate

$ python manage.py runserver

$ vscode 확장팩 <Live Server> 설치
$ index.html에서 마우스 우클릭 후 Open with Live Server 클릭(단축키 Alt+L+O)

• DB값 검증
• 로그인 시 JWT Token 생성
• 소셜 로그인(카카오톡, 네이버, 구글)

• Email 중복방지

• 회원탈퇴 시 DB에서 계정 삭제 됨
• 관리자는 회원을 휴면 계정으로 설정할 수 있음(유저의 "is_active = False" 로 변환함)

• 프로필 정보 수정(프로필 사진, 비밀번호, 닉네임, 나이, 성별)
• 내가 쓴 글 보기, 좋아요 누른 댓글 보기, 북마크 한 게시글 보기
• 사용자 본인의 프로필만 수정 버튼이 보임
• 다른 유저의 마이페이지 접속 시 프로필 수정 버튼 자리에 팔로잉 버튼 있음
• 팔로잉, 팔로워 부분을 누르면 해당 유저의 팔로잉, 팔로워 목록을 볼 수 있음
• 존재하지 않는 user id를 url에 직접 입력하여 접속 시 404 페이지로 이동함

• 상세페이지를 들어 갔을때 다른 사람의 게시글이면 북마크 버튼이 보여짐
• 북마크 누른 게시글은 마이페이지에서 확인 가능함

• 상세페이지를 들어갔을때 작성자가 본인이면 팔로우 버튼 x, 다른 사람일 경우 팔로우 버튼이 생김
• 팔로잉, 팔로워 부분을 클릭하면 팔로잉, 팔로워 리스트 페이지로 이동함
• 팔로잉, 팔로워 리스트에서 유저들을 클릭하면 해당 유저의 마이페이지로 이동함

• 검색 기능 : 게시글의 제목, 내용을 기준으로 검색할 수 있음
• 왼쪽 블럭에 9개의 댓글이 좋아요 개수 순으로 정렬되어 있음
• 보이는 이미지는 해당 댓글이 달린 게시글의 작성자가 업로드한 이미지가 보임
• 오른쪽 블럭에는 9개의 게시글이 최신순으로 정렬되어 있음

• 전체 게시글 목록 조회
• 한 페이지에 10개씩 페이지 버튼은 5개까지 있음
• 게시글이 50개 넘어가면 5페이지 버튼 옆에 다음 페이지로 이동할 수 있는 버튼이 생김

• 게시글 수정, 삭제
• 게시글 북마크 기능
• 댓글 좋아요 기능
• 타인이 작성한 게시글에는 수정, 삭제 버튼 대신 북마크 버튼이 보임
• 댓글에 있는 유튜브 링크를 누르면 게시글 하단에 유튜브 영상을 바로 볼 수 있음
• 존재하지 않는 article id를 url에 직접 입력하여 접속 시 404 페이지로 이동함

• 제목, 내용 필수, 이미지 선택 가능
• 게시글 수정 시 원래 내용 불러오는 기능
• 수정하지 않은 내용은 그대로 다시 DB에 저장됨
• 이미지 삭제 버튼을 누르면 이미지 삭제됨
• 본인이 쓴 게시글만 수정, 삭제 가능

• 댓글 작성
• 작성자에게만 본인 댓글에 수정, 삭제 버튼이 보여짐
• 댓글 수정 시 기존 내용을 한번 더 확인시켜줌
• 댓글 수정 시 변경된 값이 없을 경우 백엔드로 요청 하지 않음
• 다른 유저가 작성한 댓글은 좋아요 버튼을 누를 수 있음
• 첫 번째 댓글은 AI가 추천한 댓글로, 게시글 작성자에게는 좋아요와 삭제 버튼이 보이고 다른 유저들에게는 좋아요 버튼만 보임

• 게시글 작성시 내용을 분석하여 어울리는 음악을 추천함.
• 추천하는 음악이 YOUTUBE에 있는지 한번 더 검증하고 결과값을 댓글에 등록함.

API 명세