[PreOnboarding#2] 상품등록 페이지 과제 후기

깃허브

상품등록 Admin 페이지

목표 🛶

상품 등록 페이지의 뷰와 카테고리, 필터 태그, 이미지 추가 등을 구현한다.

코드 설명

이번 과제를 통해 Category 만들기를 확실히 연습할 수 있었다. (전체 코드 🧩)

체크박스에 체크를 넣거나 해제할 때 실행되는 함수

const [selectedTag, setSelectedTag] = useState([]);

const onCheckHandler = useCallback((e) => {
	const value = e.target.value; // 체크박스 체크로 인해 선택된 태그
    const checked = e.target.checked; // 특정 체크박스가 체크됐는지 여부
    
      // 체크박스 선택 -> 태그도 추가
      if (checked && !selectedTag.includes(value)) {
        setSelectedTag([...selectedTag, value]);
        
      // 기존에 선택된 체크박스 해제 -> 태그도 해제
      } else if (!checked && selectedTag.includes(value)) {
      	// selectedTag 배열에서 태그가 해제된 요소의 인덱스를 찾아서
        const deleteTagId = selectedTag.indexOf(value);
        // 태그를 삭제하는 함수에 전달
        onDeleteTag(selectedTag[deleteTagId]);
      }
      
      // (요구사항 중 하나인 결과내용 console에 출력 - 상단 컴포넌트)
      setCategory(selectedTag);
    },
    
    [selectedTag, setSelectedTag, onDeleteTag, setCategory]
  );

오른쪽에서 태그를 삭제할 때 실행되는 함수

  // 이벤트 위임 활용 -> 좌측 체크박스 input들의 상위 태그에 ref 등록
  const inputRef = useRef(null);
  
  const onDeleteTag = useCallback((deleteTag, e) => {
  	  // selectedTag에서 삭제할 태그가 아닌 태그들만 골라서 새 배열로 반환 
      setSelectedTag(selectedTag.filter((tag) => deleteTag !== tag));
      
      // 체크박스 input들을 querySelectorAll로 모두 가져와서
      inputRef.current.querySelectorAll('input').forEach((input) => {
      	// 체크박스의 value가 태그의 value와 일치하는 경우에 체크 해제   
        // 태그의 text 뒤에 있는 공백 한 칸과 'X'를 제외하기 위해 length - 2
        if (input.value === e?.target.innerText.substring(0, e.target.innerText.length - 2)) 
        {
          input.checked = false;
        }
      });
      
      setCategory((selectedTag) => [...selectedTag]);
    },
    
    [selectedTag, setCategory]
  );

문제 해결

💥 문제

px로 컴포넌트 박스를 구현하자, 모니터 크기에 따라 박스 크기의 비율이 달라지는 현상을 발견하였다.
팀원 중 모니터 크기가 가장 큰 팀원의 모니터의 너비가 3800px이었는데
1500px 정도 되는 내 노트북 모니터에서 작업한 결과물을 띄우니 한없이 작았다.😂

💚 해결

rem 개념
최상위 태그의 font-size에 따라 px값을 조절해주는 속성
(기본값은 16px)

px 대신 rem을 사용하고,
최상위 root 태그의 font-size를 모니터 크기별 반응형으로 주어 해결했다.