CSS 모듈 활용

// src/app/css-modules/page.tsx

import StyledButton from './StyledButton'; // 클라이언트 컴포넌트 임포트
import styles from './page.module.css'; // 페이지에 전역적으로 적용될 CSS 모듈 임포트 (예시)

export default function CssModulesPage() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>CSS 모듈 사용 예제</h1>
      <p className={styles.description}>
        아래 버튼은 CSS 모듈을 사용하여 고유한 스타일을 가집니다.
      </p>
      <div style={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
        <StyledButton label="클릭하세요" />
        <StyledButton label="다른 버튼" primary={true} />
      </div>
    </div>
  );
}

/* src/app/css-modules/page.module.css */
.container {
  padding: 40px;
  max-width: 800px;
  margin: 20px auto;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  color: #333;
  margin-bottom: 15px;
  font-size: 2.5em;
}

.description {
  color: #666;
  font-size: 1.1em;
  line-height: 1.6;
}

"use client"; // 클라이언트 컴포넌트임을 명시

import React from 'react';
import buttonStyles from './StyledButton.module.css'; // 🚨 CSS 모듈 임포트

interface StyledButtonProps {
  label: string;
  primary?: boolean;
  onClick?: () => void;
}

export default function StyledButton({ label, primary = false, onClick }: StyledButtonProps) {
  // CSS 모듈의 클래스 이름을 조합합니다.
  return (
    <button
      className={`${buttonStyles.btn} ${primary ? buttonStyles.primary : ''}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

.btn {
  padding: 12px 25px;
  font-size: 1.1em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 기본 버튼 스타일 */
.btn {
  background-color: #007bff;
  color: white;
}

/* primary prop이 true일 때 적용될 스타일 */
.primary {
  background-color: #28a745;
  color: white;
}

.primary:hover {
  background-color: #218838;
}

npm install sass
# 또는
yarn add sass

$primary-color: #28a745;
$default-color: #007bff;

.btn {
  padding: 12px 25px;
  font-size: 1.1em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  &:hover { // SCSS 중첩 문법
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* 기본 버튼 스타일 */
  background-color: $default-color; // SCSS 변수 사용
  color: white;
}

/* primary prop이 true일 때 적용될 스타일 */
.primary {
  background-color: $primary-color;
  color: white;

  &:hover {
    background-color: darken($primary-color, 10%); // SCSS 함수 사용
  }
}

import buttonStyles from './StyledButton.module.scss'; // 🚨 확장자를 .scss로 변경
// ...