KDT0_JangYeongMin 직원 관리 서비스

.gitignore

@@ -0,0 +1,197 @@
+# Created by https://www.toptal.com/developers/gitignore/api/node,macos
+# Edit at https://www.toptal.com/developers/gitignore?templates=node,macos
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# 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
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### Firebase ###
+.idea
+**/node_modules/*
+**/.firebaserc
+index.js
+firebase.json
+firestore.indexes.json
+firestore.rules
+storage.rules
+
+
+### Firebase Patch ###
+.runtimeconfig.json
+.firebase/
+.github
+
+
+# 보안
+package.json
+package-lock.json
+
+# End of https://www.toptal.com/developers/gitignore/api/node,macos

README.md

@@ -1,50 +1,72 @@
+<br>
 
-# :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)
+![logo](./public/assets/icons/readme_logo.png)
+<br>
+## 🏢 직원 관리 서비스 🏢
 
+### 🔗 프로젝트 URL 
 
+- **과제 URL** : [https://yeongmins-employee-management.web.app](https://yeongmins-employee-management.web.app/?#)
+
+***
+
+### 📌 필수 구현 사항
+
+- [ ] “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현
+- [ ] 스크롤이 가능한 형태의 리스팅 페이지를 개발
+- [ ] 전체 페이지 데스크탑-모바일 반응형 페이지를 개발
+- [ ] 사진을 등록, 수정, 삭제가 가능
+- [ ] 유저 플로우를 제작하여 리드미에 추가
+- [ ] css 상대수치 사용 
+- [ ] JavaScript DOM event 조작
+
+### 📌 선택 구현 사항
+
+- [ ]  직원을 등록, 수정, 삭제가 가능
+- [ ]  직원 검색 기능을 추가
+- [ ]  JS가 꼭 필요한 부분에는 간단하기 구현
+
+***
+
+### 🗓️ 개발 기간
+
+**2023.08.08 ~ 2023.08.18**
+
+***
+
+### 🔨 사용 기술 스택
+
+<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white">
+<img src="https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white"> 
+<img src="https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black"> 
+
+<img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white">
+<img src="https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white">
+
+
+***
+
+### 🎨 구현 UI
+![logo](./public/assets/images/screenshot.png)
+
+**UI URL** : [Adobe XD](https://xd.adobe.com/view/9851eb3a-c1ea-4d8f-ba19-bdb2ebbecf17-cd02/)
+
+***
+
+### ✏️ userflow
+
+![userflow](./public/assets/images/userflow.png)
+
+***
+
+### 📝 아쉬운점 & 느낀점
+
+>   - 파이어베이스를 처음 사용했는데 연동이 너무 어려워서 DB 구현을 못했습니다.
+
+### ⌨️ 추후 구현사항
+
+>   - 파이어베이스 DB 연동
+>
+>   - 상세 프로필 구현
+>
+>   - 깔끔한 모바일 페이지 구현

public/assets/javascript/delete.js

@@ -0,0 +1,40 @@
+// DOMContentLoaded 이벤트가 발생할 때 실행되는 함수
+document.addEventListener("DOMContentLoaded", function () {
+  // 삭제 버튼 요소 가져오기
+  const deleteButton = document.getElementById("delete_button");
+
+  // 삭제 버튼에 클릭 이벤트 리스너 추가
+  deleteButton.addEventListener("click", function () {
+    // 체크된 체크박스 요소들 가져오기
+    const checkboxes = document.querySelectorAll("input[type='checkbox']:checked");
+
+    if (checkboxes.length > 0) {
+      Swal.fire({
+        title: "임직원 삭제 확인",
+        text: "선택한 임직원을 삭제하시겠습니까?",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonText: "삭제",
+        cancelButtonText: "취소",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          // 선택된 체크박스의 부모 요소인 리스트 아이템을 삭제
+          checkboxes.forEach((checkbox) => {
+            const listItem = checkbox.closest(".list_item");
+            if (listItem) {
+              listItem.remove();
+            }
+          });
+
+          Swal.fire("삭제됨!", "선택한 임직원이 삭제되었습니다.", "success");
+        }
+      });
+    } else {
+      Swal.fire(
+        "체크박스 미선택",
+        "삭제하려는 임직원을 선택하세요.",
+        "warning"
+      );
+    }
+  });
+});