[Style] 카드 상세모달 스타일 수정

Author: hhjin1

src/components/modalDashboard/CardDetail.tsx

@@ -11,9 +11,9 @@ interface CardDetailProps {
 export default function CardDetail({ card }: CardDetailProps) {
   return (
     <div className="p-4 ">
-      <h2 className="text-3xl font-semibold mb-7">{card.title}</h2>
+      <h2 className="text-3xl font-semibold mb-5">{card.title}</h2>
       {/* 작성자 정보 추가 */}
-      <div className="absolute w-[181px] h-[155px] lg:[200px] top-20 right-10 rounded-lg p-4 bg-white border border-[#D9D9D9]">
+      <div className="absolute w-[181px] h-[155px] lg:[200px] top-20 right-10 rounded-lg p-3.5 bg-white border border-[#D9D9D9]">
         <div className="mb-3">
           <p className="text-sm font-semibold text-gray-800 mb-1">담당자</p>
           <div className="flex items-center  gap-2">
@@ -47,7 +47,7 @@ export default function CardDetail({ card }: CardDetailProps) {
           </div>
         </div>
       </div>
-      <div className="flex flex-wrap gap-2 mb-4">
+      <div className="flex flex-wrap gap-2 mb-2">
         <span
           className="rounded-full bg-violet-200 px-3 py-1 text-sm text-violet-800"
           title={`상태: ${card.status}`}
@@ -81,9 +81,9 @@ export default function CardDetail({ card }: CardDetailProps) {
           <Image
             src={card.imageUrl}
             alt="카드 이미지"
-            width={445}
-            height={260}
-            className="rounded-lg object-cover w-full h-auto"
+            width={420}
+            height={226}
+            className="rounded-lg object-cover lg:w-[445px] lg:h-[260px] w-[420px] h-[246px] "
           />
         </div>
       )}

src/components/modalDashboard/CardDetailModal.tsx

@@ -64,20 +64,20 @@ export default function CardDetailPage({
         "
         >
           {/* 오른쪽 상단 메뉴 */}
-          <div className="absolute top-6 right-10 z-30 flex items-center gap-5 ">
+          <div className="absolute top-6 right-10 z-30 flex items-center gap-5 mt-3 ">
             <div className="relative">
               <button
                 onClick={() => setShowMenu((prev) => !prev)}
                 className="hover:cursor-pointer"
                 title="수정하기"
                 type="button"
               >
-                <MoreVertical className="w-8 h-8 text-gray-500 hover:text-black" />
+                <MoreVertical className="w-8 h-8 text-black cursor-pointer" />
               </button>
               {showMenu && (
                 <div className="absolute right-0.5 p-2 w-27 bg-white border border-[#D9D9D9] z-40 rounded-lg">
                   <button
-                    className="block w-full px-4 py-2 text-base text-gray-800 hover:bg-[#F1EFFD] hover:text-[#5534DA] rounded-sm"
+                    className="block w-full px-4 py-2 text-base text-gray-800 hover:bg-[#F1EFFD] hover:text-[#5534DA] rounded-sm cursor-pointer"
                     type="button"
                     onClick={() => {
                       setIsEditModalOpen(true);
@@ -87,7 +87,7 @@ export default function CardDetailPage({
                     수정하기
                   </button>
                   <button
-                    className="block w-full px-4 py-2 text-base text-gray-800 hover:bg-[#F1EFFD] hover:text-[#5534DA] rounded-sm "
+                    className="block w-full px-4 py-2 text-base text-gray-800 hover:bg-[#F1EFFD] hover:text-[#5534DA] rounded-sm cursor-pointer"
                     type="button"
                     onClick={() => deleteCardMutate()}
                   >
@@ -97,7 +97,7 @@ export default function CardDetailPage({
               )}
             </div>
             <button onClick={onClose} title="메뉴 열기">
-              <X className="w-8 h-8 text-gray-500 hover:cursor-pointer" />
+              <X className="w-8 h-8 text-black hover:cursor-pointer" />
             </button>
           </div>