KDT1-FE · turkey-kim · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 10, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+key.js
diff --git a/README.md b/README.md
@@ -1,49 +1,49 @@
+## TK Company 직원 관리 서비스
 
-# :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)
-
-## [흐름]
-![Untitled](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/38754963/e2934c05-26f6-4ef6-88d4-beed76aa007a)
+- 가상회사 TK company의 직원 DB 개발
+- 개발 기간 : 2023.08.08 ~ 2023.08.18
+- [배포주소](https://deploy--peaceful-heliotrope-44df2b.netlify.app/)
 
+### 주요 기능
 
+- 직원 정보 등록 (사진 & 인적사항)
+- 직원 정보 상세 보기
+- 직원 정보 수정 / 삭제
+
+### 주요 기능 상세
+
+|       기능        |                                           이미지                                            | 설명                                                                                        |
+| :---------------: | :-----------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------ |
+|   1. 직원 조회    |  <img src="https://turkey-mm-bucket.s3.ap-northeast-2.amazonaws.com/home.png" width="500">  | - S3의 직원목록 로드                                                                        |
+|   2. 직원 등록    | <img src="https://turkey-mm-bucket.s3.ap-northeast-2.amazonaws.com/enroll.png" width="500"> | - 모달창 구현 <br> - 업로드 사진 미리보기 <br> - 사진 미등록 시, <br>기본프로필 이미지 설정 |
+|   3. 정보 수정    |  <img src="https://turkey-mm-bucket.s3.ap-northeast-2.amazonaws.com/edit.gif" width="500">  | - 모달창 구현 <br> - 사진/인적사항 변경                                                     |
+| 4. 직원 정보 삭제 | <img src="https://turkey-mm-bucket.s3.ap-northeast-2.amazonaws.com/delete.gif" width="500"> |
+|   5. 반응형 웹    | <img src="https://turkey-mm-bucket.s3.ap-northeast-2.amazonaws.com/mobile.gif" width="500"> |
+
+### 스택
+
+<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white"> <img src="https://img.shields.io/badge/css3-1572B6?style=for-the-badge&logo=css3&logoColor=white"> <img src="https://img.shields.io/badge/js-F7DF1E?style=for-the-badge&logo=javascript&logoColor=white"> <img src="https://img.shields.io/badge/AMAZON S3-569A31?style=for-the-badge&logo=amazons3&logoColor=white">
+
+<br>
+
+### USER-FLOW
+
+<img src="https://turkey-mm-bucket.s3.ap-northeast-2.amazonaws.com/userFlow.png" width="700">
+
+### 요구사항
+
+1. 필수
+
+- [x] “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
+- [x] 프로필 페이지를 개발하세요.
+- [x] 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
+- [x] 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
+- [x] 사진을 등록, 수정, 삭제가 가능해야 합니다.
+- [x] 유저 플로우를 제작하여 리드미에 추가하세요.
+- [x] 애니메이션 구현
+- [x] DOM 조작
+
+2. 선택
+
+- [x] 직원을 등록, 수정, 삭제가 가능하게 해보세요.
+- [x] LocalStorage 사용
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store
diff --git a/assets/img/profile.jpeg b/assets/img/profile.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="/styles/general.css" />
+    <link rel="stylesheet" href="/styles/theme.css" />
+    <link rel="stylesheet" href="/styles/main.css" />
+    <link rel="stylesheet" href="/styles/header.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@200;300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1433.0.min.js"></script>
+  </head>
+  <body>
+    <header class="header">
+      <a id="header-title" href="/">TK company MemberDB</a>
+    </header>
+    <main id="home">
+      <h1 class="title text-xl">우리 회사 직원들</h1>
+      <div class="control-container">
+        <div class="control-container_button-container">
+          <button class="text-m" id="open-enroll-form">등록</button>
+        </div>
+      </div>
+
+      <div id="modal">
+        <form class="enroll-form bg-main150">
+          <div class="enroll-form__container">
+            <div class="enroll-form__photoBox bg-gray">
+              <img id="preview" src="/assets/img/profile.jpeg" />
+              <label class="photo-input__label" for="photo-input"
+                >Upload Image</label
+              >
+              <input id="photo-input" type="file" />
+            </div>
+            <div class="enroll-form__inputBox">
+              <label for="name-input">이름</label>
+              <input id="name-input" autocomplete="off" />
+              <label for="email-input">이메일</label>
+              <input id="email-input" autocomplete="off" />
+              <label for="phoneNum-input">전화번호</label>
+              <input id="phoneNum-input" autocomplete="off" />
+              <label for="position-input">포지션</label>
+              <input id="position-input" autocomplete="off" />
+              <button class="enroll-form__submit bg-blue text-s" type="submit">
+                submit
+              </button>
+              <button class="enroll-form__cancel bg-pink text-s">cancel</button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      <div class="member-info">
+        <div class="member-info__header bg-main100">
+          <div class="member-info__img">사진</div>
+          <div class="member-info__name">이름</div>
+          <div class="member-info__phoneNum">전화번호</div>
+          <div class="member-info__email">이메일</div>
+          <div class="member-info__position">포지션</div>
+        </div>
+      </div>
+    </main>
+    <script type="module" src="js/config/key.js"></script>
+    <script type="module" src="/js/constant/home.js"></script>
+    <script type="module" src="/js/api/uploadProfile.js"></script>
+    <script type="module" src="/js/api/listProfile.js"></script>
+    <script type="module">
+      import {
+        btn_openEnrollForm,
+        enrollForm,
+        btn_addProfile,
+        btn_closeEnrollForm,
+        enroll_photo,
+      } from "/js/constant/home.js";
+
+      import { uploadProfileToS3 } from "/js/api/uploadProfile.js";
+      import { listProfileFromS3 } from "/js/api/listProfile.js";
+
+      btn_openEnrollForm.addEventListener("click", openForm); // 프로필 등록 폼 열기
+      btn_closeEnrollForm.addEventListener("click", closeForm); // 프로필 등록 폼 닫기
+      enroll_photo.addEventListener("change", previewImg); // 이미지 프리뷰
+
+      listProfileFromS3(); // 프로필 불러오기 (Read)
+      btn_addProfile.addEventListener("click", uploadProfileToS3); // s3로 프로필업로드
+
+      function previewImg() {
+        const imageSrc = URL.createObjectURL(enroll_photo.files[0]);
+        document.getElementById("preview").src = imageSrc;
+      }
+
+      function openForm(e) {
+        e.preventDefault();
+        const modal = document.querySelector("#modal");
+        modal.style.visibility = "visible";
+      }
+
+      function closeForm(e) {
+        e.preventDefault();
+        const modal = document.querySelector("#modal");
+        modal.style.visibility = "hidden";
+      }
+
+      const photo = enroll_photo.files[0];
+    </script>
+  </body>
+</html>
diff --git a/js/api/deleteProfile.js b/js/api/deleteProfile.js
@@ -0,0 +1,35 @@
+import { accessKeyId, accessKey } from "/js/config/key.js";
+
+import { bucketName, region } from "/js/constant/aws.js";
+
+AWS.config.update({
+  region,
+  credentials: new AWS.Credentials(accessKeyId, accessKey),
+});
+
+const s3 = new AWS.S3({
+  apiVersion: "2006-03-01",
+  params: { Bucket: bucketName },
+});
+
+const key = localStorage.getItem("profile");
+const params01 = {
+  Bucket: bucketName,
+  Key: `${key}/profile_photo`,
+};
+const params02 = {
+  Bucket: bucketName,
+  Key: `${key}/profile_detail`,
+};
+
+export const deleteProfile = async function () {
+  try {
+    await s3.deleteObject(params01).promise();
+    console.log("photo deleteted");
+    await s3.deleteObject(params02).promise();
+    console.log("info deleteted");
+    window.location.href = window.location.origin;
+  } catch (error) {
+    console.error(error);
+  }
+};
diff --git a/js/api/editProfile.js b/js/api/editProfile.js
@@ -0,0 +1,64 @@
+import { accessKeyId, accessKey } from "/js/config/key.js";
+
+import { bucketName, region } from "/js/constant/aws.js";
+
+import {
+  edit_photo,
+  edit_name,
+  edit_email,
+  edit_phoneNum,
+  edit_position,
+} from "../constant/profile.js";
+
+AWS.config.update({
+  region,
+  credentials: new AWS.Credentials(accessKeyId, accessKey),
+});
+
+const s3 = new AWS.S3({
+  apiVersion: "2006-03-01",
+  params: { Bucket: bucketName },
+});
+
+export const editProfile = function (e) {
+  e.preventDefault();
+  const photo = edit_photo.files[0]; // 수정할 프로필 사진
+
+  const profileInfo = {
+    name: edit_name.value,
+    email: edit_email.value,
+    phoneNum: edit_phoneNum.value,
+    position: edit_position.value,
+  }; // 사진을 제외한 프로필 정보
+
+  const key = localStorage.getItem("profile");
+  const folerPath = `${key}/`; // 사진과 정보가 들어갈 S3폴더명(로컬스토리지)
+
+  const params_photo = photo
+    ? {
+        Bucket: bucketName,
+        Key: folerPath + "profile_photo",
+        Body: photo,
+      }
+    : null; // 수정할 사진이 채워지지 않을 경우 null;
+
+  const params_info = {
+    Bucket: bucketName,
+    Key: folerPath + "profile_detail",
+    Body: JSON.stringify(profileInfo),
+  };
+
+  const edit = async () => {
+    try {
+      params_photo ? await s3.upload(params_photo).promise() : null;
+      console.log("photo edit complete");
+      await s3.upload(params_info).promise();
+      console.log("info edit complete");
+      location.reload();
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  edit();
+};
diff --git a/js/api/getProfile.js b/js/api/getProfile.js
@@ -0,0 +1,42 @@
+import { accessKeyId, accessKey } from "/js/config/key.js";
+
+import { bucketName, region, S3endpoint } from "/js/constant/aws.js";
+
+AWS.config.update({
+  region,
+  credentials: new AWS.Credentials(accessKeyId, accessKey),
+});
+
+const s3 = new AWS.S3({
+  apiVersion: "2006-03-01",
+  params: { Bucket: bucketName },
+});
+
+export const getProfile = () => {
+  s3.listObjectsV2({ Bucket: bucketName }, (err, data) => {
+    if (err) {
+      console.err(err);
+    } else {
+      console.log(data);
+    }
+  });
+
+  const key = localStorage.getItem("profile");
+  const photo = document.getElementById("profile-photo");
+  photo.src = S3endpoint + "/" + key + "/profile_photo";
+
+  s3.getObject(
+    { Bucket: bucketName, Key: `${key}/profile_detail` },
+    (err, data) => {
+      let info = JSON.parse(data.Body.toString());
+      for (let key in info) {
+        let obj = document.getElementsByClassName(`profile__${key}`)[0];
+        let detail = document.createElement("span");
+        detail.innerText = info[key];
+        obj.appendChild(detail);
+      }
+    }
+  );
+};
+
+getProfile();