Merge pull request #19 from codeit-2team/feat/13

Feat/13 popup 컴포넌트 구현

Author: minimo-9

src/assets/icon/check.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const CheckIcon = ({ size = 24, ...props }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={size}
+    height={size}
+    fill='none'
+    viewBox='0 0 24 24'
+  >
+    <circle cx='12' cy='12' r='12' fill='#121'></circle>
+    <path
+      stroke='#fff'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='1.5'
+      d='m7.607 12.35 3.08 3.15 5.563-7.143'
+    />
+  </svg>
+);
+
+export default CheckIcon;

src/components/popup/Popup.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import cn from '@/lib/utils';
+import { PopupProps } from './types';
+import Button from '../button/Button';
+import CheckIcon from '@/assets/icon/check';
+import { useRef } from 'react';
+import useOutsideClick from '@/hooks/useOutsideClick';
+
+/**
+ * Popup 컴포넌트는 `alert` 또는 `confirm` 타입의 모달을 렌더링합니다.
+ * - `alert` 타입은 확인 버튼 하나만 있는 단순 알림 용도
+ * - `confirm` 타입은 취소하기 / 아니오 버튼이 있는 확인 용도
+ *
+ * 외부 영역 클릭 또는 ESC 키 입력 시 onClose 콜백이 호출됩니다.
+ *
+ * @component
+ * @param {boolean} isOpen - 팝업의 열림 여부
+ * @param {'alert' | 'confirm'} type - 팝업의 유형
+ * @param {ReactNode} children - 팝업 내부의 메시지 또는 JSX 콘텐츠
+ * @param {() => void} onClose - 팝업을 닫을 때 호출되는 함수
+ * @param {() => void} [onConfirm] - confirm 타입일 때 확인 버튼 클릭 시 호출되는 함수
+ *
+ * @example
+ * ```tsx
+ * <Popup
+ *   isOpen={true}
+ *   type="alert"
+ *   onClose={() => setOpen(false)}
+ * >
+ *   완료되었습니다!
+ * </Popup>
+ * ```
+ */
+
+export default function Popup({
+  isOpen,
+  type,
+  children,
+  onClose,
+  onConfirm,
+}: PopupProps) {
+  if (!isOpen) return null;
+  const popupRef = useRef<HTMLDivElement>(null);
+  useOutsideClick(popupRef, onClose);
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0 z-50 flex items-center justify-center bg-[#000000]/70',
+      )}
+    >
+      {type === 'alert' ? (
+        <div
+          ref={popupRef}
+          className={cn(
+            'flex h-220 w-327 flex-col items-center gap-43 rounded-lg bg-white pt-81 md:h-250 md:w-540 md:gap-40 md:px-28 md:pt-108',
+          )}
+        >
+          <div className={cn('md:text-2lg text-lg font-medium text-[#333236]')}>
+            {children}
+          </div>
+          <Button
+            variant='primary'
+            className={cn(
+              'text-md h-42 w-138 rounded-lg font-medium md:h-48 md:w-120 md:self-end md:text-lg',
+            )}
+            onClick={onClose}
+          >
+            확인
+          </Button>
+        </div>
+      ) : (
+        <div
+          ref={popupRef}
+          className={cn(
+            'flex h-184 w-298 flex-col items-center gap-32 rounded-xl bg-white py-24',
+          )}
+        >
+          <div className={cn('flex flex-col items-center gap-16')}>
+            <CheckIcon />
+            <div className={cn('font-regular text-lg text-black')}>
+              {children}
+            </div>
+          </div>
+          <div className={cn('text-md flex h-38 gap-8 font-bold')}>
+            <Button
+              variant='secondary'
+              className={cn('w-80 rounded-md')}
+              onClick={onClose}
+            >
+              아니오
+            </Button>
+            <Button
+              variant='primary'
+              className={cn('w-80 rounded-md')}
+              onClick={onConfirm}
+            >
+              취소하기
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/popup/types.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+
+type PopupType = 'alert' | 'confirm';
+
+/**
+ * 팝업 컴포넌트에 전달되는 props입니다.
+ *
+ * @property {boolean} isOpen - 팝업의 열림 여부를 나타냅니다. true일 경우 팝업이 화면에 표시됩니다.
+ * @property {'alert' | 'confirm'} type - 팝업의 유형을 지정합니다.
+ *    - 'alert': 확인 버튼만 있는 단순 알림 팝업
+ *    - 'confirm': 예/아니오 또는 확인/취소 버튼이 있는 확인용 팝업
+ * @property {ReactNode} children - 팝업 내부에 표시할 내용입니다. 텍스트 또는 JSX 요소를 전달할 수 있습니다.
+ * @property {() => void} onClose - 팝업을 닫을 때 호출되는 콜백 함수입니다.
+ *    - 보통 확인 버튼 또는 '아니오' 버튼에 사용됩니다.
+ * @property {() => void} [onConfirm] - 확인 또는 '예' 버튼 클릭 시 호출되는 선택적 콜백 함수입니다.
+ *    - type이 'confirm'일 때 사용되며, 'alert'일 경우 생략 가능합니다.
+ */
+
+export interface PopupProps {
+  isOpen: boolean;
+  type: PopupType;
+  children: ReactNode;
+  onClose: () => void;
+  onConfirm?: () => void;
+}

src/hooks/useOutsideClick.ts

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+
+/**
+ * 모달 외부 클릭 또는 ESC 키 입력 시 모달을 닫는 커스텀 훅입니다.
+ *
+ * @param {React.RefObject<HTMLElement>} ref - 모달 DOM 요소를 참조하는 ref 객체
+ * @param {() => void} onClose - 모달을 닫는 콜백 함수
+ *
+ * @example
+ * const modalRef = useRef(null);
+ * useModalClose(modalRef, () => setIsOpen(false));
+ *
+ * @description
+ * 이 훅은 다음 두 가지 동작을 처리합니다:
+ * 1. 모달 외부를 클릭하면 onClose가 호출됨
+ * 2. ESC 키를 누르면 onClose가 호출됨
+ *
+ * 이 훅은 모달, 드롭다운, 팝오버 등 닫기 트리거가 필요한 컴포넌트에 사용할 수 있습니다.
+ */
+
+export default function useOutsideClick(
+  ref: React.RefObject<HTMLElement | null>,
+  onClose: () => void,
+) {
+  useEffect(() => {
+    // 바깥 클릭 처리
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e?.target as Node;
+      if (ref.current && !ref.current.contains(target)) {
+        onClose();
+      }
+    };
+
+    // ESC 키 처리
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [ref, onClose]);
+}