README.md

DA WHISKY - FrontEnd

🥃 프로젝트 소개

DA WHISKY는 위스키 체험을 위한 온라인 플랫폼입니다.

구분	바로가기	구분	바로가기
	DA WHISKY 바로가기		팀 노션 바로가기
	FE 깃허브 바로가기		피그마 바로가기
	BE 깃허브 바로가기		스웨거 바로가기

프로젝트 진행 일정

• 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   MVP 2차 스코프 구현
  
• 23/06/19 ~ 23/06/25   유저 배포 후 유저 테스트 피드백 반영
  
• 23/06/25 ~ 23/06/30   발표 자료 준비 및 최종 발표 진행
  

브로슈어 확인하기

🥃 서비스 아키텍처

🥃 주요 기능

무한 스크롤	실시간 줄서기	줄서기 응답 알림
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

🥃 유저 테스트 피드백

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

🥃 팀원 소개

이름	역할	담당 기능	깃허브	이메일
김영은	DE	- UI/UX 디자인 - 로고 및 브로슈어 디자인		[email protected]
김한솔	FE / L	- 공통 컴포넌트 제작 - axios interceptor - route 인증/인가 - 카카오맵 - PWA - 위스키 리스트, 디테일 페이지 - 위스키바 리스트, 디테일 페이지 - 좋아요, 코멘트 CRUD - 유저 마이페이지 - 스토어 주류관리 - 검색 페이지	@hansololiviakim	[email protected]
최재홍	FE	- 점주 로컬 회원가입/로그인 - 유저 카카오 회원가입/로그인 - PWA - socket.io를 통한 실시간 줄서기 - FCM 줄서기 알림 기능 - 스토어 마이페이지	@allongsio	[email protected]
주지민	BE / VL	- 서버 배포/관리 - HTTPS - CI/CD - Socket(줄서기) - DB Polling(자리 현황) - ERD/아키택쳐/스트럭쳐 설계 - 북마크/좋아요 기능 - Swagger - Sentry	@jujigithub	[email protected]
박지현	BE	- 점주 마이페이지 - 줄서기/리뷰 CRUD - 유저 마이페이지 - 위스키 조회/필터링/검색	@jihyunpark81	[email protected]
이준교	BE	- 소셜로그인(카카오) - 회원가입(점주/유저) - 줄서기 관련 FCM - 리프레쉬토큰/디바이스토큰 - 위스키 및 점주 DB 스크랩핑 작업	@junkyo974	[email protected]

🥃 Copyright ©2023 HangHae99 14th Final: Team Spirits all rights reserved.