프로젝트명 - 리뷰컬리
팀원 소개
| FE/BE | 이름 | Github |
|---|---|---|
FE | 김선중 | https://github.com/Seogun95 |
FE | 김태혁 | https://github.com/VIVID89 |
BE | 임민성 | https://github.com/rhsehfm33 |
BE | 김동현 | https://github.com/kil6176 |
BE | 이선옥 | https://github.com/wuzudog |
BE | 손채이 | https://github.com/chaeyi0318 |
리뷰컬리 배포 사이트
리뷰컬리리 시연 영상 사이트
깃허브 레포
프로젝트 기능
😊 회원가입 & 로그인
회원가입 후 같은 정보로 로그인을 할 수 있습니다. 로그인에 성공하여 토큰을 발급
받아야만 모든 페이지를 정상적으로 이용할 수 있습니다.
🌟 홈 화면 - 랜덤 리뷰 추천
home 화면에서 리뷰컬리에 등록된 리뷰들을 랜덤으로 보여지게 합니다.
슬라이드 형식으로 자연스럽게 출력됩니다.
헤더에는 검색 버튼, 리뷰등록, 신규리뷰탭, 베스트리뷰탭이 존재하여 사이트를 탐색할 수 있습니다.
홈 화면 및 신규리뷰 베스트리뷰 상세페이지는 로그인 없이 누구나 탐색이 가능합니다.
✏️ 상품 리뷰 등록
상품 리뷰를 등록하려면 로그인이 필요합니다.
로그인을 하게 되면 상품에 대한 이미지, 상품명, 구매링크, 상세리뷰 등을 내용으로 등록 가능하며 등록시 상세페이지로 이동하게 됩니다.
🌟 리뷰 상세 페이지 & 수정/삭제 & 좋아요(찜) 기능
본인이 작성한 리뷰는 본인일때만 수정/삭제 버튼이 노출되며, 수정/삭제가 가능합니다.
구매링크로는 직접 구매가 가능한 사이트로 연결이 가능합니다.
또한 맘에 드는 리뷰가 있을 때 하트 버튼을 누르면 좋아요 리뷰 페이지에 따로 모아집니다.
🌟상세 리뷰페이지 댓글 기능( 댓글 수정/삭제 , 댓글 좋아요)
상세 리뷰페이지에서는 해당 리뷰에 대한 댓글을 달 수 있습니다.
댓글은 로그인시 달 수 있고,
댓글 작성만이 수정/ 삭제가 가능합니다.
그리고 로그인한 회원일 경우 이 댓글이 도움이 됐다고 생각되면 도움돼요가 클릭이 가능합니다.
그리고 그 도움돼요는 계정당 한번씩만 가능하며 총 도움돼요 갯수가 카운트 됩니다.
🌟 신규 리뷰/ 베스트 리뷰 페이지 내 정렬 기능
신규 리뷰 페이지와 베스트 리뷰페이지에는 3가지 정렬 기능이 있다. 기본적으로 각각 신규 리뷰순, 베스트 리뷰순이 있고, 공통으로 낮은 가격순, 높은 가격순으로 정렬이 가능합니다.
밑의 이미지를 보면 낮은 가격순으로 정렬된 모습을 볼 수 있습니다.
🌟 검색 기능(키워드 검색)/ 검색 결과 없을시 화면에 표시해주는 기능
키워드를 통해 해당 키워드와 비슷하면 검색 결과의 리뷰가 화면에 보여집니다. 만약 검색 결과가 없을시에는 없다는 멘트를 화면에 출력합니다.
🌟 리뷰 sort 기능
메인페이지에 출력된 리뷰들이 신상품 리뷰, 베스트 리뷰 페이지에서
신상품/베스트 순, 낮은 가격순, 높은 가격순으로 정렬 가능
FE적용 기술
☑ 디자인 - 선중, 태혁
- 전반적인 페이지 스타일 전담 - 선중
- 로고 생성 - 선중
- 메인 페이지 이미지 슬라이드 효과 -선중
- 헤더 부분 , 모달 디자인, 회원가입 페이지 -선중
- 댓글 부분, 리뷰 등록 디자인 -태혁
☑ 회원가입 및 로그인 - 선중
JWT 토큰을 통해 서버와 연결, 정규식을 통한 정보 검수, 로그인시 토큰의 정보를저
장해 전역에서 사용. (패스워드 제외)\
로그인시 회원가입 및 로그인시 숨김처리
☑ CRUD - 선중, 태혁
- 리뷰 작성 (이미지포함) 구현 - 선중
- 리뷰 수정 구현 -선중
- 댓글 작성 모달- 선중
- 댓글 수정, 삭제 - 태혁
- API GET 통신- 태혁
☑ 검색 기능
검색 기능 구현 - 선중
☑ 댓글 좋아요 기능 - 선중
☑ 상세 페이지 좋아요 기능 - 태혁
☑ 이미지 업로드 기능 - 선중
- base64로 받아온 이미지 파일을 formData로 서버에 전송 (S3)
- 이미지 업로드를 통한 상세 리뷰 수정 가능
BE적용 기술
📩 실시간 메일 전송 - 정환
회원 가입시 회원 가입이 완료되었다는 메시지가 등록한 이메일로 전송됩니다.
◻ Swagger
◻ Spring Security - 정환
◻ S3를 통한 이미지 업로드 -
◻ Java Mail Sending -
◻ ec2 연결 -
◻ rds db 연결 -
⚙ Development Environment
🚨 Trouble Shooting FE
🚨 Trouble Shooting BE
💭 API 명세
https://www.notion.so/cb2a70fefad64130af3f12757293c19c?v=a5001a8aad8d44d896445aa8de0fa9b5
🌐 Architecture
📋 ERD Diagram
## 📝 Technologies & Tools (BE) 📝
🌟 리뷰 상세 페이지 & 수정/삭제 & 좋아요(찜) 기능
본인이 작성한 리뷰는 본인일때만 수정/삭제 버튼이 노출되며, 수정/삭제가 가능합니다.
구매링크로는 직접 구매가 가능한 사이트로 연결이 가능합니다.
또한 맘에 드는 리뷰가 있을 때 하트 버튼을 누르면 좋아요 리뷰 페이지에 따로 모아집니다.
🌟상세 리뷰페이지 댓글 기능( 댓글 수정/삭제 , 댓글 좋아요)
상세 리뷰페이지에서는 해당 리뷰에 대한 댓글을 달 수 있습니다.
댓글은 로그인시 달 수 있고,
댓글 작성만이 수정/ 삭제가 가능합니다.
그리고 로그인한 회원일 경우 이 댓글이 도움이 됐다고 생각되면 도움돼요가 클릭이 가능합니다.
그리고 그 도움돼요는 계정당 한번씩만 가능하며 총 도움돼요 갯수가 카운트 됩니다.
🌟 신규 리뷰/ 베스트 리뷰 페이지 내 정렬 기능
신규 리뷰 페이지와 베스트 리뷰페이지에는 3가지 정렬 기능이 있다. 기본적으로 각각 신규 리뷰순, 베스트 리뷰순이 있고, 공통으로 낮은 가격순, 높은 가격순으로 정렬이 가능합니다.
밑의 이미지를 보면 낮은 가격순으로 정렬된 모습을 볼 수 있습니다.
🌟 검색 기능(키워드 검색)/ 검색 결과 없을시 화면에 표시해주는 기능
키워드를 통해 해당 키워드와 비슷하면 검색 결과의 리뷰가 화면에 보여집니다. 만약 검색 결과가 없을시에는 없다는 멘트를 화면에 출력합니다.
☑ 리뷰 sort 기능
메인페이지에 출력된 리뷰들이 신상품 리뷰, 베스트 리뷰 페이지에서
신상품/베스트 순, 낮은 가격순, 높은 가격순으로 정렬 가능능
FE적용 기술
☑ 디자인 - 선중, 태혁
- 전반적인 페이지 스타일 전담 - 선중
- 로고 생성 - 선중
- 메인 페이지 이미지 슬라이드 효과 -선중
- 헤더 부분 , 모달 디자인, 회원가입 페이지 -선중
- 댓글 부분, 리뷰 등록 디자인 -태혁
☑ 회원가입 및 로그인 - 선중
JWT 토큰을 통해 서버와 연결, 정규식을 통한 정보 검수, 로그인시 토큰의 정보를저
장해 전역에서 사용. (패스워드 제외)\
로그인시 회원가입 및 로그인시 숨김처리
☑ CRUD - 선중, 태혁
- 리뷰 작성 (이미지포함) 구현 - 선중
- 리뷰 수정 구현 -선중
- 댓글 작성 모달- 선중
- 댓글 수정, 삭제 - 태혁
- API GET 통신- 태혁
☑ 검색 기능
검색 기능 구현 - 선중
☑ 댓글 좋아요 기능 - 선중
☑ 상세 페이지 좋아요 기능 - 태혁
☑ 이미지 업로드 기능 - 선중
- base64로 받아온 이미지 파일을 formData로 서버에 전송 (S3)
- 이미지 업로드를 통한 상세 리뷰 수정 가능
BE적용 기술
📩 실시간 메일 전송 - 정환
회원 가입시 회원 가입이 완료되었다는 메시지가 등록한 이메일로 전송됩니다.
◻ Swagger
◻ Spring Security - 정환
◻ S3를 통한 이미지 업로드 -
◻ Java Mail Sending -
◻ ec2 연결 -
◻ rds db 연결 -
⚙ Development Environment
🚨 Trouble Shooting FE
🚨 Trouble Shooting BE
💭 API 명세
https://www.notion.so/cb2a70fefad64130af3f12757293c19c?v=a5001a8aad8d44d896445aa8de0fa9b5
🌐 Architecture
📋 ERD Diagram
## 📝 Technologies & Tools (BE) 📝