KDT0_ParkSuYeon 직원 정보 관리 서비스

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "employee-management-d1bad"
+  }
+}

.gitignore

@@ -0,0 +1,66 @@
+# 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

README.md

@@ -1,49 +1,82 @@
+# :camera: 직원 정보 관리 서비스
 
-# :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 사용
-
-## [화면 예시]
-![Untitled (1)](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/5dda6755-2501-4af4-bc3e-b63a353c44c2)
-
-![Untitled (2)](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/6c1805f1-2b00-453e-a729-2b483612726d)
+패스트캠퍼스 X 야놀자: 프론트엔드 개발 부트캠프의 JAVASCRIPT 과제입니다.
+직원들의 정보를 관리할 수 있는 서비스입니다.
+
+주소 : https://employee-management-d1bad.web.app/
+
+## [프로젝트 개요]
+
+#### 프로젝트 기간
+
+- 2023년 8월 8일 ~ 2023년 8월 18일
+  <br>
+
+##### [필수 요구 사항]
+
+- [x] “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
+- [x] 프로필 페이지를 개발하세요.
+- [x] 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
+- [x] 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
+- [x] 사진을 등록, 수정, 삭제가 가능해야 합니다.
+- [x] 유저 플로우를 제작하여 리드미에 추가하세요.
+
+- [x] CSS
+  - 애니메이션 구현
+  - 상대수치 사용(rem, em)
+- [x] JavaScript
+  - DOM event 조작
+
+  <BR>
+  <BR>
+
+## [화면]
+
+#### 메인 화면
+
+![메인](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/5b218ca1-48ca-47c7-acf8-f9607ba447e1)
+<br>
+
+#### 프로필 화면
+
+![프로필2](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/7bdfa5d1-1349-43b9-a626-9f9c7d4c0761)
+메인페이지의 이름 클릭 시 프로필 페이지로 이동.
+
+## [주요 기능]
+
+- ### CRUD
+  | CREATE                                                                                                                                                       | READ                                                                                                                                                       |
+  | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+  | <img src="public/assets/readme/등록.png" alt = "직원 등록" style="width:60%; margin: auto"></img><br><br>메인페이지의 등록 버튼 클릭 후 모달창에서 정보 등록 | ![메인](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/280ec00d-d979-44dc-a61f-4c6de8b2769e)<br><br><br><br><br><br>직원 정보 조회 |
+  | **UPDATE** | **DELETE** |
+  | ![수정](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/f5c46398-6302-443f-bf2e-e2a55568f631) <br>메인페이지 수정 버튼 클릭 후 수정| ![삭제](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/2a7b8751-246c-466c-934a-69090a786e5c)<br>수정 페이지의 삭제 버튼 클릭시 확인 경고창 생성 후 삭제|
+
+<br>
+
+- ### 데스크탑, 모바일 반응형 페이지
+
+  | 메인 페이지                                                                                                              | 프로필 페이지                                                                                                             | 수정 페이지                                                                                                                   |
+  | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+  | ![반응형_메인2](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/8d3dff1f-cd06-4960-9ec1-5da9639a7b62) | ![반응형_프로필](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/58defbc8-0276-477c-a4c9-b342840c0546) | ![반응형_수정페이지](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/23b35fca-d3f6-4557-bea7-184e6a7c2649) |
+
+  <br>
+
+- ### CSS 애니메이션
+  ![모달창 애니메이션](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/92326949/38e8cbd0-1a48-4203-aaf1-c2bb4711dded)
+
+임직원 등록 모달창 Fade-in 효과
+<br>
 
 ## [흐름]
-![Untitled](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/e2934c05-26f6-4ef6-88d4-beed76aa007a)
+<br>
+
+#### 유저플로우
+
+![유저플로우](https://github.com/suyeonnnnnnn/Wavve-Clone/assets/92326949/171dba0b-1f4f-4f13-8540-47388601e033)
+
 
+## [개선사항]
 
+- 수정 모달창을 이용한 수정 구현.
+- 체크박스를 이용한 삭제 구현.
+- 기타 선택 요구사항 구현.

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"
+  }
+}

firestore.indexes.json

@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}

firestore.rules

@@ -0,0 +1,9 @@
+rules_version = '2';
+
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if true;
+    }
+  }
+}

public/404.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>

public/css/edit.css

@@ -0,0 +1,130 @@
+/* Base styles for all devices */
+.header {
+    text-align: center;
+    padding: 20px;
+  }
+
+ .body {
+  margin : 50px;
+ } 
+
+  img {
+    width: 90px;
+    height: 90px;
+    /* border-radius: 50%; */
+  }
+
+  table {
+    border: 1px solid #ccc;
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  table caption {
+    font-size: 1.5em;
+    margin: .5em 0 .75em;
+  }
+
+  table tr {
+    background-color: #f8f8f8;
+    border: 1px solid #ddd;
+    padding: .35em;
+  }
+
+  table th,
+  table td {
+    padding: .625em;
+    text-align: center;
+  }
+
+  table th {
+    font-size: .85em;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+  }
+
+  .profile-edit-button {
+    text-align: center;
+    margin-top:30px;
+  }
+
+  button {
+    all: unset;
+    color: white;
+    padding: 5px 25px; 
+    cursor: pointer;
+  }
+
+  .button__edit--profile {
+    background-color: #1E3269;
+    margin-right:10px;
+  }
+
+  .button__delete--profile {
+    background-color: #B90000;
+  }
+
+  .form-group {
+    margin-left: auto;
+    margin-bottom: 20px;
+  }
+
+  .form-control {
+    margin-top: 20px;
+    height: 30px;
+    /* border-color: #d2d2d2; */
+    width: 100%;
+    font-size: 1.1em;
+  }
+
+
+  /* Responsive styles for screens smaller than 600px */
+  @media (max-width: 600px) {
+    img {
+      width: 70px;
+      height: 70px;
+    }
+
+    table, thead, tbody, th, td, tr {
+      display: block;
+    }
+
+    table tr {
+      margin-bottom: 1em;
+      border-bottom: 2px solid #ddd;
+    }
+
+    table th {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
+
+    table td {
+      border: none;
+      position: relative;
+      padding-left: 50%;
+      font-size: .8em;
+    }
+
+    table td::before {
+      content: attr(data-label);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 50%;
+      padding: .625em;
+      font-weight: bold;
+      text-transform: uppercase;
+      margin-top: 30px;
+    }
+
+    .button--state-edit, .button--state-delete, .button--state-delete2, .button--state-add {
+      padding: 3px 15px; /* 버튼 패딩을 조절하여 크기를 줄임 */
+      font-size: 0.8em; /* 폰트 크기를 조절 */
+  }
+
+}
+
+