Merge pull request #147 from hhjin1/card-hj

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

Author: MINJI121

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>
 

src/components/modalInput/CardInput.tsx

@@ -49,7 +49,7 @@ export default function CardInput({
           color="secondary"
           buttonSize="xs"
           onClick={onButtonClick}
-          className="absolute bottom-3 right-3 z-10 flex items-center justify-center"
+          className="absolute bottom-3 right-3 z-10 flex items-center justify-center border-gray-300 text-[#5534DA] cursor-pointer"
         >
           입력
         </TextButton>

src/pages/dashboard/[dashboardId]/index.tsx

@@ -98,13 +98,13 @@ export default function Dashboard() {
   if (!isReady) return <div>로딩 중...</div>;
 
   return (
-    <div className="flex h-screen overflow-hidden bg-gray-50">
+    <div className="flex h-screen overflow-hidden ">
       <SideMenu teamId={TEAM_ID} dashboardList={dashboardList} />
 
       <div className="flex flex-col flex-1 overflow-hidden">
         <HeaderDashboard variant="dashboard" dashboardId={dashboardId} />
 
-        <div className="flex-1 overflow-x-auto flex flex-col md:flex-col lg:flex-row ">
+        <div className="flex-1 overflow-x-auto flex flex-col md:flex-col lg:flex-row bg-gray-50 ">
           {/* 각 칼럼 렌더링 */}
           {columns.map((col) => (
             <Column