0. DASONY ERD

1. 로그인 페이지

1. 기능 설명
   • 우측 글씨 효과 – 타이핑 효과
   • 로그인 시 사용자 및 관리자 계정 구분하여 페이지 이동
2. 기능별 코드

   • 우측 글씨 효과

     • 타이핑 효과 적용

       

   • 로그인 시 사용자 및 관리자 계정 구분하여 페이지 이동

     • id, 비밀번호 공란일 경우 로그인 버튼 비활성화 처리

       

     • 이미 로그인되어 있는 경우 로그인 페이지 접근 불가 및 로그인 정보에 따라 관리자 및 사용자 페이지로 이동

       

     • 로그인 성공 시 localStorage에 민감한 개인정보를 제외한 user 정보 저장

       

2. 회원가입 페이지

1. 기능 설명
   • 아이디 및 별명 중복 확인 – DB에 저장되어 있는 아이디 및 별명과 비교하여 결과를 알리는 Modal창 등장, 중복일 경우 입력란 공란 처리
   • 비밀번호 동일 검사 – useEffect를 이용하여 비밀번호 동일 검사 결과가 실시간으로 확인되도록 함
   • 별명, 아이디, 이름과 핸드폰 입력란 문자 제한 – 각 입력란의 성격에 알맞은 문자만 입력되도록 함, 입력란 별로 제한 글씨 수 설정, 핸드폰 번호 입력시 3글자, 7글자 입력 후 자동을 ‘-’입력
   • 비밀번호 암호화 – crypto-js를 이용하여 SHA256 형식으로 암호화된 비밀번호 DB에 저장
   • 주소 찾기 - 다음 주소 찾기 API 이용
2. 추가 설명 코드
   • 회원 테이블 Primary Key 설정

     • 멤버 시퀀스 생성

       

     • 멤버 시퀀스 초기화 프로시져 생성

       

     • 멤버 시퀀스 초기화 프로시져 잡 등록

       • 매일 자정 멤버 시퀀스 초기화

         

     • 회원 가입 날짜와 멤버 시퀀스를 조합하여 고유한 Primary Key 생성

       

3. 회원 관리 페이지

1. 기능 설명

   • 리액트 부트스트랩 – 관리자 페이지의 디자인 요소를 간편하게 통일

   • 페이징 처리 - 페이지네이션을 이용하여 관리자 페이지는 페이징 처리를 함

   • 회원 목록 조회 및 검색 – DB에서 회원 데이터를 가져옴, React에서 .filter()를 이용해 검색 처리

   • 회원 상세 정보 조회 및 정보 수정 – 행 클릭 시 해당 회원 상세 정보 페이지로 이동, Modal창을 이용하여 회원 정보 수정 가능 ( axios.patch() )

     

     

2. 추가 설명 코드

   • 페이지네이션

     • 페이징 처리

       • getUser로 DB에서 가져온 회원 데이터들을 페이징 처리 설정에 알맞게 처리됨

     • 이전 페이지 및 다음페이지 혹은 페이지 버튼에 해당하는 페이지로 이동

       • 해당 버튼을 클릭할 때마다 현재 페이지, 시작 페이지, 끝 페이지를 새로 설정함

     • 회원 정보를 DB에서 가져옴