[프로젝트]우산대여 키오스크 - 1 (기획)

프로젝트 개요

• 어디서나 우산 키오스크만 있으면 우산을 쉽게 대여와 반납이 가능한 우산 서비스를 제작

프로젝트 기능

• 우산 대여 키오스크(IOT) 개발

• 우산 대여 및 반납, 관리 기능 개발

프로젝트 기간 및 팀원 구성, 역할

• 기간
  • 2023.01.09 ~ 2023.02.17
• 팀원 구성 ( 총 6명)
  • FE (3명)
    • 관리자 전용 페이지, 결제 연동 ( 나 )
    • 서비스 페이지 ( 1명 )
    • 키오스크 화면 ( 1명 )
  • BE ( 3명 )
    • CI / CD 및 총괄( 1명 )
    • 서버 개발 ( 1명 )
    • 서버 클라이언트 연동 및 IOT 개발 ( 1명 )

시스템 흐름도

기능 요구 사항 (관리자, 사용자 결제)

• 관리자 로그인 기능

  • 관리자의 모든 기능은 로그인으로 인증 되어야 사용 가능
  • 세션이 만료될 경우 자동으로 로그인 페이지로 돌아가야함

• 유저 정보 관리 기능

  • 사용자 정보 조회
  • 사용자 별 이용 로그 조회
  • 이용 로그 별 우산 반납 사진 조회

• 서비스 현황 조회

  • 모든 키오스크의 월, 연도별 수익을 확인 할 수 있는 페이지

    • 하나의 페이지에 그래프와 테이블로 표현한다.
    • 그래프와 테이블의 초기 상태는 키오스크 들의 월 별 수익을 나타내고 있으며 날짜는 현재 날짜로 한다.
    • 연도 선택, 월 선택, 월 별로 보기, 연도 별로 보기를 각각 구현한다.
    • 막대 그래프로 표현

  • 모든 키오스크의 월, 연도별 사용 횟수를 확인 할 수 있는 페이지

    • 위와 동일

  • 하나의 키오스크에 대해 일, 월별로 수익 추이를 확인 할 수 있는 페이지

    • 수익 또는 사용 횟수 페이지에서 막대 혹은 테이블을 클릭하면 해당 키오스크에 대한 수익추이 페이지로 이동
    • 꺾은선 그래프로 표현

• 사용자 결제 페이지

  • 사용자가 키오스크의 QR을 통해 접속하면 결제페이지로 이동
  • 로그인 여부를 체크해 로그인을 하지 않았더라면 로그인페이지로 이동

기술 스택

• React, Redux, Redux Saga

  • React를 선택한 이유

    1. 첫 개발을 Vue로 시작했지만 각 기업에 대부분 React를 사용하고 있기 때문

    2. Vue의 경우 vueex를 통한 상태관리와 vue-cli를 통한 개발환경이 틀에 맞춰서 적용되기 때문에 렌더링 과정, 상태관리의 흐름을 몰라도 사용 가능했지만 React의 경우 이것을 거의 수동으로 설정해줌으로 상태관리와 생태계를 공부 할 수 있다고 판단.

    3. vue에서 골치아팟던 life-cycle로 인한 오류들을 React에서는 전부 설정 가능해서 이를 해결 할 수 있고 life-cycle을 조금 더 디테일하게 공부 할 수 있다고 기대

  • Redux를 선택한 이유

    1. 우리의 프로젝트 규모에서는 Mobx를 써도 무방할것이라 생각했지만 이후 점차 큰 프로젝트를 할 것을 대비해 Redux를 선택

    2. React를 사용한 프로젝트는 처음이기에 많은 오류들을 만날 것이라 생각했고 오류들의 추적이 쉬운 Redux를 선택 ( 단방향으로 흐르는 Flux패턴이기때문에 추적이 쉽다 )

  • Redux Saga를 선택한 이유

    1. Redux-Thunk 와 고민했으나 단순 API 호출만 하지 않고 Redux-saga의 Effect 함수 ( take, every, put ...) 을 이용할 일이 있을 것이라 생각했기 때문

    2. 이것 또한 사용하는 기업이 많기 때문에 공부하자는 차원도 있었음

• git, jira, sourcetree

초기 UI/UX ( figma )