/jaranda-project

jaranda project (wanted 3rd prj)

Primary LanguageJavaScript

[Assignment 3] 자란다 #1, #2

🧡Basic requirements

  1. 회원가입 페이지를 구현하고, 로그인/로그아웃 기능을 구현
    • 아이디(이메일), 비밀번호, 이름, 나이, 주소, 신용카드 정보 입력
      주소와 신용카드 정보는 팝업을 통해 입력
    • 로그인 된 계정은 자신에게 허용된 메뉴만 접근 가능
    • 메뉴는 임의대로 정의해도 되며, 메뉴를 선택했을 때 메뉴명이 화면에 출력
  2. 관리자 로그인 시 등록한 계정 정보 확인 가능
    • 테이블 component 페이지 생성, Data Table, 페이지네이션, 검색기능 구현
    • 관리자는 계정을 임의로 생성할 수 있고, 계정별로 볼 수 있는 메뉴를 설정 가능

💛Built With

React Styled Components Visual Studio Code

NPM Markdown GitHub Slack


💚Implementation List

  • 회원가입
    • 입력된 정보의 유효성 검사
    • 모든 항목이 입력 되었는지 확인
    • 모든 항목이 올바르게 입력되었으면 로컬스토리지에 저장
  • 로그인
    • 모든 항목이 올바르게 입력 되었는지 확인
    • 로그인 시 해당 계정의 로그인 정보를 저장
    • 로그인 이후 일정 시간(3시간)이 지나면 자동 로그아웃 처리
  • 마이페이지
    • 내 정보 탭에서 현재 로그인한 계정의 정보(이메일, 비밀번호, 주소, 결제 수단) 수정 가능
    • 선생님 계정으로 로그인 시 학생 정보 확인 가능
  • 접근 제한
    • 계정의 접근 가능 정보를 토대로 Global NavBar의 Tap 접근 제한
  • 관리자 페이지
    • 가입된 사용자의 정보를 조회, 검색, 수정 가능
    • 사용자 계정 생성
    • 관리자 페이지 테스트 계정 (email: admin@jaranda.com, password: admin1234)

💙Who Did What

  • 🐥 민유지 : 로그인 - 계정에 따른 접근 제어 및 Login Expiration 관련 logic구현, Mypage '내 정보 수정' 기능 구현
  • 🐷 정태웅 : 로그인 - 로그인/로그아웃 구현, 레이아웃, 토스트팝업
  • 🐺 석정도 : 마이페이지 - 라우팅, 학생정보
  • 🐭 윤맑은이슬 : 회원가입 - Daum 주소검색 API 연동, 이메일 및 비밀번호 유효성 검사, "가입하기" 최종 유효성 검사
  • 🐧 최혜린 : 회원가입 - 카드 정보 입력 폼, 비밀번호 확인, 이름 및 나이 유효성 검사, 회원 정보 저장
  • 😺 백진수 : 관리자 - 데이터 테이블, 사용자 계정 생성 기능, 데이터 테이블 수정 기능
  • 🐔 강용구 : 관리자 - 검색 기능, 페이지네이션

💜Build Installation

# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run start

🤍Project Link

https://epic-jepsen-a6fdee.netlify.app/

  • 관리자 계정
email: admin@jaranda.com
password: admin1234
  • 테스트 계정
email: kimteacher@jaranda.com
password: kimteacher1234

email: leestudent@jaranda.com
password: leestudent1234

email: parkparent@jaranda.com
password : parkparent1234

💗Preview

drawing drawing drawing drawing drawing drawing