DA WHISKY - FrontEnd

(👆 클릭 시 소개 영상 페이지로 이동합니다.)

🥃 프로젝트 소개

🍹 다위스키?

DA WHISKY(다위스키)는 "위스키를 더 쉽게, 깊이 알아갈 수 있는 곳이 없을까?" 라는 물음에서 시작되었습니다.
위스키 검색, 기록, 위스키바 탐색 및 줄서기 기능 까지 - 위스키 경험을 더욱 풍부하게 만들어 주는 온라인 플랫폼 입니다.

DA WHISKY는 다음과 같은 기능을 제공합니다.

• 카테고리별 위스키 조회, 해당 위스키에 대한 맛 평가 기록

• 내 주변 또는 설정한 위치를 중심으로 한 위스키바 조회

• 조회한 위스키바가 보유 중인 위스키 조회 및 실시간 줄서기, 입장 알림

• 전직 바텐더의 입문용 위스키 큐레이션, 위스키 검색

🖼️ 브로슈어

좌측의 화살표 아이콘(▶︎) 클릭 시 토글을 열어 확인할 수 있습니다.

⏰ 개발 일정

기간	일정
23/05/19 ~ 23/05/21	프로젝트 주제 및 일정 수립
23/05/22 ~ 23/05/28	UI 디자인 및 와이어프레임 구현
23/05/29 ~ 23/06/04	화면 구현 및 MVP 1차 스코프 기능 구현
23/06/05 ~ 23/06/18	1차 기능 피드백 수정 및 MVP 2차 스코프 기능 구현
23/06/19 ~ 23/06/25	유저 배포 및 유저 테스트 피드백 반영

관련 링크

구분	링크 바로가기
	서비스 (운영 종료로 일부 UI만 확인 가능합니다.)
	개발 팀 노션
	피그마

🥃 서비스 아키텍처

🥃 주요 기능

무한 스크롤	실시간 줄서기	줄서기 응답 알림
PWA 배포	검색어 자동완성	지도 위치 감지

🥃 기술적 의사결정

Styled Component	테일윈드와 스타일드 컴포넌트를 고민하던 중, 디자이너님과의 원만한 협업과 초기 러닝커브를 고려하여 익숙한 라이브러리를 선택하는 것이 좋다는 판단하에 선정
React router dom	UI를 url에 따라 분기 처리하여 렌더링하기 위해서 선정
React query	리액트 쿼리 사용 시 캐싱 처리를 이용하거나 데이터 변경 시 get api를 자동 실행하는 등 최적화와 효율적인 코드 작성을 위해 선정
Axios	비동기 통신처리 수단 중 fetch같은 JS 내장함수에 비해 에러상황 등에 대한 처리가 유연하여 선정
React kakao maps sdk	기존의 html + js로 구성되어있는 kakao maps 레퍼런스를 리액트와 jsx에 맞게 함수형 컴포넌트 코드로 작성하기 위해 선정
Firebase	주류 관련 사이트 사유로 ‘카카오톡 메시지’ 보내기를 포함한 카카오 API의 상당부분을 반려받아 구현 중이던 ‘줄 서기’ 기능에서 점주가 대기중이던 고객에게 알림을 보내기 위한 수단으로써 차선책으로 FCM을 채택
Socket.io	줄서기 기능의 실시간 자리현황 반영을 위해 소켓 방식을 채택하였고, FE와 BE 언어가 동일하여 관련 npm 중 완성도가 가장 높은 라이브러리인 socket.io 선정
Recoil	- 데이터의 양방향 핸들링을 위해 상태관리 툴을 도입 - 리덕스나 리덕스 툴킷보다 보일러플레이트가 적고, 상대적으로 더 기존 리액트 코드와 유사해(useState ↔ useRecoilState) 러닝 커브가 적을 것으로 예상되어 선정
React-intersection-observer	- 무한스크롤 적용을 위해 도입 - 직접 dom의 scroll 위치값을 계산하는 것보다 observer가 제공하는 ref와 inView를 이용해 위치값을 계산하는 것이 상대적으로 렌더링이 적어 해당 라이브러리 선정
React-toastify	‘확인’ 버튼을 눌러야 하는 브라우저 기본 알림보다 원하는 시간 만큼 알림창을 화면에 띄울 수 있고, 디자인을 커스텀할 수 있어 선정

🥃 트러블슈팅

👉 Route 인증/인가 오류

👉 Map marker 비동기 출력 이슈

👉 PWA

🥃 유저 테스트 피드백

👉 유저 테스트 결과 및 피드백 반영

🥃 팀원 소개

🎨 디자이너

이름	담당 기능	이메일
김영은	- UI/UX 전체 디자인 - 로고 및 브로슈어 디자인	zerosilveree@gmail.com

🍷 프론트엔드

이름	담당 기능	깃허브
김한솔 (리더, 프론트엔드 총괄)	- UI 공통 컴포넌트 및 API 공통 함수 제작 - route 인증/인가 - 카카오맵 커스텀 - 디바운싱을 이용한 검색어 추천 및 검색기능 - 좋아요, 코멘트 CRUD - 위스키 및 위스키바 리스트, 디테일 페이지 - 유저 마이페이지, 스토어 주류관리 페이지	@hansololiviakim
최재홍	- 점주 로컬 회원가입/로그인 - 유저 카카오 회원가입/로그인 - PWA - socket.io를 통한 실시간 줄서기 - FCM 줄서기 알림 기능 - 스토어 마이페이지	@allongsio

🍻 백엔드

이름	담당 기능	깃허브
주지민 (부리더, 백엔드 총괄)	- 서버 배포/관리 - HTTPS - CI/CD - Socket(줄서기) - DB Polling(자리 현황) - ERD/아키택쳐/스트럭쳐 설계 - 북마크/좋아요 기능 - Swagger - Sentry	@jujigithub
박지현	- 점주 마이페이지 - 줄서기/리뷰 CRUD - 유저 마이페이지 - 위스키 조회/필터링/검색	@jihyunpark81
이준교	- 소셜로그인(카카오) - 회원가입(점주/유저) - 줄서기 관련 FCM - 리프레쉬/디바이스 토큰 - 위스키 및 점주 DB 스크랩핑 작업	@junkyo974

🥃 Copyright ©2023 Team Spirits all rights reserved.