CodeitPart3 · jeonghwanJay · May 3, 2025 · Apr 30, 2025 · Apr 30, 2025 · May 2, 2025
diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
   <body>
     <div id="root"></div>
     <div id="toast-root"></div>
+    <div id="modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import { RouterProvider } from "react-router-dom";
 
 import { router } from "./Router";
+
 import ToastContainer from "@/components/Toast/ToastContainer";
 
 function App() {

diff --git a/src/components/Modal/AlertModalLayout.tsx b/src/components/Modal/AlertModalLayout.tsx
@@ -0,0 +1,51 @@
+import Button from "../Button";
+
+import { Check, Notice } from "@/assets/icon";
+
+interface ModalButton {
+  label: string;
+  style: "primary" | "white";
+  onClick: () => void;
+}
+
+interface Props {
+  iconType?: "check" | "warning" | "none";
+  message: string;
+  button: ModalButton;
+  onClose: () => void;
+}
+
+const ICONS = {
+  check: Check,
+  warning: Notice,
+};
+
+export default function AlertModalLayout({
+  iconType = "none",
+  message,
+  button,
+  onClose,
+}: 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()}
+    >
+      {Icon && <Icon className="w-6 h-6 mb-3" />}
+      <p className="text-base text-black font-normal mb-5">{message}</p>
+      <Button
+        variant={button.style}
+        onClick={() => {
+          button.onClick();
+          onClose();
+        }}
+        textSize="sm"
+        className="py-2 px-4 cursor-pointer"
+      >
+        {button.label}
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/Modal/ConfirmModalLayout.tsx b/src/components/Modal/ConfirmModalLayout.tsx
@@ -0,0 +1,33 @@
+interface ConfirmModalLayoutProps {
+  message: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function ConfirmModalLayout({
+  message,
+  onClose,
+  onConfirm,
+}: ConfirmModalLayoutProps) {
+  return (
+    <div className="w-[18.625rem] md:w-[18.625rem] bg-white rounded-lg p-6 text-center">
+      <p className="text-gray-900 text-base md:text-lg font-normal mb-6">
+        {message}
+      </p>
+      <div className="flex justify-end gap-3">
+        <button
+          onClick={onClose}
+          className="w-[7.5rem] h-[3rem] border border-red-500 text-red-500 rounded"
+        >
+          아니오
+        </button>
+        <button
+          onClick={onConfirm}
+          className="w-[7.5rem] h-[3rem] bg-red-500 text-white rounded"
+        >
+          예
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -0,0 +1,55 @@
+import AlertModalLayout from "./AlertModalLayout";
+import ConfirmModalLayout from "./ConfirmModalLayout";
+
+import { useModalStore } from "@/store/useModalStore";
+
+export default function Modal() {
+  const { isOpen, options, closeModal } = useModalStore();
+
+  if (!isOpen || !options) return null;
+
+  const handleClose = () => {
+    options.onClose?.();
+    closeModal();
+  };
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
+      {options.type === "alert" && (
+        <AlertModalLayout
+          message={options.message}
+          onClose={handleClose}
+          iconType={options.iconType ?? "none"}
+          button={{
+            label: "확인",
+            style: "primary",
+            onClick: handleClose,
+          }}
+        />
+      )}
+
+      {options.type === "confirm" && (
+        <ConfirmModalLayout
+          message={options.message}
+          onClose={handleClose}
+          onConfirm={() => {
+            options.onConfirm?.();
+            closeModal();
+          }}
+        />
+      )}
+
+      {options.type === "message" && (
+        <AlertModalLayout
+          message={options.message}
+          onClose={handleClose}
+          button={{
+            label: "확인",
+            style: "primary",
+            onClick: handleClose,
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
diff --git a/src/store/useModalStore.ts b/src/store/useModalStore.ts
@@ -0,0 +1,32 @@
+import { create } from "zustand";
+
+export type ModalType = "alert" | "confirm" | "message";
+
+export interface ModalButton {
+  label: string;
+  style: "primary" | "white";
+  onClick: () => void;
+}
+
+export interface ModalOptions {
+  type: "alert" | "confirm" | "message";
+  message: string;
+  iconType?: "check" | "warning" | "none";
+  buttons?: ModalButton[];
+  onClose?: () => void;
+  onConfirm?: () => void;
+}
+
+interface ModalState {
+  isOpen: boolean;
+  options: ModalOptions | null;
+  openModal: (options: ModalOptions) => void;
+  closeModal: () => void;
+}
+
+export const useModalStore = create<ModalState>((set) => ({
+  isOpen: false,
+  options: null,
+  openModal: (options) => set({ isOpen: true, options }),
+  closeModal: () => set({ isOpen: false, options: null }),
+}));
diff --git a/src/types/svg.d.ts b/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;
+}
diff --git a/tsconfig.json b/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"]
 }