diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..91aac8059
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+# API KEY
+.vscode
+key.js
+
+.env
+node_modules/
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..a869827a6
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+ "trailingComma": "es5",
+ "tabWidth": 4,
+ "semi": false,
+ "singleQuote": true
+ }
\ No newline at end of file
diff --git a/README.md b/README.md
index a29ee163b..f4d44c349 100644
--- a/README.md
+++ b/README.md
@@ -1,49 +1,78 @@
+# ☕카페 직원 관리 서비스
+카페 직원들의 정보를 관리하는 서비스입니다.
-# :camera: 직원 사진 관리 서비스
+## [배포 사이트]
+[배포 사이트 url](https://employee-management-cafe.netlify.app)
-직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보세요.
+키 관리 이슈 때문에 AWS S3를 제외한 (local storage를 이용) 기능 구현 페이지를 배포하였습니다.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-## [과제 수행 및 제출 방법]
-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. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+## [과제 기간]
+2023.08.07 ~ 2023.08.17
## [필수 요구사항]
-- “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
-- 프로필 페이지를 개발하세요.
-- 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
-- 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
-- 사진을 등록, 수정, 삭제가 가능해야 합니다.
-- 유저 플로우를 제작하여 리드미에 추가하세요.
+
+- [x] “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
+- [x] 프로필 페이지를 개발하세요.
+- [x] 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
+- [x] 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
+- [x] 사진을 등록, 수정, 삭제가 가능해야 합니다.
+- [x] 유저 플로우를 제작하여 리드미에 추가하세요.
+
* CSS
- * 애니메이션 구현
- * 상대수치 사용(rem, em)
+ - [x] 애니메이션 구현
+ - [x] 상대수치 사용(rem, em)
* JavaScript
- * DOM event 조작
+ - [x] DOM event 조작
## [선택 요구사항]
-- 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
-- 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
-- 직원을 등록, 수정, 삭제가 가능하게 해보세요.
-- 직원 검색 기능을 추가해 보세요.
-- infinity scroll 기능을 추가해 보세요.
-- 사진을 편집할 수 있는 기능을 추가해 보세요.
-- LocalStorage 사용
+- [ ] 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
+- [x] 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
+- [x] 직원을 등록, 수정, 삭제가 가능하게 해보세요.
+- [ ] 직원 검색 기능을 추가해 보세요.
+- [ ] infinity scroll 기능을 추가해 보세요.
+- [ ] 사진을 편집할 수 있는 기능을 추가해 보세요.
+- [x] LocalStorage 사용
+
+
+## [사용 스택]
+
+
+## [구현 내용]
+### 로딩 페이지
+
+
+### 메인 페이지
+
+### 직원 등록 폼 & AWS 3S에 이미지 업로드
+
+
+
+
+
+## 여러 사람 등록, 삭제
+
+### LocalStorage
+
+### 전체 삭제
+
+
+
+### 상세 정보 폼
+
-## [화면 예시]
-
+### 모바일 반응형
+
-
-## [흐름]
-
+## [User Flow]
+
+## [아쉬운 점]
+- 과제 기간 내에 검색 기능을 구현하지 못했다.
+- 직원 정보를 편집하는 기능을 넣지 못햇다. 삭제하고 다시 작성하는 식으로 수정을 해야 한다.
+- 아직 AWS 3S를 능숙하게 다루지 못했다.
+## [느낀 점]
+- Firebase는 전에 해 본 경험이 있어서 AWS 3S를 도전해 보았는데 어려웠지만 AWS를 경험해 본 것에 큰 의미를 둔다.
+- Javascript에 대해서 많은 공부를 한 것 같다. 전에는 거의 한 줄도 작성하지 못했는데 이번 과제를 통해 많이 공부한 것 같다.
+- AWS 3S를 선택함으로 api 키 관리에 대해서도 많이 알아보게 되었다.
diff --git a/css/common.css b/css/common.css
new file mode 100644
index 000000000..352b36c92
--- /dev/null
+++ b/css/common.css
@@ -0,0 +1,36 @@
+* {
+ margin: 0;
+ padding: 0;
+
+ box-sizing: border-box;
+ font-family: 'Gowun Dodum', sans-serif;
+ }
+
+ button {
+ padding: 10px;
+ margin: 20px 3px;
+
+ outline: none;
+ border: none;
+ border-radius: 10px;
+
+ cursor: pointer;
+
+ background-color: rgb(108, 75, 61);
+ color: #fff;
+ }
+
+ button:hover{
+ background-color: rgb(75, 58, 51);
+ }
+
+ main {
+ min-height: 100vh;
+ padding: 2rem 1.5rem;
+
+ background-color: rgb(242, 238, 232);
+ }
+
+ input[type="checkbox"]:hover {
+ cursor: pointer;
+ }
\ No newline at end of file
diff --git a/css/employee-list.css b/css/employee-list.css
new file mode 100644
index 000000000..66e58c5de
--- /dev/null
+++ b/css/employee-list.css
@@ -0,0 +1,153 @@
+@import url(common.css);
+@import url(registration-form.css);
+@import url(information-form.css);
+
+.title {
+ margin-bottom: 50px;
+}
+
+.buttons {
+ display: inline-block;
+}
+
+.search {
+ float: right;
+
+ width: 300px;
+
+ margin: 20px;
+
+ position: relative;
+}
+
+.search input {
+ width: 100%;
+
+ padding: 10px 12px;
+
+ border: 1px solid #bbb;
+ border-radius: 8px;
+
+ font-size: 12px;
+}
+
+.search img {
+ width: 17px;
+
+ margin: 0;
+
+ position: absolute;
+ top: 10px;
+ right: 12px;
+
+ cursor: pointer;
+}
+
+/* 화면 너비가 768px 이하일 때의 스타일 */
+@media screen and (max-width: 768px) {
+ .search {
+ float: none;
+ width: 300px;
+ margin: 20px 0;
+ }
+}
+
+.emp-list {
+ display: flex;
+ flex-direction: column;
+}
+
+.emp-list .list-header {
+ border-top: 2px solid #bbb;
+ border-bottom: 2px solid #bbb;
+}
+
+
+.list-row {
+ border-bottom: 1px solid #d7d7d7;
+
+ display: flex;
+}
+
+.emp-list .list-row .checkbox {
+ margin: 0 20px;
+ width: 20px;
+}
+
+
+.emp-list .list-row .list-cell {
+ flex: 1;
+
+ padding: 8px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.emp-list-items .emp-category {
+ color: red;
+}
+
+.emp-list .list-row .emp-img {
+ height: 200px;
+ margin: 20px;
+
+ overflow: hidden;
+}
+
+.emp-list .list-row .emp-img img {
+ width: 150px;
+ height: 100%;
+
+ object-fit: cover;
+}
+
+/* 화면 너비가 768px 이하일 때의 스타일 */
+@media screen and (max-width: 768px) {
+ .emp-list .list-header .list-cell{
+ display: none;
+ }
+
+ .emp-list .emp-list-items .list-item {
+ display: inline;
+ border: none;
+ }
+
+ .emp-list .list-row input[type="checkbox"] {
+ width: 20px;
+ height: 20px;
+
+ margin: 20px;
+ }
+
+ .emp-list .list-header input[type="checkbox"]::after {
+ padding-left: 40px;
+ display: inline-block;
+ content: " ALL";
+
+ transform: translateY(10%);
+ }
+
+ .emp-list .list-row .list-cell {
+ text-align: center; /* 가운데 정렬 */
+ }
+
+ .emp-list .list-row .list-cell:last-child {
+ padding-bottom: 30px;
+ }
+
+ .emp-list .list-row .emp-img {
+ height: auto;
+ margin: 10px 0;
+ }
+
+ .emp-list .list-row .emp-img img {
+ width: 80%;
+ height: auto;
+ }
+
+ .emp-list-items .emp-category {
+ border-bottom: 1px solid #bbb;
+ }
+}
\ No newline at end of file
diff --git a/css/information-form.css b/css/information-form.css
new file mode 100644
index 000000000..1184e4e79
--- /dev/null
+++ b/css/information-form.css
@@ -0,0 +1,63 @@
+.information-form {
+ width: 500px;
+ height: 28em;
+ background-color: #f9f9f9;
+
+ padding: 20px;
+ margin-top: 10px;
+
+ border: 1px solid #ccc;
+ border-radius: 20px;
+
+ display: none;
+
+ position: fixed;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .information-form h2 {
+ font-size: 1.2em;
+ margin-bottom: 20px;
+ }
+
+ .information-form .form-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ font-weight: bold;
+ }
+
+ .information-form .form-content div{
+ margin-bottom: 10px;
+ }
+
+ .information-form .emp-img img{
+ width: 120px;
+ height: 150px;
+ overflow: hidden;
+ }
+
+ .registration-form #defaultPhoto {
+ width: 120px;
+ height: 150px;
+ }
+
+ /* 화면 너비가 768px 이하일 때의 스타일 */
+@media screen and (max-width: 768px) {
+ .information-form {
+ width: 80%;
+ max-width: 400px;
+ height: auto;
+
+ padding: 10px;
+
+ top: 50%;
+ }
+
+ .information-form h2 {
+ font-size: 1em;
+ margin-bottom: 10px;
+ }}
\ No newline at end of file
diff --git a/css/loading.css b/css/loading.css
new file mode 100644
index 000000000..951e321c3
--- /dev/null
+++ b/css/loading.css
@@ -0,0 +1,90 @@
+@import url(common.css);
+
+body {
+ background-color: rgb(242, 238, 232);
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+.container {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.text-title {
+ position: absolute;
+ top: 40%;
+ transform: translate(15%, -0%);
+ color: #ffffff;
+
+ z-index: 1;
+}
+
+.row {
+ position: relative;
+ margin: 0 auto;
+}
+
+:before,
+:after {
+ position: absolute;
+ content: '';
+}
+
+.beans {
+ margin: 20px auto;
+ width: 35px;
+ height: 50px;
+ background: #8B4C39;
+ border-radius: 50%;
+ animation: drop2 1s ease-in infinite;
+}
+
+.beans:before {
+ left: 18px;
+ width: 3px;
+ border-radius: 50%;
+ height: 98%;
+ background: #5E2605;
+ transform: rotate(-5deg);
+}
+
+
+@keyframes drop {
+ 0% {
+ transform: translate(0px, -70px) rotate(45deg);
+ }
+ 100% {
+ transform: translate(0px, 130px) rotate(45deg);
+ }
+}
+
+@keyframes drop2 {
+ 0% {
+ transform: translate(0px, -70px);
+ }
+ 100% {
+ transform: translate(0px, 130px);
+ }
+}
+.cup {
+ margin: 40px auto;
+ width: 190px;
+ height: 150px;
+ background: #999182;
+ border-radius: 5px 5px 80px 80px;
+}
+
+.cup:after {
+ top: 10px;
+ right: -45px;
+ width: 60px;
+ height: 80px;
+ border: 15px solid #999182;
+ border-radius: 70px;
+}
\ No newline at end of file
diff --git a/css/registration-form.css b/css/registration-form.css
new file mode 100644
index 000000000..5a4d6e328
--- /dev/null
+++ b/css/registration-form.css
@@ -0,0 +1,87 @@
+.registration-form {
+ width: 500px;
+ height: 42em;
+ background-color: #f9f9f9;
+
+ padding: 20px;
+ margin-top: 10px;
+
+ border: 1px solid #ccc;
+ border-radius: 20px;
+
+ display: none;
+
+ position: fixed;
+ top: 45%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.registration-form h2 {
+ font-size: 1.2em;
+ margin-bottom: 30px;
+}
+
+.registration-form label {
+ display: block;
+ margin-bottom: 5px;
+ font-weight: bold;
+}
+
+.registration-form input[type="text"],
+.registration-form input[type="email"],
+.registration-form input[type="tel"] {
+ width: 100%;
+
+ padding: 5px;
+ margin-bottom: 10px;
+
+ border: 1px solid #ccc;
+}
+
+
+.registration-form .uploaded-photo-container {
+ width: 120px;
+ height: 150px;
+
+ overflow: hidden;
+ margin: 10px 0;
+}
+
+.registration-form .uploaded-photo-container img {
+ width: 100%;
+ height: auto;
+}
+
+.registration-form #defaultPhoto {
+ width: 120px;
+ height: 150px;
+}
+
+/* 화면 너비가 768px 이하일 때의 스타일 */
+@media screen and (max-width: 768px) {
+ .registration-form {
+ width: 80%;
+ max-width: 400px;
+ height: auto;
+
+ padding: 10px;
+ }
+
+ .registration-form h2 {
+ margin-bottom: 20px;
+
+ font-size: 1em;
+ }
+
+ .registration-form label {
+ margin-bottom: 3px;
+ }
+
+ .registration-form input[type="text"],
+ .registration-form input[type="email"],
+ .registration-form input[type="tel"] {
+ padding: 3px;
+ margin-bottom: 8px;
+ }
+}
\ No newline at end of file
diff --git a/emp-list-page.html b/emp-list-page.html
new file mode 100644
index 000000000..1d04f0966
--- /dev/null
+++ b/emp-list-page.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+ 직원 관리 서비스
+
+
+
+
+
+
+
+
+
+
+ 카페 직원 관리
+
+
+
+
+
+
+
+
+