KDT0_ParkJiSung 임직원 관리 서비스

.gitignore

@@ -0,0 +1,7 @@
+.parcel-cache
+node_modules
+dist
+.DS_Store
+.vscode
+firebase-config.js
+.env

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 사용
-
-## [화면 예시]
-![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)
+## DEMO 및 사이트 링크
 
+<img width="1440" alt="image" src="https://github.com/flamozzi/intro/assets/42928784/4666ba9e-547f-440c-80ee-fd695e4fc2e6">
 
+[제작한 임직원 관리 서비스](https://magenta-pastelito-695c0d.netlify.app/)
+
+> 본 프로젝트는 야놀자 테크스쿨 JS과제를 위해 제작한 임직원 관리 서비스입니다. <br> 파이어베이스 스토리지 및 리얼타임 데이터베이스를 사용하였으며, 바닐라 html, css, node js를 사용하여 개발하였습니다. <br><br> 본 프로젝트는 데스크탑을 우선적으로 개발하였으며 모바일 기기의 작은 화면에 반응형으로 대응합니다. <br> 브라우저는 크롬 브라우저를 기준으로 제작되었습니다.
+
+## 프로젝트 Info
+
+### 프로젝트 목표
+
+Y_FE ParkJisung(flamozzi) 임직원 관리 서비스 제작
+
+### 과제 필수 요구사항
+
+- [필수] Firbase 스토리지 및 리얼타임 데이터베이스를 사용하여 서버 및 디비 구현
+- [필수] 프로필 페이지 (임직원 상세 페이지) 개발
+- [필수] 스크롤 가능한 형태의 리스팅 페이지 개발
+- [필수] 데스크탑-모바일 반응형 개발
+- [필수] 이미지 파일 CRUD 기능 구현
+- [필수] 유저 플로우 제작 및 리드미에 추가
+- [필수] CSS 애니메이션 및 상대수치 사용
+- [필수] JS DOM event 조작
+
+### 과제 필수 요구사항 이외의 추가 구현 사항
+
+- 로딩 애니메이션 구현
+- 직원 데이터 CRUD 구현
+- 직원 검색 기능 구현
+- 스크롤 높이에 따라 나타나는 최상단 이동 플로팅 버튼 및 애니메이션 구현
+- 체크박스 기능 구현 (버블링 방지 등 학습하며 배운 내용 적극 사용)
+- 이미지 미리보기 기능 구현
+- 임직원 등록 및 수정시 모달 애니메이션 구현
+- 리스트 아이템 선택 및 새로운 아이템 업데이트에 대한 강조 애니메이션 구현
+- 타임스탬프 기능을 통해 최신 업데이트순 리스트 아이템 동적 정렬 구현
+- 싱글 유저(관리자) 지향의 서비스이기에 타임스탬프를 ID처럼 사용하여 DB 필드 낭비 최소화
+- 리스트 내부 정렬 최적화를 위해 그리드 적극 사용
+- BEM 방법론 적용
+- 모달 페이지 활성화시 이전 뷰의 스크롤 기능을 억제하여 모달페이지 스크롤만 동작하도록 구현
+- 현재 테스트에 사용한 사진은 AI가 가상으로 만들어낸 인물 사진 사용
+- 비활성화 버튼에 대한 비활성화 강조 표시 등 UI 디테일 구현
+- 임직원 상세 모달 페이지에서 정보 변경이 일어나도 이전 홈 페이지에서도 실시간으로 정보 수정이 반영되도록 실시간 렌더링 구현
+- alert 동작을 이용한 사용자 의사결정 로직 구현
+
+### Primary Color
+
+![image](https://github.com/flamozzi/intro/assets/42928784/13adff91-efaf-42bf-8a4a-d13f22dd61f6)
+
+- 자주 쓰일 컬러셋 구성
+- Primary-500을 프라이머리 색상으로 사용하여 버튼 및 주요 로직 등 강조 표시가 필요한 곳에 사용
+- 아이템 하이라이팅 등의 조금 더 연한 색상은 주로 Primary-300 사용
+
+## Section별 구현사항
+
+### User Flow
+
+![직원관리서비스_유저플로우](https://github.com/flamozzi/intro/assets/42928784/4a0893b5-7072-4169-ad48-55abc14df00a)
+
+### Header Section
+
+<img width="1440" alt="image" src="https://github.com/flamozzi/intro/assets/42928784/4666ba9e-547f-440c-80ee-fd695e4fc2e6">
+
+- Header를 포함하여 COMMON 스타일 지정을 통해 이후 하위에 존재할 모든 섹션에 통일감 형성
+
+### 임직원 등록 & Loding Animation & Highlight Fade
+
+![로딩_하이라이트](https://github.com/flamozzi/intro/assets/42928784/1f2b7b6a-ab17-4e04-8413-96b2fa2c4e40)
+
+- 임직원 등록 버튼 통해 모달 페이지 접근 및 유저 등록 (gif 용량 한계로 인해 모달 열기 및 데이터 입력은 미리 해두었습니다.)
+- 페이지 로드, 데이터 CRUD 작업 등 로딩이 필요한 시점에 로딩 애니메이션 구현
+- 임직원 등록 혹은 정보 수정으로 인해 리스트 아이템에 업데이트가 존재할시 해당 리스트 아이템에 강조 애니메이션 적용
+
+### 임직원 삭제 및 체크박스 컨트롤
+
+![임직원 삭제 및 체크박스](https://github.com/flamozzi/intro/assets/42928784/51d74b65-06f7-42ae-941e-c1bc4dcad0fd)
+
+- 리스트 아이템별 체크박스 개별 선택 및 전체 선택 가능
+- 체크박스 활성 여부에 따라 임직원 삭제 버튼 활성화 여부 결정
+- 임직원 삭제시 alert 팝업을 통해 유저 결정 재확인 및 삭제 진행
+
+### 모달 컨트롤 및 임직원 상세 조회
+
+![모달 컨트롤](https://github.com/flamozzi/intro/assets/42928784/3e646b89-f84a-4c4a-a052-2519ab6aabe5)
+
+- 임직원 등록 버튼 혹은 리스트 아이템 선택시 모달창 활성화
+- 모달 페이지 및 오버레이를 통해 애니메이션 구현
+- 각 리스트 아이템에대한 상세 프로필 페이지로 사용
+
+### 임직원 정보 수정 (변경 취소 및 변경 저장)
+
+![임직원 정보 수정](https://github.com/flamozzi/intro/assets/42928784/4da6c430-9c5f-4275-9357-97cd6b3f7a5b)
+
+- 임직원 상세 조회 모달 페이지를 통해 임직원 정보 수정 가능
+- 취소 및 저장 버튼을 통해 행동 확정 가능
+- 이미지 미리보기 구현을 통해 어떤 이미지로 변경할 것인지 시각적 확인 가능
+- 등록시 자동으로 애니메이션과 함께 원래 화면으로 이동
+- 정보 수정시 최근 업데이트 아이템이 리스트의 최상단으로 자동정렬 수행
+
+### 최상단 이동 플로팅 버튼
+
+![플로팅버튼](https://github.com/flamozzi/intro/assets/42928784/931b6d23-f371-409f-97ec-c3efba21fe68)
+
+- 화면 스크롤 높이에 따라 동적으로 나타나고 사라지는 플로팅 버튼 구현
+
+### 모바일과 같은 작은 화면의 반응형 대응
+
+![모바일 반응형](https://github.com/flamozzi/intro/assets/42928784/4d8951ae-d34e-4bcb-8569-cf4fb482b4c5)
+
+- 모바일 기기와 같이 작은 화면의 디바이스에서도 대응 가능한 반응형 설계를 구현
+- 리사이징 함수 구현을 통해 실시간으로 화면 사이즈 추적
+- 모바일 화면에서는 리스트 아이템의 사진이 과도하게 보일 수 있기 때문에 안보이게 설정 (데스크탑 크기로 넘어가면 다시 자동으로 보이게 설정)
+
+## JS 구현에 신경 쓴 부분
+
+### 파이어베이스 환경변수 설정
+
+![image](https://github.com/flamozzi/intro/assets/42928784/1d583e6f-5eed-42dc-9968-8d4711d32125)
+
+- 보안을 위해 Firbase 설정 값들은 환경변수로 만들어 사용
+
+### 리스트 아이템 하이라이팅 구현부
+
+![image](https://github.com/flamozzi/intro/assets/42928784/7e5e949a-2e50-49a8-9682-3b6163c5d6db)
+
+- 처음에는 id 필드를 통해 리스트 하이라이팅을 구현하려고 하였으나, 관리자 한 명의 싱글 유저 지향 서비스라는 점에 착안하여 타임스탬프를 Id 대신 사용하는 로직을 만들어 봄
+- 서비스 이용자 혹은 동시 다발적인 CRUD가 일어나는 서비스에서는 당연히 id를 따로 지정해주어야 하지만, 타임스탬프는 밀리초 단위이기 때문에 싱글 유저 서비스에서는 충분히 id 대신 사용가능할 것이라는 아이디어를 실제로 구현해 봄
+
+### 검색 기능 구현부
+
+![image](https://github.com/flamozzi/intro/assets/42928784/a4424862-9914-4adc-892d-8c18d7327627)
+
+- 한 번 렌더링 받은 데이터를 통해 필터링을 진행하기 때문에 검색할때마다 과도한 서버 요청 방지 가능
+- 이름, 이메일, 연락처, 구분(직급 직무 등의..)의 문자열 값으로 검색 가능
+
+### 이미지 삭제 및 변경 구현부
+
+![image](https://github.com/flamozzi/intro/assets/42928784/d91e453f-bd37-4694-ab31-72fa6fcff9a7)
+
+- 이미지 삭제 기능을 구현하였지만 일부러 주석처리함
+- 이미지가 고유의 url을 가지고 있더라도 결국 참조하는 원본 소스는 동일한 사진을 가리키기 때문에 다른 리스트 아이템에 영향을 줌
+- 멀티 유저의 실시간 서비스의 경우 삭제기능을 주석 해제하여 사용하면 됨
+- 하지만, 싱글 유저 서비스인 본 서비스의 테스트에서 무한한 사진을 사용할 수는 없으므로 파이어베이스 스토어의 이미지 삭제 기능은 주석 처리하고 진행함
+
+### 모바일 반응형을 위한 리사이즈 구현부
+
+![image](https://github.com/flamozzi/intro/assets/42928784/ad4e0326-9682-48d4-8f86-058bfaa9d143)
+
+- 모바일 환경에서는 리스트 아이템 내부에 사진이 있을 경우 너무 과도한 영역을 차지하기 때문에 데스크탑 버전에서는 사진 visible, 모바일 버전에서는 invisible 하게 세팅함
+- 실시간으로 window 사이즈를 추적하여 적용되기 때문에 웹 사이트 상에서도 창 크기를 줄이면 자연스럽게 실시간으로 반영됨
+
+## Retrospective 및 리뷰 요청 사항
+
+- JS 과제이지만 CSS 애니메이션 또한 좋은 퀄리티를 구현하기 위해 노력하였습니다.
+- 위의 특히 신경 쓴 JS 구현부 이외에도 다양한 CRUD 작업 및 기능 구현에 관련된 JS 코드는 실제 파일에서 확인할 수 있습니다.
+- 동일한 코드 스타일 및 컨벤션을 유지하려고 하였으나, 과제 마감 기한까지 최대한 많은 기능 넣으려다 보니 코딩 컨벤션이 다소 흐트러졌습니다. (코드 구조 컨벤션은 리팩토링 과정에서 다시 정리해보도록 하겠습니다.)
+- BEM 방법론의 네이밍 컨벤션을 따르고자 노력하였습니다.
+- 데스크탑 및 모바일 각 화면 크기에서 그리드 내의 정렬이 깨지지 않기 위해 CSS 컨트롤에 힘썼습니다.
+- 본 서비스는 크롬 브라우저를 기준으로 개발되었습니다. 사파리와 같은 다양한 브라우저에 대해서는 정상적으로 UI가 표시되지 않을 수 있습니다.
+- 현재 리스트 아이템 삭제시에도 하이라이팅이 적용되는 버그가 있습니다. 의도하지 않은 부분인데 원인을 아직 찾지 못하였습니다.
+- 현재는 실험적으로 id 대신 타임스탬프를 id 처럼 사용해보았습니다. 물론 다중 유저의 멀티 서비스에서는 id를 사용하여야 하지만, 싱글 유저의 동시 CRUD 작업이 일어나지 않은 서비스에 대해서는 타임스탬프를 아이디처럼 사용해도 무리가 없는지 궁금합니다. (물론 가능하다면 id를 사용하겠지만, 호기심에 구현해 보았습니다.)