개요

내가 가장 좋아하는 구성 요소 중 하나는 의심할 여지 없이 카드이고 그 이유는 매우 간단하여 여러 용도로 사용할 수 있습니다.

정보 콘텐츠(예: 간단한 설명)에 사용할 수 있는 것과 같은 방식으로 사용자의 관심을 일시적으로(예: 소셜 미디어에 게시) 집중하여 사용자가 조치를 취할 수 있도록 할 수도 있습니다.

카드를 디자인할 때 몇 가지 측면에 주의를 기울여야 합니다.

모든 콘텐츠는 단일 요소에 포함되어야 합니다.

카드 내용에 대한 컨텍스트를 제공하기 위해 다른 보조 요소가 필요하지 않습니다.

이러한 작은 점에서 요소의 해부학적 측면에서 몇 가지 측면에만 주의하면 됩니다.

분명히 많은 요소가 선택 사항이 되며 같은 이유로 오늘은 다음 항목에만 집중할 것입니다.

컨테이너 - 카드의 모든 요소를 ​​포함하고 일반적으로 이러한 동일한 요소가 카드의 크기를 결정하지만, 나는 그들이 차지할 수 있는 최대 공간을 정의하는 반대를 하고 싶습니다.

썸네일 - 중요한 시각적 요소이지만 이 기사는 문체를 위한 것입니다.

버튼 - 일반적으로 버튼은 단일 공간에 그룹화되며 각 버튼은 사용자가 수행할 수 있는 작업에 해당합니다.

그리고 제가 흥미롭게 생각하는 측면 중 하나는 일반적으로 응답성 측면에서 훌륭한 동작을 보이는 구성 요소라는 것입니다.

어쨌든, 이것들은 인터페이스 요소로 작업할 때 고려하는 몇 가지 측면에 불과하므로 이 구성 요소가 어떤 종류의 동작을 수행해야 하는지 자세히 설명하는 이 페이지Material Design를 읽는 것이 좋습니다.

오늘의 예

오늘의 예에서는 간단한 카드를 만들 것이지만 제 생각에는 많은 라이브러리 및 프레임워크와 비교할 때 매우 다른 디자인을 가지고 있습니다. 내가 채택할 것을 권장하는 행동은 당신이 흥미롭게 생각하는 디자인을 보기 위해 매일 몇 분을 투자하는 것입니다. 오늘 기사가 끝날 때 비슷한 결과가 있기를 바랍니다.

코딩하자

오늘 사용할 프레임워크는 Tailwind CSS이며 이 프레임워크와 함께 클래스 이름 및 반응 아이콘과 같은 다른 도구를 사용할 것입니다.

npm install classnames react-icons

그런 다음 카드의 내용이 포함된 파일을 만듭니다.

// @src/data/posts.js

export default [
  {
    title: "Rogue's Rise",
    likes: Math.floor(Math.random() * (50 - 0) + 0),
    image: "https://bit.ly/3BQdTqk",
  },
  {
    title: "Fool's End",
    likes: Math.floor(Math.random() * (50 - 0) + 0),
    image: "https://bit.ly/3CQFPvv",
  },
  {
    title: "A Greater Power",
    likes: Math.floor(Math.random() * (50 - 0) + 0),
    image: "https://bit.ly/3ERuyMd",
  },
  {
    title: "2099: Oasis",
    likes: Math.floor(Math.random() * (50 - 0) + 0),
    image: "https://bit.ly/3CQKSwb",
  },
];

이제 카드 작업을 시작할 수 있지만 먼저 구성 요소의 스타일을 생성해 보겠습니다.

/* @src/components/Card.module.css */

.wrapper {
  @apply bg-white hover:bg-gray-800 shadow-xl hover:shadow-none cursor-pointer w-80 rounded-3xl flex flex-col items-center justify-center;
}

.wrapperAnime {
  @apply transition-all duration-500 ease-in-out;
}

.header {
  @apply relative mt-2 mx-2;
}

.imageWrapper {
  @apply h-56 rounded-2xl overflow-hidden;
}

.image {
  @apply object-cover w-full h-full;
}

.textWrapper {
  @apply pt-10 pb-6 w-full px-4;
}

.text {
  @apply font-medium leading-none text-base tracking-wider text-gray-400;
}

.badgeWrapper {
  @apply absolute bottom-0 left-0 -mb-4 ml-3 flex flex-row;
}

.dangerBadge {
  @apply h-10 w-10 flex items-center justify-center text-xl bg-white hover:bg-red-500 text-red-500 hover:text-white rounded-2xl shadow-xl;
}

.primaryBadge {
  @apply h-10 w-16 ml-2 bg-white hover:bg-blue-600 flex items-center justify-center font-medium text-blue-600 hover:text-white rounded-2xl shadow-xl;
}

.counter {
  @apply text-gray-800 ml-2;
}

.badgeAnime {
  @apply transform-gpu translate-y-0 hover:-translate-y-1 transition-all duration-300 ease-in-out;
}

이제 구성 요소의 jsx 작업을 시작할 수 있습니다. 우리의 구성 요소는 제목, 좋아요 수, 배열 요소의 순서 및 이미지인 4개의 소품을 받습니다.

그런 다음 아이콘을 가져올 수 있고 구성 요소의 스타일을 적용할 수 있습니다.

// @src/components/Card.jsx

import React from "react";
import classNames from "classnames";
import { AiFillHeart } from "react-icons/ai";
import { BsChatSquareFill } from "react-icons/bs";

import styles from "./Card.module.css";

const Card = ({ title, likes, order, image }) => {
  return (
    <div className={classNames([styles.wrapper, styles.wrapperAnime])}>
      <div className={styles.header}>
        <div className={styles.imageWrapper}>
          <img src={image} className={styles.image} alt="" />
        </div>
        <div className={styles.badgeWrapper}>
          <div
            className={classNames([styles.dangerBadge, styles.badgeAnime])}
          >
            <AiFillHeart />
          </div>
          <div
            className={classNames([
              styles.primaryBadge,
              styles.badgeAnime,
              "group",
            ])}
          >
            <BsChatSquareFill />
            <span
              className={classNames([styles.counter, "group-hover:text-white"])}
            >
              {likes}
            </span>
          </div>
        </div>
      </div>
      <div className={styles.textWrapper}>
        <h1 className={styles.text}>{`${order}. ${title}`}</h1>
      </div>
    </div>
  );
};

export default Card;

마지막으로 항목 파일(이 경우 App.jsx)로 이동해야 하며 다음과 같은 스타일을 갖게 됩니다.

/* @src/App.module.css */

.section {
  @apply bg-gray-100 h-full md:h-screen w-full;
}

.container {
  @apply container mx-auto px-0 md:px-4 py-4;
}

.layout {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 justify-items-center gap-4;
}

이제 App.jsx에서 우리가 만든 게시물과 Card 구성 요소에서 데이터를 가져온 다음 필요한 소품을 반복하여 전달할 것입니다.

// @src/App.jsx

import React from "react";

import styles from "./App.module.css";
import Card from "./components/Card";
import posts from "./data/posts";

const App = () => {
  return (
    <main className={styles.section}>
      <section className={styles.container}>
        <div className={styles.layout}>
          {posts.map((element, index) => (
            <Card
              key={index}
              title={element.title}
              likes={element.likes}
              order={index + 1}
              image={element.image}
            />
          ))}
        </div>
      </section>
    </main>
  );
};

export default App;

결론

항상 그렇듯이 흥미롭게 보셨기를 바랍니다. 이 기사에서 오류를 발견했다면 댓글에 언급해 주세요. 🧑🏻‍💻

좋은 하루 되세요! ✌️