DRF-Machine_Learning-Project-Song-Frontend - Backend 바로가기!
DRF를 기반으로 Machine Learning 기능을 추가한 노래 추천 커뮤니티 사이트
🖥️ 프로젝트 소개 - S.A. 바로가기!
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 <레파지토리 주소>
패키지 밎 라이브러리 설치 | https://python-poetry.org/docs/
$ 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에 있는지 한번 더 검증하고 결과값을 댓글에 등록함.
