Giter Club home page Giter Club logo

jaranda-project's Introduction

[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: [email protected]
password: admin1234
  • 테스트 계정
email: [email protected]
password: kimteacher1234

email: [email protected]
password: leestudent1234

email: [email protected]
password : parkparent1234

💗Preview

drawing drawing drawing drawing drawing drawing

jaranda-project's People

Contributors

hami-dev avatar irisdew avatar jinsubaek11 avatar jtwjs avatar nvrtmd avatar psy-g avatar seokkitdo avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.