[Feature/fix card modal] 모달 포탈로 만들기, 카드 제목 오류 수정

src/app/layout.tsx

@@ -23,6 +23,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           disableTransitionOnChange
           storageKey="taskify-theme"
         >
+          <div id="portal" />
           <QueryProvider>{children}</QueryProvider>
         </ThemeProvider>
       </body>

src/app/not-found.tsx

@@ -16,7 +16,7 @@ export default function NotFound() {
 
   return (
     <>
-      <div className="bg-brand-gray-100 tablet:py-0 flex h-full flex-col items-center justify-center py-10 text-center">
+      <div className="bg-brand-gray-100 tablet:py-0 flex min-h-screen flex-col items-center justify-center py-10 text-center">
         <div className="tablet:-mb-11">
           <h1 className={cn("text-brand-blue-500 text-2lg mb-3.5 font-bold", "tablet:text-3xl")}>
             앗, 접근할 수 없는 페이지입니다

src/components/card/Card.tsx

@@ -73,7 +73,9 @@ export default function Card({
 
       <div className="tablet:gap-4 pc:gap-2 flex w-full flex-1 flex-col items-start gap-2 bg-transparent">
         {/* 제목 */}
-        <h3 className="text-brand-gray-700 text-base font-medium">{title}</h3>
+        <h3 className="text-brand-gray-700 w-full overflow-hidden text-base font-medium text-ellipsis">
+          {title}
+        </h3>
 
         <div
           className={clsx(

src/components/modal/Modal.tsx

@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 import { useEffect, useState } from "react";
-
+import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils/cn";
 import { motion, AnimatePresence } from "framer-motion";
 
@@ -14,6 +14,13 @@ type ModalProps = {
 };
 
 function Modal({ open, children, size = "lg", isOpenModal, className }: ModalProps) {
+  const [portal, setPortal] = useState<Element | null>(null);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setPortal(document.getElementById("portal"));
+    }
+  }, []);
+
   useEffect(() => {
     if (open) {
       document.body.style.overflow = "hidden";
@@ -40,7 +47,9 @@ function Modal({ open, children, size = "lg", isOpenModal, className }: ModalPro
       } as const
     )[size] ?? "min-w-[584px] max-w-lg";
 
-  return (
+  if (!portal) return null;
+
+  return createPortal(
     <AnimatePresence mode="wait">
       {open && (
         <motion.div
@@ -69,7 +78,8 @@ function Modal({ open, children, size = "lg", isOpenModal, className }: ModalPro
           </motion.div>
         </motion.div>
       )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    portal,
   );
 }
 
@@ -79,17 +89,36 @@ type ModalHeaderProps = {
   onClose?: () => void;
   className?: string;
   titleStyle?: string;
+  extraBtn?: React.ReactNode;
+  btnStyle?: string;
 };
-function ModalHeader({ title, children, onClose, className, titleStyle }: ModalHeaderProps) {
+function ModalHeader({
+  title,
+  children,
+  onClose,
+  className,
+  titleStyle,
+  btnStyle,
+  extraBtn,
+}: ModalHeaderProps) {
   return (
     <div className={cn("mb-3 flex justify-between", className)}>
       <h3 className={cn("text-2xl font-bold", titleStyle)}>{title}</h3>
       {children}
-      {onClose && (
-        <button onClick={onClose}>
-          <Image src="/icons/icon-close-big.svg" alt="close" width={36} height={36} />
-        </button>
-      )}
+      <div className={cn("flex items-center", btnStyle)}>
+        {extraBtn}
+        {onClose && (
+          <button onClick={onClose} className="tablet:size-8 size-6">
+            <Image
+              src="/icons/icon-close-big.svg"
+              alt="close"
+              width={24}
+              height={24}
+              className="tablet:size-8"
+            />
+          </button>
+        )}
+      </div>
     </div>
   );
 }

src/components/modal/cardModal/DetailCardModal.tsx

@@ -147,17 +147,25 @@ export default function DetailCardModal({ isOpen, setIsOpen, setColumns }: Modal
           <ModalHeader
             title={card?.title || "카드 상세 모달"}
             onClose={() => setIsOpen(false)}
-            className="tablet:items-center items-start justify-start"
-            titleStyle="pt-12 tablet:pt-0"
-          >
-            <Button
-              onClick={() => setIsKebabOpen(!isKebabOpen)}
-              className="mr-3 ml-auto h-9 w-9 border-0"
-              disabled={isLoading}
-            >
-              <Image src="/icons/icon-menu.svg" width={28} height={28} alt="더보기" />
-            </Button>
-          </ModalHeader>
+            className="tablet:h-8 h-[70px]"
+            titleStyle="overflow-hidden text-ellipsis pc:w-[500px] tablet:w-[480px] self-end tablet:self-center"
+            btnStyle="self-start tablet:self-center"
+            extraBtn={
+              <Button
+                onClick={() => setIsKebabOpen(!isKebabOpen)}
+                className="tablet:size-8 tablet:mr-3 ml-auto size-6 h-9 w-9 border-0"
+                disabled={isLoading}
+              >
+                <Image
+                  src="/icons/icon-menu.svg"
+                  width={20}
+                  height={20}
+                  alt="더보기"
+                  className="tablet:size-7"
+                />
+              </Button>
+            }
+          ></ModalHeader>
           <ModalContext
             className={cn(
               "relative flex flex-col py-0",