KDT0_ShimJeongAh 원어민 교사 관리

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.env
+dist
+temp.js
+.parcel-cache

.parcel-cache/016495e10890e331.txt

@@ -0,0 +1,2 @@
+64376211
+1692376638439879000

README.md

@@ -1,49 +1,38 @@
+## ✨ 프로젝트 소개
 
-# :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)
+원어민 교사를
 
+- 배포 주소 :
 
+## ✨ 필수 요구사항
+
+- AWS S3 / Firebase를 이용하여 사진을 관리할 수 있는 페이지 구현
+- 프로필 페이지 구현
+- 스크롤이 가능한 형태의 리스팅 페이지 구현
+- 전체 페이지 데스크탑-모바일 반응형 페이지 구현
+- 사진 등록, 수정, 삭제 기능 구현
+- 유저 플로우 제작
+- CSS
+  - 애니메이션 구현
+  - 상대수치 사용(rem, em)
+- JavaScript
+  - DOM event 조작
+
+## ✨ 기술 스택
+
+<div style="display:flex;">
+  <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">
+
+</div>
+
+## ✨ 주요 기능
+
+- 캐릭터 추가
+- 프로필 생성
+
+- 프로필 수정
+- 프로필 삭제
+
+## ✨ 유저 플로우

css/common.css

@@ -0,0 +1,112 @@
+html {
+  overflow-x: hidden;
+}
+:root {
+  line-height: 1.5;
+  color: #3e4b5b;
+  font-size: 16px;
+}
+
+main {
+  width: 100%;
+  background: #f2f4f8;
+  padding: 1.5rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #3e4b5b;
+  text-align: left;
+  min-height: 100vh;
+}
+
+header {
+  padding: 1rem;
+  background: #fff;
+  position: sticky;
+  top: 0;
+  width: 100%;
+}
+
+header .logo {
+  padding: 1rem;
+}
+
+.element-box {
+  padding: 2rem 2.5rem;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+}
+
+.btn {
+  color: #fff;
+  background-color: #171818;
+  border-color: #101112;
+  cursor: pointer;
+  border: 2px solid transparent;
+  padding: 0.375rem 0.75rem;
+  /* font-size: 0.9rem; */
+  margin-right: 0.5rem;
+  border-radius: 4px;
+  margin-bottom: 3px;
+}
+.btn-primary {
+  background-color: #0368d2;
+  border-color: #0362c6;
+}
+.btn-danger {
+  color: #fff;
+  background-color: #e65252;
+  border-color: #e65252;
+}
+.profile-img {
+  width: 8rem;
+  border-radius: 50%;
+}
+
+.img-wrap {
+  width: 100%;
+  position: relative;
+}
+
+.skeleton-row {
+  height: 183px;
+}
+
+.skeleton-row td {
+  padding: 1rem;
+}
+
+.skeleton-row td * {
+  background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%);
+  background-size: 200% 100%;
+  background-position: 100% 0;
+  animation: load 1s infinite;
+}
+
+@keyframes load {
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.skeleton-text {
+  flex: 1;
+  height: 20px;
+  background-color: #ddd;
+  border-radius: 5px;
+}
+.skeleton-img {
+  width: 150px;
+  height: 150px;
+  background-color: #ddd;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+.skeleton-btn {
+  flex: 1;
+  height: 2.5rem;
+  width: 53px;
+  background-color: #ddd;
+  border-radius: 5px;
+  margin-right: 8px;
+}

css/index.css

@@ -0,0 +1,109 @@
+.form-header {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  padding-top: 0.5rem;
+  display: block;
+}
+.controls-above-table {
+  display: flex;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  justify-content: space-between;
+}
+
+.btn-wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+#table {
+  display: table;
+  width: 100%;
+  max-width: 100%;
+  border-spacing: 2px;
+  border-color: gray;
+}
+#table thead th {
+  display: table-cell;
+  /* font-size: 0.6rem; */
+  border-top: none;
+  border-bottom: 1px solid #999;
+  padding: 0.75rem;
+  text-align: left;
+  font-weight: 700;
+  text-align: center;
+}
+#table thead:hover tr {
+  background: transparent;
+}
+
+#table thead th:first-child {
+  text-align: center;
+}
+
+#table tr {
+  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+#table tr:hover {
+  background: rgba(94, 130, 152, 0.05);
+}
+
+#table td {
+  border-top: 1px solid rgba(83, 101, 140, 0.08);
+  padding: 1rem;
+  text-align: center;
+  vertical-align: middle;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1199px) {
+  body {
+    font-size: 14px;
+  }
+  #table thead th:nth-child(4),
+  #table tr td:nth-child(4) {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 360px) and (max-width: 767px) {
+  main {
+    font-size: 13px;
+    padding: 0.8rem;
+  }
+  header {
+    padding: 0.5rem;
+  }
+  header .logo img {
+    width: 100px;
+  }
+  .element-box {
+    padding: 1rem;
+  }
+  #table thead th {
+    font-size: 0.6rem;
+  }
+  /* #table thead th:nth-child(1), */
+  #table thead th:nth-child(4),
+  #table thead th:nth-child(5),
+  /* #table tr td:nth-child(1), */
+  #table tr td:nth-child(4),
+  #table tr td:nth-child(5) {
+    display: none;
+  }
+
+  #table td {
+    padding: 0.5rem 0.3rem;
+  }
+  .profile-img {
+    width: 5rem;
+  }
+  .btn {
+    margin-right: 0.1rem;
+    font-size: 0.7rem;
+    padding: 0.3rem;
+  }
+}

css/profile.css

@@ -0,0 +1,70 @@
+.form {
+  width: 100%;
+  align-items: center;
+}
+.flex {
+  display: flex;
+}
+
+.img-wrap img {
+  margin: 0 auto;
+  display: flex;
+  margin-bottom: 20px;
+  position: relative;
+}
+.form-group {
+  margin-bottom: 3rem;
+}
+
+.form-group label {
+  color: #666;
+}
+.form-group .img-btn-wrap {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border-bottom: 1px solid #dde2ec;
+}
+.form-control:focus {
+  outline: none;
+}
+
+.img-wrap .file-box {
+  display: inline-block;
+  height: 40px;
+  padding: 0 10px;
+  vertical-align: middle;
+  border: 1px solid #dddddd;
+  width: 50%;
+  color: #999999;
+}
+
+.file-box input[type="file"] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+.file-box label {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+#delete-img-btn {
+  width: fit-content;
+}