클래스와 스타일 바인딩

<script setup lang="ts">
import { ref, computed } from 'vue'

const isActive = ref(true)
const hasError = ref(false)
const errorType = ref<'warning' | 'danger'>('warning')

// computed로 복잡한 클래스 로직 분리
const classObject = computed(() => ({
  active: isActive.value,
  'text-danger': hasError.value,
  [`alert-${errorType.value}`]: hasError.value
}))
</script>

<template>
  <!-- 객체 문법 — 값이 truthy면 클래스 적용 -->
  <div :class="{ active: isActive, 'text-danger': hasError }">
    조건부 클래스
  </div>

  <!-- computed 사용 -->
  <div :class="classObject">computed 클래스</div>

  <!-- 정적 class와 함께 사용 가능 -->
  <div class="base-card" :class="{ active: isActive }">
    결과: class="base-card active"
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeClass = ref('active')
const errorClass = ref('text-danger')
const isActive = ref(true)
</script>

<template>
  <!-- 배열 문법 — 여러 클래스를 동적으로 -->
  <div :class="[activeClass, errorClass]">배열 클래스</div>

  <!-- 배열 안에서 삼항 연산자 -->
  <div :class="[isActive ? activeClass : '', errorClass]">
    조건부 배열
  </div>

  <!-- 배열 안에 객체 혼합 -->
  <div :class="[{ active: isActive }, errorClass]">
    배열 + 객체 혼합
  </div>
</template>

<!-- BaseButton.vue -->
<template>
  <!-- 단일 루트 엘리먼트 — 부모의 class가 자동 병합 -->
  <button class="btn">
    <slot />
  </button>
</template>

<!-- 부모 컴포넌트 -->
<template>
  <!-- 결과: class="btn btn-primary" -->
  <BaseButton class="btn-primary">클릭</BaseButton>
  <BaseButton :class="{ 'btn-active': isActive }">동적</BaseButton>
</template>

<!-- MultiRoot.vue -->
<template>
  <header>헤더</header>
  <!-- $attrs.class를 원하는 엘리먼트에 적용 -->
  <main :class="$attrs.class">메인</main>
  <footer>푸터</footer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const fontSize = ref(16)
const primaryColor = ref('#42b883')

// 객체 문법 — camelCase 또는 kebab-case 모두 가능
const styleObject = computed(() => ({
  color: primaryColor.value,
  fontSize: `${fontSize.value}px`,
  'background-color': '#f0f0f0'  // kebab-case도 가능
}))
</script>

<template>
  <!-- 객체 문법 -->
  <div :style="{ color: primaryColor, fontSize: fontSize + 'px' }">
    인라인 스타일
  </div>

  <!-- computed 사용 -->
  <div :style="styleObject">computed 스타일</div>

  <!-- 배열 문법 — 여러 스타일 객체 병합 -->
  <div :style="[styleObject, { border: '1px solid #ccc' }]">
    병합된 스타일
  </div>
</template>

<template>
  <!-- Vue가 자동으로 -webkit-transform 등을 추가 -->
  <div :style="{ transform: 'rotate(45deg)' }">
    자동 벤더 접두사
  </div>

  <!-- 다중 값 — 브라우저가 지원하는 마지막 값을 사용 -->
  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
    폴백 스타일
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

type Theme = 'light' | 'dark' | 'blue'
const currentTheme = ref<Theme>('light')

// CSS 변수를 활용한 동적 테마
const themeVars = computed(() => {
  const themes = {
    light: { '--bg': '#ffffff', '--text': '#333333', '--primary': '#42b883' },
    dark: { '--bg': '#1a1a1a', '--text': '#ffffff', '--primary': '#42d392' },
    blue: { '--bg': '#e3f2fd', '--text': '#1565c0', '--primary': '#1976d2' }
  }
  return themes[currentTheme.value]
})

// 상태 기반 클래스
const buttonVariant = ref<'primary' | 'secondary' | 'danger'>('primary')
const buttonSize = ref<'sm' | 'md' | 'lg'>('md')

const buttonClasses = computed(() => [
  'btn',
  `btn-${buttonVariant.value}`,
  `btn-${buttonSize.value}`
])
</script>

<template>
  <div :style="themeVars" class="app-container">
    <button
      v-for="theme in (['light', 'dark', 'blue'] as Theme[])"
      :key="theme"
      :class="{ active: currentTheme === theme }"
      @click="currentTheme = theme"
    >
      {{ theme }}
    </button>

    <button :class="buttonClasses">
      동적 버튼
    </button>
  </div>
</template>

<style>
.app-container {
  background-color: var(--bg);
  color: var(--text);
  transition: all 0.3s ease;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'

const isActive = ref(true)
</script>

<template>
  <!-- $style로 CSS Module 클래스 접근 -->
  <div :class="{ [$style.active]: isActive, [$style.card]: true }">
    CSS Modules
  </div>
</template>

<style module>
.card {
  padding: 16px;
  border-radius: 8px;
}

.active {
  border: 2px solid #42b883;
}
</style>