Modal 컴포넌트 신규 추가 및 스타일 적용

Author: jwj0620gcu

src/shared/ui/Modal/Modal.tsx

@@ -0,0 +1,38 @@
+import { Button } from '@shared/ui/Button/Button';
+import { modalVariants } from './Modal.variants';
+
+export interface ModalProps {
+  title: string;
+  subtitle?: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const Modal = ({ title, subtitle, onCancel, onConfirm }: ModalProps) => {
+  const { overlay, container, textGroup, buttonGroup, buttonWrapper } = modalVariants();
+
+  return (
+    <div className={overlay()}>
+      <div className={container()}>
+        <div className={textGroup()}>
+          <p className="typo-body-2 text-black">{title}</p>
+          {subtitle && <p className="typo-caption-2 truncate text-black">{subtitle}</p>}
+        </div>
+
+        <div className={buttonGroup()}>
+          <div className={buttonWrapper()}>
+            <Button variant="outline" size="auto" className="w-full" onClick={onCancel}>
+              취소
+            </Button>
+          </div>
+
+          <div className={buttonWrapper()}>
+            <Button variant="fill" size="auto" className="w-full" onClick={onConfirm}>
+              삭제
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/shared/ui/Modal/Modal.variants.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+export const modalVariants = tv({
+  slots: {
+    overlay: 'fixed inset-0 z-50 flex items-center justify-center bg-black/40',
+
+    container:
+      'w-[347px] h-[167px] rounded-[var(--radius-l)] bg-[var(--color-green-500)] px-[32px] py-[24px] flex flex-col justify-between',
+
+    textGroup: 'flex flex-col gap-[var(--spacing-xxs)]',
+
+    buttonGroup: 'flex gap-3',
+
+    buttonWrapper: 'flex-1',
+  },
+});

src/shared/ui/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';