[💻 코드스테이츠 FE 44기]pre-project - 11일차

✔️ 시작

질문 태그 API가 수정되어 변경했다.
질문 등록/수정시 태그 불러오는 방식이 달라 이부분에서 애를 먹었다.

📍 질문 등록/수정 태그

질문 등록

• 태그 이름만 가져온다. tagName : string

질문 수정

• 선택된 태그가 체크되어 있어야한다.
• API 명세서에는 select : boolean 이 추가 되었다.
  - 질문 등록은 태그 이름만 가져오는데 질문 수정은 모든 태그리스트에서 select로 체크 여부를 판단한다.

공통

• 태그 리스트가 보여진다.
• 3개까지 선택이 가능하다.

질문 등록/수정 태그 리스트 불러오는 방식이 달라서 다르게 작업을 해줘야 했었다.

수정 페이지를 불러올 때 select : boolean 여부로 판단하기엔 수월하게 가져올 수 있었다.

하나의 컴포넌트를 등록/수정 같이 사용중으로 질문 수정 페이지에서만 태그 컴포넌트에
memtags={tags}를 줘 분류했다.

memtags.map((el) => (
  <TagCheckBoxed key={el.tagName}>
    <TagCheck
      type="checkbox"
      id={el.tagName}
      value={el.tagName}
      checked={el.select}
      ></TagCheck>
    <TagLabel htmlFor={el.tagName}>
      <span>{el.tagName}</span>
    </TagLabel>
  </TagCheckBoxed>
))

memtags의 항목을 보여주고
checked를 select 여부로 작성해주는 간단한 방식이였다.

3개 이상 체크가 되면 안되게 해야하는데 다중 체크 되는 문제가 있었다.
disabled 조건이 질문 등록 조건으로 되어있어 조건 수정이 필요 했다.

const handlerTag = (name, selectType) => {    
      const newTag = { tagName: name, select: !selectType };
      const updatedTag = tags.map((el) => el.tagName === name ? newTag : el)
      dispatch(updateTags(updatedTag));
  };

• 태그 클릭 시 tagName, select값이 인자로 받아 오고
  !selectType을 줘서 false면 true로, true면 false로 변경하도록 해줬다.
• el.tagName === name ? newTag : el tags 리스트의 tagName과 인자로 전달되는 tagName이 동일할 경우 newTag로, 아니면 기존 값으로 두개 조건을 걸었다.

다음은 태그를 3개까지만 체크 되도록 수정해야한다.

disabled={selectMemTags.length >= 3}

이렇게 설정하니 체크는 안 되는데 체크된 input에서도 disabled가 걸리는 문제가 있었다.

const selectMemTags = memtags.filter((el) => el.select)
.
.
.
disabled={selectMemTags.length >= 3 && !el.select}

• memtags에서 select가 true인 태그만 추출해 길이를 구했다.
• !el.select 조건을 추가해 이미 선택된 체크 박스가 있고 3개인 경우
  체크된 input을 다시 클릭시 select가 false로 변경 되도록 수정했다.

❗️

const selectMemTags = memtags.filter((el) => el.select)

해당 변수는 질문 수정 페이지에서만 사용되지만 컴포넌트를 공통으로 사용하고 있어
질문 등록 페이지에서 memtags가 없다고 오류가 났었다.

이부분은 옵셔널?를 이용해 해결할 수 있었다.

const selectMemTags = memtags?.filter((el) => el.select)

const selectMemTags = memtags?.filter((el) => el.select)
.
.
.
memtags.map((el) => (
  <TagCheckBoxed key={el.tagName}>
    <TagCheck
      type="checkbox"
      id={el.tagName}
      value={el.tagName}
      checked={el.select}
      disabled={selectMemTags.length >= 3 && !el.select}
      onChange={() => handlerTag(el.tagName, el.select)}
    ></TagCheck>
    <TagLabel htmlFor={el.tagName}>
    	<span>{el.tagName}</span>
    </TagLabel>
  </TagCheckBoxed>
)

하나의 컴포넌트를 질문 등록/수정 페이지 같이 사용하고 있어
삼항연산자를 사용해 해결했다.

memtags
  ?
  memtags.map((el) => (
  //질문 수정 페이지
))
:
	tagList.map((el) => (
  //질문 작성 페이지
))

✔️ Keep

• 어떠한 구조로 이루어져 있는지, 질문 등록/수정 페이지에서 태그 리스트 받아오는 차이가 무엇인지 등
  여러 고민을 했고 어떻게 해야 수정 페이지에서 태그 수정 후 변경이 되는지 고민을 많이해보고
  구조를 이해하려고 노력했다.

✍️ Problem

• 질문 등록 페이지에서의 태그 리스트 API와 질문 수정 페이지에서의 태그 리스트 API가 달라서 로직 작성하는데 오래 걸렸다.
• 초반에 API 명세서 구조 요청했을 때 구체적으로 전달을 했어야했나 싶다.

🚀 Try

• 작업 전 API의 구조를 파악하고 어떤게 전달해야하는지 등 고민해보기.

✏️ 마치며

질문 등록은 잘 됐었고 질문 수정 페이지는 API 문제로 계속 해결하지 못했다.

이번에 API가 수정 되면서 드디어 지겨운 태그 영역을 해결 할 수 있었다.