직원들의 데이터를 저장할 수 있는 관리 서비스 2023-08-08 ~ 2023-08-18
https://cms-solution-86408.web.app/login.html
- 로그인 페이지
- 회원가입 페이지
- 대쉬보드 페이지
- 임직원 리스트 페이지
- 임직원 등록/수정 페이지
-
로그인 페이지
- 등록 된 관리자 계정으로 로그인할 수 있습니다.
- 로그인한 유저 정보를 로컬스토리지로 저장합니다. 추후 매 페이지 이동 시 마다 로컬스토리지의 유저 정보를 비교하여 올바른 로그인인지 체크합니다.
- 로그인 성공 시 대쉬보드 페이지에서 뿌려주는 새소식 데이터를 로컬스토리지로 저장합니다.
- setTimeout으로 새소식 데이터를 로컬스토리지에 저장하기 전 페이지 이동을 제한하였습니다. 적용된 시간(1초)간 로딩 화면이 표시됩니다.
- 로그인 시 발생하는 오류(비밀번호 틀림, 아이디 조회 불가, 입력 안함)는 alert창으로 표시하였습니다.
- 회원가입 버튼으로 관리자 계정을 등록할 수 있는 회원가입 페이지로 이동합니다.
-
회원가입 페이지
- 인적사항을 기입하고 회원가입 버튼으로 관리자 계정을 생성합니다.
- 회원가입 완료 후 로그인페이지로 이동합니다.
- 회원가입 시 발생하는 오류는 alert창으로 표시하였습니다.
-
대쉬보드 페이지
- 관리자 계정의 프로필 정보를 표시합니다.
- 로그아웃과 이메일 인증기능을 추가하였습니다.
- 프로필을 불러오는 동안 로딩 화면이 표시됩니다.
- 새소식을 저장한 로컬스토리지에서 불러옵니다. 또한 로그인한 동안의 임직원 관리(등록/수정/삭제) 시 추가로 새소식을 로컬스토리지에 저장하고 불러옵니다.
- 새소식은 무한스크롤 기능이 적용되었습니다.
- 로그아웃 시 저장한 로컬스토리지의 모든 정보를 삭제합니다.
-
임직원 리스트 페이지
- firebase storage, firestore의 저장 데이터를 불러옵니다. 데이터를 불러오는 동안 로딩 화면이 표시됩니다.
- 검색기능, 정렬기능, 페이지네이션 기능을 추가하였습니다. (각 기능은 연결되어있으며, 모든 기능을 동시에 사용해도 오류가 없습니다.)
- 임직원 이름의 링크를 클릭하여 임직원 수정을 할 수 있습니다.
- 임직원 등록 및 삭제를 추가하였습니다.
- 최상단 체크박스 클릭 시 한 페이지의 전체 체크박스가 선택되는 전체선택 기능을 추가하였습니다.
- 페이지네이션 버튼의 양옆 previous / next 버튼은 총 페이지가 6개 이상일 시 클릭 가능한 버튼만 활성화 됩니다. (페이지 그룹 이동 기능)
-
임직원 등록/수정 페이지
- 한 페이지로 등록 / 수정이 둘 다 가능하게 설계하였습니다. get방식으로 url에 파라미터 추가 후 파라미터가 있으면 수정, 없으면 등록 기능이 동작합니다.
- 수정 페이지일 때 데이터를 불러오는 동안 로딩 화면이 표시됩니다.
- 프로필 이미지 첨부 시 미리보기 기능을 추가하였습니다. (수정페이지에서는 저장된 이미지의 url으로 사진을 불러옵니다.)
- 미리보기 이미지 클릭 시 미리보기 영역이 없어지며, 파일 재첨부가 가능합니다.
- 수정 페이지에서 미리보기 이미지 삭제 후 수정버튼을 클릭하면 저장된 storage와 이미지 url을 삭제합니다.
-
그외 사항
- 상단 헤더(드랍다운) : 유저 정보를 가져와 헤더에 유저의 이름을 보여줍니다.
- 상단 헤더(새소식 알림) : 로그인 중 임직원 관리 데이터에 변경사항(등록/수정/삭제)가 있을 시 변경사항의 숫자를 표시해줍니다.
