KISS Wallet

in Project

Skill : HTML5, CSS3, Laravel, MySQL, Node.js, AWS, Nginx
Date : 2022년 7월 ~ 2022년 8월
Site : KISS Wallet

블록체인 제갑 서비스

스플래시페이지로그인페이지

스플래시 화면 및 로그인 페이지

메인페이지마이페이지

메인 및 마이 페이지

추천인페이지입금페이지

추천인 및 입금 페이지

프론트엔드 담당 (Laravel)

  1. 회원가입 및 로그인 기능(정규표현식을 활용하여 검증기능 구현)
    • 로그인 기능은 Laravel의 Auth 파사드의 user 메소드를 통해 인증 된 사용자 정보를 가져올 수 있습니다.
    • auth 미들웨어는 사용자가 인증되지 않았다면 다시 로그인 페이지로 돌려보냅니다.
    • 비밀번호의 경우 DB에는 Hash로 데이터가 저장이 되어있어서 Hash파사드가 제공하는 check라는 메소드를 이용해 암호화하지 않은 데이터와 일치하는지 확인했습니다.
  2. 아이디 찾기 (정규표현식을 활용하여 검증기능 구현)
    • Cool SMS 를 이용하여 가입시 입력한 핸드폰 번호로 인증코드를 전송하여 본인인증 확인
    • input에 입력한 value값을 백엔드에 POST 요청을 보내 일치하는 값이 있는지 확인합니다.
  3. 비밀번호 찾기 (정규표현식을 활용하여 검증기능 구현)
    • Cool SMS 를 이용하여 가입시 입력한 핸드폰 번호로 인증코드를 전송하여 본인 인증 확인
    • input에 입력한 value값을 백엔드에 POST 요청을 보낸 후 본인 인증으로 확인한 유저의 비밀번호 데이터를 update합니다.
  4. 마이페이지
    • 출금 인증 번호 재설정 (정규표현식을 활용하여 검증기능 구현)
      • Cool SMS 를 이용하여 가입시 입력한 핸드폰 번호로 인증코드를 전송하여 본인인증 확인
      • input에 입력한 value값을 백엔드에 POST 요청을 보낸 후 본인 인증으로 확인한 유저의 비밀번호 데이터를 update합니다.
    • 추천인 복사
      • clipboard.js 라이브러리를 사용하여 복사 기능을 구현했습니다.
      • 복사가 완료된 후에는 alert로 완료 문구를 반환했습니다.
    • 지갑 주소 복사
      • clipboard.js 라이브러리를 사용하여 복사 기능을 구현했습니다.
      • 복사가 완료된 후에는 alert로 완료 문구를 반환했습니다.
    • 추천인 없을 경우 추천인 아이디 출력 예외처리
  5. 공지 사항
    • 관리자에서 등록한 공지사항 리스트, 상세 페이지 출력
    • 가장 최신에 등록한 공지사항은 메인페이지 상단에 출력
  6. 로그아웃
    • Laravel의 Auth 파사드에서 제공하는 logout 메소드를 사용했습니다.
  7. 공식 홈페이지 및 SNS 링크 이동
    • Laravel의 route 메소드를 이용해 링크 이동 기능을 구현했습니다.
  8. QR 코드 생성 및 스캔
    • Simple qrcode 라이브러리를 사용해 QR코드 생성 기능을 구현했습니다.
    • 자바스크립트와 html5-qrcode라는 라이브러리를 이용해서 QR코드 스캔 기능을 구현했습니다.
* TOC {:toc}

© 2021. All rights reserved.