Kdt0 nam hyeon jun

.firebase/hosting.cHVibGlj.cache

@@ -0,0 +1,15 @@
+404.html,1692673802339,daa499dd96d8229e73235345702ba32f0793f0c8e5c0d30e40e37a5872be57aa
+detail.html,1693211975306,7e8f25e10c7a72901dc038f8cdac37579c84fe90dedda0f4953171dc581a52a2
+enroll.html,1693211979483,99e6c2ddb16f1f655207dbf1c941f68531254911140ef72d44957722185f3dd1
+index.html,1693211984539,2651ff09fa9692ebedd724096ae66da78b0b62083a2227eeb3e8810e497e5df6
+update.html,1693211991160,2b2235e89b607073e4b63f60e5ed6493a154bc81c365e87b13aaf42bf6071acb
+css/detail.css,1692673329633,ed08046fb2102959c49f65f877b7cabdde2cccc1bc100e4ebb7c7723e0c0b1a2
+css/enroll.css,1692673329635,ff7bbafc00a76de16bdce2a68a2a00d6c98aca446857fcfb380de35f75006431
+css/main.css,1693216526029,f265a2c8f68f0fad5b5d60b981e4a4f43b8e8ffa202ebcb2c9cbaeddef92f7bb
+css/update.css,1693212704193,93efc8d236665521f505ad805a0c2355e3d5a9c4fed98a8251359b095959f705
+js/detail.js,1692673329634,d87a9194a012a4a6f211bd62f6ae813519218604269fa52c75bed48e644ecb7f
+js/enroll.js,1692673329636,5b9616879aa9c046555e50a7e4c5401f206a2458c907090f689930f9e54781b3
+js/firebase.js,1693216618204,00c0e8c0028acad19339226f0328bdd4253859b8ac4e3589dc677b8108324732
+js/image.js,1692673329638,9ec96abaf0b792c69999bfbb860e2baa411e28c533e378d52225c331cc073e8e
+js/index.js,1692675926167,0913a6944235148484748c0d1f7afbe10ab4b9b884ae809220ec0f4c4425163c
+js/update.js,1692673329642,d0fb7d8414588833448f628387caa66262d482765c1193acda637c28914fa9da

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "nhj-js-homework"
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+.vscode/
+node_modules
+package.json
+package-lock.json

README.md

@@ -1,50 +1,60 @@
 
-# :camera: 직원 사진 관리 서비스
+# :weight_lifting_man: 헬스장 회원 관리 서비스
 
 직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보세요.
 
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-## [과제 수행 및 제출 방법]
-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. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+## 배포 주소
+https://velvety-puppy-c1029b.netlify.app/
 
 ## [필수 요구사항]
-- “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
-- 프로필 페이지를 개발하세요.
-- 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
-- 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
-- 사진을 등록, 수정, 삭제가 가능해야 합니다.
-- 유저 플로우를 제작하여 리드미에 추가하세요.
-* CSS
-  * 애니메이션 구현
-  * 상대수치 사용(rem, em)
-* JavaScript
-  * DOM event 조작
+- [X] “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
+- [X] 프로필 페이지를 개발하세요.
+- [X] 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
+- [X] 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
+- [X] 사진을 등록, 수정, 삭제가 가능해야 합니다.
+- [X] 유저 플로우를 제작하여 리드미에 추가하세요.
+- CSS
+  - [X] 애니메이션 구현
+  - [X] 상대수치 사용(rem, em)
+- JavaScript
+  - [X] DOM event 조작
 
 ## [선택 요구사항]
 - 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
 - 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
-- 직원을 등록, 수정, 삭제가 가능하게 해보세요.
-- 직원 검색 기능을 추가해 보세요.
+- [X] 직원을 등록, 수정, 삭제가 가능하게 해보세요.
 - 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)
+## 유저 플로우
+![user flow](./assets/images/flow%20chart.JPG)
 
+## 화면 예시
+### 메인 페이지
+![메인 화면](./assets/images/enroll%20info.JPG)
+- 회원 전체 정보 열람이 가능한 메인 페이지입니다.
+- 좌측 상단의 등록 버튼을 통해 회원 신규 등록이 가능하고, 체크박스로 회원을 선택한 후 삭제할 수 있습니다.
+- 회원 목록 영역 내에서 회원 번호를 선택해, 해당 회원의 프로필 페이지로 이동할 수 있습니다.
 
+### 등록 페이지
+![등록 화면](./assets/images/enroll%20page.JPG)
+- 회원 정보와, 사진 등록이 가능합니다.
+- 삭제 버튼을 통해, 등록한 사진을 삭제할 수 있습니다.
+- 회원 정보와 사진 등록을 완료한 뒤, 우측 상단의 등록 버튼을 통해 메인 페이지로 이동할 수 있습니다.
 
-## [흐름]
-![333](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/44707a0e-6c5a-4d04-a6bd-58e46f02a9a9)
+### 프로필 페이지
+![프로필 화면](./assets/images/detail.JPG)
+- 등록한 회원의 정보를 열람할 수 있습니다.
+- 등록된 정보는 수정할 수 없으며, 회원 정보 수정이 필요한 경우 우측 상단의 수정 버튼을 통해 수정 페이지로 진입합니다.
 
