[feat] 모달 공통 컴포넌트 분리 및 레이아웃 구조화

src/components/Modal.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import NoticeIcon from "../assets/icon/notice.svg?react";
+
+import CheckIcon from "@/assets/icon/check.svg?react";
+
+interface ModalButton {
+  label: string;
+  style: "filledRed" | "outlinedRed"; // filledRed: 빨간색 배경 / outlinedRed: 빨간색 테두리
+  onClick: () => void;
+}
+
+interface ModalProps {
+  message: string;
+  iconType?: "check" | "warning" | "none";
+  buttons: ModalButton[];
+  onClose: () => void;
+}
+
+// 아이콘 타입에 따른 매핑 객체
+const iconConfig: Record<
+  "check" | "warning",
+  { component: React.FC<React.SVGProps<SVGSVGElement>> }
+> = {
+  check: {
+    component: CheckIcon,
+  },
+  warning: {
+    component: NoticeIcon,
+  },
+};
+
+function Modal({ message, iconType = "none", buttons, onClose }: ModalProps) {
+  const modalSize =
+    iconType === "none"
+      ? "w-[33.75rem] h-[15.625rem]"
+      : "w-[18.625rem] h-[11.4375rem]";
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center"
+      onClick={onClose}
+    >
+      <div
+        className={`bg-white p-5 rounded-lg text-center ${modalSize}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {iconType !== "none" && (
+          <div className="mb-3 flex justify-center">
+            {(() => {
+              const { component: IconComponent } = iconConfig[iconType];
+              return <IconComponent className={`w-6 h-6`} />;
+            })()}
+          </div>
+        )}
+
+        <p className="text-base mb-5">{message}</p>
+
+        <div className="flex justify-center gap-3">
+          {buttons.map((button, index) => (
+            <button
+              key={index}
+              className={`py-2 px-4 rounded ${
+                button.style === "filledRed"
+                  ? "bg-red-500 text-white"
+                  : "bg-transparent border border-red-500 text-red-500"
+              }`}
+              onClick={button.onClick}
+            >
+              {button.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Modal;

src/components/Modal/AlertModalLayout.tsx

@@ -0,0 +1,45 @@
+import Button from "../Button";
+
+interface ModalButton {
+  label: string;
+  style: "primary" | "white";
+  onClick: () => void;
+}
+
+interface Props {
+  message: string;
+  buttons: ModalButton[];
+  onClose: () => void;
+}
+
+export default function AlertModalLayout({
+  message = "",
+  buttons = [],
+}: Props) {
+  return (
+    <div
+      className="relative bg-white rounded-lg p-5 
+        w-[20.625rem] h-[13.75rem] md:w-[33.75rem] md:h-[15.625rem]"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <p
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
+        text-black font-normal text-center whitespace-nowrap
+        text-[1rem] md:text-[1.125rem]"
+      >
+        {message}
+      </p>
+
+      <div className="absolute bottom-6 left-1/2 md:left-auto md:right-6 md:translate-x-0 -translate-x-1/2">
+        <Button
+          onClick={buttons[0]?.onClick}
+          variant="primary"
+          textSize="md"
+          className="py-2 px-4 w-[8.625rem] h-[2.625rem] md:w-[7.5rem] md:h-[3rem] cursor-pointer"
+        >
+          {buttons[0]?.label}
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/Modal/ConfirmModalLayout.tsx

@@ -0,0 +1,58 @@
+import Button from "../Button";
+
+import CheckIcon from "@/assets/icon/check.svg?react";
+import NoticeIcon from "@/assets/icon/notice.svg?react";
+
+interface ModalButton {
+  label: string;
+  style: "primary" | "white";
+  onClick: () => void;
+}
+
+interface Props {
+  iconType: "check" | "warning" | "none";
+  message: string;
+  buttons: ModalButton[];
+  onClose: () => void;
+}
+
+const ICONS = {
+  check: CheckIcon,
+  warning: NoticeIcon,
+};
+
+export default function ConfirmModalLayout({
+  iconType,
+  message = "",
+  buttons = [],
+}: Props) {
+  const Icon = iconType !== "none" ? ICONS[iconType] : null;
+
+  return (
+    <div
+      className="bg-white p-7 rounded-lg text-center 
+        w-[18.625rem] h-[11.5rem] flex flex-col justify-between items-center"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="mb-3 flex justify-center">
+        {Icon && <Icon className="w-6 h-6" />}
+      </div>
+
+      <p className="text-base text-black font-normal mb-5">{message}</p>
+
+      <div className="flex justify-center gap-3">
+        {buttons.map((button, index) => (
+          <Button
+            key={index}
+            onClick={button.onClick}
+            variant={button.style === "primary" ? "primary" : "white"}
+            textSize="sm"
+            className="py-2 px-4 cursor-pointer"
+          >
+            {button.label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/Modal/Modal.tsx

@@ -0,0 +1,44 @@
+import AlertModalLayout from "./AlertModalLayout";
+import ConfirmModalLayout from "./ConfirmModalLayout";
+
+interface ModalButton {
+  label: string;
+  style: "primary" | "white"; // "primary" -> "filledRed", "white" -> "outlinedRed"
+  onClick: () => void;
+}
+
+interface ModalProps {
+  message: string;
+  iconType?: "check" | "warning" | "none";
+  buttons: ModalButton[];
+  onClose: () => void;
+}
+
+export default function Modal({
+  message = "",
+  iconType = "none",
+  buttons = [],
+  onClose,
+}: ModalProps) {
+  return (
+    <div
+      className="fixed inset-0 bg-black/70  flex justify-center items-center z-50"
+      onClick={onClose}
+    >
+      {iconType === "none" ? (
+        <AlertModalLayout
+          message={message}
+          buttons={buttons}
+          onClose={onClose}
+        />
+      ) : (
+        <ConfirmModalLayout
+          iconType={iconType}
+          message={message}
+          buttons={buttons}
+          onClose={onClose}
+        />
+      )}
+    </div>
+  );
+}

src/types/svg.d.ts

@@ -0,0 +1,10 @@
+declare module "*.svg?react" {
+  import * as React from "react";
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

tsconfig.json

@@ -3,5 +3,9 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "typeRoots": ["./src/types", "./node_modules/@types"]
+  },
+  "includes": ["src", "src/types"]
 }