문양 배경 시스템

lh-ui-plus는 국풍 시적인 문양 배경 시스템을 제공하여, 6가지 프리셋 문양 패턴을 지원하며 CSS 변수 (bg-pattern)나 컴포넌트의 bgPattern prop으로 적용합니다. 라이트/다크 모드 전환은 또 다른 독립 기능이며, 문서 끝의 「라이트/다크 모드」를 참고하세요.

프리셋 문양

시스템에 내장된 6가지 문양:

문양명	CSS 변수	설명
없음	--lh-pattern-none	기본값, 문양 없음
柳叶 (버들잎)	--lh-pattern-willow	가늘고 긴 버들잎, 적당한 밀도
祥云 (상서로운 구름)	--lh-pattern-cloud	펼쳐진 상서로운 구름, 유려하게 흐름
水波 (물결)	--lh-pattern-water	미세하게 움직이는 잔물결, 겹겹이 쌓임
雪花 (눈꽃)	--lh-pattern-snow	육각 눈꽃, 가지가 갈라짐
梅花 (매화)	--lh-pattern-plum	다섯 잎이 펼쳐지고, 꽃밥이 또렷함
竹叶 (대나무잎)	--lh-pattern-bamboo	바늘잎 형태의 대나무잎, 어우러짐

사용 방법

ConfigProvider로 전역 구성

<template>
  <LhConfigProvider :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-willow)' }">
    <LhButton>기본</LhButton>
    <LhButton type="primary">주요</LhButton>
  </LhConfigProvider>
</template>

문양 적용 범위 제어 (patternComponents 허용 목록)

기본적으로 전역 bg-pattern은 어떤 컴포넌트에도 적용되지 않으며, patternComponents 허용 목록으로 명시적으로 켜야 합니다:

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

const visible = ref(false)
</script>

<template>
  <LhConfigProvider
    :theme-vars="{ 'bg-pattern': 'var(--lh-pattern-cloud)' }"
    :pattern-components="['button', 'input']"
  >
    <!-- 버튼과 입력 상자에 문양이 적용되고, Dialog에는 적용되지 않습니다 -->
    <LhButton>문양 버튼</LhButton>
    <LhInput placeholder="문양 입력 상자" />
    <LhDialog v-model="visible">이 대화상자에는 문양이 없습니다</LhDialog>
  </LhConfigProvider>
</template>

컴포넌트 수준의 문양 구성

컴포넌트 자체가 bgPattern prop이나 themeVars로 설정한 문양은 허용 목록의 제한을 받지 않습니다:

<template>
  <LhButton :bg-pattern="'var(--lh-pattern-bamboo)'">
    이 버튼은 항상 문양이 있습니다
  </LhButton>
</template>

문양 불투명도 사용자 정의

<template>
  <LhConfigProvider
    :theme-vars="{
      'bg-pattern': 'var(--lh-pattern-snow)',
      'bg-pattern-opacity': '0.3',
      'bg-pattern-color': 'rgba(255, 0, 0, 0.2)',
    }"
  >
    <LhButton>사용자 정의 불투명도</LhButton>
  </LhConfigProvider>
</template>

CSS 변수 참고

변수명	설명	기본값
--lh-bg-pattern	문양 배경 URL	none
--lh-bg-pattern-repeat	문양 바둑판 배열 모드	repeat
--lh-bg-pattern-size	문양 크기	40px
--lh-bg-pattern-opacity	문양 불투명도	0.15
--lh-bg-pattern-color	문양 색상	var(--lh-decoration-color, rgba(184, 134, 11, 0.12))
--lh-bg-pattern-blend	문양 혼합 모드	soft-light

라이트/다크 모드

문양 시스템 자체는 CSS 변수로 제어되며, 라이트/다크 모드와 서로 영향을 주지 않습니다. 라이트/다크 모드는 useLhTheme 컴포저블로 전환합니다 (data-theme 속성에 기록):

<script setup lang="ts">
import { useLhTheme } from '@lh-ui/vue3'

const { theme, toggleTheme, setTheme } = useLhTheme()

// 라이트/다크 테마 전환
function onToggle() {
  toggleTheme()
}
</script>

<template>
  <div>
    <LhButton @click="onToggle">
      {{ theme === 'dark' ? '라이트로 전환' : '다크로 전환' }}
    </LhButton>
  </div>
</template>

테마 변수 우선순위

컴포넌트가 최종적으로 사용하는 CSS 변수는 다음 우선순위로 병합됩니다 (후자가 전자를 덮어씁니다):

1. ConfigProvider 전역 themeVars (가장 낮은 우선순위)
2. ConfigProvider의 컴포넌트별 componentTheme[컴포넌트명]
3. 컴포넌트 자체의 themeVars prop
4. 컴포넌트 자체의 bgPattern prop (가장 높은 우선순위)

bg-pattern 변수의 경우 추가로 patternComponents 허용 목록의 제어를 받습니다: 허용 목록에 있는 컴포넌트만 전역으로 구성된 bg-pattern을 적용합니다.