Merge pull request #126 from part3-4team-Taskify/Newfeat02

[Style Fix] 사이드 메뉴, 마이대시보드 디자인 수정

Author: MINJI121

src/components/modalInput/ToDoModal.tsx

@@ -8,6 +8,7 @@ import TextButton from "@/components/modalInput/TextButton";
 
 interface TaskModalProps {
   onClose: () => void;
+  isOpen: boolean;
   teamId: string;
   dashboardId: number;
   columnId: number;
@@ -17,7 +18,6 @@ interface TaskModalProps {
     nickname: string;
   }[];
 }
-
 interface TaskData {
   assignee: string; // nickname
   title: string;

src/components/sideMenu/SideMenu.tsx

@@ -57,15 +57,9 @@ export default function SideMenu({
           : "w-[67px] sm:w-[67px] md:w-[160px] lg:w-[300px]"
       )}
     >
-      {/* 로고 + 접기버튼 */}
-      <div className="mb-14 px-3 sm:mb-9 sm:px-0 relative">
-        <Link
-          href="/mydashboard"
-          className={clsx(
-            "flex",
-            isCollapsed ? "justify-center" : "justify-start"
-          )}
-        >
+      {/* 로고 영역 */}
+      <div className="flex flex-col items-center md:items-start mb-8 px-1">
+        <Link href="/mydashboard" className="mb-2">
           <Image
             src="/svgs/logo_taskify.svg"
             alt="Taskify Large Logo"
@@ -86,16 +80,17 @@ export default function SideMenu({
           />
         </Link>
 
-        {/* 접기/펼치기 버튼 (✅ md 이상에서만 보이게 수정) */}
+        {/* 접기/펼치기 버튼 */}
         <div
           className={clsx(
-            "md:flex hidden",
-            isCollapsed ? "mt-3 justify-center" : "absolute right-0 top-0"
+            "md:flex",
+            isCollapsed ? "justify-center" : "justify-end",
+            "w-full"
           )}
         >
           <button
             onClick={() => setIsCollapsed(!isCollapsed)}
-            className="w-6 h-6 bg-gray-100 hover:bg-gray-200 border rounded flex items-center justify-center"
+            className="w-6 h-6 hover:bg-gray-200 rounded flex items-center justify-center ml-0 border-none"
             title={isCollapsed ? "펼치기" : "접기"}
           >
             {isCollapsed ? (
@@ -133,6 +128,7 @@ export default function SideMenu({
 
       <nav className="flex flex-col flex-1 justify-between">
         <div>
+          {/* 대시보드 타이틀 + 추가 버튼 */}
           {!isCollapsed && (
             <div className="mb-4 flex items-center justify-between px-3 md:px-2">
               <span className="hidden md:block font-12sb text-[var(--color-black)]">
@@ -150,6 +146,21 @@ export default function SideMenu({
             </div>
           )}
 
+          {/* ✅ 접힌 상태에서 아이콘만 있는 추가 버튼 로고 아래로 */}
+          {isCollapsed && (
+            <div className="flex justify-center mb-4">
+              <button onClick={() => setIsModalOpen(true)}>
+                <Image
+                  src="/svgs/icon-add-box.svg"
+                  width={20}
+                  height={20}
+                  alt="추가 아이콘"
+                  unoptimized
+                />
+              </button>
+            </div>
+          )}
+
           {/* 대시보드 목록 */}
           <ul
             className={clsx(
@@ -220,6 +231,8 @@ export default function SideMenu({
             />
           </div>
         )}
+
+        {/* 모달 */}
         {isModalOpen && (
           <NewDashboard
             onClose={() => setIsModalOpen(false)}

src/components/table/invited/InvitedDashBoard.tsx

@@ -100,7 +100,7 @@ function InvitedList({
   };
 
   return (
-    <div className="relative bg-white w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] mx-auto mt-[40px]">
+    <div className="relative bg-white w-[260px] sm:w-[504px] lg:w-[1050px] h-[770px] sm:h-[592px] lg:h-[620px] mx-auto mt-[40px]">
       <ToastContainer position="top-center" autoClose={2000} />
       {filteredData.length > 0 && (
         <div className="hidden sm:flex p-6 w-full h-[26px] justify-start items-center pl-[43px] pr-[76px] md:gap-x-[130px] lg:gap-x-[280px]">
@@ -116,7 +116,7 @@ function InvitedList({
           ? filteredData.map((invite, index) => (
               <div
                 key={index}
-                className="pb-5 mb-[20px] w-[260px] sm:w-[504px] lg:w-[1022px] h-auto sm:h-[50px] sm:grid sm:grid-cols-[1fr_1fr_1fr] sm:items-center flex flex-col gap-10 border-b border-[var(--color-gray4)]"
+                className="pb-5 mb-[20px] w-[260px] sm:w-[504px] lg:w-[1050px] h-auto sm:h-[50px] sm:grid sm:grid-cols-[1fr_1fr_1fr] sm:items-center flex flex-col gap-10 border-b border-[var(--color-gray4)]"
               >
                 {/* 모바일 레이아웃 */}
                 <div className="flex flex-col sm:hidden">
@@ -271,7 +271,7 @@ export default function InvitedDashBoard() {
       {invitationArray.length === 0 ? (
         <EmptyInvitations />
       ) : (
-        <div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] max-w-none">
+        <div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1050px] h-[770px] sm:h-[592px] lg:h-[620px] max-w-none">
           <div className="p-6 relative w-full h-[104px]">
             <div className="flex justify-between items-center mb-[32px]">
               <p className="text-xl sm:text-2xl font-bold">초대받은 대시보드</p>

src/pages/mydashboard.tsx

@@ -124,7 +124,11 @@ export default function MyDashboardPage() {
 
   return (
     <div className="flex h-screen overflow-hidden">
-      <SideMenu teamId={teamId} dashboardList={dashboardList} />
+      <SideMenu
+        teamId={teamId}
+        dashboardList={dashboardList}
+        onCreateDashboard={() => fetchDashboards()}
+      />
 
       <div className="flex flex-col flex-1 overflow-hidden">
         <HeaderDashboard
@@ -134,36 +138,44 @@ export default function MyDashboardPage() {
         />
 
         <main className="flex-1 overflow-auto px-[25px] pt-[40px] pb-10 bg-[#f9f9f9] space-y-10">
-          <section className="w-full max-w-[1100px] mx-auto">
-            {/* 카드 영역 */}
-            <div className="flex flex-wrap gap-[16px] justify-center">
-              {currentItems}
+          {/* 카드 영역 */}
+          <section className="w-full px-[25px] max-w-[1100px] px-4">
+            <div className="flex flex-wrap gap-[16px] justify-start">
+              {currentItems.map((item, index) => (
+                <div
+                  key={index}
+                  className="w-full sm:w-[calc(50%-8px)] lg:w-[calc(33.333%-10.66px)]"
+                >
+                  {item}
+                </div>
+              ))}
             </div>
-
-            {/* 페이지네이션 */}
-            {totalPages > 1 && (
-              <div className="flex justify-center items-center pt-6">
-                <PaginationButton
-                  direction="left"
-                  disabled={currentPage === 1}
-                  onClick={handlePrevPage}
-                />
-                <span className="font-14r text-black3 px-[8px] whitespace-nowrap">
-                  {`${totalPages} 페이지 중 ${currentPage}`}
-                </span>
-                <PaginationButton
-                  direction="right"
-                  disabled={currentPage === totalPages}
-                  onClick={handleNextPage}
-                />
-              </div>
-            )}
           </section>
 
+          {totalPages > 1 && (
+            <div className="w-full max-w-[1100px] flex justify-center items-center ">
+              <PaginationButton
+                direction="left"
+                disabled={currentPage === 1}
+                onClick={handlePrevPage}
+              />
+              <span className="font-14r text-black3 px-[8px] whitespace-nowrap">
+                {`${totalPages} 페이지 중 ${currentPage}`}
+              </span>
+              <PaginationButton
+                direction="right"
+                disabled={currentPage === totalPages}
+                onClick={handleNextPage}
+              />
+            </div>
+          )}
+
           {/* 초대받은 대시보드 */}
-          <div className="mt-[74px] flex justify-center">
-            <InvitedDashBoard />
-          </div>
+          <section className="w-full px-[25px]">
+            <div className="mt-[74px]">
+              <InvitedDashBoard />
+            </div>
+          </section>
         </main>
       </div>
 
@@ -200,9 +212,7 @@ export default function MyDashboardPage() {
             취소
           </CustomBtn>
           <CustomBtn
-            onClick={
-              selectedCreatedByMe ? () => handleDelete() : () => handleLeave()
-            }
+            onClick={selectedCreatedByMe ? handleDelete : handleLeave}
             className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
           >
             확인