Feat/component/modal/DEVING-38

src/app/preview/modal/Some.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import React from 'react';
+
+import { Button } from '../../../components/ui/Button';
+import Modal from '../../../components/ui/modal/Modal';
+
+interface UserData {
+  id: number;
+  name: string;
+  status: '대기' | '승인' | '거절' | '강퇴';
+  introduction: string;
+}
+
+const mockUsers: UserData[] = [
+  {
+    id: 1,
+    name: '김민수',
+    status: '승인',
+    introduction:
+      '안녕하세요! 웹 개발자 김민수입니다. React와 TypeScript를 주로 사용합니다.',
+  },
+  {
+    id: 2,
+    name: '이지원',
+    status: '대기',
+    introduction: '백엔드 개발자 이지원입니다. Spring과 Node.js를 다룹니다.',
+  },
+  {
+    id: 3,
+    name: '박서연',
+    status: '거절',
+    introduction:
+      'UI/UX 디자이너 박서연입니다. 사용자 경험 개선에 관심이 많습니다.',
+  },
+  {
+    id: 4,
+    name: '최준호',
+    status: '승인',
+    introduction:
+      '모바일 앱 개발자 최준호입니다. Flutter와 React Native를 사용합니다.',
+  },
+  {
+    id: 5,
+    name: '정다은',
+    status: '강퇴',
+    introduction:
+      '프론트엔드 개발자 정다은입니다. Vue.js와 React를 주로 사용합니다.',
+  },
+  {
+    id: 6,
+    name: '강현우',
+    status: '승인',
+    introduction: '풀스택 개발자 강현우입니다. MERN 스택을 주로 사용합니다.',
+  },
+  {
+    id: 7,
+    name: '손미나',
+    status: '대기',
+    introduction: 'DevOps 엔지니어 손미나입니다. AWS와 Docker를 다룹니다.',
+  },
+  {
+    id: 8,
+    name: '윤태호',
+    status: '거절',
+    introduction: '게임 개발자 윤태호입니다. Unity와 C#을 주로 사용합니다.',
+  },
+  {
+    id: 9,
+    name: '임수진',
+    status: '승인',
+    introduction: '데이터 엔지니어 임수진입니다. Python과 SQL을 다룹니다.',
+  },
+  {
+    id: 10,
+    name: '한도윤',
+    status: '대기',
+    introduction:
+      '보안 엔지니어 한도윤입니다. 네트워크 보안에 관심이 많습니다.',
+  },
+];
+
+const Some = () => {
+  const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<UserData | null>(null);
+
+  const handleSecondModalConfirm = () => {
+    setIsSecondModalOpen(false);
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case '승인':
+        return 'text-green-600';
+      case '대기':
+        return 'text-yellow-600';
+      case '거절':
+        return 'text-red-600';
+      case '강퇴':
+        return 'text-gray-600';
+      default:
+        return '';
+    }
+  };
+
+  const handleProfileClick = (user: UserData) => {
+    setSelectedUser(user);
+    setIsSecondModalOpen(true);
+  };
+
+  return (
+    <div className="flex flex-col space-y-4">
+      <div className="grid grid-cols-4 gap-4 p-2 font-semibold">
+        <div className="text-white">이름</div>
+        <div className="text-white">상태</div>
+        <div className="text-white">프로필</div>
+      </div>
+      <div className="w-full border-t border-white"></div>
+      {mockUsers.map((user) => (
+        <div
+          key={user.id}
+          className="grid grid-cols-4 items-center gap-4 border-b pb-2"
+        >
+          <div className="text-white">{user.name}</div>
+          <div className={getStatusColor(user.status)}>{user.status}</div>
+          <div>
+            <Button
+              onClick={() => handleProfileClick(user)}
+              variant="outline"
+              size="sm"
+            >
+              프로필 보기
+            </Button>
+          </div>
+        </div>
+      ))}
+
+      <Modal
+        isOpen={isSecondModalOpen}
+        onClose={() => setIsSecondModalOpen(false)}
+        onConfirm={handleSecondModalConfirm}
+        confirmText="확인"
+        cancelText="닫기"
+        modalClassName="w-96"
+      >
+        {selectedUser && (
+          <div className="p-4">
+            <h2 className="mb-4 text-xl font-bold text-white">
+              {selectedUser.name}님의 프로필
+            </h2>
+            <p className="text-gray-600">{selectedUser.introduction}</p>
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default Some;

src/app/preview/modal/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import Some from '@/app/preview/modal/Some';
+import { Button } from '@/components/ui/Button';
+import Modal from '@/components/ui/modal/Modal';
+import { useState } from 'react';
+
+export default function ModalTestPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalOpen2, setIsModalOpen2] = useState(false);
+  const [isModalOpen3, setIsModalOpen3] = useState(false); // 새로운 상태 추가
+
+  const handleConfirm = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-BG p-4">
+      <Button onClick={() => setIsModalOpen(true)}>이중 모달</Button>
+      <Button onClick={() => setIsModalOpen2(true)}>그냥 모달</Button>
+      <Button onClick={() => setIsModalOpen3(true)}>닫기만 있는 모달</Button>
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={handleConfirm}
+        confirmText="삭제"
+        cancelText="취소"
+        modalClassName="w-96"
+      >
+        <Some />
+      </Modal>
+
+      <Modal
+        isOpen={isModalOpen2}
+        onClose={() => setIsModalOpen2(false)}
+        onConfirm={handleConfirm}
+        confirmText="삭제"
+        cancelText="취소"
+        modalClassName="w-96"
+      >
+        <p className="text-white">안녕하세용용</p>
+      </Modal>
+
+      <Modal
+        isOpen={isModalOpen3}
+        onClose={() => setIsModalOpen3(false)}
+        closeOnly
+        cancelText="닫기"
+        modalClassName="w-96"
+      >
+        <p className="text-white">닫기 버튼만 있는 모달입니다!</p>
+      </Modal>
+    </div>
+  );
+}

