KDT1-FE · Sinary00 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "cms-solution-86408"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,69 @@
+.DS_STORE
+public/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+firebase-debug.*.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80
+}
diff --git a/README.md b/README.md
@@ -1,50 +1,63 @@
+# KDT0_CyinHaYeon 사진/데이터 관리 서비스
 
-# :camera: 직원 사진 관리 서비스
-
-직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보세요.
-
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-## [과제 수행 및 제출 방법]
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
-6. Pull Request 링크를 LMS로도 제출해 주셔야 합니다.
-7. main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-8. Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-9. Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-10. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
-
-## [필수 요구사항]
-- “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
-- 프로필 페이지를 개발하세요.
-- 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
-- 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
-- 사진을 등록, 수정, 삭제가 가능해야 합니다.
-- 유저 플로우를 제작하여 리드미에 추가하세요.
-* CSS
-  * 애니메이션 구현
-  * 상대수치 사용(rem, em)
-* JavaScript
-  * DOM event 조작
-
-## [선택 요구사항]
-- 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
-- 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
-- 직원을 등록, 수정, 삭제가 가능하게 해보세요.
-- 직원 검색 기능을 추가해 보세요.
-- infinity scroll 기능을 추가해 보세요.
-- 사진을 편집할 수 있는 기능을 추가해 보세요.
-- LocalStorage 사용
-
-## [화면 예시]
-![111](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/f1afed4b-547e-4289-8e83-2f0fa188cccb)
-![222](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/72f1ea35-8965-4050-9d0b-b9f27c933f64)
-
-
-
-## [흐름]
-![333](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/44707a0e-6c5a-4d04-a6bd-58e46f02a9a9)
+직원들의 데이터를 저장할 수 있는 관리 서비스
+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을 삭제합니다.
+
+* 그외 사항
+  - 상단 헤더(드랍다운) : 유저 정보를 가져와 헤더에 유저의 이름을 보여줍니다.
+  - 상단 헤더(새소식 알림) : 로그인 중 임직원 관리 데이터에 변경사항(등록/수정/삭제)가 있을 시 변경사항의 숫자를 표시해줍니다.
+
+## [유저 플로우]
+
+![유저 플로우](https://github.com/gkdus2217/CMS/blob/main/assets/image/userflow.png?raw=true)
diff --git a/assets/fonts/noto-sans-kr-v27-latin-100.eot b/assets/fonts/noto-sans-kr-v27-latin-100.eot
diff --git a/assets/fonts/noto-sans-kr-v27-latin-100.woff b/assets/fonts/noto-sans-kr-v27-latin-100.woff
diff --git a/assets/fonts/noto-sans-kr-v27-latin-100.woff2 b/assets/fonts/noto-sans-kr-v27-latin-100.woff2
diff --git a/assets/fonts/noto-sans-kr-v27-latin-300.eot b/assets/fonts/noto-sans-kr-v27-latin-300.eot
diff --git a/assets/fonts/noto-sans-kr-v27-latin-300.woff b/assets/fonts/noto-sans-kr-v27-latin-300.woff
diff --git a/assets/fonts/noto-sans-kr-v27-latin-300.woff2 b/assets/fonts/noto-sans-kr-v27-latin-300.woff2
diff --git a/assets/fonts/noto-sans-kr-v27-latin-500.eot b/assets/fonts/noto-sans-kr-v27-latin-500.eot
diff --git a/assets/fonts/noto-sans-kr-v27-latin-500.woff b/assets/fonts/noto-sans-kr-v27-latin-500.woff
diff --git a/assets/fonts/noto-sans-kr-v27-latin-500.woff2 b/assets/fonts/noto-sans-kr-v27-latin-500.woff2
diff --git a/assets/fonts/noto-sans-kr-v27-latin-700.eot b/assets/fonts/noto-sans-kr-v27-latin-700.eot
diff --git a/assets/fonts/noto-sans-kr-v27-latin-700.woff b/assets/fonts/noto-sans-kr-v27-latin-700.woff
diff --git a/assets/fonts/noto-sans-kr-v27-latin-700.woff2 b/assets/fonts/noto-sans-kr-v27-latin-700.woff2
diff --git a/assets/fonts/noto-sans-kr-v27-latin-900.eot b/assets/fonts/noto-sans-kr-v27-latin-900.eot
diff --git a/assets/fonts/noto-sans-kr-v27-latin-900.woff b/assets/fonts/noto-sans-kr-v27-latin-900.woff
diff --git a/assets/fonts/noto-sans-kr-v27-latin-900.woff2 b/assets/fonts/noto-sans-kr-v27-latin-900.woff2
diff --git a/assets/fonts/noto-sans-kr-v27-latin-regular.eot b/assets/fonts/noto-sans-kr-v27-latin-regular.eot
diff --git a/assets/fonts/noto-sans-kr-v27-latin-regular.woff b/assets/fonts/noto-sans-kr-v27-latin-regular.woff
diff --git a/assets/fonts/noto-sans-kr-v27-latin-regular.woff2 b/assets/fonts/noto-sans-kr-v27-latin-regular.woff2
diff --git a/assets/image/employee_photo.png b/assets/image/employee_photo.png
diff --git a/assets/image/ic_dashboard_blue.png b/assets/image/ic_dashboard_blue.png
diff --git a/assets/image/ic_dashboard_gray.png b/assets/image/ic_dashboard_gray.png
diff --git a/assets/image/ic_employee_blue.png b/assets/image/ic_employee_blue.png
diff --git a/assets/image/ic_employee_gray.png b/assets/image/ic_employee_gray.png
diff --git a/assets/image/ic_grade_blue.png b/assets/image/ic_grade_blue.png
diff --git a/assets/image/ic_grade_gray.png b/assets/image/ic_grade_gray.png
diff --git a/assets/image/ic_top_gray.png b/assets/image/ic_top_gray.png
diff --git a/assets/image/logo.png b/assets/image/logo.png
diff --git a/assets/image/no-image.png b/assets/image/no-image.png
diff --git a/assets/image/userflow.png b/assets/image/userflow.png
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,17 @@
+{
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  },
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  },
+  "storage": {
+    "rules": "storage.rules"
+  }
+}
diff --git a/firestore.indexes.json b/firestore.indexes.json
@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}
diff --git a/firestore.rules b/firestore.rules
@@ -0,0 +1,9 @@
+rules_version = '2';
+
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if true;
+    }
+  } 
+}