[TIL] 221104

나중에 카테고리별로 태그들을 나열하고 싶어서 임시로 tagsData 객체에 cat 프로퍼티를 추가해놨는데 비슷한 형태의 객체가 이미 CreateChallenge 파일에 존재해서 그 데이터를 가져와서 쓰기로 했다.

// src/pages/ChallengeList.tsx
const tagsData = [	
  { cat: 'VEGAN', value: 'VEGAN', name: '비건' },	
  { cat: 'VEGAN', value: 'VEGANRECIPE', name: '비건 레시피' },	
  { cat: 'VEGAN', value: 'VEGANBEAUTY', name: '비건 뷰티' },	
  { cat: 'VEGAN', value: 'VEGANFASHION', name: '비건 패션' },	
  { cat: 'VEGAN', value: 'PESCOVEGAN', name: '페스코' },	

  { cat: 'ENVIRONMENT', value: 'ZERO_WASTE', name: '제로 웨이스트' },	
  { cat: 'ENVIRONMENT', value: 'ZEROENERGE', name: '제로 에너지' },	
  { cat: 'ENVIRONMENT', value: 'PLOGGING', name: '쓰레기 줍기' },	
  { cat: 'ENVIRONMENT', value: 'TUMBLER', name: '텀블러 사용' },	
  { cat: 'ENVIRONMENT', value: 'RECYCLING', name: '재활용' },	

  { cat: 'ETC', value: 'ETC', name: '기타' },	
  { cat: 'ETC', value: 'LIFESTYLE', name: '생활습관' },	
  { cat: 'ETC', value: 'ENVIRONMENT_DAY', name: '환경의 날' },	
  ...
];	

태그 검색이 열린 상태에서 카테고리가 전체이면, 일단 객체니까 Object.keys로 map을 돌면서 그 키의 값에 해당하는 카테고리 이름과 값들을 렌더링 해줬고 만약 카테고리가 존재하면 tagsData[categoryParam]으로 현재 카테고리 searchParams에 해당하는 키의 배열들을 보여주게 만들었다.

// CreateChallenge.tsx
export const tagsData = {
  VEGAN: [
    { checked: false, value: 'VEGAN', name: '비건' },
    { checked: false, value: 'VEGANRECIPE', name: '비건 레시피' },
    ...
  ],
  ENVIRONMENT: [
    { checked: false, value: 'ZERO_WASTE', name: '제로 웨이스트' },
    { checked: false, value: 'ZEROENERGE', name: '제로 에너지' },
    ...
  ],
  ETC: [
    { checked: false, value: 'ETC', name: '기타' },
    { checked: false, value: 'LIFESTYLE', name: '생활습관' },
    { checked: false, value: 'ENVIRONMENT_DAY', name: '환경의 날' },
    ...
  ],
};
    
// ChallengeList.tsx
export default function ChallengeList () {
  ...
  return (
    ...
          <div className="ml-1">
            <button
              onClick={() => setOpenTags((prev) => !prev)}
            >
              태그로 찾기{' '}
              <span className="ml-1 text-sm select-none">{openTags ? '▲' : '▼'}</span>
            </button>
            {openTags
              ? categoryParam === ''
                ? Object.keys(tagsData).map((cat) => {
                    return (
                      <div key={cat} className={`flex itmes-center my-1 ml-1`}>
                        <h3 className="pt-2 w-10">
                          {(cat === 'VEGAN' && '비건') ||
                            (cat === 'ETC' && '기타') ||
                            '환경'}
                        </h3>
                        <div className="flex-wrap flex-1">
                          {tagsData[cat as CahllengeCategory].map((tag) => (
                            <button
                              key={tag.name}
                              onClick={() =>
                                handleChageTagList(tag.value as ChallengeTag)
                              }
                            >
                              {tag.name}
                            </button>
                          ))}
                        </div>
                      </div>
                    );
                  })
                : tagsData[categoryParam as CahllengeCategory].map((tag) => (
                    <button
                      key={tag.name}
                      onClick={() => handleChageTagList(tag.value as ChallengeTag)}
                    >
                      {tag.name}
                    </button>
                  ))
              : null}
          </div>
  )
} 

내가 생각했던 대로 구현은 됐는데 tailwind style까지 합치면 코드가 너무 길어서 어떻게 분리? 할 수 있을지 생각해야겠다.