패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프 JS 직원 사진 관리 서비스 과제 리팩토링 후기

~50일차~

완성된 페이지는 다음과 같다.
(firebase로 배포했지만 환경변수 설정이 계속 오류나서 배포링크는 첨부하지 않는다.)

- PC version gif

- Main Page

- Upload Page

- Profile Page

- Mobile version Profile page

[User Flow]

---

리팩토링 이전 아쉬운 점

1. 기본 리스팅 페이지에서 checkbox 선택 후 삭제 버튼으로 삭제하는 작동을 구현하지 못했다.
2. 환경 변수 설정 오류 및 netlify 배포 오류
3. staff 정보 삭제 시 실제 storage에서 img 삭제는 되지 않음
4. 리스팅 페이지 이미지가 모바일 사이즈에서 찌그러졌다.

리팩토링 후 수정한 내용

1. 리스팅 페이지에서 선택 후 Delete

감사하게도 같이 과제한 동기분들의 코드를 참고해서 구현을 성공했다.

function checkAndDelete() {
  try{
    const checkBoxes = document.querySelectorAll('input[type="checkbox"]:not(#selectAll)');
    if (checkBoxes) {
      checkBoxes.forEach(checkBox => {
        if (checkBox.checked) {
          const userRow = checkBox.closest('.row');
          const userId = checkBox.id;
          if (userRow) {
            // db에서 staff 삭제하기
            deleteDoc(doc(db, "product", userId));

            // 사용자 화면에서 staff 삭제하기
            userRow.remove();

          } else throw "404 페이지로";
        }
      });
    } else throw "404 페이지로";
  } catch (err) {
    console.log(err);
  }
}

//delete 버튼 클릭 이벤트 (staff 삭제)
const deleteBtn = document.getElementById('del-btn');
deleteBtn
  ? deleteBtn.addEventListener("click", checkAndDelete)
  : console.log("404 페이지로");

이전에 이 부분을 구현하지 못한건 checked 상태한 row를 가져오고 그 row의 id값을 가져오는 게 어려워서 하지 못했는데,
생각보다 간단한 메소드와 코드로 해결이 되었다.

① checkbox의 부모요소인 row를 가져오기 checkBox.closest('.row');
closest()로 조상요소를 가져올 수 있었다.

② 선택한 row의 id값 가져오기
const userId = checkBox.id;
이건 수정하다보니 떠오른 생각이었고 더 간단했다.
기존에 firebase의 id값을 유저가 name칸에 입력한 value로 설정했는데, 이 부분을 checkbox의 id에도 같이 부여하니 가져오기가 편했다.
(*물론 input value값을 id로 지정하는 건 좋지 못한 생각이다. 다음에는 타임스탬프 등을 활용해볼 예정.)

2. image 사이즈 설정

기존에는 min 사이즈를 주지 않아서 모바일 사이즈로 줄이면 이미지가 찌그러졌다.
이번엔 최소 사이즈 설정하고, object-fit에 cover을 줬다.

.id_picture {
 min-width: 100px;
 min-height: 100px;
}
.cell_input_image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 margin: 5px;
}

---

이 외의 부분들도 모두 해결하고 싶었지만 react와 타입스크립트를 배운 뒤에 적용해서 수정해볼까 싶다.

해당 게시글은 부트캠프 과정 중 수료 점수에 반영되어, 제목과 해시태그를 포함한 지정된 양식으로 작성되었습니다.