refactor/스크립트 뷰어 컴포넌트

package.json

@@ -51,6 +51,7 @@
     "lint-staged": "^16.2.7",
     "prettier": "3.7.4",
     "typescript": "~5.9.3",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vite-plugin-svgr": "^4.5.0"
   }
 }

src/components/common/Popover.tsx

@@ -0,0 +1,124 @@
+import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';
+
+import clsx from 'clsx';
+
+type PopoverPosition = 'top' | 'bottom';
+type PopoverAlign = 'start' | 'end';
+
+interface PopoverProps {
+  trigger: ReactNode | ((props: { isOpen: boolean }) => ReactNode);
+  children: ReactNode;
+  position?: PopoverPosition;
+  align?: PopoverAlign;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export function Popover({
+  trigger,
+  children,
+  position = 'top',
+  align = 'end',
+  className,
+  ariaLabel,
+}: PopoverProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const popoverId = useId();
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    // 팝오버 닫힐 때 트리거로 포커스 이동
+    triggerRef.current?.querySelector('button')?.focus();
+  }, []);
+
+  // Escape 키로 닫기
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, handleClose]);
+
+  // 외부 클릭 시 닫기
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, handleClose]);
+
+  // 팝오버 열릴 때 첫 번째 포커스 가능한 요소로 포커스 이동
+  useEffect(() => {
+    if (!isOpen || !contentRef.current) return;
+
+    const focusableElements = contentRef.current.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+  }, [isOpen]);
+
+  const positionClasses = clsx({
+    'bottom-full mb-2': position === 'top',
+    'top-full mt-2': position === 'bottom',
+  });
+
+  const alignClasses = clsx({
+    'left-0': align === 'start',
+    'right-0': align === 'end',
+  });
+
+  return (
+    <div ref={popoverRef} className="relative">
+      <div
+        ref={triggerRef}
+        onClick={handleToggle}
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? popoverId : undefined}
+      >
+        {typeof trigger === 'function' ? trigger({ isOpen }) : trigger}
+      </div>
+
+      {isOpen && (
+        <div
+          ref={contentRef}
+          id={popoverId}
+          role="dialog"
+          aria-label={ariaLabel}
+          aria-modal="false"
+          className={clsx(
+            'absolute z-50',
+            positionClasses,
+            alignClasses,
+            'rounded-lg bg-white shadow-[0_0.25rem_1.25rem_rgba(0,0,0,0.05)]',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/common/index.ts

@@ -1,2 +1,3 @@
 export { LoginButton } from './LoginButton';
 export { Logo } from './Logo';
+export { Popover } from './Popover';