마지막으로 카트 컴포넌트를 만들어 봅니다! ColorHunt의 카드들은 화면에 뿌려질 때 하나씩 순서대로 fade in 합니다. 팔레트의 색상들도 높이 값이 변화하면서 렌더링 됩니다. 이 점을 유의하면서 만들어 봅시다😉

Card

우선 데이터 상의 날짜를 쉽게 오늘을 기준으로 글자로 바꾸기 위해 moment를 설치합니다.

npm install --save moment

moment의 updateLocale과 fromNow를 사용합니다. moment docs

//components/ColorCard.tsx
import styles from "./ColorCard.module.scss";
import moment from "moment";
import { Color } from "../../pages/api/colors";

moment.updateLocale("en", {
  relativeTime: {
    past: "%s ago",
    s: "Today",
    ss: "Today",
    m: "Today",
    mm: "Today",
    h: "Today",
    hh: "Today",
    d: "Yesterday",
    dd: "%d days",
    w: "a week",
    ww: "%d weeks",
    M: "a month",
    MM: "%d months",
    y: "a year",
    yy: "%d years",
  },
});

interface ColorCardProps {
  data: Color;
  animationDelay: string;
}

const ColorCard = ({ data, animationDelay }: ColorCardProps) => {
  return (
    <div className={styles.wrap} style={{ animationDelay }}>
      <div className={styles.palette}></div>
      <div className={styles.utils}>
        <div className={styles.like}>
          <i className="xi-heart" />
          {data.likes}
        </div>
        <div className={styles.date}>{moment(data.date).fromNow(true)}</div>
      </div>
    </div>
  );
};

export default ColorCard;

전체적인 구조를 짜고, 각각의 컴포넌트들이 딜레이를 가지고 fade in 을 해야 하기 때문에 props로 animationDelay를 받아옵니다. 우측 하단의 현재 날짜를 기준으로 렌더링 되는 문자열은 moment로 설정해 줬습니다.

그럼 위와 같이 나오는 모습을 볼 수 있습니다. 이제 팔레트의 각 색을 넣습니다!

색의 정보는 code라는 키값에 이렇게 6자리 * 4 총 24자리로 구성되어 있습니다. 이 문자열을 6자리 단위로 잘라 앞에 #을 붙여 배열로 만들어 봅시다👇

// utils/colorSlicer.ts
const colorSlicer = (string: string): string[] => {
  const result: string[] = [];
  const amount: number = typeof string === "string" ? string.length / 6 : 0;

  for (let i = 0; i < amount; i++) {
    result.push("#" + string.slice(i * 6, i * 6 + 6));
  }

  return result;
};

export default colorSlicer;

이 함수는 string을 6자리로 잘라 하나씩 배열에 담았습니다! result의 타입에는 string[]인데, [string]으로 하시면 배열에 먼저 문자열이 있는 채로 초기화해야 합니다.
인자의 타입이 string이 아니면 반복문이 실행되지 않게 했습니다.

//components/ColorCard/ColorCard.tsx
const ColorCard = ({ data, animationDelay }: ColorCardProps) => {
  return (
    <div className={styles.wrap} style={{ animationDelay }}>
      <div className={styles.palette}>
        {colorSlicer(data.code).map((color, index) => (
          <div
            className={`${styles.place} ${styles[`p${index}`]}`}
            style={{ backgroundColor: color }}
          >
            <span>{color}</span>
          </div>
        ))}
      </div>
      <div className={styles.utils}>
        <div className={styles.like}>
          <i className="xi-heart" />
          {data.likes}
        </div>
        <div className={styles.date}>{moment(data.date).fromNow(true)}</div>
      </div>
    </div>
  );
};

이렇게 위에서 만들었던 colorSlicer 함수를 썼습니다. 배열로 리턴하기 때문에 map 메 서드를 사용해 배경 색을 각 배열에 담긴 색으로 지정했습니다. 각 색의 위치에 맞게 스타일을 지정해 주기 위해 import 한 스타일에서 스타일을 만들어 준 뒤 값을 찾습니다.

이렇게 컴포넌트가 완성되었습니다!🎉
엄청 간단하게 Color Hunt의 메인화면이 나왔습니다.

다음은 테스팅 코드 작성하기 - Jest 입니다.

코드는 여기(GitHub)서 확인하실 수 있습니다.