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

[Fix, Refactor] Page : edit 프로필 이미지 수정 / Modal : 초대내역 : 디자인, 페이지네이션 수정

Author: ozen0718

src/components/columnCard/Column.tsx

@@ -4,8 +4,8 @@ import { CardType } from "@/types/task";
 import Card from "./Card";
 import TodoModal from "@/components/modalInput/ToDoModal";
 import TodoButton from "@/components/button/TodoButton";
-import ColumnManageModal from "@/components/columnCard/ColumnManageModal";
-import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
+import ColumnManageModal from "@/components/columncard/ColumnManageModal";
+import ColumnDeleteModal from "@/components/columncard/ColumnDeleteModal";
 import { updateColumn, deleteColumn } from "@/api/dashboards";
 import { getDashboardMembers } from "@/api/card";
 

src/components/modal/ChangeBebridge.tsx

@@ -47,7 +47,7 @@ const ChangeBebridge = () => {
   /* 대시보드 이름 변경 버튼 */
   const handleUpdate = async () => {
     const dashboardIdNumber = Number(dashboardId); // string dashboradId 값 number로 변경
-    if (!dashboardId || !title || selected === null) return;
+    if (!dashboardId || selected === null) return;
 
     const payload = {
       title,
@@ -89,7 +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`}
+              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 업데이트
             />
@@ -108,8 +109,8 @@ const ChangeBebridge = () => {
       <div className="mt-8 flex">
         <button
           onClick={handleUpdate} // 버튼 클릭 시 handleUpdate 함수 호출
-          disabled={!title || selected === null} // title 또는 color가 없으면 버튼 비활성화
-          className={`cursor-pointer sm:w-[564px] sm:h-[54px] w-[252px] h-[54px] rounded-[8px] border border-[var(--color-gray3)] bg-[var(--primary)] text-[var(--color-white)] ${!title || selected === null ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
+          disabled={selected === null} // color가 없으면 버튼 비활성화
+          className={`cursor-pointer sm:w-[564px] sm:h-[54px] w-[252px] h-[54px] rounded-[8px] border border-[var(--color-gray3)] bg-[var(--primary)] text-[var(--color-white)] ${selected === null ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
         >
           변경
         </button>

src/components/table/InviteRecords.tsx

@@ -74,11 +74,12 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
     }
   };
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  /* 페이지네이션 */
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 5;
-  const totalPages = Math.ceil(inviteList.length / itemsPerPage);
-
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const totalPages = Math.max(1, Math.ceil(inviteList.length / itemsPerPage));
 
   const paginatedInvitation = Array.isArray(inviteList)
     ? inviteList.slice(

src/components/table/invited/EmptyInvitations.tsx

@@ -1,6 +1,6 @@
 function EmptyInvitations() {
   return (
-    <div className="relative sm:w-[960px] w-[260px] sm:h-[390px] h:[327px]  rounded-[16px] sm:p-[24px_40px_120px_40px] p-[24px_20px_80px_20px]  bg-white shadow-md">
+    <div className="relative sm:w-[960px] w-[260px] sm:h-[390px] h:[327px]  rounded-[16px] sm:p-[24px_40px_120px_40px] p-[24px_20px_80px_20px]  bg-white">
       <div className="flex justify-between ">
         <p className="sm:text-2xl text-sm font-bold mb-4 ">초대받은 대시보드</p>
       </div>

src/components/table/member/MemberList.tsx

@@ -5,6 +5,7 @@ import { MemberType } from "@/types/users";
 import { getMembers } from "@/api/members";
 import { apiRoutes } from "@/api/apiRoutes";
 import axiosInstance from "@/api/axiosInstance";
+import Image from "next/image";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
@@ -91,11 +92,14 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
           >
             <div className="flex items-center gap-4">
               {member.profileImageUrl ? (
-                <img
-                  src={member.profileImageUrl}
-                  alt="유저 프로필 아이콘"
-                  className="w-full h-full rounded-full object-cover"
-                />
+                <div className="relative w-[34px] h-[34px] md:w-[38px] md:h-[38px] rounded-full border-[2px] border-white overflow-hidden">
+                  <Image
+                    src={member.profileImageUrl}
+                    alt={member.nickname}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
               ) : (
                 <RandomProfile name={member.nickname} index={index} />
               )}

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

@@ -103,7 +103,7 @@ export default function EditDashboard() {
           <div className="flex mt-15 sm:mt-0 ml-8">
             <button
               onClick={handleDelete}
-              className="text-base sm:text-lg cursor-pointer w-[320px] h-[62px] text-[var(--color-black3)] rounded-[8px] border-[1px] border-[#D9D9D9]"
+              className="text-base sm:text-lg cursor-pointer w-[320px] h-[62px] text-[var(--color-black3)] rounded-[8px] border-[1px] border-[#D9D9D9] hover:scale-105 transition-transform duration-200"
             >
               대시보드 삭제하기
             </button>