From ffdf7e4de0a7004a1c69f155f6e29fdaf8c67cee Mon Sep 17 00:00:00 2001
From: sun <h092612@daum.net>
Date: Mon, 15 Sep 2025 21:39:18 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20=EB=AA=A8=EB=8B=AC=20=ED=8F=AC=ED=83=88?=
 =?UTF-8?q?=EB=A1=9C=20=EB=A7=8C=EB=93=A4=EA=B8=B0,=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=20=EC=A0=9C=EB=AA=A9=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx                            |  1 +
 src/app/not-found.tsx                         |  2 +-
 src/components/card/Card.tsx                  |  4 +-
 src/components/modal/Modal.tsx                | 47 +++++++++++++++----
 .../modal/cardModal/DetailCardModal.tsx       | 30 +++++++-----
 5 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7cdf282..621c410 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index c37a5af..17aadd5 100644
--- a/src/app/not-found.tsx
+++ b/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")}>
             앗, 접근할 수 없는 페이지입니다
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index daa0474..b42b835 100644
--- a/src/components/card/Card.tsx
+++ b/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(
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 58700c5..a4a8cb0 100644
--- a/src/components/modal/Modal.tsx
+++ b/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>
   );
 }
diff --git a/src/components/modal/cardModal/DetailCardModal.tsx b/src/components/modal/cardModal/DetailCardModal.tsx
index c1bf5ce..f18593e 100644
--- a/src/components/modal/cardModal/DetailCardModal.tsx
+++ b/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",