[Next.js 블로그] 같은 리스트, 다른 카드

기존 진행된 내용

[카드 리스트 기본틀]
[카드 리스트 tailwindcss grid]
[한자 카드 디자인]
[블로그 카드 디자인]
[블로그 카드 이미지]

CardList에 type추가하기

이전편들에서
한자 카드(CnCard)와 일기 카드(BlogCard)를 만들었다.
두 컴포넌트는 부모로 부터 다른 정보를 받아야 하다. (prop으로 받는 data)

const CardList = ({ data }) => {};

CardList를 사용하는 3곳 :
광둥어 한자 페이지 - Cantonese
광둥어 단어 페이지 - Word
블로그 페이지 - Blog

위의 각 부모에서
CardList를 사용할 때,
페이지를 구분하는 정보를 같이 보내면,
CardList에서 정보를 구분해서
다른 디자인으로 출력할 수 있을 것 같다.

CardList 컴포넌트 내용 추가

// .\app\components\CardList.js

const CardList = ({ type, dataList }) => {
  const wrapClass = {
    tc: "grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4",
    word: "grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
    blog: "grid gap-4 mx-6 lg:mx-0 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
  };

  return (
    <div className={wrapClass[type]}>
      {dataList == null || dataList == undefined || type == null
        ? "데이터가 없거나 읽지 못했습니다"
        : type == "blog"
        ? dataList.map((data) => <BlogCard key={data.slug} data={data} />)
        : dataList.map((data) => <CnCard key={data.sortId} data={data} />)}
    </div>
  );
};

export default CardList;

type별 다른 class와 카드를 다르게 적용하기 위해서..

• prop으로 type을 추가로 받음
• wrapClass객체를 선언 : 3개 모두 grid, 수량 grid-cols- 다름
• props 오류 시, 오류 문자 출력
• type == "blog" 조건 확인 <BlogCard> <CnCard> 구분

내용이 많아 보이지만 실제로는 그저..
type을 확인하고 다르게 출력할 뿐이다.

각 부모 type 전달

// .\app\cantonese\page.js - 기타 생략
export default function Cantonese(props) {
  return (
    <>
      ...
      <CardList type="tc" dataList={tempChars} />
    </>
  );
}

// .\app\cantonese\word\page.js - 기타 생략
export default function Word(props) {
  return (
    <>
      ...
      <CardList type="word" dataList={tempChars} />
    </>
  );
}

// .\app\blog\page.js - 기타 생략
export default function Blog(props) {
  return (
    <>
      ...
      <CardList type="blog" dataList={tempChars} />
    </>
  );
}

결과

<CardList/>를 사용 할 때,
type 데이터를 전달한다.

CardList에서는 type을 확인하고
grid 행 수량을 정하고,
type이 "blog"이면 <BlogCard/> 사용,
한자와 단어는 <CnCard/>을 사용한다.
(grid가 달라서 같은 CnCard가 다른 크기로 나온다)