KDT0_ParkJiSung 임직원 관리 서비스 #49
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ling of modal and ovelay view
✅ Deploy Preview for magenta-pastelito-695c0d ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
hhjs2
reviewed
Aug 22, 2023
There was a problem hiding this comment.
주석을 이용해 코드 보기가 정말 간편하고 정리를 너무 잘해놓으신거 같아요 👍👍
NohWookJin
reviewed
Aug 22, 2023
Comment on lines
+53
to
+75
| window.filterStaffList = function () { | ||
| const searchQuery = document.querySelector('.search').value.toLowerCase(); | ||
| const staffListItems = document.querySelectorAll('.staff-list__item ul li'); | ||
|
|
||
| staffListItems.forEach((item) => { | ||
| const name = item.querySelector('.item-name').textContent.toLowerCase(); | ||
| const email = item.querySelector('.item-email').textContent.toLowerCase(); | ||
| const phone = item.querySelector('.item-phone').textContent.toLowerCase(); | ||
| const category = item.querySelector('.item-category').textContent.toLowerCase(); | ||
|
|
||
| // 이름, 이메일, 연락처, 구분 중 일치하는 정보가 있으면 표시, 없으면 숨김 | ||
| if ( | ||
| name.includes(searchQuery) || | ||
| email.includes(searchQuery) || | ||
| phone.includes(searchQuery) || | ||
| category.includes(searchQuery) | ||
| ) { | ||
| item.style.display = ''; | ||
| } else { | ||
| item.style.display = 'none'; | ||
| } | ||
| }); | ||
| }; |
There was a problem hiding this comment.
item들을 배열에 넣고 some 메서드로 확인하면 더 간결해질 것 같습니다! 👍
staffListItems.forEach(item => {
const items = [
item.querySelector(".item-name").textContent.toLowerCase(),
item.querySelector(".item-email").textContent.toLowerCase(),
item.querySelector(".item-phone").textContent.toLowerCase(),
item.querySelector(".item-category").textContent.toLowerCase(),
];
const display = items.some(item => item.includes(searchQuery));
item.style.display = display ? '' : 'none';
})
There was a problem hiding this comment.
감사합니다! some을 생각 못했네요 ㅎㅎ 참고해서 수정해보겠습니다!
SKY-PEY
approved these changes
Aug 22, 2023
Comment on lines
+234
to
+235
| // staff-list 아이템 클릭 이벤트 위임 | ||
| document.querySelector('.staff-list__item ul').addEventListener('click', function (e) { |
There was a problem hiding this comment.
체크박스 클릭해서 이벤트와 정보를 가져오는 동작을 깔끔하게 구현하기가 어려웠는데 깔끔하게 적어주셔서 인상 깊었습니다! 덕분에 또 하나 배워갑니다!👍👍👍
skyeome
reviewed
Aug 23, 2023
Comment on lines
+5
to
+15
| // Firebase 설정 | ||
| var firebaseConfig = { | ||
| apiKey: process.env.REACT_APP_FB_API_KEY, | ||
| authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN, | ||
| projectId: process.env.REACT_APP_FB_PROJECT_ID, | ||
| storageBucket: process.env.REACT_APP_FB_STORAGE_BUCKET, | ||
| messagingSenderId: process.env.REACT_APP_FB_MESSAGE_ID, | ||
| appId: process.env.REACT_APP_FB_APP_ID, | ||
| measurementId: process.env.REACT_APP_FB_MEASUREMENT_ID, | ||
| }; | ||
| firebase.initializeApp(firebaseConfig); |
There was a problem hiding this comment.
firebaseConfig에 환경변수를 적용해서 보안측면도 신경쓴점이 좋은것같습니다!
Comment on lines
+78
to
+85
| // 임직원 등록 모달 열기 함수 | ||
| function openRegisterModal() { | ||
| const registerModal = document.querySelector('.register-modal'); | ||
| const overlayRegister = document.querySelector('.overlay-register'); | ||
| registerModal.classList.add('show'); | ||
| overlayRegister.classList.add('show'); | ||
| document.body.classList.add('no-scroll'); | ||
| } |
There was a problem hiding this comment.
저는 처음에 모달로 멤버 등록하고 수정하는 함수들 작성하다가
저한테는 어려운것같아 방향을 틀었었는데, 다 구현하셨군요.. 👍
Comment on lines
+520
to
+531
| function updateImageVisibility() { | ||
| const images = document.querySelectorAll('.item-image'); | ||
| if (window.innerWidth < 768) { | ||
| images.forEach((image) => { | ||
| image.classList.add('item-image--hidden'); | ||
| }); | ||
| } else { | ||
| images.forEach((image) => { | ||
| image.classList.remove('item-image--hidden'); | ||
| }); | ||
| } | ||
| } |
There was a problem hiding this comment.
화면 크기에 따라 이미지를 변경하는 코드도 있고, 모바일까지 꼼꼼하게 신경쓴점이 좋은것같습니다.
Comment on lines
+162
to
+165
| // 임직원 리스트 실시간 반영 및 렌더링 | ||
| database.ref('staff').on('value', (snapshot) => { | ||
| const staffList = document.querySelector('.staff-list__item ul'); | ||
|
|
There was a problem hiding this comment.
이미지 리소스를 로컬로 올리지 않고 db에서 끌어와 렌더하셨군요. 👍🏼
There was a problem hiding this comment.
리뷰 감사합니다! 다음에는 태블릿도 고려해서 만들어볼게요! 👍🏻👍🏻
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
KDT0_ParkJisung
DEMO 및 사이트 링크
제작한 임직원 관리 서비스
프로젝트 Info
프로젝트 목표
Y_FE ParkJisung(flamozzi) 임직원 관리 서비스 제작
과제 필수 요구사항
과제 필수 요구사항 이외의 추가 구현 사항
Primary Color
Section별 구현사항
User Flow
Header Section
임직원 등록 & Loding Animation & Highlight Fade
임직원 삭제 및 체크박스 컨트롤
모달 컨트롤 및 임직원 상세 조회
임직원 정보 수정 (변경 취소 및 변경 저장)
최상단 이동 플로팅 버튼
모바일과 같은 작은 화면의 반응형 대응
JS 구현에 신경 쓴 부분
파이어베이스 환경변수 설정
리스트 아이템 하이라이팅 구현부
검색 기능 구현부
이미지 삭제 및 변경 구현부
모바일 반응형을 위한 리사이즈 구현부
Retrospective 및 리뷰 요청 사항