단골손님

배포 주소: 단골손님

프로젝트 기간: 7개월

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

소개

"만약 매일 마시는 커피를 정기 구독할 수 있는 기회가 주어진다면 어떨까요?" "작은 동네 식당이 꾸준한 매출을 유지할 수 있는 방법은 무엇일까요?"

단골손님은 이러한 아이디어에서 출발한 사이드 프로젝트입니다. 대형 프랜차이즈에서만 제공되던 정기 구독 서비스를 지역 작은 식당에 도입한다면, 고객들은 저렴한 가격으로 혜택을 누릴 수 있을 뿐만 아니라 식당 주인들도 가게를 홍보하고 정기적인 수입을 올릴 수 있는 기회를 갖게 될 것입니다.

단골손님 프로젝트는 소비자와 사업자를 위한 두 가지 주요 페이지로 나뉘어 있습니다. 손님 페이지에서는 고객들이 가게의 메뉴를 확인하고 정기 구독권을 구매할 수 있습니다. 또한, 사장님 페이지에서는 식당 주인들이 자신의 가게를 등록하고 구독권을 생성하여 판매할 수 있습니다. 구독권을 구매하면 고유한 QR 코드가 생성되며, 이 코드를 사장 페이지의 QR 코드 스캐너를 통해 스캔하여 구독권의 사용 횟수를 차감할 수 있습니다.

플로우 차트

시연 애니메이션

손님 구독권 구매

사장님 가게 등록

사장님 구독권 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자리를 입력하면 진행이 가능합니다.