KDT0_JeongSeoHyeon 직원 사진 관리 페이지

.gitignore

@@ -0,0 +1,3 @@
+.idea/
+.DS_Store
+/config.js

README.md

@@ -1,50 +1,74 @@
+# 👩🏻‍💻 JavaScript 과제
 
-# :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)
+## 📌 개요  
+- 직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만든다.
+- Firebase Storage를 통해 이미지를 등록, 수정, 삭제한다.
+- DOM event를 조작하며 **JavaScript** 사용을 익힌다.
+- 상대 수치와 애니메이션을 활용한다.
+- 모바일 반응형 페이지를 개발한다.
+<br><br>  
 
 
+## 📸 사이트 
+<a href="https://elegant-dusk-116a43.netlify.app/" target="_blank">
+  <img alt="Static Badge" src="https://img.shields.io/badge/-%EC%A7%81%EC%9B%90%20%EA%B4%80%EB%A6%AC%20%EB%8D%B0%EB%AA%A8%20%EC%82%AC%EC%9D%B4%ED%8A%B8-%230E54B6?style=for-the-badge&link=https%3A%2F%2Felegant-dusk-116a43.netlify.app%2F">
+</a>
+<br><br>  
+
+
+## ✨ 구현 내용
+### 직원 등록
+![직원 등록](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/63582234/d4779754-4167-415e-b236-6a81acc5b273)  
+<br>  
+
+### 사진 수정
+![직원 수정](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/63582234/87df1b2f-af22-4c53-b7f5-8634d92d4136)  
+<br>  
+
+### 직원 삭제
+![직원 삭제](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/63582234/4add262e-fd34-45bd-96e3-1b90e6d6cd26)  
+<br>  
+
+### 전체 모습
+### 웹
+![직원 관리_웹](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/63582234/6b48498f-2ee5-474c-be08-d0796abe5b87)  
+<br>  
+
+### 모바일
+![직원 관리_모바일](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/63582234/955f4d75-9dde-4957-9178-432adb7d6f89)  
+<br><br>  
+
+
+## 🙋🏻‍♀️ 유저 플로우
+![user flow drawio](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/63582234/1624a423-11bf-4d96-b125-7b984c2f64f2)  
+<br><br>
+
+
+## 🚀 트러블 슈팅
+### ✅ 직원 삭제 오류 이슈 
+![delete 404](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/63582234/1d315dbf-c681-4df9-8e79-31ec3ee45e24)  
+- **문제**) 직원 삭제를 연달아 할 경우 404 오류 발생
+- **원인**) checkedUser 배열에 이전 삭제한 직원 정보가 담아져 있어 중복 삭제
+- **시도**) 삭제 후에 checkedUser 배열 초기화 → 오류 해결 O
+<br>  
+
+### ✅ callback hell 발생
+<img width="494" alt="callback hell" src="https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/63582234/d8043fe9-6e94-4068-a0bc-50c2070c2c5e">  
+
+- **문제**) firebase storage 사용 시 콜백 지옥으로 가독성 저하
+- **원인**) firebase 공식 문서의 callback 방식 그대로 사용
+- **시도**) async/await 활용하여 비동기 처리 → 가독성 상승  
+<br><br>
+
+
+## 📝 배운 점
+- firebase의 storage 및 realtime database을 처음 사용해봐서 낯설고 어려웠지만 데이터 관리에 대해 고민해보고 공부할 수 있었다.
+- UI/UX를 직접 설계하니 결과물이 아쉬웠고, 다음에는 animation을 더 적극적으로 활용하여 interactive한 페이지를 만들어야겠다는 생각을 했다.  
+<br><br>
+
+
+## 🛠️ Stack
+![HTML5](https://img.shields.io/badge/HTML5-E34F26.svg?style=flat&logo=HTML5&logoColor=white)
+![CSS3](https://img.shields.io/badge/CSS3-1572B6.svg?style=flat&logo=CSS3&logoColor=white)
+![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=flat&logo=JavaScript&logoColor=white)
+![Firebase](https://img.shields.io/badge/Firebase-FFCA28.svg?style=flat&logo=Firebase&logoColor=white)

css/modal.css

@@ -0,0 +1,208 @@
+h1, h2 {
+    margin: 0;
+}
+
+button {
+    border: none;
+    background-color: transparent;
+}
+
+button:hover {
+    cursor: pointer;
+}
+
+.modal-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.1);
+    z-index: 9999;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    width: 450px;
+    height: auto;
+    flex-shrink: 0;
+    border-radius: 20px;
+    border: 1px solid #E8E8E8;
+    background: #FFF;
+    padding: 20px;
+}
+
+.close-button-wrap {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.close-button {
+    color: #2e2e2e;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1.8rem;
+    height: 1.8rem;
+    border-radius: 50%;
+    border: 1px solid #2e2e2e;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: center;
+}
+
+.modal-header h1 {
+    font-size: 1.5rem;
+    font-weight: 500;
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    /* align-items: center; */
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+}
+
+.modal-content h2 {
+    font-size: 1.2rem;
+    font-weight: 500;
+    margin: 0;
+}
+
+.input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
+input {
+    height: 2rem;
+    font-size: 1.1rem;
+    color: #2e2e2e;
+    padding: 0.2rem 0.5rem;
+}
+
+input::placeholder {
+    color: #B2B2B2;
+}
+
+input:focus {
+    outline: none;
+}
+
+.file-container {
+    position: relative;
+}
+
+label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 180px; 
+    height: 240px; 
+    cursor: pointer;
+    z-index: 2; 
+}
+
+.file-upload-button {
+    /* border: 1px solid black; */
+    font-size: 4.5rem;
+    font-weight: 300;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(178, 178, 178, 0.6);
+}
+
+#file-upload {
+    visibility: hidden;
+}
+
+.profile-image {
+    /* border: 1px solid blue; */
+    position: relative;
+    width: 180px;
+    height: 240px;
+    object-fit: cover;
+    z-index: 1;
+}
+
+.register-button-wrap {
+    display: flex;
+    justify-content: center;
+}
+
+.register-button {
+    font-size: 1.2rem;
+    background-color: #0d54b6;
+    color: #efefef;
+    border-radius: 5px;
+    padding: 0.4rem 0.7rem;
+}
+
+/* toast message */
+.toast-wrap {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%, -50%);
+    background-color: rgba(0, 61, 145, 0.8);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 4px;
+    display: none;
+    white-space: nowrap;
+    animation: fadeInOut 0.5s ease-in-out forwards;
+    z-index: 9999;
+}
+
+@keyframes fadeInOut {
+    0% {
+        opacity: 0;
+        transform: translate(-50%, -50%) translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+    }
+}
+
+
+/* 로딩 애니메이션 */
+.loading-animation {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    display: none;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(0, 61, 145, 0.3);
+    border-top: 4px solid #003D91;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@media all and (max-width:479px) {
+    .modal{
+        width: 20rem;
+    }
+}