Canvas 기반 워터마크 유틸리티 구현

utils/Watermark.js 파일 생성:

const watermarkUtil = {
  createMark: (line1, line2, targetElement) => {
    const elementId = 'watermark-element'
    
    if (!targetElement) return
    
    const existingMark = document.getElementById(elementId)
    if (existingMark) existingMark.remove()
    
    const containerWidth = targetElement.offsetWidth
    const containerHeight = targetElement.offsetHeight
    targetElement.style.position = 'relative'
    
    // 캔버스로 배경 패턴 생성
    const canvas = document.createElement('canvas')
    canvas.width = 380
    canvas.height = 220
    const ctx = canvas.getContext('2d')
    
    ctx.rotate(-18 * Math.PI / 180)
    ctx.font = '18px Segoe UI'
    ctx.fillStyle = 'rgba(180, 180, 180, 0.35)'
    ctx.textBaseline = 'middle'
    
    ctx.fillText(line1, 30, canvas.height * 0.6)
    ctx.fillText(line2, 30, canvas.height * 0.85)
    
    // 워터마크 컨테이너 생성
    const markContainer = document.createElement('div')
    markContainer.id = elementId
    markContainer.style.cssText = `
      position: absolute;
      top: 0;
      left: 0;
      width: ${containerWidth}px;
      height: ${containerHeight}px;
      pointer-events: none;
      z-index: 1000;
      background: url(${canvas.toDataURL('image/png')}) repeat;
    `
    
    targetElement.appendChild(markContainer)
    return elementId
  },
  
  apply: (text1, text2, container) => {
    let markId = watermarkUtil.createMark(text1, text2, container)
    
    // 주기적으로 워터마크 존재 확인
    const checker = setInterval(() => {
      if (!document.getElementById(markId)) {
        markId = watermarkUtil.createMark(text1, text2, container)
      }
    }, 1000)
    
    // 창 크기 변경 시 재적용
    window.addEventListener('resize', () => {
      watermarkUtil.createMark(text1, text2, container)
    })
  }
}

export default watermarkUtil

Vue 컴포넌트에서 사용법

템플릿 구조:

<template>
  <div ref="targetContainer">
    <!-- 모달 내용 또는 워터마크 적용 대상 영역 -->
  </div>
</template>

컴포넌트 로직:

import watermark from '@/utils/Watermark'

export default {
  methods: {
    showWatermark() {
      this.$nextTick(() => {
        watermark.apply(
          '첫 번째 텍스트', 
          '두 번째 텍스트',
          this.$refs.targetContainer
        )
      })
    }
  }
}

모달 사용 시 주의사항:

• 모달이 완전히 렌더링된 후 적용해야 함 (this.$nextTick 또는 open 이벤트 후)
• 대상 컨테이너는 position: relative 속성 필요
• 동적 크기 변경 시 자동 재생성 처리됨