+### 수정 페이지
+![수정 화면](./assets/images/update.JPG)
+- 등록한 회원의 정보를 수정할 수 있습니다.
+- 사진 하단의 삭제 버튼을 눌러 기존 등록된 사진을 삭제하고, 새로운 사진을 등록시킬 수 있습니다.
+- 하단의 일지 영역 내에서 세션 추가 버튼을 통해 내용을 입력하고, 세션 저장 버튼을 통해 내용을 저장할 수 있습니다.
 
+## 느낀 점
+
+필수 기능을 먼저 빠르게 완성시켜 놓은 다음 이후 기능 구현을 진행했어야 했는데, 처음부터 기획을 너무 크게 잡고 진행해 속도도 나지 않았고, 목표로 한 기능들도 전부 구현하지 못해 스크립트 부분만 빠르게 진행하였고, css 스타일링 부분은 많이 진행하지 못했던 점이 아쉬웠습니다.
+
+현재 필수 기능 중 데스크탑-모바일 반응형 개발 부분은 미구현 상태입니다.
+추후 리팩토링 진행하면서 구현 예정입니다.

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

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/detail.css

@@ -0,0 +1,56 @@
+.section__enroll--template > ul > li, div {
+  margin-bottom: 10px;
+}
+
+.section__detail--pt_info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2rem;
+}
+
+.section__detail--pt_list {
+  display: flex;
+  flex-direction: column;
+  background-color: lightblue;
+  width: 100%;
+  height: 100%;
+}
+
+.section__detail--pt_template {
+  display: flex;
+  flex-direction: column;
+}
+
+.section__detail--pt_template>ul {
+  display: grid;
+  list-style: none;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  padding: 0 2rem;
+}
+
+@media (max-width: 480px) {
+  .section__detail--pt_template>ul {
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 481px) {
+  .section__detail--pt_template>ul {
+    grid-template-columns: 0.1fr 0.1fr 0.1fr 0.2fr 0.1fr 0.1fr 0.1fr 0.1fr;
+  }
+}
+
+.section__detail--pt_template>ul>input {
+  text-align: center;
+}
+
+.section__detail--pt_template>ul>input,
+textarea {
+  width: 100%;
+  border: none;
+  resize: none;
+}

public/css/enroll.css

@@ -0,0 +1,43 @@
+.section__enroll--nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2rem;
+}
+
+.section__enroll--article {
+  display: grid;
+  width: 100%;  
+  padding: 0 2rem;
+}
+
+@media (max-width: 480px) {
+  .section__enroll--article {
+    grid-template-rows: repeat(2, 0.3fr);
+    padding: 0;
+    justify-items: center;
+  }
+}
+
+@media (min-width: 481px) {
+  .section__enroll--article {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.section__enroll--template > ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.section__enroll--image_upload {
+  display: flex;
+  flex-direction: column;
+}
+
+.section__enroll--image_button {
+  display: flex;
+}

public/css/main.css

@@ -0,0 +1,100 @@
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background-color: rgb(240, 240, 240);
+}
+
+button {
+  border-radius: 10px;
+  margin-top: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  display: inline-block;
+  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
+    7px 7px 20px 0px rgba(0, 0, 0, .1),
+    4px 4px 5px 0px rgba(0, 0, 0, .1);
+  outline: none;
+}
+
+button:after {
+  position: absolute;
+  content: " ";
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease;
+  -webkit-transform: scale(.1);
+  transform: scale(.1);
+}
+
+button:hover {
+  color: #fff;
+  border: none;
+  background: transparent;
+}
+
+button:hover:after {
+  background: rgb(0, 3, 255);
+  background: linear-gradient(0deg, rgba(2, 126, 251, 1) 0%, rgba(0, 3, 255, 1)100%);
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+
+.section__customer--management {
+  display: flex;
+  flex-direction: column;
+}
+
+.section__customer--nav {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 2rem;
+}
+
+.section__customer--search {
+  display: flex;
+}
+
+.section__customer--list {
+  display: flex;
+  flex-direction: column;
+  background-color: lightblue;
+  width: 100%;
+  height: 100%;
+}
+
+.section__customer--template {
+  display: flex;
+  flex-direction: column;
+}
+
+.section__customer--template>ul {
+  display: grid;
+  list-style: none;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  padding: 0 2rem;
+  justify-items: center;
+}
+
+@media (max-width: 480px) {
+  .section__customer--template>ul {
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 481px) {
+  .section__customer--template>ul {
+    grid-template-columns: 0.1fr 0.1fr 0.2fr 0.2fr 0.15fr 0.1fr 0.1fr 0.1fr 0.1fr;
+  }
+}
+
+.section__customer--template>ul:nth-child(n+2)>li:nth-child(2) {
+  cursor: pointer;
+}

public/css/update.css

@@ -0,0 +1,19 @@
+/* .section__detail--pt_template>ul {
+  display: grid;
+  list-style: none;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  padding: 0 2rem;
+  grid-template-columns: 0.1fr 0.1fr 0.1fr 0.2fr 0.1fr 0.1fr 0.1fr 0.1fr;
+} */
+
+.section__detail--pt_template>ul>input {
+  text-align: center;
+}
+
+.section__detail--pt_template>ul>input, textarea {
+  width: 100%;
+  border: solid 1px black;
+  resize: none;
+}