[노철]- 도움말 버튼

src/components/HelpButton/HelpButton.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Icon } from '@/components';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import './index.scss';
+
+interface HelpButtonProps {
+  textPosition?: Position;
+  helpText: string;
+}
+
+type Position =
+  | 'top-left'
+  | 'top'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom'
+  | 'bottom-right';
+
+export default function HelpButton({
+  textPosition = 'top',
+  helpText,
+}: HelpButtonProps) {
+  const [isActive, setIsActive] = useState<boolean>(false);
+  const helpButton = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const targetElement = event.target as HTMLElement;
+
+      if (targetElement && targetElement.parentElement === helpButton.current) {
+        setIsActive(true);
+      } else {
+        setIsActive(false);
+      }
+    };
+    window.addEventListener('click', handleClick);
+    return () => {
+      window.removeEventListener('click', handleClick);
+    };
+  }, []);
+  return (
+    <button
+      ref={helpButton}
+      className={classNames(
+        'help-button__button',
+        isActive && 'active',
+        textPosition,
+        'font-size-xs',
+      )}
+      data-help-text={helpText}>
+      <Icon name="HELP" size="xs" color="primary" />
+    </button>
+  );
+}

src/components/HelpButton/index.scss

@@ -0,0 +1,45 @@
+.help-button {
+  &__button {
+    background-color: transparent;
+    width: 12px;
+    height: 12px;
+    position: relative;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.active::after {
+      color: var(--origin-text-600);
+      content: attr(data-help-text);
+      background-color: rgba(black, 0.5);
+      white-space: pre;
+      word-break: keep-all;
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      border-radius: var(--border-radius);
+      user-select: none;
+      pointer-events: none;
+      position: absolute;
+    }
+    &.top-left::after,
+    &.top::after,
+    &.top-right::after {
+      bottom: 12px;
+    }
+
+    &.bottom-left::after,
+    &.bottom::after,
+    &.bottom-right::after {
+      top: 12px;
+    }
+    &.bottom-left::after,
+    &.top-left::after {
+      right: 0;
+    }
+    &.top-right::after,
+    &.bottom-right::after {
+      left: 0;
+    }
+  }
+}

src/types/IconName.ts

@@ -33,4 +33,5 @@ export type IconName =
   | 'STAR'
   | 'FAVORITE'
   | 'ARROW_UP'
-  | 'COPY';
+  | 'COPY'
+  | 'HELP';