프로필 카드 컴포넌트 만들기

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 React, { useState } from 'react';
import styled from 'styled-components';
import CardItem from './CardItem'; // 다음 단계에서 만들 CardItem 컴포넌트

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

// Styled-components를 사용한 반응형 그리드 컨테이너
const CardsContainer = styled.div`
  display: grid;
  gap: 25px; /* 카드 사이의 간격 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 기본 3열 (데스크톱) */
  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-fill, minmax(250px, 1fr)); /* 2열 */
    gap: 20px;
    padding: 15px;
  }

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

// 카테고리 필터링을 위한 버튼 스타일 (인라인 스타일 + CSS 클래스 조합 예시)
const FilterButton = styled.button`
  padding: 10px 20px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.2s ease;

  &:hover {
    background-color: #eee;
  }

  /* active prop에 따른 동적 스타일 (인라인 스타일링과 유사) */
  ${props => props.active && `
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  `}
`;

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);

  return (
    <>
      <h2 className="text-center">반응형 카드 목록</h2>
      <div className="text-center margin-top-20"> {/* 일반 CSS 클래스 활용 */}
        {categories.map(category => (
          <FilterButton
            key={category}
            onClick={() => setFilterCategory(category)}
            active={filterCategory === category} // active prop 전달
          >
            {category}
          </FilterButton>
        ))}
      </div>
      <CardsContainer>
        {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;
}

.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: #7f8c8d;
  margin-bottom: 15px;
  flex-grow: 1; /* 설명이 길어져도 레이아웃 유지 */
}

.cardCategory {
  font-size: 0.85em;
  color: #9b59b6; /* 보라색 */
  background-color: #ecf0f1;
  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;
  }
}

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

function CardItem({ card }) {
  // (예시) 카테고리에 따른 동적 인라인 스타일 (배경색 변경)
  const categoryColorMap = {
    '프론트엔드': '#e74c3c',
    '리액트 훅': '#2980b9',
    'UI/UX': '#f39c12',
    '심화': '#8e44ad',
    '아키텍처': '#16a085',
    'All': '#7f8c8d'
  };
  const categoryStyle = {
    backgroundColor: categoryColorMap[card.category] || '#7f8c8d',
    color: 'white'
  };

  return (
    <div className={styles.card}> {/* CSS 모듈 클래스 사용 */}
      <img src={card.imgUrl} alt={card.title} className={styles.cardImage} />
      <div className={styles.cardContent}>
        <h3 className={styles.cardTitle}>{card.title}</h3>
        <p className={styles.cardDescription}>{card.description}</p>
        <span className={styles.cardCategory} style={categoryStyle}> {/* CSS 모듈 + 인라인 스타일 조합 */}
          {card.category}
        </span>
      </div>
    </div>
  );
}

export default CardItem;

import React from 'react';
import './index.css'; // 전역 스타일
import CardList from './components/CardList';

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

export default App;