🍹 B-tender

칵테일 레시피 추천 및 공유 사이트

🕒 제작기간

2022년 6월 24일 ~ 2022년 8월 2일

🌟

물가 상승으로 인한 값비싼 술자리 비용!

남들과 술을 마시기 보단 홀로 집에서 마시는 혼술족의 증가!

평범한 술보다는 새롭고 맛있는 칵테일을 집에서도 혼자 만들어보자!

• 다양한 칵테일 레시피 추천 및 정보 제공
• 나만의 칵테일 레시피 공유
• 나만 아는 분위기 좋은 바 추천 및 공유

👋 프로젝트 소개

🗒️ 기능

👍 간단하고 쉬운 회원가입

• 카카오를 통한 소셜로그인 및 기본 회원가입으로 간단하고 안전하게 회원가입 할 수 있어요!

😃 마이페이지

• 마이페이지에서 내가 작성한 글의 개수, 닉네임 변경, 비밀번호 변경, 계정 탈퇴 등의 가능을 이용할 수 있어요!

🍾 메인 페이지 술장고에 내가 가진 술 등록하기

• 술 목록에서 플러스 버튼으로 메인페이지 술장고에 내가 가진 술을 등록할 수 있어요!

🍸 기존의 칵테일 레시피 추천받기

• 기존에 존재하는 칵테일 레시피를 추천 받을 수 있어요!

🍹 나만의 칵테일 레시피 공유

• 내가 만든 나만의 칵테일 레시피를 글작성을 통해 공유할 수 있어요!

📌 나만 알고 있는 칵테일 바 추천받기 및 공유

• 나만 알고 있는 분위기 좋은 바를 글작성을 통해 공유할 수 있어요!

💕 마이페이지에서 내가 좋아요 누른 컨텐츠 확인

• 마이페이지에서 내가 좋아요 누른 모든 컨텐츠를 확인할 수 있어요!

Architectrue

🚀 Tech Stack

• Back-end Tech Stack
  
  

• Front-end Tech Stack
  
  

  

  
  
  
  

• Front-end Library

라이브러리명	내용	참고
axios	서버통신
typescript	타입스크립트
react-router-dom	렌더링
react-query	서버데이터관리
recoil	전역상태관리
react-hook-form	로그인 및 회원가입 폼 생성
react-cookie	쿠키 사용 위한 커스텀 훅 생성
react-slick	이미지 슬라이드
slick-carousel	이미지 슬라이드
@ant-desingicons	아이콘 툴킷
react-icons	아이콘 툴킷
styled-components	css
react-modal	모달창 생성
@types/react-dom	타입스크립트 관련
@types/react	타입스크립트 관련
@types/node	타입스크립트 관련
@types/jest	타입스크립트 관련

🚀 Tech Stack 선정 이유

1. TypeScript (TypeScript vs JavaScript)

TypeScript는 정적 타입 언어이기에 js보다 컴파일시 시간이 더 걸리지만, 안정성보장과 에러를 js를 사용할 때보다 수월하게 잡을 수 있어서 선정했습니다.

2. React-query (React-query vs Redux-toolkit vs Redux)

React-qeury는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편리하게 해줘서 사용했습니다.

3. Recoil (Recoil vs Redux toolkit vs Redux)

Recoil은 Redux에서 비동기처리를 해야하는 경우에 Redux thunk 등에 의존하여 처리를 해왔는데, Recoil은 비동기 처리를 기반으로 작성되어 있고 useState와 유사하여 사용하기에 편리하다고 판단하여 사용했습니다.

## 🎬 시연영상

시연 영상 링크

✨ Developers

• Front-end(React)

  • 임준수 Github
  • 변희재 Github
    

• Back-end(Nodejs) : Back-end repo

  • 진태인 Github
  • 최봉규 Github
  • 홍승현 Github
  
  

• Designer : DE-Figma

  • 김예지
  
  

• 팀 notion : https://vine-sound-ddd.notion.site/Btender-7-D-2-74e39aa8b6714332aaf6afc6b66b2f69

🔥이슈 및 트러블슈팅

1. CloudFront 배포 관련 문제

❓S3 버킷의 내용을 다시 업로드하여도 캐시가 유지되어 일정 시간이 지나도 해당 변경 내용이 CloudFront에 즉시 반영되지 않는 문제가 발생했습니다.

❗️원인을 CloudFront의 캐시 삭제 정책에 시간 설정이 길게 설정된 것을 추정하였고, 확인해본 결과 TTL 설정이 24 설정되어 있었습니다. 원인을 파악한 후 CloudFront의 정책을 만들어 TTL설정을 1초로 설정했고, Invalidations(무효화)에 만든 정책을 반영하여 Edge Location에 저장된 캐시를 삭제하여 S3 버킷의 내용이 변경되면 즉시 반영되도록 하였습니다.

2. 소셜로그인 관련 문제

❓소셜로그인 진행시 리다이렉트되면서 토큰값을 url로 받아오는데, 리다이렉트가 안되는 문제, 토큰값을 못 받는 문제 발생했습니다.

❗️토큰값을 쿼리 스트링으로 받아오지 않아서 주소의 파싱 params로 못 받아서 발생하는 문제였습니다. 따라서 문제를 발견하여 수정을 하였으나, 새로고침 시에만 쿠키에 토큰이 저장되는 문제를 발견하였고, 컴포넌트를 하나 더 만들어서 토큰을 받는 부분과 서버에 유저정보를 요청하는 부분을 나누어서 저장하도록하여 해결하였습니다.

3. react-query 데이터 reading 관련 문제

❓react-query를 통해 받아온 데이터를 인풋의 플레이스홀더와 기본값으로 넣어줬는데 query에서 데이터를 받아오기 전에 실행되어 undefined는 map을 돌릴 수 없다는 오류가 발생했습니다. 흔히 해결방법으로 사용하는 옵셔널체이닝과 isLoading을 사용했지만 문제가 해결되지 않았습니다.

❗️

const titleData: string = query.isLoading
    ? "loading"
    : `${query.data[0].title}`;

이와 같이 아에 상수로 지정해줘서 데이터가 불러와지지 않았을 때 loading을 출력해주고 로딩이 완료되면 데이터가 찍히도록 만들고

 useEffect(() => {
    setTitle(titleData);
    setContent(contentData);
    setAddress(addressData);
  }, [titleData, addressData, contentData]);

useEffect로 데이터가 불러와지면 자동으로 렌더링 되도록 해줌.

🛠 유저 피드백 반영

B-tender는 7/29 부터 8/1까지 4일간 사용자 테스트를 진행했고, 총 211명이 저희 서비스를 사용해주셨습니다.

전반적인 사용경험 만족도는 아래 사진과 같고,

유저 분들이 가장 많이 이용하신 서비스로는 칵테일 레시피 확인, 추천 바 확인, 게시글 좋아요, 마이페이지에서 좋아요 목록 확인이었습니다.

1. 마이레시피 관심목록에 기존 레시피와 유저 추천 레시피가 함께 나오면 좋겠다는 의견

2. 레시피 페이지에서 재료의 사진과 재료명의 슬라이드가 따로 움직이는 것이 불편하다는 의견

3. 모든 탭들의 디테일 페이지에서 뒤로 가면 각 디테일의 상위 탭으로 이동하는 것이 불편하고, 바로 이전 페이지로 이동했으면 좋겠다는 의견