Merge pull request #185 from part3-4team-Taskify/minji

[Refactor, Style] mydashboard: 카드 간 여백 조정 / SideMenu: 상하 스크롤 제거, 제목 말줄임표 적용, 페이지 버튼 밀림 현상 수정 / 전체: 배경색 변경

Author: ozen0718

src/components/button/CardButton.tsx

@@ -64,7 +64,7 @@ const CardButton: React.FC<CardButtonProps> = ({
         "border border-[var(--color-gray3)]",
         "min-w-0 w-full max-w-[260px] md:max-w-[247px] lg:max-w-[332px]",
         "h-[58px] md:h-[68px] lg:h-[70px]",
-        "mt-[10px] md:mt-[16px] lg:mt-[20px]",
+        "mt-[2px]", // 카드 세로 간격
         "text-lg md:text-2lg lg:text-2lg",
         isEditMode
           ? "cursor-default hover:border-gray-300"
@@ -73,27 +73,28 @@ const CardButton: React.FC<CardButtonProps> = ({
       )}
     >
       {/* 왼쪽: 색상 도트 + 제목 + 왕관 */}
-      <div className="flex items-center gap-[10px] overflow-hidden">
+      <div className="flex items-center font-semibold gap-[10px] overflow-hidden">
         {/* 색상 원 */}
         <svg width="8" height="8" viewBox="0 0 8 8" fill={color}>
           <circle cx="4" cy="4" r="4" />
         </svg>
 
         {/* 제목 */}
-        <span className="text-black3 font-16sb truncate max-w-[90px] sm:max-w-[100px] md:max-w-[120px] lg:max-w-[160px]">
+        <span className="text-black3 text-[14px] sm:text-[16px] truncate max-w-[90px] sm:max-w-[100px] md:max-w-[120px] lg:max-w-[160px]">
           {title}
         </span>
 
         {/* 왕관 */}
-        {showCrown && (
-          <Image
-            src="/svgs/icon-crown.svg"
-            alt="crown Icon"
-            width={20}
-            height={20}
-            className="hidden sm:block w-[20px] h-[20px]"
-          />
-        )}
+        <div className="relative w-[15px] h-[12px] md:w-[17px] md:h-[14px]">
+          {showCrown && (
+            <Image
+              src="/svgs/icon-crown.svg"
+              alt="crown Icon"
+              fill
+              className="object-contain"
+            />
+          )}
+        </div>
       </div>
 
       {/* 오른쪽: 화살표 아이콘 or 수정/삭제 버튼 */}

src/components/button/DashboardAddButton.tsx

@@ -9,12 +9,12 @@ const DashboardAddButton: React.FC<
     <button
       className={clsx(
         "flex justify-center items-center gap-[10px] bg-white transition-all",
-        "rounded-lg px-4 py-3 font-16sb",
+        "rounded-lg px-4 py-3",
         "border border-gray-300 hover:border-purple-500",
         "min-w-0 w-full max-w-[260px] md:max-w-[247px] lg:max-w-[332px]", // 반응형 너비
         "h-[58px] md:h-[68px] lg:h-[70px]", // 반응형 높이
-        "mt-[10px] md:mt-[16px] lg:mt-[20px]", // 여백
-        "text-lg md:text-2lg lg:text-2lg",
+        "mt-[2px]", // 여백
+        "text-[14px] sm:text-[16px]",
         "cursor-pointer",
         className
       )}
@@ -26,7 +26,7 @@ const DashboardAddButton: React.FC<
         alt="Plus Icon"
         width={24}
         height={24}
-        className="w-[18px] h-[18px] md:w-[20px] md:h-[20px] lg:w-[22px] lg:h-[22px] p-1 rounded-md bg-purple-100"
+        className="w-[18px] h-[18px] md:w-[20px] md:h-[20px] lg:w-[22px] lg:h-[22px] p-1 rounded-[4px] bg-[var(--color-violet8)]"
       />
     </button>
   );

src/components/columnCard/Column.tsx

@@ -100,7 +100,7 @@ export default function Column({
   return (
     <div
       className={`
-      flex flex-col border-r border-[#EEEEEE] bg-gray-50 rounded-md p-4
+      flex flex-col border-r border-[var(--color-gray4)] bg-[#F5F2FC] rounded-md p-4
       h-auto sm:m-h-screen
       max-h-[401px] sm:max-h-none w-full lg:w-[360px]
     `}

src/components/gnb/HeaderDashboard.tsx

@@ -135,10 +135,11 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
         )}
 
         {/*헤더 제목*/}
-        <div className="flex items-center gap-[8px]">
+        <div className="flex font-bold items-center gap-[8px]">
           <p
             className={clsx(
-              "font-20b text-black3 whitespace-nowrap",
+              "text-[16px] sm:text-[20px] text-black3",
+              "whitespace-nowrap truncate max-w-[100px] md:max-w-[400px]",
               variant !== "mydashboard" && variant !== "mypage"
                 ? "hidden lg:block"
                 : ""

src/components/sideMenu/SideMenu.tsx

@@ -34,7 +34,7 @@ export default function SideMenu({
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const itemsPerPage = 15;
+  const itemsPerPage = 14;
   const totalPages = Math.ceil(dashboardList.length / itemsPerPage);
   const startIndex = (currentPage - 1) * itemsPerPage;
   const endIndex = startIndex + itemsPerPage;
@@ -51,7 +51,7 @@ export default function SideMenu({
   return (
     <aside
       className={clsx(
-        "h-screen overflow-y-auto border-r border-[var(--color-gray3)] px-3 py-5 transition-all duration-200 flex flex-col",
+        "flex flex-col h-screen overflow-y-auto lg:overflow-y-hidden overflow-x-hidden border-r border-[var(--color-gray3)] px-3 py-5 transition-all duration-200",
         isCollapsed
           ? "w-[67px]"
           : "w-[67px] sm:w-[67px] md:w-[160px] lg:w-[300px]"
@@ -126,7 +126,7 @@ export default function SideMenu({
         </div>
       </div>
 
-      <nav className="flex flex-col flex-1 justify-between">
+      <nav className="flex flex-1 flex-col min-h-0 justify-between h-full">
         <div>
           {/* 대시보드 타이틀 + 추가 버튼 */}
           {!isCollapsed && (
@@ -169,7 +169,7 @@ export default function SideMenu({
           {/* 대시보드 목록 */}
           <ul
             className={clsx(
-              "flex flex-col",
+              "flex-1",
               isCollapsed
                 ? "items-center"
                 : "items-start md:items-start sm:items-center w-full"
@@ -179,14 +179,14 @@ export default function SideMenu({
               <li
                 key={dashboard.id}
                 className={clsx(
-                  "w-full flex justify-center md:justify-start p-3 font-18r text-[var(--color-gray1)] transition-colors duration-200",
+                  "flex w-full justify-center md:justify-start p-3 font-18m text-[var(--color-gray1)] transition-colors duration-200",
                   dashboard.id.toString() === boardId &&
                     "bg-[var(--color-violet8)] text-[var(--color-black)] font-semibold rounded-l-xl"
                 )}
               >
                 <Link
                   href={`/dashboard/${dashboard.id}`}
-                  className="flex items-center gap-2"
+                  className="flex items-center gap-3"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -199,8 +199,8 @@ export default function SideMenu({
                     <circle cx="4" cy="4" r="4" />
                   </svg>
                   {!isCollapsed && (
-                    <div className="hidden md:flex items-center gap-2">
-                      <span className="truncate md:text-base">
+                    <div className="hidden md:flex min-w-0 items-center gap-1.5">
+                      <span className="truncate md:text-base max-w-[100px] lg:max-w-[200px]">
                         {dashboard.title}
                       </span>
                       {dashboard.createdByMe && (
@@ -223,7 +223,7 @@ export default function SideMenu({
 
         {/* 페이지네이션 */}
         {!isCollapsed && dashboardList.length > itemsPerPage && (
-          <div className="flex justify-start mt-4 px-3">
+          <div className="flex justify-start items-end mb-9 px-2">
             <PaginationButton
               direction="left"
               disabled={currentPage === 1}

src/components/table/invited/InvitedDashBoard.tsx

@@ -277,7 +277,7 @@ export default function InvitedDashBoard() {
         <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="flex flex-col p-6 w-full h-[104px]">
             <div className="flex flex-col w-full sm:w-[448px] lg:w-[966px] gap-[24px]">
-              <p className="text-black3 text-xl sm:text-2xl font-bold">
+              <p className="text-black3 text-[16px] sm:text-[20px] font-bold">
                 초대받은 대시보드
               </p>
 

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

@@ -70,7 +70,7 @@ export default function EditDashboard() {
 
         <div
           className="overflow-auto flex-1 px-[20px] pt-[10px] pb-10"
-          style={{ backgroundColor: "var(--color-gray5)" }}
+          style={{ backgroundColor: "#F5F2FC" }}
         >
           <div className="mt-6">
             <button

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

@@ -111,7 +111,7 @@ export default function Dashboard() {
       <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 bg-gray-50 ">
+        <div className="flex-1 overflow-x-auto flex flex-col md:flex-col lg:flex-row bg-white">
           {/* 각 칼럼 렌더링 */}
           {columns.map((col) => (
             <Column
@@ -123,7 +123,7 @@ export default function Dashboard() {
             />
           ))}
           {/* ColumnsButton: 모바일/태블릿에서는 하단 고정, 데스크탑에서는 원래 위치 */}
-          <div className={`p-11 hidden lg:block bg-gray-50`}>
+          <div className={`p-11 hidden lg:block bg-white`}>
             <ColumnsButton onClick={openModal} />
           </div>
 

src/pages/mydashboard.tsx

@@ -144,10 +144,10 @@ export default function MyDashboardPage() {
           onToggleEditMode={() => setIsEditMode((prev) => !prev)}
         />
 
-        <main className="flex-col overflow-auto px-[25px] pt-[40px] pb-10 bg-[#f9f9f9] ">
+        <main className="flex-col overflow-auto px-[25px] py-5 sm:py-10 bg-[#F5F2FC]">
           {/* 검색 입력창 */}
           <section className="w-full overflow-hidden transition-all">
-            <div className="min-w-0 w-full max-w-[260px] md:max-w-[247px] lg:max-w-[332px]">
+            <div className="min-w-0 w-full max-w-[260px] md:max-w-[247px] lg:max-w-[332px] mb-3">
               <div className="relative flex items-center justify-end">
                 <input
                   type="text"
@@ -161,23 +161,23 @@ export default function MyDashboardPage() {
                 />
                 <Search
                   size={18}
-                  color="#989a98"
+                  color="#333236"
                   className="absolute right-4"
                 />
               </div>
             </div>
           </section>
 
-          {/* 카드 영역 */}
           <section className="w-full max-w-[260px] sm:max-w-[504px] lg:max-w-[1022px]">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 py-2">
+            {/* 카드 영역 */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[8px] md:gap-[10px] lg:gap-[13px]">
               {currentItems.map((item, index) => (
                 <div key={index}>{item}</div>
               ))}
             </div>
             {totalPages > 1 && (
-              <div className="w-full flex justify-end items-center mt-1.5">
-                <span className="font-14r text-black3 px-[8px] whitespace-nowrap">
+              <div className="w-full flex justify-end items-center mt-3">
+                <span className="text-[12px] sm:text-[14px] text-black3 px-[8px] whitespace-nowrap">
                   {`${totalPages} 페이지 중 ${currentPage}`}
                 </span>
                 <PaginationButton
@@ -192,11 +192,8 @@ export default function MyDashboardPage() {
                 />
               </div>
             )}
-          </section>
-
-          {/* 초대받은 대시보드 */}
-          <section className="w-full">
-            <div className="mt-[50px]">
+            {/* 초대받은 대시보드 */}
+            <div className="mt-[25px]">
               <InvitedDashBoard />
             </div>
           </section>

src/pages/mypage.tsx

@@ -41,7 +41,7 @@ export default function MyPage() {
         dashboardList={dashboards}
         onCreateDashboard={() => fetchDashboards()}
       />
-      <div className="flex flex-col flex-1 overflow-hidden bg-[var(--color-gray5)]">
+      <div className="flex flex-col flex-1 overflow-hidden bg-[#F5F2FC]">
         <HeaderMyPage variant="mypage" />
         <div className="flex flex-col justify-start overflow-auto w-full px-6 mt-6">
           {/*돌아가기 버튼*/}