🌵 Naming : 마시다와 맛있다의 중의적인 표현
| 늘어나는 혼술족과 칵테일을 다양하게 시도해보고 싶은 사용자를 위한 서비스,
| 칵테일 레시피를 찾고, 자신의 취향에 맞는 칵테일을 추천, 분석해주는 서비스.
- React 18.2.0
- Node 18.12.1
- npm 8.19.2
- Next 13.2.3
- Java 11
- SpringBoot 2.7.9
- Python 3.9
- MySQL 8.0
- Fast API
※ [설치 파일](./pythonProject/requirements.txt/)
- AWS EC2
- Jenkins
- Docker 20.10.18
- git clone
git clone-
**도커 설치
-
Dockerfile 및 nginx 설정파일 작성
- nginxec2.conf 파일
server {
location /{
proxy_pass http://localhost:3000;
}
location /api {
proxy_pass http://localhost:8080/api;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
listen 443 ssl;
ssl_certificate ${fullchain.pem}
ssl_certificate_key ${privkey.pem}
}
server {
if ($host = ${server_name}) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name ${server_name};
return 404; # managed by Certbot
}
```
4. **도커 컨테이너 실행**
- mysql 이미지 실행하기
```bash
# mysql 이미지 가져오기
docker pull mysql
# 컨테이너 실행
docker run --name mysql -e MYSQL_ROOT_PASSWORD={password} -d -p 3306:3306 mysql
```
5. **작동 확인**
- 실행 중인 컨테이너 조회
```bash
docker ps- mySQL 접속하여 DB 덤프 파일 실행
-
메인 배너
- 메인 페이지의 배너를 통해 입문자, 봄, 여름, 칵테일의 재밌는 정보를 볼수 있습니다.
-
칵테일 검색
- 검색 페이지에서 이름, 베이스, 색상, 난이도, 재료별로 검색이 가능하며 그 결과에 따라 처음엔 이름순으로 보여주며 좋아요, 별점순으로 나열이 가능합니다.
- 칵테일 상세 페이지
- 상세페이지에서는 이 칵테일의 정보들에 대해서 볼수 있으며 정보는 별점과 좋아요, 댓글의 개수, 난이도, 재료, 레시피, 소개 정보 등이 왼쪽에 보여지며 오른쪽에는 상세페이지의 칵테일과 비슷한 재료로 만든, 색인 칵테일을 보여줍니다.
- 로그인시 오른쪽의 버튼을 클릭하면 댓글 창을 띄워서 보여줍니다.
3-1. 댓글 모달
- 다른 사람이 해당 칵테일에 대한 댓글을 볼 수 있으며 내가 단 댓글은 수정 및 삭제가 가능합니다. 해당 별점, 난이도를 매김에 따라 칵테일의 별점, 난이도가 변하며 댓글은 인당 1개씩만 작성 가능합니다.
- 마이 페이지
- 로그인을 해야 들어 올 수 있는 구간입니다. 헤더에는 카카오톡 프로필의 이름을 띄워줍니다.
- 페이지에서는 현재 나의 카카오톡 프로필 사진과 북마크, 좋아요 누른 것의 개수를 볼 수 있고 현재 내가 좋아요 누른 칵테일에 대한 분석을 아래에 보여줍니다.
- 오른쪽에는 내가 북마크, 좋아요, 댓글이 있는 칵테일을 볼 수 있습니다. 그 칵테일을 누를시 칵테일 상세보기 페이지로 이동됩니다.
- 칵테일 월드컵
- 월드컵 페이지로 오면 랜덤 칵테일 16개에 대해 월드컵을 진행하며 해당 칵테일에 마우스를 갖다 대면 카드가 뒤집어지며 해당 칵테일에 대한 설명이 나옵니다.
5-1. 칵테일 월드컵(우승 칵테일)
- 우승자라는 것을 보여주며 마찬가지로 칵테일에 마우스를 갖다 대면 카드가 뒤집어지며 설명이 나옵니다.
- 이 칵테일의 난이도, 별점, 좋아요, 댓글의 수가 나오며 다시하기 버튼을 클릭시 월드컵을 16강부터 다시하며 상세보기 페이지로 갈수있는 자세히 보기 버튼도 있습니다.
- 아래에는 댓글이 존재한다면 해당 칵테일에 대한 댓글을 보여주며 없을시 댓글이 존재하지 않는다고 나옵니다.
- 유저 분석
-
재료 기반 칵테일 추천 & 색상 기반 칵테일 추천
- 콘텐츠 베이스 알고리즘을 사용
- BoW, TF-IDF, Cosine Similarity 을 활용하여 구현
- 콘텐츠 베이스 알고리즘을 사용
-
사용자의 베이스, 재료, 색상의 취향 그리고 연령대와 성별에 따른 칵테일 추천
- 사용자와 비슷한 취향을 가진 사람들이 좋아요한 칵테일들을 추천
- https
- certbot 컨테이너를 함께 실행
- letsencrypt ssl 인증서 발급
- EC2 도메인 사용하여 인증
- 자동 배포
- Gitlab에서 web hook 설정을 통해 jenkins 빌드 유발
- jenkins의 shell script 실행 기능을 이용하여 git pull, docker build 실행
- Git
- Jira
- Notion
- Mattermost
- Webex
- 프론트엔드: 손종효, 김지환, 김영주
- 벡엔드: 이지현(Infra), 강지수, 김주성
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent