minjae-an/cockpybara

Cockpybara

소개

Cockpybara는 Cocktail과 사람들에게 친근감 있는 동물로 알려진 capybara 를 합쳐 만든 이름입니다. 사용자들에게 친근감 있게 여러 칵테일 레시피 정보를 안내하고, 편리하게 이용할 수 있는 서비스(레시피 즐겨찾기, 주간&월간 레시피 순위, 사용자 레시피 등록 및 조회) 형태를 제공합니다.

개발배경 및 목적

소주와 맥주 중심으로 이뤄지던 대한민국 주류 시장의 판도가 바뀌었습니다. 코로나19로 인한 사회적 거리두기는 획일적인 문화와 고질적인 업무 술자리에서 벗어나 좀 더 개인의 취향에 맞는 주류를 지향하는 문화를 촉발시켰고, 다양한 주류와 재료를 취향에 따라 혼합하여 즐기는 칵테일 분야가 폭발적인 성장세를 보였습니다. 하지만, 시장의 성장세에 비해 관련된 정보를 얻을 수 있는 플랫폼, 커뮤니티는 대단히 한정적이고 많은 사람들이 다양한 레시피와 조합을 알지 못하거나 익숙하지 않아 항상 같은 칵테일을 선택하는 경우가 다반사입니다. 이에 따라 칵테일 레시피 조회/추천 웹서비스를 제안하고자 합니다.

멤버

프론트

전소진	신승혜

백엔드

안민재	김지수

셋업

• mariaDB에 프로젝트를 생성, 필요한 키값(url, username, password)를 properties에서 추가한다.
• JPA사용을 위한, JPA관련된 설정 properties에 추가한다.
• Naver Object Storage 연결을 위한 endpoint, region을 환경변수에 저장하고 properties에서 추가한다.
• 이미지 업로딩에 필요한 AWS S3 액세스 키와 시크릿 키를 환경변수에 저장하고 properties에서 추가한다.
  
  

실행 방법

• 터미널 창에 npm run build를 입력해 빌드해준뒤, npm run start로 실행한다
  
  
  

📚 기술 📚

• HTML/CSS/JavaScript
• React.js
• Java
• Spring Web(MVC)
• Spring data JPA
• MariaDB

개발툴

• Git & Github
• Github Projects & Issues
• Swagger
• Notion
  
  

스크린샷

• 메인 화면

• 칵테일레시피 검색 화면

• 칵테일 레시피 상세내용 화면

• 커뮤니티 화면(주간&월간 레시피 순위, 최근 레시피)

cockpybara's Issues

CSV 데이터, 칵테일 레시피 객체 매핑

csv 데이터를 칵테일 레시피 객체로 매핑하는 코드, 추후 변경시 DB에 데이터 재삽입을 위해 구현

이슈 #11 추가로 재료 단위 테이블 스키마

재료를 어떻게 다룰것인지 (ex, 액체와 고체를 분리 or 재료별로 가능한 단위 만들기)
테이블에 어떻게 반영시킬것인지 (ex 액체 고체로 분리할 경우 물질 성질을 나타내는 테이블을 만들것인지)
참고 자료로 fat secret (식단 앱) 을 참고할 수 있을듯합니다.

회원 탈퇴 기능 구현

• Controller cancelMember 메서드 구현
• Service cancelMember 메서드 구현

커뮤니티 유저 데이터 API

커뮤니티 뷰에서 유저 PK, 닉네임을 받을 수 있는 API 개발

칵테일 리뷰 필드 추가

• 리뷰 엔티티 설정
• 칵테일 리뷰 필드 추가

리뷰 API

칵테일 상세 정보 뷰에서 리뷰를 제공할 API 개발

리뷰 추가 삭제 API

• 리뷰 추가
• 리뷰 삭제

로그인 기능 구현

MyRecipeController - IngredientController 중복 경로 메서드 수정

MyRecipeController의 getRecipeOptionValues 와 IngredientController의 searchIngredientByName의 매핑 URL이
동일하며 GET 메서드를 사용하여 오류가 발생하여 이를 수정

재료 카테고리별 단위맵

• Category별 사용 단위 찾기(추가내용: 몇몇 예외 단위 수정, csv파일 수정)
• 카테고리단위맵 생성
  첫번째 내용 덧붙이면 ingredients_classfication.csv, refined_drinks.csv파일 수정후 적용

재료 카테고리 필드 추가

• 재료 카테고리 분류된 Ingredient_classfication.csv 파일 생성
• IngredientCategory enum class 정의
• IngredientClass에 카테고리 필드추가

FE 레시피 기본 페이지 구현

FE
-레시피 기본 페이지 구현 (/recipe)

FE 회원가입 페이지 구현

FE

• 회원가입 페이지

프로젝트 개발 환경 설정

FE

• node 20
• react 18.2.0
• web-vitals 2.1.4

BE

• Java 11
• SpringBoot 2.7.13
• Spring Web(MVC)
• Spring data JPA
• MariaDB 10.6
• Swagger2
• Spring Security (N/A)

FE 칵테일 세부 모습 페이지 구현

FE 커뮤니티 페이지 구현

