Merge pull request #114 from gyoyeon-kim/card-table

[Refector] Modal: hover 효과 / Colum : 반응형

Author: hhjin1

src/components/columnCard/AddColumnModal.tsx

@@ -25,7 +25,12 @@ export default function AddColumnModal({
   pattern,
 }: AddColumnModalProps) {
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      width="w-[327px] sm:w-[568px]"
+      height="h-[258px] sm:h-[266px]"
+    >
       <div className="flex flex-col gap-3">
         <h2 className="text-2xl font-bold">새 칼럼 생성</h2>
 
@@ -41,7 +46,7 @@ export default function AddColumnModal({
           />
         </label>
 
-        <div className="flex justify-between">
+        <div className="flex justify-between gap-4">
           <CustomBtn variant="outlineDisabled" onClick={onClose}>
             취소
           </CustomBtn>

src/components/columnCard/ColumnDeleteModal.tsx

@@ -15,12 +15,12 @@ export default function ColumnDeleteModal({
 }: ColumnDeleteModalProps) {
   return (
     <Modal
-      width="w-[568px]"
-      height="h-[174px]"
       isOpen={isOpen}
       onClose={onClose}
+      width="w-[327px] sm:w-[568px]"
+      height="h-[160px] sm:h-[174px]"
     >
-      <div className="flex flex-col gap-10 text-center">
+      <div className="flex flex-col sm:gap-10 gap-6 text-center">
         <p className="text-xl mt-1.5">칼럼의 모든 카드가 삭제됩니다.</p>
         <div className="flex justify-between gap-3">
           <CustomBtn variant="outlineDisabled" onClick={onClose}>

src/components/columnCard/ColumnManageModal.tsx

@@ -1,4 +1,3 @@
-// components/column/ColumnManageModal.tsx
 import { useState } from "react";
 import { Modal } from "../modal/Modal";
 import { CustomBtn } from "../button/CustomButton";
@@ -23,7 +22,12 @@ export default function ColumnManageModal({
   const [newTitle, setNewTile] = useState(columnTitle);
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      width="w-[327px] sm:w-[568px]"
+      height="h-[258px] sm:h-[266px]"
+    >
       <div className="relative flex flex-col gap-5">
         <Image
           src="/svgs/close.svg"

src/components/modal/ChangeBebridge.tsx

@@ -89,8 +89,8 @@ const ChangeBebridge = () => {
         {colors.map((color, index) => (
           <div key={index} className="relative">
             <button
-              className={`cursor-pointer w-[30px] h-[30px] rounded-[15px] mr-2 transition-all duration-200 
-                    hover:opacity-70 hover:scale-110`}
+              className="cursor-pointer w-[30px] h-[30px] rounded-[15px] mr-2 transition-all duration-200 
+                    hover:opacity-70 hover:scale-110"
               style={{ backgroundColor: color }}
               onClick={() => setSelected(index)} // 색상 선택 시 selected 업데이트
             />

src/components/modal/NewDashboard.tsx

@@ -71,7 +71,8 @@ export default function NewDashboard({
           {colors.map((color, index) => (
             <div key={index} className="relative">
               <button
-                className="cursor-pointer w-[30px] h-[30px] rounded-full mr-2"
+                className="cursor-pointer w-[30px] h-[30px] rounded-[15px] mr-2 transition-all duration-200 
+                    hover:opacity-70 hover:scale-110"
                 style={{ backgroundColor: color }}
                 onClick={() => setSelected(index)}
               />

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

@@ -101,10 +101,10 @@ export default function Dashboard() {
   if (!isReady) return <div>로딩 중...</div>;
 
   return (
-    <div className="flex overflow-x-auto min-w-fit min-h-screen">
+    <div className="flex h-screen overflow-hidden">
       <SideMenu teamId={teamId} dashboardList={dashboardList} />
 
-      <div className="flex-1">
+      <div className="flex flex-col flex-1 overflow-hidden">
         <HeaderDashboard variant="dashboard" dashboardId={dashboardId} />
 
         <div className="flex  overflow-x-auto ">