diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..5e848c551
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+.parcel-cache
+node_modules
+dist
+.DS_Store
+.vscode
+firebase-config.js
+.env
\ No newline at end of file
diff --git a/README.md b/README.md
index a29ee163b..3407687f6 100644
--- a/README.md
+++ b/README.md
@@ -1,49 +1,163 @@
+# KDT0_ParkJisung
-# :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 사용
-
-## [화면 예시]
-
-
-
-
-## [흐름]
-
+## DEMO 및 사이트 링크
+
+[제작한 임직원 관리 서비스](https://magenta-pastelito-695c0d.netlify.app/)
+
+> 본 프로젝트는 야놀자 테크스쿨 JS과제를 위해 제작한 임직원 관리 서비스입니다. 파이어베이스 스토리지 및 리얼타임 데이터베이스를 사용하였으며, 바닐라 html, css, node js를 사용하여 개발하였습니다.
본 프로젝트는 데스크탑을 우선적으로 개발하였으며 모바일 기기의 작은 화면에 반응형으로 대응합니다. 브라우저는 크롬 브라우저를 기준으로 제작되었습니다.
+
+## 프로젝트 Info
+
+### 프로젝트 목표
+
+Y_FE ParkJisung(flamozzi) 임직원 관리 서비스 제작
+
+### 과제 필수 요구사항
+
+- [필수] Firbase 스토리지 및 리얼타임 데이터베이스를 사용하여 서버 및 디비 구현
+- [필수] 프로필 페이지 (임직원 상세 페이지) 개발
+- [필수] 스크롤 가능한 형태의 리스팅 페이지 개발
+- [필수] 데스크탑-모바일 반응형 개발
+- [필수] 이미지 파일 CRUD 기능 구현
+- [필수] 유저 플로우 제작 및 리드미에 추가
+- [필수] CSS 애니메이션 및 상대수치 사용
+- [필수] JS DOM event 조작
+
+### 과제 필수 요구사항 이외의 추가 구현 사항
+
+- 로딩 애니메이션 구현
+- 직원 데이터 CRUD 구현
+- 직원 검색 기능 구현
+- 스크롤 높이에 따라 나타나는 최상단 이동 플로팅 버튼 및 애니메이션 구현
+- 체크박스 기능 구현 (버블링 방지 등 학습하며 배운 내용 적극 사용)
+- 이미지 미리보기 기능 구현
+- 임직원 등록 및 수정시 모달 애니메이션 구현
+- 리스트 아이템 선택 및 새로운 아이템 업데이트에 대한 강조 애니메이션 구현
+- 타임스탬프 기능을 통해 최신 업데이트순 리스트 아이템 동적 정렬 구현
+- 싱글 유저(관리자) 지향의 서비스이기에 타임스탬프를 ID처럼 사용하여 DB 필드 낭비 최소화
+- 리스트 내부 정렬 최적화를 위해 그리드 적극 사용
+- BEM 방법론 적용
+- 모달 페이지 활성화시 이전 뷰의 스크롤 기능을 억제하여 모달페이지 스크롤만 동작하도록 구현
+- 현재 테스트에 사용한 사진은 AI가 가상으로 만들어낸 인물 사진 사용
+- 비활성화 버튼에 대한 비활성화 강조 표시 등 UI 디테일 구현
+- 임직원 상세 모달 페이지에서 정보 변경이 일어나도 이전 홈 페이지에서도 실시간으로 정보 수정이 반영되도록 실시간 렌더링 구현
+- alert 동작을 이용한 사용자 의사결정 로직 구현
+
+### Primary Color
+
+
+
+- 자주 쓰일 컬러셋 구성
+- Primary-500을 프라이머리 색상으로 사용하여 버튼 및 주요 로직 등 강조 표시가 필요한 곳에 사용
+- 아이템 하이라이팅 등의 조금 더 연한 색상은 주로 Primary-300 사용
+
+## Section별 구현사항
+
+### User Flow
+
+
+
+### Header Section
+
+
+
+- Header를 포함하여 COMMON 스타일 지정을 통해 이후 하위에 존재할 모든 섹션에 통일감 형성
+
+### 임직원 등록 & Loding Animation & Highlight Fade
+
+
+
+- 임직원 등록 버튼 통해 모달 페이지 접근 및 유저 등록 (gif 용량 한계로 인해 모달 열기 및 데이터 입력은 미리 해두었습니다.)
+- 페이지 로드, 데이터 CRUD 작업 등 로딩이 필요한 시점에 로딩 애니메이션 구현
+- 임직원 등록 혹은 정보 수정으로 인해 리스트 아이템에 업데이트가 존재할시 해당 리스트 아이템에 강조 애니메이션 적용
+
+### 임직원 삭제 및 체크박스 컨트롤
+
+
+
+- 리스트 아이템별 체크박스 개별 선택 및 전체 선택 가능
+- 체크박스 활성 여부에 따라 임직원 삭제 버튼 활성화 여부 결정
+- 임직원 삭제시 alert 팝업을 통해 유저 결정 재확인 및 삭제 진행
+
+### 모달 컨트롤 및 임직원 상세 조회
+
+
+
+- 임직원 등록 버튼 혹은 리스트 아이템 선택시 모달창 활성화
+- 모달 페이지 및 오버레이를 통해 애니메이션 구현
+- 각 리스트 아이템에대한 상세 프로필 페이지로 사용
+
+### 임직원 정보 수정 (변경 취소 및 변경 저장)
+
+
+
+- 임직원 상세 조회 모달 페이지를 통해 임직원 정보 수정 가능
+- 취소 및 저장 버튼을 통해 행동 확정 가능
+- 이미지 미리보기 구현을 통해 어떤 이미지로 변경할 것인지 시각적 확인 가능
+- 등록시 자동으로 애니메이션과 함께 원래 화면으로 이동
+- 정보 수정시 최근 업데이트 아이템이 리스트의 최상단으로 자동정렬 수행
+
+### 최상단 이동 플로팅 버튼
+
+
+
+- 화면 스크롤 높이에 따라 동적으로 나타나고 사라지는 플로팅 버튼 구현
+
+### 모바일과 같은 작은 화면의 반응형 대응
+
+
+
+- 모바일 기기와 같이 작은 화면의 디바이스에서도 대응 가능한 반응형 설계를 구현
+- 리사이징 함수 구현을 통해 실시간으로 화면 사이즈 추적
+- 모바일 화면에서는 리스트 아이템의 사진이 과도하게 보일 수 있기 때문에 안보이게 설정 (데스크탑 크기로 넘어가면 다시 자동으로 보이게 설정)
+
+## JS 구현에 신경 쓴 부분
+
+### 파이어베이스 환경변수 설정
+
+
+
+- 보안을 위해 Firbase 설정 값들은 환경변수로 만들어 사용
+
+### 리스트 아이템 하이라이팅 구현부
+
+
+
+- 처음에는 id 필드를 통해 리스트 하이라이팅을 구현하려고 하였으나, 관리자 한 명의 싱글 유저 지향 서비스라는 점에 착안하여 타임스탬프를 Id 대신 사용하는 로직을 만들어 봄
+- 서비스 이용자 혹은 동시 다발적인 CRUD가 일어나는 서비스에서는 당연히 id를 따로 지정해주어야 하지만, 타임스탬프는 밀리초 단위이기 때문에 싱글 유저 서비스에서는 충분히 id 대신 사용가능할 것이라는 아이디어를 실제로 구현해 봄
+
+### 검색 기능 구현부
+
+
+
+- 한 번 렌더링 받은 데이터를 통해 필터링을 진행하기 때문에 검색할때마다 과도한 서버 요청 방지 가능
+- 이름, 이메일, 연락처, 구분(직급 직무 등의..)의 문자열 값으로 검색 가능
+
+### 이미지 삭제 및 변경 구현부
+
+
+
+- 이미지 삭제 기능을 구현하였지만 일부러 주석처리함
+- 이미지가 고유의 url을 가지고 있더라도 결국 참조하는 원본 소스는 동일한 사진을 가리키기 때문에 다른 리스트 아이템에 영향을 줌
+- 멀티 유저의 실시간 서비스의 경우 삭제기능을 주석 해제하여 사용하면 됨
+- 하지만, 싱글 유저 서비스인 본 서비스의 테스트에서 무한한 사진을 사용할 수는 없으므로 파이어베이스 스토어의 이미지 삭제 기능은 주석 처리하고 진행함
+
+### 모바일 반응형을 위한 리사이즈 구현부
+
+
+
+- 모바일 환경에서는 리스트 아이템 내부에 사진이 있을 경우 너무 과도한 영역을 차지하기 때문에 데스크탑 버전에서는 사진 visible, 모바일 버전에서는 invisible 하게 세팅함
+- 실시간으로 window 사이즈를 추적하여 적용되기 때문에 웹 사이트 상에서도 창 크기를 줄이면 자연스럽게 실시간으로 반영됨
+
+## Retrospective 및 리뷰 요청 사항
+
+- JS 과제이지만 CSS 애니메이션 또한 좋은 퀄리티를 구현하기 위해 노력하였습니다.
+- 위의 특히 신경 쓴 JS 구현부 이외에도 다양한 CRUD 작업 및 기능 구현에 관련된 JS 코드는 실제 파일에서 확인할 수 있습니다.
+- 동일한 코드 스타일 및 컨벤션을 유지하려고 하였으나, 과제 마감 기한까지 최대한 많은 기능 넣으려다 보니 코딩 컨벤션이 다소 흐트러졌습니다. (코드 구조 컨벤션은 리팩토링 과정에서 다시 정리해보도록 하겠습니다.)
+- BEM 방법론의 네이밍 컨벤션을 따르고자 노력하였습니다.
+- 데스크탑 및 모바일 각 화면 크기에서 그리드 내의 정렬이 깨지지 않기 위해 CSS 컨트롤에 힘썼습니다.
+- 본 서비스는 크롬 브라우저를 기준으로 개발되었습니다. 사파리와 같은 다양한 브라우저에 대해서는 정상적으로 UI가 표시되지 않을 수 있습니다.
+- 현재 리스트 아이템 삭제시에도 하이라이팅이 적용되는 버그가 있습니다. 의도하지 않은 부분인데 원인을 아직 찾지 못하였습니다.
+- 현재는 실험적으로 id 대신 타임스탬프를 id 처럼 사용해보았습니다. 물론 다중 유저의 멀티 서비스에서는 id를 사용하여야 하지만, 싱글 유저의 동시 CRUD 작업이 일어나지 않은 서비스에 대해서는 타임스탬프를 아이디처럼 사용해도 무리가 없는지 궁금합니다. (물론 가능하다면 id를 사용하겠지만, 호기심에 구현해 보았습니다.)
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 000000000..312108567
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,552 @@
+/* LOADING ANIMATION STYLE */
+#loader {
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border: 5px solid #f3f3f3;
+ border-radius: 50%;
+ border-top: 5px solid #d2a362;
+ width: 50px;
+ height: 50px;
+ animation: spin 1s linear infinite;
+ z-index: 999;
+}
+@keyframes spin {
+ 0% {
+ transform: translate(-50%, -50%) rotate(0deg);
+ }
+ 100% {
+ transform: translate(-50%, -50%) rotate(360deg);
+ }
+}
+
+/* HIGILIGHT FADE */
+@keyframes highlightFade {
+ from {
+ background-color: #e1c196;
+ }
+ to {
+ background-color: transparent; /* 투명으로 서서히 사라짐 */
+ }
+}
+
+.highlighted {
+ animation: highlightFade 3s forwards; /* 3초 동안 진행하며 애니메이션 끝나면 마지막 상태 유지 */
+}
+
+/* COMMON */
+body {
+ color: #333;
+ font-size: 10px;
+ font-weight: 400;
+ line-height: 1.4;
+ font-family: 'Nanum Gothic', sans-serif;
+ overflow: auto;
+ text-align: center;
+}
+img {
+ /* img를 block으로 처리하여 기존 inline의 baseline으로 인한 불필요한 margin 제거 */
+ display: block;
+}
+a {
+ text-decoration: none;
+}
+.inner {
+ /* common 으로 inner를 정의함으로써 하위 inner들은 height만을 지정하여 편리하게 사용할 수 있도록 함 */
+ width: 1200px;
+ max-width: 100%;
+ margin: 0 auto;
+ /* 하위 구조에서 position 사용중이기 때문에 부모인 .inner에서 position relative로 지정하여 기준을 명시해줌 */
+ position: relative;
+}
+.btn {
+ background-color: #d2a362;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ cursor: pointer;
+}
+.btn.disabled {
+ background-color: #ccc; /* 회색 배경으로 설정 */
+ cursor: not-allowed; /* 마우스 커서를 not-allowed로 표시 */
+}
+.search {
+ width: 200px;
+ padding: 10px;
+}
+.no-scroll {
+ overflow: hidden;
+ height: 100%;
+}
+
+/* HEADER */
+header {
+ max-width: 100%;
+}
+header .inner {
+}
+header .inner h1 {
+ /* body의 font-size가 10px로 설정되어 있으므로, body 이하의 font-size는 상대 사이즈 사용 */
+ font-size: 3.6em; /* 타이틀 크기 설정 */
+ font-weight: bold;
+ padding-top: 30px;
+ padding-bottom: 20px;
+ text-align: left;
+}
+
+/* TOOLBAR */
+.toolbar {
+ max-width: 100%;
+}
+.toolbar .inner {
+ display: flex;
+ justify-content: space-between;
+ padding: 20px 0;
+}
+.toolbar .inner .toolbar__btn {
+}
+.toolbar .inner .toolbar__btn .btn {
+ border-radius: 0.4em;
+}
+.toolbar .inner .toolbar__btn .btn:first-child {
+ margin-right: 0.4em;
+}
+.toolbar .inner .toolbar__search {
+}
+.toolbar .inner .toolbar__search .search {
+}
+
+/* STAFF LIST */
+.staff-list {
+ display: inline-block;
+ max-width: 100%;
+}
+.staff-list .inner {
+ max-width: 100%;
+}
+.staff-list .inner .staff-list__title {
+ display: grid;
+ grid-template-columns: 0.5fr 0.8fr 1fr 1fr 1fr 1fr; /* 선택한 가로 너비 비율로 정렬 */
+ font-size: 1.6em;
+ font-weight: bold;
+ align-items: center;
+ border-top: 1px solid #ddd; /* 위쪽 구분선 */
+ border-bottom: 1px solid #ddd; /* 아래쪽 구분선 */
+ padding: 10px 0; /* 패딩 추가 */
+}
+.staff-list .inner .staff-list__title #selectAll {
+}
+.staff-list .inner .staff-list__title span {
+ text-align: center;
+}
+.staff-list .inner .staff-list__item {
+ margin-bottom: 8em;
+}
+.staff-list .inner .staff-list__item ul {
+}
+.staff-list .inner .staff-list__item ul li {
+ display: grid;
+ grid-template-columns: 0.5fr 0.8fr 1fr 1fr 1fr 1fr; /* .staff-list__title과 동일한 비율로 정렬 */
+ align-items: center;
+ text-align: center;
+ border-bottom: 1px solid #ddd;
+ padding: 10px 0; /* 패딩 추가 */
+}
+.staff-list .inner .staff-list__item ul li .item-image {
+ width: 100%; /* 이미지가 너비를 꽉 채우도록 설정 */
+ height: auto; /* 이미지가 원본 비율을 유지하도록 설정 */
+ border-radius: 1.6em;
+}
+.staff-list .inner .staff-list__item ul li .item-checkbox {
+}
+.staff-list .inner .staff-list__item ul li .item-name,
+.staff-list .inner .staff-list__item ul li .item-email,
+.staff-list .inner .staff-list__item ul li .item-phone,
+.staff-list .inner .staff-list__item ul li .item-category {
+ font-size: 1.6em;
+}
+
+/* OVERLAY */
+.overlay-register,
+.overlay-staff {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.4);
+ z-index: 100;
+ display: none;
+}
+.overlay-register.show,
+.overlay-staff.show {
+ display: block;
+}
+/* 오버레이시 선택된 스태프 아이템 강조 색상 표시 */
+.selected-item {
+ background-color: #f0f0f0;
+}
+
+/* REGISTER MODAL */
+.register-modal {
+ position: fixed;
+ top: 0;
+ right: -60%;
+ width: 60%;
+ height: 100%;
+ background: #fff;
+ overflow-y: auto; /* 모달 내부의 스크롤 적용 */
+ transition: right 0.3s ease;
+ display: flex;
+ flex-direction: column;
+ z-index: 101; /* overlay보다 높은 z-index */
+ text-align: left;
+}
+.register-modal.show {
+ right: 0;
+}
+.register-modal .container {
+ padding: 2em;
+}
+.register-modal .register-modal__title {
+ justify-content: center;
+ align-items: center;
+}
+.register-modal .register-modal__title h2 {
+ font-size: 3.2em;
+ font-weight: bold;
+}
+.register-modal .register-modal__sub-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 2em 0.4em;
+}
+.register-modal .register-modal__sub-title h3 {
+ font-size: 2.4em;
+ font-weight: bold;
+}
+.register-modal .register-modal__sub-title .btn {
+ border-radius: 0.4em;
+}
+.divider {
+ border-bottom: 1px solid #e0e0e0;
+}
+.register-modal .register-modal__content {
+ padding: 2em 0;
+}
+.register-modal .register-modal__content .register-modal__input-field #staff-form {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ height: auto;
+ font-size: 1.2em;
+ padding: 1.6em 0;
+}
+.register-modal__content .register-modal__input-field #staff-form input {
+ margin-bottom: 1.2em;
+ padding: 15px;
+ font-size: 1.2em;
+ border-radius: 0.4em;
+ border: 1px solid #e0e0e0;
+}
+
+/* STAFF MODAL */
+.staff-modal {
+ position: fixed;
+ top: 0;
+ right: -60%;
+ width: 60%;
+ height: 100%;
+ background: #fff;
+ overflow-y: auto; /* 모달 내부의 스크롤 적용 */
+ transition: right 0.3s ease;
+ display: flex;
+ flex-direction: column;
+ z-index: 101; /* overlay보다 높은 z-index */
+ text-align: left;
+}
+.staff-modal.show {
+ right: 0;
+}
+.staff-modal .container {
+ padding: 2em;
+}
+.staff-modal .staff-modal__title {
+ justify-content: center;
+ align-items: center;
+}
+.staff-modal .staff-modal__title h2 {
+ font-size: 3.2em;
+ font-weight: bold;
+}
+.staff-modal .staff-modal__sub-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 2em 0.4em;
+}
+.staff-modal .staff-modal__sub-title h3 {
+ font-size: 2.4em;
+ font-weight: bold;
+}
+/* staff-modal 버튼 공통 스타일 */
+.staff-modal__sub-title .btn,
+.change-image-btn {
+ border-radius: 0.4em;
+}
+.staff-modal__sub-title .btn.cancel-btn {
+ background-color: #ccc;
+}
+/* 사진 변경 버튼 스타일 */
+.change-image-btn {
+ display: none; /* 초기 상태에서는 숨김 */
+ border: 1px solid #e0e0e0;
+ padding: 10px 20px;
+ font-size: 1.8em;
+ width: 40%;
+ margin-left: -0px;
+ cursor: pointer;
+}
+.change-image-btn.show {
+ display: block;
+}
+.divider {
+ border-bottom: 1px solid #e0e0e0;
+}
+.staff-modal .staff-modal__content {
+ padding: 2em 0;
+ display: flex;
+}
+.staff-modal .staff-modal__content .info-image {
+ flex: 0 0 40%; /* 이미지는 고정 너비 40%로 설정 */
+ max-width: 40%;
+ height: auto;
+ border-radius: 1.6em;
+}
+.staff-modal .staff-modal__content .staff-modal__info {
+ font-size: 1.8em;
+ flex: 1; /* 나머지 부분을 채우도록 설정 */
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr 1fr 1fr;
+}
+.staff-modal .staff-modal__content .staff-modal__info input[type='text'] {
+ width: 100%; /* 입력 필드의 높이를 해당 셀의 높이와 동일하게 설정 */
+ font-size: 1em;
+ padding: 0.5em 1em;
+ align-items: center; /* 값 수직으로 중앙 정렬 */
+ justify-content: start;
+}
+.staff-modal .staff-modal__content .staff-modal__info .info-name,
+.staff-modal .staff-modal__content .staff-modal__info .info-email,
+.staff-modal .staff-modal__content .staff-modal__info .info-phone,
+.staff-modal .staff-modal__content .staff-modal__info .info-category {
+ display: grid;
+ grid-template-columns: 1fr 3fr; /* 첫 번째 열은 레이블, 두 번째 열은 정보 */
+ border: 1px solid #e0e0e0; /* grid 보더 적용 */
+ margin: 0 2em;
+}
+.staff-modal .staff-modal__content .staff-modal__info .info-name__label,
+.staff-modal .staff-modal__content .staff-modal__info .info-email__label,
+.staff-modal .staff-modal__content .staff-modal__info .info-phone__label,
+.staff-modal .staff-modal__content .staff-modal__info .info-category__label {
+ font-weight: bold;
+ background-color: #f5f5f5; /* 연한 회색의 백그라운드 색 적용 */
+ padding: 1em; /* 레이블에 패딩 추가 */
+ display: flex;
+ align-items: center; /* 레이블을 수직으로 중앙 정렬 */
+ justify-content: center;
+ border-right: 1px solid #e0e0e0; /* 열을 구분하는 보더 적용 */
+}
+.staff-modal .staff-modal__content .staff-modal__info .info-name__content,
+.staff-modal .staff-modal__content .staff-modal__info .info-email__content,
+.staff-modal .staff-modal__content .staff-modal__info .info-phone__content,
+.staff-modal .staff-modal__content .staff-modal__info .info-category__content {
+ padding: 1em;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+
+/* TO TOP */
+#to-top {
+ width: 42px;
+ height: 42px;
+ background-color: #d2a362;
+ color: #fff;
+ border: 2px solid #fff;
+ border-radius: 10px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ bottom: 30px;
+ right: 30px;
+ z-index: 9;
+ transform: translateX(100px); /* 초기에 오른쪽으로 밀기 */
+}
+
+/* 기본: 데스크탑 우선 */
+
+/* 태블릿 스타일 (너비 768px~1024px) */
+/* 태블릿은 이번 과제 조건에서 벗어남, 추후 태블릿 적용도 고려 예정 */
+/* 태블릿 전용으로 따로 미디어 쿼리를 설정하지는 않았지만, 기본적으로 데스크탑 또한 반응형을 고려하여 상대수치를 적극 사용하였기에, */
+/* 일정 수준의 태블릿에 대해서는 문제 없이 화면 크기에 맞춰 지원 됨 */
+
+/* 모바일 스타일 (너비 768px 미만) */
+@media (max-width: 768px) {
+ /* MOBILE: COMMON */
+ body {
+ width: auto;
+ padding: 1.6em;
+ }
+ .inner {
+ width: auto;
+ }
+
+ /* MOBILE: TOOLBAR */
+ .toolbar .inner {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .toolbar .inner .toolbar__btn {
+ margin-bottom: 1.2em;
+ }
+
+ /* MOBILE: STAFF LIST */
+ .staff-list {
+ display: block;
+ }
+ .staff-list__title span:nth-child(3),
+ .staff-list__title span:nth-child(4),
+ .staff-list__title span:nth-child(5),
+ .staff-list__title span:nth-child(6) {
+ display: none; /* 이름, 이메일, 연락처, 구분을 숨김 */
+ }
+ .staff-list__title input[type='checkbox'] + span {
+ display: none; /* 체크박스 옆의 '사진' 문자열 숨김 */
+ }
+ .staff-list__title {
+ display: grid;
+ grid-template-columns: 1fr 3fr; /* 체크박스와 '임직원 정보'를 위한 그리드 */
+ }
+ .staff-list__title input[type='checkbox'] {
+ order: 1; /* 체크박스를 첫 번째로 위치 */
+ }
+ .staff-list__title:before {
+ content: '임직원 정보'; /* 체크박스 옆에 '임직원 정보'라는 문자열 표시 */
+ order: 2; /* 두 번째로 위치 */
+ display: flex;
+ align-items: center; /* 세로 방향 중앙 정렬 */
+ justify-content: center; /* 가로 방향 중앙 정렬 */
+ }
+ .staff-list .inner .staff-list__title {
+ grid-template-columns: 1fr 3fr;
+ }
+ .staff-list .inner .staff-list__item .item-image {
+ display: none; /* 리스트 아이템 내부 이미지 숨김 */
+ visibility: hidden; /* 안 보이게 설정 */
+ }
+
+ /* MOBILE: SORT CONTROL */
+ .staff-modal .staff-modal__content .info-image {
+ display: block; /* 모달 창에서 이미지 보이게 설정 */
+ visibility: visible; /* 보이게 설정 */
+ }
+ .staff-list .inner .staff-list__item ul li {
+ display: grid;
+ grid-template-columns: 1fr 3fr; /* 체크박스와 이름을 위한 그리드 */
+ grid-template-rows: auto auto auto auto;
+ gap: 8px;
+ width: 100%;
+ }
+ .item-checkbox {
+ grid-row: 1;
+ grid-column: 1; /* 첫 번째 컬럼 차지 */
+ }
+ .item-name,
+ .item-email,
+ .item-phone,
+ .item-category {
+ grid-column: 2; /* 두 번째 컬럼 차지 */
+ display: flex;
+ align-items: center; /* 세로 방향 중앙 정렬 */
+ justify-content: center; /* 가로 방향 중앙 정렬 */
+ }
+
+ /* MOBILE: MODAL */
+ .register-modal,
+ .staff-modal {
+ position: fixed;
+ top: 0;
+ right: -80%;
+ width: 80%;
+ height: 100%;
+ background: #fff;
+ overflow-y: auto; /* 모달 내부의 스크롤 적용 */
+ transition: right 0.3s ease;
+ display: flex;
+ flex-direction: column;
+ z-index: 101; /* overlay보다 높은 z-index */
+ text-align: left;
+ }
+
+ /* MOBILE: REGISTER MODAL */
+ .register-modal .register-modal__content .register-modal__input-field #staff-form {
+ width: 100%;
+ }
+ /* MOBILE: STAFF MODAL */
+ .staff-modal .staff-modal__sub-title {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ padding: 2em 0.4em;
+ }
+ .staff-modal .staff-modal__sub-title h3 {
+ margin-bottom: 0.8em;
+ }
+ .staff-modal__sub-title .btn {
+ margin-right: 0.4em;
+ }
+ /* 사진 변경 버튼 스타일 */
+ .change-image-btn {
+ width: 100%;
+ }
+ .staff-modal .staff-modal__content {
+ display: flex; /* 플렉스박스로 설정 */
+ flex-direction: column;
+ align-items: stretch; /* 자식 요소들을 부모의 너비로 늘림 */
+ width: 100%; /* 컨텐츠 영역 너비를 최대로 설정 */
+ }
+ .staff-modal .staff-modal__content .info-image,
+ .staff-modal .staff-modal__content .staff-modal__info {
+ flex: 0 0 100%; /* 이미지 및 인포 영역 너비를 100%로 설정 */
+ max-width: 100%;
+ }
+ .staff-modal .staff-modal__content .info-image {
+ margin-bottom: 2em;
+ }
+ .staff-modal .staff-modal__content .staff-modal__info {
+ font-size: 1.4em; /* 폰트 사이즈 조정 */
+ width: 100%; /* 전체 영역의 너비를 모달의 최대 넓이로 설정 */
+ }
+ .staff-modal .staff-modal__content .staff-modal__info input[type='text'] {
+ width: 85%; /* 입력 필드 너비 조절 */
+ }
+ .staff-modal .staff-modal__content .staff-modal__info .info-name,
+ .staff-modal .staff-modal__content .staff-modal__info .info-email,
+ .staff-modal .staff-modal__content .staff-modal__info .info-phone,
+ .staff-modal .staff-modal__content .staff-modal__info .info-category {
+ margin: 0;
+ }
+ .staff-modal .staff-modal__content .info-name__label,
+ .staff-modal .staff-modal__content .info-email__label,
+ .staff-modal .staff-modal__content .info-phone__label,
+ .staff-modal .staff-modal__content .info-category__label {
+ min-width: 50%; /* 라벨의 최소 너비 설정 (필요에 따라 조정) */
+ white-space: nowrap; /* 글씨가 세로로 나열되지 않게 설정 */
+ }
+}
diff --git a/images/dummy.jpg b/images/dummy.jpg
new file mode 100644
index 000000000..7f2e38b45
Binary files /dev/null and b/images/dummy.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..9be5ff1d5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,151 @@
+
+
+
+
+
+ 임직원 관리
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+