반응형 카드 목록 컴포넌트 만들기

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f2f5;
  color: #333;
  line-height: 1.6;
}

.App {
  padding: 20px;
  max-width: 1200px;
  margin: 20px auto;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

/* 유틸리티 클래스 (일반 CSS 클래스 예시) */
.text-center {
  text-align: center;
}

.margin-top-20 {
  margin-top: 20px;
}

import { useState } from 'react';
import styled from 'styled-components';
import CardItem from './CardItem'; // 다음 단계에서 만들 CardItem 컴포넌트

// 예제가 별도 이미지 파일 없이도 실행되도록 만든 장식용 placeholder
const placeholderImage = `data:image/svg+xml,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
    <rect width="640" height="360" fill="#e4e7ec" />
    <circle cx="320" cy="140" r="56" fill="#98a2b3" />
    <path d="M176 304c28-72 86-108 144-108s116 36 144 108" fill="#667085" />
  </svg>
`)}`;

// (가상 데이터) 카드 목록에 표시될 데이터
const mockCards = [
  { id: 1, title: '리액트 기초', description: 'JSX, 컴포넌트, props의 이해', category: '프론트엔드', imgUrl: placeholderImage },
  { id: 2, title: '훅 심화', description: 'useState, useEffect, useContext 심화 학습', category: '리액트 훅', imgUrl: placeholderImage },
  { id: 3, title: '스타일링 마스터', description: 'CSS-in-JS, CSS 모듈, 반응형 디자인', category: 'UI/UX', imgUrl: placeholderImage },
  { id: 4, title: '성능 최적화', description: '메모이제이션, 코드 스플리팅 기법', category: '심화', imgUrl: placeholderImage },
  { id: 5, title: '라우팅 가이드', description: 'React Router를 이용한 페이지 전환', category: '프론트엔드', imgUrl: placeholderImage },
  { id: 6, title: '상태 관리 패턴', description: 'Redux Toolkit, Zustand, Jotai 비교 분석', category: '아키텍처', imgUrl: placeholderImage },
];

// styled-components를 사용한 반응형 목록 컨테이너
const CardsContainer = styled.ul`
  margin: 0;
  list-style: none;
  display: grid;
  gap: 25px; /* 카드 사이의 간격 */
  /* 사용 가능한 너비에 280px 이상인 열을 가능한 만큼 배치 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding: 20px;
  background-color: #fdfdfd;
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);

  /* 992px 이하에서는 최소 열 너비와 간격을 줄임 */
  @media (max-width: 992px) {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 15px;
  }

  /* 미디어 쿼리: 모바일 (최대 576px) */
  @media (max-width: 576px) {
    grid-template-columns: 1fr; /* 1열 */
    gap: 15px;
    padding: 10px;
  }
`;

// 카테고리 필터링을 위한 prop 기반 버튼 스타일
const FilterButton = styled.button`
  padding: 10px 20px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  color: #1d2939;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

  &:focus-visible {
    outline: 3px solid #111;
    outline-offset: 2px;
  }

  /* $active는 DOM으로 전달되지 않는 transient prop */
  ${({ $active }) => $active && `
    background-color: #005fcc;
    color: white;
    border-color: #005fcc;
    font-weight: bold;
  `}

  &:hover {
    background-color: ${({ $active }) => $active ? '#004a99' : '#eee'};
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
`;

function CardList() {
  const [filterCategory, setFilterCategory] = useState('All'); // 필터링 상태

  const categories = ['All', ...new Set(mockCards.map(card => card.category))];

  const filteredCards = filterCategory === 'All'
    ? mockCards
    : mockCards.filter(card => card.category === filterCategory);
  const selectedLabel = filterCategory === 'All' ? '전체' : filterCategory;

  return (
    <>
      <h1 className="text-center">반응형 카드 목록</h1>
      <div
        className="text-center margin-top-20"
        role="group"
        aria-label="카테고리 필터"
      >
        {categories.map(category => (
          <FilterButton
            key={category}
            type="button"
            onClick={() => setFilterCategory(category)}
            $active={filterCategory === category}
            aria-pressed={filterCategory === category}
          >
            {category}
          </FilterButton>
        ))}
      </div>
      <p className="text-center" role="status" aria-live="polite">
        {selectedLabel} 카테고리: {filteredCards.length}개
      </p>
      <CardsContainer aria-label="강의 카드 목록">
        {filteredCards.map(card => (
          <CardItem key={card.id} card={card} />
        ))}
      </CardsContainer>
    </>
  );
}

export default CardList;

.card {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex; /* 내부 요소 정렬을 위한 Flexbox */
  flex-direction: column;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  }
}

.cardImage {
  width: 100%;
  height: 180px; /* 고정 높이 */
  object-fit: cover; /* 비율을 유지해 박스를 채우며 일부가 잘릴 수 있음 */
  background-color: #eee; /* 이미지 없을 때 대비 */
}

.cardContent {
  padding: 15px;
  flex-grow: 1; /* 남은 공간 차지 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cardTitle {
  font-size: 1.4em;
  color: #34495e;
  margin-top: 0;
  margin-bottom: 10px;
}

.cardDescription {
  font-size: 0.95em;
  color: #475467;
  margin-bottom: 15px;
  flex-grow: 1; /* 설명이 길어져도 레이아웃 유지 */
}

.cardCategory {
  font-size: 0.85em;
  color: white;
  background-color: #475467; /* 알 수 없는 category의 fallback */
  padding: 5px 10px;
  border-radius: 15px;
  display: inline-block;
  margin-top: 10px;
  align-self: flex-start; /* 좌측 정렬 */
}

/* 반응형을 위한 미디어 쿼리 (CSS 모듈 내에서도 사용 가능) */
@media (max-width: 576px) {
  .cardTitle {
    font-size: 1.2em;
  }
  .cardDescription {
    font-size: 0.9em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}

import styles from './CardItem.module.css'; // CSS 모듈 임포트

function CardItem({ card }) {
  // 흰 글자와 충분한 대비를 갖는 카테고리 배경색
  const categoryColorMap = {
    '프론트엔드': '#b42318',
    '리액트 훅': '#175cd3',
    'UI/UX': '#8a4b08',
    '심화': '#6941c6',
    '아키텍처': '#107569'
  };
  const categoryStyle = {
    backgroundColor: categoryColorMap[card.category] || '#475467'
  };

  return (
    <li className={styles.card}> {/* CSS 모듈 클래스 사용 */}
      <img
        src={card.imgUrl}
        alt=""
        width={640}
        height={360}
        className={styles.cardImage}
        loading="lazy"
      />
      <div className={styles.cardContent}>
        <h3 className={styles.cardTitle}>{card.title}</h3>
        <p className={styles.cardDescription}>{card.description}</p>
        <span className={styles.cardCategory} style={categoryStyle}>
          {card.category}
        </span>
      </div>
    </li>
  );
}

export default CardItem;

import CardList from './components/CardList';

function App() {
  return (
    <div className="App">
      <CardList />
    </div>
  );
}

export default App;

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

.card {
  min-inline-size: 0;
}

.cardTitle,
.cardDescription {
  overflow-wrap: anywhere;
}