src/components/ui/modal/Modal.tsx

@@ -0,0 +1,125 @@
+import { Button } from '@/components/ui/Button';
+import React from 'react';
+
+interface AlertModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm?: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  children: React.ReactNode;
+  modalClassName?: string;
+  contentClassName?: string;
+  buttonClassName?: string;
+  closeOnly?: boolean;
+}
+
+/**
+ * Modal 컴포넌트는 사용자 인터페이스에 모달 다이얼로그를 표시하는 재사용 가능한 컴포넌트입니다.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 기본 모달 (확인/취소 버튼)
+ * <Modal
+ *   isOpen={true}
+ *   onClose={() => setIsOpen(false)}
+ *   onConfirm={() => handleConfirm()}
+ *   confirmText="확인"
+ *   cancelText="취소"
+ *   modalClassName="w-96"
+ * >
+ *   <p>모달 내용</p>
+ * </Modal>
+ *
+ * // 닫기 버튼만 있는 모달
+ * <Modal
+ *   isOpen={true}
+ *   onClose={() => setIsOpen(false)}
+ *   closeOnly
+ *   cancelText="닫기"
+ *   modalClassName="w-96"
+ * >
+ *   <p>모달 내용</p>
+ * </Modal>
+ * ```
+ *
+ * @param props - 모달 컴포넌트 프로퍼티
+ * @param props.isOpen - 모달의 표시 여부를 제어
+ * @param props.onClose - 모달이 닫힐 때 호출되는 콜백 함수
+ * @param props.onConfirm - 확인 버튼 클릭 시 호출되는 콜백 함수 (closeOnly가 false일 때만 필요)
+ * @param props.closeOnly - true일 경우 닫기 버튼만 표시 (기본값: false)
+ * @param props.confirmText - 확인 버튼의 텍스트 (기본값: '확인', closeOnly가 false일 때만 사용)
+ * @param props.cancelText - 취소/닫기 버튼의 텍스트 (기본값: closeOnly가 true일 때 '닫기', false일 때 '취소')
+ * @param props.children - 모달 내부에 표시될 컨텐츠
+ * @param props.modalClassName - 모달 컨테이너에 적용할 추가 클래스명
+ * @param props.contentClassName - 모달 컨텐츠 영역에 적용할 추가 클래스명
+ * @param props.buttonClassName - 버튼 영역에 적용할 추가 클래스명
+ *
+ * @returns React 컴포넌트
+ */
+
+const Modal: React.FC<AlertModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  confirmText = '확인',
+  cancelText = '취소',
+  children,
+  modalClassName = '',
+  contentClassName = '',
+  buttonClassName = '',
+  closeOnly = false,
+}) => {
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>): void => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-BG_2 bg-opacity-50"
+      onClick={handleBackdropClick}
+      onKeyDown={handleKeyDown}
+      role="presentation"
+      aria-label="Close modal"
+    >
+      <div
+        className={`rounded-lg bg-BG_2 shadow-xl ${modalClassName}`}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+      >
+        <div className={`p-6 ${contentClassName}`}>{children}</div>
+
+        <div className={`flex justify-end gap-2 p-4 ${buttonClassName}`}>
+          {closeOnly ? (
+            <Button onClick={onClose} type="button">
+              {cancelText}
+            </Button>
+          ) : (
+            <>
+              <Button onClick={onClose} variant={'outline'} type="button">
+                {cancelText}
+              </Button>
+              <Button onClick={onConfirm} type="button">
+                {confirmText}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

tailwind.config.ts

@@ -15,7 +15,7 @@ export default {
         lg: '745px',
       },
       colors: {
-        main: '#3853EA', // 이전 #525FEE
+        main: '#3853EA', 
         default: '#C2C9FF',
         solid: '#E5e7fa',
         disable: '#30333e',
@@ -32,7 +32,7 @@ export default {
         Cgray700: '#B4BBCE',
         Cgray800: '#D8DEE8',
         BG: '#0F0F0F',
-        BG_2: '1B1B1D',
+        BG_2: '#1B1B1D',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
         card: {