Cosmopolitan

⭐ 서비스 소개

칵테일 레시피 공유 서비스

📂 주요 기능

• 메인 화면 - three.js 라이브러리 활용하여 3D 모델 구현
• 칵테일 리스트 페이지 - 검색 기능
• 칵테일 리스트 상세페이지 - 스와이퍼 라이브러리 사용
• 게시판 페이지 - 게시글 생성, 게시글 내용 조회 및 삭제
• 찜 목록 - React rating 모듈 사용 state로 관리 session 값 이용해서 계정 찜 목록 유지
• 별점기능 - React rating 모듈 사용 state로 관리 session 값 이용해서 계정 찜 목록 유지
• 칵테일 추천 기능 - nodeml 적용, 사용자 기반 추천 알고리즘
• 로그인, 회원가입 - CRUD 사용, bcrypt 모듈로 해싱 처리
• 카카오톡 로그인 기능 - Rest API 사용
• 회원정보수정 및 삭제 기능 - CRUD 사용
• 페이지 보안성 강화 - XSS, SQL injection 방지
• 파이썬을 이용한 칵테일 정보 크롤링 - beautifulsoap 모듈을 이용해 칵테일 정보 및 api 값 조합. googletrans 모듈을 사용해 자동 번역
• 테스트 DB 데이터 통일 - 테스트 데이터 생성 파일을 통해 개발과정에서 같은 데이터 사용

칵테일 데이터 크롤링

English Highball|11338|Alcoholic|Ordinary Drink|Highball glass|Brandy|Gin|Sweet Vermouth|Carbonated water|Lemon peel|null|null|null|null|null|null|null|null|null|null|3/4 oz |3/4 oz |3/4 oz |null|null|null|null|null|null|null|null|null|null|null|null|null|https://www.thecocktaildb.com/images/media/drink/dhvr7d1504519752.jpg|브랜디, 진, 스위트 베르무트를 하이볼 글래스에 얼음과 함께 붓습니다. 탄산수를 채웁니다. 레몬 껍질 트위스트를 넣고 저은 후 서빙합니다. (진저에일은 기호에 따라 탄산수로 대체 가능합니다.)

칵테일 추천 기능

카카오 로그인

screen-recording.11.webm

🔄 서비스 흐름

✅프로젝트 구동 방법

git clone https://github.com/Cosmopolitan777/Cosmopolitan.git
node app.js

• 배포링크: http://13.236.182.92:3000/cocktails

💬 보완점

• 페이지네이션 구현 미완 -> 2023/05/26 자영 완료
• three.js 모델 로딩 지연
• 게시판 업데이트 미완
• 카카오 로그인 배포링크에서 미작동

✨ 팀프로젝트 최우수상 수상

포스코X코딩온 2차_팀프로젝트_최우수상_C조.pdf

팀원 소개

정성윤(조장)	최자영(팀원)	김지효(팀원)	정유진(팀원)	홍의채(팀원)
coing-ye	jayoung977	ji-dawn	8566uyu	UichaeHong