feat: add cmodal

src/components/CModal/CModal.css

+.cmodal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 9999;
+}
+
+.cmodal__content {
+    width: 100%;
+    max-width: 500px;
+    background-color: var(--background-color);
+    padding: 1.5rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
\ No newline at end of file

src/components/CModal/CModal.tsx

+import React from "react";
+import "./CModal.css";
+import type { CModalProps } from "./CModal.types";
+
+const CModal: React.FC<CModalProps> = ({ isOpen, onToggle, content }) => {
+  if (!isOpen) return null;
+
+  const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget && onToggle) {
+      onToggle();
+    }
+  };
+
+  return (
+    <div className="cmodal wrapper" onClick={handleOutsideClick}>
+      <div className="cmodal__content">
+        <div>{content}</div>
+      </div>
+    </div>
+  );
+};
+
+export default CModal;

src/components/CModal/CModal.types.ts

+export interface CModalProps {
+  isOpen?: boolean;
+  onToggle?: () => void;
+  content?: React.ReactNode;
+}

src/components/CModal/index.ts

+export { default } from "./CModal";