Angular Directive Generator

import {
  Directive,
  ElementRef,
  HostListener,
  Input,
  Renderer2,
  inject,
} from '@angular/core';

@Directive({
  selector: '[appCopyHighlight]',
  standalone: true,
})
export class CopyHighlightDirective {
  @Input() highlightColor = '#fef08a';
  @Input() copyText?: string;

  private readonly elementRef = inject(ElementRef<HTMLElement>);
  private readonly renderer = inject(Renderer2);

  private tooltip?: HTMLElement;
  private tooltipTimer?: ReturnType<typeof setTimeout>;

  constructor() {
    const element = this.elementRef.nativeElement;

    this.renderer.setStyle(element, 'transition', 'background-color 180ms ease');

    if (getComputedStyle(element).position === 'static') {
      this.renderer.setStyle(element, 'position', 'relative');
    }

    this.renderer.setStyle(element, 'cursor', 'pointer');
  }

  @HostListener('mouseenter')
  onMouseEnter(): void {
    this.renderer.setStyle(
      this.elementRef.nativeElement,
      'background-color',
      this.highlightColor,
    );
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    this.renderer.removeStyle(
      this.elementRef.nativeElement,
      'background-color',
    );
  }

  @HostListener('click')
  async onClick(): Promise<void> {
    const text = this.copyText?.trim() || this.elementRef.nativeElement.innerText;

    if (!text.trim()) {
      return;
    }

    try {
      await navigator.clipboard.writeText(text);
      this.showTooltip('복사됨!');
    } catch {
      this.showTooltip('복사 실패');
    }
  }

  private showTooltip(message: string): void {
    this.removeTooltip();

    const tooltip = this.renderer.createElement('span') as HTMLElement;
    this.tooltip = tooltip;

    this.renderer.setProperty(tooltip, 'textContent', message);
    this.renderer.setAttribute(tooltip, 'role', 'status');
    this.renderer.setAttribute(tooltip, 'aria-live', 'polite');

    this.renderer.setStyle(tooltip, 'position', 'absolute');
    this.renderer.setStyle(tooltip, 'top', '100%');
    this.renderer.setStyle(tooltip, 'left', '50%');
    this.renderer.setStyle(tooltip, 'transform', 'translateX(-50%)');
    this.renderer.setStyle(tooltip, 'margin-top', '6px');
    this.renderer.setStyle(tooltip, 'padding', '4px 8px');
    this.renderer.setStyle(tooltip, 'border-radius', '4px');
    this.renderer.setStyle(tooltip, 'background-color', '#1f2937');
    this.renderer.setStyle(tooltip, 'color', '#fff');
    this.renderer.setStyle(tooltip, 'font-size', '12px');
    this.renderer.setStyle(tooltip, 'white-space', 'nowrap');
    this.renderer.setStyle(tooltip, 'z-index', '1000');
    this.renderer.setStyle(tooltip, 'pointer-events', 'none');

    this.renderer.appendChild(this.elementRef.nativeElement, tooltip);

    this.tooltipTimer = setTimeout(() => {
      this.removeTooltip();
    }, 1500);
  }

  private removeTooltip(): void {
    if (this.tooltip) {
      this.renderer.removeChild(
        this.elementRef.nativeElement,
        this.tooltip,
      );
      this.tooltip = undefined;
    }

    if (this.tooltipTimer) {
      clearTimeout(this.tooltipTimer);
      this.tooltipTimer = undefined;
    }
  }
}

사용 예시:

import { Component } from '@angular/core';
import { CopyHighlightDirective } from './copy-highlight.directive';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CopyHighlightDirective],
  template: `
    <p
      appCopyHighlight
      highlightColor="#bfdbfe"
    >
      이 문장을 클릭하면 복사됩니다.
    </p>

    <button
      appCopyHighlight
      [copyText]="'버튼 클릭으로 복사되는 별도 텍스트'"
      highlightColor="#bbf7d0"
    >
      텍스트 복사
    </button>
  `,
})
export class ExampleComponent {}

마우스를 올리면 background-color가 부드럽게 변경되고, 클릭하면 copyText 값을 클립보드에 복사합니다. copyText가 없으면 호스트 요소의 innerText를 사용하며, 복사 후 1.5초 동안 복사됨! 툴팁을 표시합니다.