Action — use: 디렉티브로 DOM을 직접 다루기

// action 함수 시그니처
function myAction(node, parameter) {
  // node가 DOM에 마운트될 때 실행

  return {
    update(newParameter) {
      // parameter가 변경될 때 실행
    },
    destroy() {
      // node가 DOM에서 제거될 때 실행 (정리)
    }
  };
}

<div use:myAction={parameter}>
  Action이 적용된 요소
</div>

<script>
  let showDropdown = $state(false);

  // 요소 외부 클릭 감지 Action
  function clickOutside(node, callback) {
    function handleClick(event) {
      if (!node.contains(event.target)) {
        callback();
      }
    }

    document.addEventListener('click', handleClick, true);

    return {
      destroy() {
        document.removeEventListener('click', handleClick, true);
      }
    };
  }
</script>

<div class="dropdown-wrapper" use:clickOutside={() => showDropdown = false}>
  <button onclick={() => showDropdown = !showDropdown}>메뉴</button>
  {#if showDropdown}
    <ul class="dropdown">
      <li>옵션 1</li>
      <li>옵션 2</li>
      <li>옵션 3</li>
    </ul>
  {/if}
</div>

<script>
  function tooltip(node, text) {
    let tooltipEl;

    function show() {
      tooltipEl = document.createElement('div');
      tooltipEl.className = 'tooltip';
      tooltipEl.textContent = text;

      const rect = node.getBoundingClientRect();
      tooltipEl.style.cssText = `
        position: fixed;
        top: ${rect.top - 30}px;
        left: ${rect.left + rect.width / 2}px;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 1000;
      `;

      document.body.appendChild(tooltipEl);
    }

    function hide() {
      tooltipEl?.remove();
    }

    node.addEventListener('mouseenter', show);
    node.addEventListener('mouseleave', hide);

    return {
      update(newText) {
        text = newText;
      },
      destroy() {
        hide();
        node.removeEventListener('mouseenter', show);
        node.removeEventListener('mouseleave', hide);
      }
    };
  }

  let tooltipText = $state('클릭하세요!');
</script>

<button use:tooltip={tooltipText}>
  마우스를 올려보세요
</button>

<input bind:value={tooltipText} placeholder="툴팁 텍스트 변경" />

<script>
  function autofocus(node, options = {}) {
    const { delay = 0, select = false } = options;

    setTimeout(() => {
      node.focus();
      if (select && node.select) {
        node.select();
      }
    }, delay);
  }
</script>

<!-- 마운트 시 자동 포커스 -->
<input use:autofocus placeholder="자동 포커스" />

<!-- 딜레이 후 포커스 + 텍스트 선택 -->
<input use:autofocus={{ delay: 500, select: true }} value="선택될 텍스트" />

<script>
  function longpress(node, { duration = 500, onLongpress }) {
    let timer;

    function start() {
      timer = setTimeout(() => {
        onLongpress?.();
        node.dispatchEvent(new CustomEvent('longpress'));
      }, duration);
    }

    function cancel() {
      clearTimeout(timer);
    }

    node.addEventListener('mousedown', start);
    node.addEventListener('mouseup', cancel);
    node.addEventListener('mouseleave', cancel);
    node.addEventListener('touchstart', start);
    node.addEventListener('touchend', cancel);

    return {
      update(newParams) {
        duration = newParams.duration ?? duration;
        onLongpress = newParams.onLongpress;
      },
      destroy() {
        cancel();
        node.removeEventListener('mousedown', start);
        node.removeEventListener('mouseup', cancel);
        node.removeEventListener('mouseleave', cancel);
        node.removeEventListener('touchstart', start);
        node.removeEventListener('touchend', cancel);
      }
    };
  }

  function handleLongpress() {
    alert('롱프레스 감지!');
  }
</script>

<button use:longpress={{ duration: 800, onLongpress: handleLongpress }}>
  길게 누르세요 (0.8초)
</button>

<script>
  function inview(node, { threshold = 0.5, once = false }) {
    let triggered = false;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && !(once && triggered)) {
          triggered = true;
          node.dispatchEvent(new CustomEvent('inview'));
          node.classList.add('in-view');
        } else if (!entry.isIntersecting && !once) {
          node.classList.remove('in-view');
        }
      },
      { threshold }
    );

    observer.observe(node);

    return {
      destroy() {
        observer.disconnect();
      }
    };
  }

  let count = $state(0);
</script>

<div style="height: 150vh;">스크롤 해보세요</div>

<div
  use:inview={{ threshold: 0.3, once: true }}
  oninview={() => count++}
  class="animate-target"
>
  화면에 나타날 때 애니메이션! (감지 횟수: {count})
</div>

<style>
  .animate-target {
    opacity: 0; transform: translateY(20px);
    transition: all 0.6s ease;
  }
  .animate-target.in-view {
    opacity: 1; transform: translateY(0);
  }
</style>