단골손님

배포 주소: 단골손님

프로젝트 기간: 7개월

팀원: 프론트엔드 2명, 백엔드 1명, UI/UX 2명

소개

“만약에 매일 마시는 커피를 정기 구독할 수 있다면?”, “동네 작은 식당에 꾸준한 매출을 만들 수 있는 방법은 뭘까?” 단골손님은 이런 작은 생각에서 시작한 사이드 프로젝트입니다.

대기업 프랜차이즈에만 있던 정기 구독 서비스를 집 근처 작은 식당에 도입한다면 손님에게는 저렴한 가격에 이용할 수 있는 혜택을, 사장님에게는 내 가게를 홍보하고 정기적인 매출을 올릴 수 있는 기회를 줄 수 있습니다.

페이지는 크게 구독권을 만들어 관리하는 사장님 페이지와 구독권을 찾아보고 구매하는 손님 페이지로 나뉩니다.

플로우 차트

시연 애니메이션

손님 구독권 구매

사장님 가게 등록

사장님 구독권 QR 스캔

손님 페이지

메인 페이지

• 손님이 가장 먼저 볼 수 있는 페이지입니다.
• 사장님이 만든 가게 목록이 보입니다.
• 가게 이름으로 검색, 지역별•카테고리별 필터링, 인기순•최신순 정렬이 가능합니다.
• 구매한 구독권이 있다면 내 구독권 목록이 뜨고 사장님에게 QR을 보여주어 사용할 수 있습니다.

검색 페이지

• 가게 이름으로 가게 검색을 할 수 있는 페이지입니다.
• 추천 검색어가 나열되어 있기에 해당 검색어로 검색도 가능합니다.
• 가게 이름으로 필터링 된 가게들이 보이게 되며, 지역 필터링, 인기순•최신순 정렬이 가능합니다.

가게 페이지

• 가게에 대한 상세한 정보를 볼 수 있는 페이지입니다.
• 가게의 여러 이미지, 한 줄 소개, 대표 구독권을 볼 수 있습니다.
• 카카오 Map을 사용하여 가게의 위치를 보여주고, 영업시간을 볼 수 있습니다.
• 현재 판매 중인 메뉴와 구독권을 볼 수 있고 구독권을 클릭하여 구매가 가능합니다.

구독권 구매 페이지 - 로그인 필요

• 가게 페이지에서 선택한 구독권을 구매할 수 있는 페이지입니다.
• 카드, 카카오 페이, 토스 페이로 결제가 가능합니다.

로그인 페이지

• 단골손님 사이트에 로그인을 할 수 있는 페이지입니다.
• 구글 계정으로 소셜 로그인이 가능합니다.
• 처음 로그인 시 이미지, 닉네임, 휴대폰 번호 등의 계정 정보를 입력합니다.

마이 페이지 - 로그인 필요

• 로그인한 유저에 대한 정보를 볼 수 있는 페이지입니다.
• 닉네임 옆 화살표를 눌러 정보를 보고 수정할 수 있습니다.
• 구독한 구독권의 목록과 좋아요를 누른 가게의 목록을 볼 수 있습니다.

사장님 페이지

메인 페이지

• 사장님 페이지로 들어왔을 때 먼저 볼 수 있는 페이지입니다.
• 단골손님의 컨셉을 볼 수 있습니다.

로그인 페이지

• 회원가입을 통해서 여러 정보 입력 후 이메일로 인증번호를 받아 회원가입을 완료할 수 있습니다.
• 이후 로그인 페이지에서 계정을 입력해 로그인할 수 있습니다.

QR 코드 - 로그인 필요

• 사장님이 손님들이 구매한 구독권의 QR 코드를 찍어 사용하도록 하는 페이지입니다.
• 정해진 구독권의 QR 코드만 스캔이 가능하며 다른 QR 코드는 에러를 띄웁니다.

가게 설정 - 로그인 필요

• 등록한 가게에 대한 정보를 보고 수정할 수 있는 페이지입니다.
• 아직 가게를 등록하기 전이라면 가게 등록 페이지에서 가게를 등록할 수 있습니다.

가게 등록 - 로그인 필요

• 가게를 새로 등록하기 위한 페이지입니다.
• 가게명, 카테고리, 한 줄 소개, 위치, 영업시간, 서비스 태그를 입력해서 등록할 수 있습니다.
• 이후 사업자 등록번호를 입력하여 검증 후에 등록이 가능합니다.

마이 페이지 - 로그인 필요

• 사장님 계정에 대한 정보를 볼 수 있는 페이지입니다.
• 비밀번호와 휴대폰 번호, 계좌번호를 변경하고 등록할 수 있습니다.

사용 기술

기술 사용 이유

• TypeScript
  • 안정적이고 유지 보수가 쉬운 코드를 작성하기 위해 사용했습니다. 타입의 모듈화를 사용해 코드 작성이 빠르게 진행되었습니다.
• React, Next.js
  • 컴포넌트 기반으로 코드 재사용성과 유지 보수성을 높였습니다.
  • 서버 사이드 렌더링을 사용하여 초기 로딩 속도와 검색 엔진 최적화를 진행했습니다.
• Zustand
  • 전역 상태 관리를 위해 사용했습니다.
  • 간단한 문법으로 컴포넌트 간의 데이터 공유를 진행했습니다.
• Axios, React Query
  • 서버와의 데이터 통신을 쉽고 간편하게 처리하였습니다.
  • HTTP 요청을 캐싱하고 로딩과 오류 처리를 효과적으로 처리합니다.
• Emotion
  • CSS-in-JS를 사용하여 스타일을 간편하게 하였고 재사용성을 증가시켰습니다.
  • CSS의 규모가 커지는 것을 우려해 Emotion을 사용하여 유지 보수가 어려움을 개선하였습니다.
• ESLint, Prettier
  • 코드 스타일을 규격화하고 포맷팅하기 위해 사용했습니다.
• Netlify
  • 사이트를 쉽게 배포하고 환경 변수 관리를 지원합니다.
  • CD를 제공하여 각 PR마다 변화를 바로 확인하고 main에 머지 시 바로 production에 배포되도록 했습니다.
• GitHub Actions
  • Push를 할 때마다 CI를 하도록 했습니다.
  • build, lint를 통해 프로젝트가 빌드가 잘 되는지, 코드 스타일이 통일되었는지 확인합니다.

참고

• 단골손님 프로젝트는 포트폴리오 목적으로, 상업적 용도의 플랫폼이 아닙니다.
• 가게 등록 시 사업자 등록번호는 개발 편의를 위해 임의의 10자리를 입력하면 진행이 가능합니다.