Elice Team04 Project - Cocktailer

서비스 소개

칵테일의 천국 - 칵테일러 (COCKTAILER) 🍸

모든 칵테일의 레시피와 칵테일을 사랑하는 사람들이 모인 장소입니다.

매일 달라지는 칵테일 레시피를 추천 받고 싶어 하는 사람
나만의 레시피를 공유하고 싶은 사람
칵테일을 주제로 다양한 사람들과 소통하고 싶은 사람

칵테일러 <<< 여기로 모이세요! 🖐

결과물

4분 시연 영상

Description

다양한 칵테일 레시피들을 하나의 사이트에 모여있어 한번에 접근 가능하도록 하는 웹 사이트 입니다. 웹 및 모바일 환경에 최적화 되어 있으며 쉽게 사이트에 접속이 가능합니다.

클라이언트 주요 기능

• 사용자는 회원가입 및 로그인이 가능하고 자동 로그인, 본인인증, 바텐더 인증을 할 수 있습니다.
• 다양한 카테고리별 칵테일 레시피를 확인 할 수 있고 나만의 레시피 등록, 수정, 삭제 할 수 있습니다.
• 다양한 사람들과 칵테일에 대한 정보를 교환하며 댓글, 대댓글, 댓글 채택을 할 수 있습니다.
• 나의 기분, 날씨 등등 다양한 요소를 고려하여 칵테일을 추천 받을 수 있습니다.
• react-hook-form을 이용해 로그인 / 회원가입 검증을 처리하였습니다.
• chart.js 를 활용하여 칵테일 재료들을 시각화 하였습니다.
• redux-toolkit을 활용하여 로그인/회원가입, 칵테일 레시피 등록, 칵고리즘 기능을 수행하였습니다.

서버 주요 기능

• 사용자가 회원가입 시 랜덤 닉네님 생성을 합니다.
• 회원가입 시 전화번호 인증과 이메일 중복을 확인 합니다.
• 게시물 댓글과 대댓글을 달고 댓글을 채택할 수 있습니다.
• 프론트 단에서 이미지를 s3에 업로드 한 후 키 값을 이용해 서버에 저장하여 다시 내려줍니다.
• 알고리즘을 이용하여 사용자에 맞는 칵테일을 추천해줍니다.

TEST 계정

• ID : [email protected]
• PW : Test1234!

API Document

POSTMAN API Doc

Skills

FRONT

BACK

Member

이름	담당 역할	담당 업무
손종훈	프론트엔드	메인 페이지, 칵고리즘 페이지
서아름	프론트엔드	칵플로우 게시물, 댓글 crud
오현석	프론트엔드	로그인, 회원가입, 마이페이지
한세은	프론트엔드	칵테일 레시피 crud, 좋아요, 카카오톡 공유하기
김건우	백엔드	유저, 메인
오인국	백엔드	칵고리즘, 칵시피

Architecture

infra

stack

주요 화면

메인 페이지	회원가입 페이지
로그인 페이지	칵시피 페이지
칵플로우 페이지	칵고리즘 페이지
마이 페이지 (회원정보 수정 및 작성한 게시글)	마이 페이지 (탈퇴하기)

---

Commit Convention

option	content
Feat	새로운 기능을 추가할 경우
Fix	버그를 고친 경우
Design	CSS 등 사용자 UI 디자인 변경
!BREAKING CHANGE	커다란 API 변경의 경우
!HOTFIX	급하게 치명적인 버그를 고쳐야하는 경우
Style	코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
Rename	파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
Remove	파일을 삭제하는 작업만 수행한 경우
Chore	진짜 자잘한 변경(오타, 줄 변경 등)
Setting	개발 환경을 설정하는 경우

---

실행 방법

1. 리포지터리를 클론 받습니다.

git clone <repository address>

2. Backend 폴더와 Frontend 폴더 둘 다 들어가 아래 명령어로 필요한 패키지들을 설치합니다. (최상위 경로에서 yarn 하면 설치가 안됩니다.)

yarn

3. Backend 폴더와 Frontend 폴더 둘 다 아래 명령어로 프로젝트를 실행합니다.

yarn dev

4. Backend 폴더와 Frontend 폴더 둘 다 아래 명령어로 프로젝트를 빌드합니다.

yarn build

• Backend .env 파일

# PORT
PORT=

# MODE
NODE_ENV=

# DB
MONGO_URL=
MONGO_URL_COMPASS=
REDIS_USERNAME=
REDIS_PW=
REDIS_URL=
REDIS_PORT=

# AWS S3
S3_ID=
S3_SECRET=

# TOKEN
ACCESS_KEY=
ACCESS_EXPIRE=
ACCESS_EXPIRE_AUTO=
REFRESH_EXPIRE=
COOKIE_EXPIRE=

# SENS
SENS_ID=
SENS_ACCESS_KEY=
SENS_SECRET_KEY=
SENS_FROM=

# GMAIL
GMAIL_ID=
GMAIL_PW=

• Frontend .env 파일

VITE_APP_KAKAO=