칵테일 상세 정보 보기

칵테일 레시피 맛 필드 추가

• Taste enum class 정의
• 한 칵테일 레시피당 3개의 맛 제한
• 칵테일 레시피 API 수정

기간별 칵테일 레시피 API

• TimePeriod 소스 파일 잘못된 인코딩 수정
• CocktailRecipeRepository 잘못된 메서드 명명 수정

리뷰 추가/삭제 API

• 리뷰 엔티티가 멤버 id를 가지도록 수정
• 컨트롤러 계층에서 수행되도록 구현된 연산을 서비스로 위임

아이디 찾기, 비밀번호 찾기/재설정 기능

아이디 찾기

닉네임(alias), 번호 통해 조회

비밀번호 찾기/재설정

1. 닉네임, 폰번호, 이메일(아이디)를 입력 받음
2. 조회시 맞으면 비밀번호 재설정으로 이동

기간별 칵테일 레시피 API

• 주간/월간/전체 기간
  제공한 데이터는 클라이언트에서 즐겨찾기 내림차순으로 정렬하여 사용할 예정
• CocktailRecipeRepository엔티티에 createdAt 필드 추가
• timePeriod enum추가
• repo수정
• service 수정
• controller 수정

재료 검색 API

나만의 레시피 뷰에서 재료를 이름 기반으로 검색하여 추가한다.
재료를 이름 기반으로 검색할 수 있는 API 개발 필요

비밀번호 재설정 로직 수정

즐겨찾기(likes) 기능

• 즐겨찾기 엔티티 구현

칵테일 검색 기능 구현

To-do

• 검색 필터 제공 API
• 단순 이름 기반 검색
• 이름 + 필터(카테고리, 글라스 등) 기반 검색

칵테일 csv로 스키마구성하기

회원 가입 & 로그인 기능 구현

회원 가입

• 회원 엔티티 정의
• 회원 필드 검증
• 회원 Repository 계층 구현
• 회원 Service 계층 구현
• 회원 Controller 계층 구현

로그인

• 로그인 DTO 정의
• 로그인 로직 구성
• 로그인 Controller 계층 구현
• 로그인 인터셉터 구현

칵테일 레시피 생성 일자 필드 추가

• 칵테일 레시피 필드 추가
• 칵테일 레시피 API 수정

댓글 단 레시피 리스트 API

사용자 정보 페이지에서 사용자가 댓글을 단 레시피 리스트를 받아오는 API 구현

• 멤버, 리뷰 연관관계 설정
• 댓글 단 레시피 리스트 제공 API 정의

FE 회원정보 수정 페이지 구현

회원정보 수정 페이지 구현

회원 정보 조회 기능 구현

• 회원 상세 정보(이메일, 별명 등) 조회
• 회원 즐겨찾기 목록 조회
• 회원 나만의 레시피 목록 조회

즐겨찾기 API

• 즐겨찾기 추가
• 즐겨찾기 삭제

회원 정보 수정 기능

• Controller updateMemberInfo 메서드 구현
• Service updateMemberInfo 메서드 구현

나만의 레시피 API

• AlcoholicType, Glass, Category, RecipeTaste enum 필터 값 제공 API(나만의 레시피 추가 뷰)
• 나만의 레시피 추가
• 나만의 레시피 삭제
• 나만의 레시피 편집

칵테일 검색 기능

• 이름으로 검색
• 필터 조건에 따라 검색

FE 에러 페이지 구현

FE
-에러 페이지 구현 및 CSS 적용

[FE] 메인페이지 수정

FE 레시피 디테일 페이지 구현

FE

• 레시피 디테일 페이지 구현

재료 객체 생성

• CSVtoObjectMapping.java 파일 생성
• Unit enum 생성
• Ingredient 클래스 생성
• recipeIngredient 클래스 생성

FE 칵테일 등록 페이지 구현

-기본 코드 수정
-Component 나누기
-CSS 적용

칵테일 정보 csv파일 추가

[FE] ID찾기 페이지 코드 수정

[FE]
ID찾기 페이지 코드 �refactor 및 CSS 적용 예정

[FE] PW찾기 페이지 코드 수정

FE
-PW찾기 페이지 코드 수정

프로젝트 메인 홈 개발

FE

• 메인 도메인 작성

레시피재료 클래스 생성 및 매핑

RecipeIngredient 클래스 생성
Ingredient 엔티티와 CocktailRecipe 엔티티에서 정보 알맞게 오는지 체크

[FE ] MyPage 페이지 구현

FE

• MyPage 구현

칵테일 레시피-재료 연관관계 설정

• 칵테일 레시피 - 재료 연관관계 설정
• 칵테일 레시피 검색 필터 제공 API 수정
• 칵테일 레시피 조회 API 수정
• 나만의 레시피 추가 API 수정

FE 로그인 수정 페이지 구현

• 로그인 css
• 회원가입 페이지, 아이디 찾기 페이지, 비밀번호 찾기 페이지 연결

커밋 메시지 템플릿 추가

일관성 있는 커밋 메시지, 커밋 로그 관리를 위한 커밋 메시지 템플릿 추가