From 0e727db7c8cc1d352e1892048eb5500ebb237c7e Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 05:35:34 +0900
Subject: [PATCH 1/9] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/sidebar/Sidebar.tsx     | 94 +++++++++++++++----
 .../hooks/useContainerInfiniteScroll.ts       | 47 ++++++++++
 src/app/shared/hooks/useDashboardInfinite.ts  | 46 +++++++++
 3 files changed, 168 insertions(+), 19 deletions(-)
 create mode 100644 src/app/shared/hooks/useContainerInfiniteScroll.ts
 create mode 100644 src/app/shared/hooks/useDashboardInfinite.ts

diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx
index 00737f3..acccb77 100644
--- a/src/app/shared/components/common/sidebar/Sidebar.tsx
+++ b/src/app/shared/components/common/sidebar/Sidebar.tsx
@@ -1,13 +1,14 @@
-// components/common/sidebar/Sidebar.tsx
 'use client'
 
-import { useDashboard } from '@hooks/useDashboard'
+import { useContainerInfiniteScroll } from '@hooks/useContainerInfiniteScroll'
 import { useModalStore } from '@store/useModalStore'
 import { useSelectedDashboardStore } from '@store/useSelectedDashboardStore'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
+import { useMemo } from 'react'
 
+import { useDashboardsInfinite } from '@/app/shared/hooks/useDashboardInfinite'
 import { Dashboard } from '@/types/dashboard'
 
 import CreateDashboardButton from './CreateDashboardButton'
@@ -17,22 +18,43 @@ export default function Sidebar(): JSX.Element {
   const pathname = usePathname()
   const router = useRouter()
   const { openModal } = useModalStore()
-  const { data: dashboards = [], isLoading, error } = useDashboard()
   const { setSelectedDashboard } = useSelectedDashboardStore()
 
+  // 무한스크롤 데이터 관리
+  const {
+    data,
+    isLoading,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useDashboardsInfinite(25)
+
+  // 컨테이너 스크롤 감지
+  const containerRef = useContainerInfiniteScroll(
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  )
+
+  // 모든 대시보드 데이터 병합
+  const allDashboards = useMemo(() => {
+    return data?.pages.flatMap((page) => page.dashboards) || []
+  }, [data])
+
   const handleDashboardClick = (dashboard: Dashboard) => {
-    setSelectedDashboard(dashboard) // 선택한 대시보드를 전역 상태에 저장
+    setSelectedDashboard(dashboard)
     router.push(`/dashboard/${dashboard.id}`)
   }
 
-  // 에러 타입 타입 불일치(jsx로 렌더링할 수 없음) 방지를 위한 string 처리
+  // 에러 타입 처리
   const errorMessage =
     error instanceof Error ? error.message : '대시보드 목록 불러오기 실패'
 
   return (
-    <aside className="BG-white Border-section fixed left-0 top-0 h-screen w-300 overflow-y-auto">
+    <aside className="BG-white Border-section fixed left-0 top-0 flex h-screen w-300 flex-col">
       {/* 로고 섹션 */}
-      <div className="flex h-70 items-center px-20">
+      <div className="flex h-70 flex-shrink-0 items-center px-20">
         <Link href="/" className="flex items-center gap-8">
           <div className="relative h-35 w-150">
             <Image
@@ -47,13 +69,18 @@ export default function Sidebar(): JSX.Element {
       </div>
 
       {/* 대시보드 섹션 */}
-      <div className="px-20 py-24">
-        <div className="mb-24 flex items-center justify-between">
+      <div className="flex min-h-0 flex-1 flex-col px-20 py-24">
+        <div className="mb-24 flex flex-shrink-0 items-center justify-between">
           <h2 className="Text-gray text-12 font-semibold">Dash Boards</h2>
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
-        <div className="space-y-8">
+        {/* 스크롤 가능한 대시보드 목록 컨테이너 */}
+        <div
+          ref={containerRef}
+          className="flex-1 space-y-8 overflow-y-auto"
+          style={{ minHeight: '200px' }}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center py-20">
               <div className="Text-gray text-14">로딩중...</div>
@@ -62,19 +89,48 @@ export default function Sidebar(): JSX.Element {
             <div className="flex items-center justify-center py-20">
               <div className="Text-red text-14">{errorMessage}</div>
             </div>
-          ) : dashboards.length === 0 ? (
+          ) : allDashboards.length === 0 ? (
             <div className="flex items-center justify-start py-20">
               <div className="Text-gray text-14">대시보드가 없습니다.</div>
             </div>
           ) : (
-            dashboards.map((dashboard) => (
-              <DashboardItem
-                key={`sidebar-${dashboard.id}`}
-                dashboard={dashboard}
-                isActive={pathname === `/dashboard/${dashboard.id}`}
-                onClick={() => handleDashboardClick(dashboard)}
-              />
-            ))
+            <>
+              {/* 대시보드 목록 */}
+              {allDashboards.map((dashboard) => (
+                <DashboardItem
+                  key={`sidebar-${dashboard.id}`}
+                  dashboard={dashboard}
+                  isActive={pathname === `/dashboard/${dashboard.id}`}
+                  onClick={() => handleDashboardClick(dashboard)}
+                />
+              ))}
+
+              {/* 추가 로딩 중일 때 스켈레톤 */}
+              {isFetchingNextPage && (
+                <div className="space-y-8">
+                  {Array.from({ length: 3 }).map((_, index) => (
+                    <div
+                      key={`skeleton-${index}`}
+                      className="flex items-center gap-12 rounded-6 p-12"
+                    >
+                      {/* 색상 원 스켈레톤 */}
+                      <div className="size-8 animate-pulse rounded-full bg-gray-200" />
+                      {/* 제목 스켈레톤 */}
+                      <div className="h-16 flex-1 animate-pulse rounded-4 bg-gray-200" />
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* 더 이상 데이터가 없을 때 */}
+              {!hasNextPage && allDashboards.length > 0 && (
+                <div className="py-12 text-center">
+                  <p className="Text-gray text-12">
+                    모든 대시보드를 확인했습니다.
+                  </p>
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>
diff --git a/src/app/shared/hooks/useContainerInfiniteScroll.ts b/src/app/shared/hooks/useContainerInfiniteScroll.ts
new file mode 100644
index 0000000..e796b21
--- /dev/null
+++ b/src/app/shared/hooks/useContainerInfiniteScroll.ts
@@ -0,0 +1,47 @@
+'use client'
+
+import { useCallback, useEffect, useRef } from 'react'
+
+/**
+ * 컨테이너 내부 무한스크롤 훅 (사이드바용)
+ * window 스크롤과 독립적으로 작동하여 기존 무한스크롤과 충돌하지 않게 사용하기 위함
+ *
+ * @param fetchNextPage - 다음 페이지를 가져오는 함수
+ * @param hasNextPage - 다음 페이지가 있는지 여부
+ * @param isFetchingNextPage - 다음 페이지를 가져오는 중인지 여부
+ * @param threshold - 스크롤 트리거
+ */
+export const useContainerInfiniteScroll = (
+  fetchNextPage: () => void,
+  hasNextPage: boolean,
+  isFetchingNextPage: boolean,
+  threshold: number = 0.8,
+) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const { scrollTop, scrollHeight, clientHeight } = container
+    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight
+
+    // 임계값에 도달하면 다음 페이지 로드
+    if (scrollPercentage >= threshold && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage()
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, threshold])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    container.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
+
+  return containerRef
+}
diff --git a/src/app/shared/hooks/useDashboardInfinite.ts b/src/app/shared/hooks/useDashboardInfinite.ts
new file mode 100644
index 0000000..488bcf1
--- /dev/null
+++ b/src/app/shared/hooks/useDashboardInfinite.ts
@@ -0,0 +1,46 @@
+'use client'
+
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import api from '@/app/shared/lib/axios'
+import { DashboardListResponse } from '@/app/shared/types/dashboard'
+
+/**
+ * 사이드바용 대시보드 목록 무한스크롤 훅 (pagination 방식)
+ * @param size - 한번에 가져올 대시보드 개수 (기본값: 10)
+ */
+export const useDashboardsInfinite = (size: number = 10) => {
+  return useInfiniteQuery({
+    queryKey: ['dashboards', 'infinite', 'pagination', size],
+    queryFn: async ({ pageParam }: { pageParam: number }) => {
+      if (!process.env.NEXT_PUBLIC_TEAM_ID) {
+        throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
+      }
+
+      const params = new URLSearchParams({
+        navigationMethod: 'pagination',
+        size: size.toString(),
+        page: pageParam.toString(),
+      })
+
+      const res = await api.get<DashboardListResponse>(
+        `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards?${params.toString()}`,
+      )
+
+      return res.data
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, allPages) => {
+      const currentPage = allPages.length
+      const totalPages = Math.ceil(lastPage.totalCount / size)
+
+      if (currentPage < totalPages && lastPage.dashboards.length > 0) {
+        return currentPage + 1
+      }
+
+      return null
+    },
+    staleTime: 1000 * 60,
+    gcTime: 1000 * 60 * 5,
+  })
+}

From 1944cdb1b2b4703d47bcd88ed250c7f990cad26c Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 05:58:44 +0900
Subject: [PATCH 2/9] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EB=B0=98=EC=9D=91=ED=98=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/sidebar/DashboardItem.tsx          |  8 +--
 .../components/common/sidebar/Sidebar.tsx     | 67 ++++++++++++-------
 2 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/src/app/shared/components/common/sidebar/DashboardItem.tsx b/src/app/shared/components/common/sidebar/DashboardItem.tsx
index 25e10d8..16f5d9f 100644
--- a/src/app/shared/components/common/sidebar/DashboardItem.tsx
+++ b/src/app/shared/components/common/sidebar/DashboardItem.tsx
@@ -18,22 +18,22 @@ export default function DashboardItem({
       type="button"
       aria-current={isActive ? 'page' : undefined}
       onClick={handleClick}
-      className={`Text-black flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors hover:bg-gray-50 ${
+      className={`Text-black tablet:gap-8 tablet:px-8 tablet:py-6 tablet:text-16 mobile:justify-center mobile:px-4 mobile:py-6 flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors hover:bg-gray-50 ${
         isActive ? 'BG-currentDashboard font-medium' : ''
       }`}
     >
       {/* 컬러 도트 */}
       <div
-        className="size-8 flex-shrink-0 rounded-full"
+        className="tablet:size-6 mobile:size-12 size-8 flex-shrink-0 rounded-full"
         style={{ backgroundColor: dashboard.color }}
       />
 
       {/* 대시보드 제목 */}
-      <span className="flex-1 truncate">{dashboard.title}</span>
+      <span className="mobile:hidden flex-1 truncate">{dashboard.title}</span>
 
       {/* 내가 만든 대시보드에 왕관 아이콘 */}
       {dashboard.createdByMe && (
-        <div className="relative h-12 w-14 flex-shrink-0">
+        <div className="tablet:h-10 tablet:w-12 mobile:hidden relative h-12 w-14 flex-shrink-0">
           <Image
             src="/images/crown.png"
             alt="내가 만든 대시보드"
diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx
index acccb77..6541066 100644
--- a/src/app/shared/components/common/sidebar/Sidebar.tsx
+++ b/src/app/shared/components/common/sidebar/Sidebar.tsx
@@ -52,16 +52,25 @@ export default function Sidebar(): JSX.Element {
     error instanceof Error ? error.message : '대시보드 목록 불러오기 실패'
 
   return (
-    <aside className="BG-white Border-section fixed left-0 top-0 flex h-screen w-300 flex-col">
+    <aside className="BG-white Border-section tablet:w-160 mobile:w-67 fixed left-0 top-0 flex h-screen w-300 flex-col">
       {/* 로고 섹션 */}
-      <div className="flex h-70 flex-shrink-0 items-center px-20">
+      <div className="tablet:px-12 mobile:px-8 mobile:justify-center flex h-70 flex-shrink-0 items-center px-20">
         <Link href="/" className="flex items-center gap-8">
-          <div className="relative h-35 w-150">
+          <div className="tablet:h-30 tablet:w-120 mobile:size-24 relative h-35 w-150">
+            {/* 데스크톱 & 태블릿: 전체 로고 */}
             <Image
               src="/images/logo-light2.svg"
               alt="Coplan logo"
               fill
-              className="object-contain"
+              className="mobile:hidden object-contain"
+              priority
+            />
+            {/* 모바일: 아이콘만 */}
+            <Image
+              src="/images/logo-icon-light.svg"
+              alt="Coplan"
+              fill
+              className="mobile:block hidden object-contain"
               priority
             />
           </div>
@@ -69,31 +78,39 @@ export default function Sidebar(): JSX.Element {
       </div>
 
       {/* 대시보드 섹션 */}
-      <div className="flex min-h-0 flex-1 flex-col px-20 py-24">
-        <div className="mb-24 flex flex-shrink-0 items-center justify-between">
-          <h2 className="Text-gray text-12 font-semibold">Dash Boards</h2>
+      <div className="tablet:px-12 mobile:px-8 tablet:py-16 mobile:py-12 flex min-h-0 flex-1 flex-col px-20 py-24">
+        {/* 헤더 */}
+        <div className="tablet:mb-16 mobile:hidden mb-24 flex flex-shrink-0 items-center justify-between">
+          <h2 className="Text-gray tablet:text-10 text-12 font-semibold">
+            Dash Boards
+          </h2>
+          <CreateDashboardButton onClick={() => openModal('createDashboard')} />
+        </div>
+
+        {/* 모바일 전용 + 버튼 */}
+        <div className="mobile:flex mb-12 hidden flex-shrink-0 justify-center">
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
         {/* 스크롤 가능한 대시보드 목록 컨테이너 */}
         <div
           ref={containerRef}
-          className="flex-1 space-y-8 overflow-y-auto"
+          className="tablet:space-y-6 mobile:space-y-4 flex-1 space-y-8 overflow-y-auto"
           style={{ minHeight: '200px' }}
         >
           {isLoading ? (
-            <div className="flex items-center justify-center py-20">
-              <div className="Text-gray text-14">로딩중...</div>
+            <div className="tablet:py-12 mobile:py-8 flex items-center justify-center py-20">
+              <div className="Text-gray tablet:text-12 mobile:hidden text-14">
+                로딩중...
+              </div>
+              {/* 모바일: 로딩 스피너만 */}
+              <div className="mobile:block hidden size-16 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500" />
             </div>
           ) : error ? (
-            <div className="flex items-center justify-center py-20">
+            <div className="tablet:py-12 mobile:py-8 flex items-center justify-center py-20">
               <div className="Text-red text-14">{errorMessage}</div>
             </div>
-          ) : allDashboards.length === 0 ? (
-            <div className="flex items-center justify-start py-20">
-              <div className="Text-gray text-14">대시보드가 없습니다.</div>
-            </div>
-          ) : (
+          ) : allDashboards.length > 0 ? (
             <>
               {/* 대시보드 목록 */}
               {allDashboards.map((dashboard) => (
@@ -107,16 +124,16 @@ export default function Sidebar(): JSX.Element {
 
               {/* 추가 로딩 중일 때 스켈레톤 */}
               {isFetchingNextPage && (
-                <div className="space-y-8">
+                <div className="tablet:space-y-6 mobile:space-y-4 space-y-8">
                   {Array.from({ length: 3 }).map((_, index) => (
                     <div
                       key={`skeleton-${index}`}
-                      className="flex items-center gap-12 rounded-6 p-12"
+                      className="tablet:gap-8 mobile:gap-0 mobile:justify-center tablet:p-8 mobile:p-4 flex items-center gap-12 rounded-6 p-12"
                     >
                       {/* 색상 원 스켈레톤 */}
-                      <div className="size-8 animate-pulse rounded-full bg-gray-200" />
-                      {/* 제목 스켈레톤 */}
-                      <div className="h-16 flex-1 animate-pulse rounded-4 bg-gray-200" />
+                      <div className="tablet:size-6 mobile:size-12 size-8 animate-pulse rounded-full bg-gray-200" />
+                      {/* 제목 스켈레톤 - 모바일에서 숨김 */}
+                      <div className="tablet:h-14 mobile:hidden h-16 flex-1 animate-pulse rounded-4 bg-gray-200" />
                     </div>
                   ))}
                 </div>
@@ -124,14 +141,16 @@ export default function Sidebar(): JSX.Element {
 
               {/* 더 이상 데이터가 없을 때 */}
               {!hasNextPage && allDashboards.length > 0 && (
-                <div className="py-12 text-center">
-                  <p className="Text-gray text-12">
+                <div className="tablet:py-8 mobile:py-4 py-12 text-center">
+                  <p className="Text-gray tablet:text-10 mobile:hidden text-12">
                     모든 대시보드를 확인했습니다.
                   </p>
+                  {/* 모바일: 완료 아이콘만 */}
+                  <div className="mobile:block Text-gray hidden text-12">✓</div>
                 </div>
               )}
             </>
-          )}
+          ) : null}
         </div>
       </div>
     </aside>

From f4a337738bd0655083ac580b8d90048c2af8c393 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 06:11:38 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=82=B4=20=EB=8C=80?=
 =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EB=B0=98=EC=9D=91=ED=98=95(1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InvitedDashboardTable.tsx                 | 20 +++++++++----------
 .../MyDashboardGrid/AddDashboardCard.tsx      |  2 +-
 .../MyDashboardGrid/MyDashboardCard.tsx       |  4 ++--
 .../MyDashboardGrid/MyDashboardGrid.tsx       |  8 ++++----
 src/app/mydashboard/page.tsx                  |  8 ++++----
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
index 36539ca..82bd039 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
@@ -53,7 +53,7 @@ export default function InvitedDashboardTable() {
         <div className="h-40 animate-pulse rounded-8 bg-gray-200" />
 
         {/* 테이블 헤더 */}
-        <div className="grid grid-cols-3 items-center gap-20 pl-36 pr-32">
+        <div className="mobile:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
           <span className="text-16 font-medium text-gray-400">이름</span>
           <span className="text-center text-16 font-medium text-gray-400">
             초대자
@@ -67,7 +67,7 @@ export default function InvitedDashboardTable() {
         {Array.from({ length: 3 }).map((_, index) => (
           <div
             key={index}
-            className="grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32"
+            className="mobile:flex mobile:flex-col mobile:gap-8 mobile:p-16 mobile:rounded-8 mobile:bg-gray-50 grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32"
           >
             <div className="h-20 animate-pulse rounded-4 bg-gray-200" />
             <div className="h-20 animate-pulse rounded-4 bg-gray-200" />
@@ -82,10 +82,10 @@ export default function InvitedDashboardTable() {
   if (isError) {
     return (
       <div className="flex flex-col items-center justify-center py-60">
-        <p className="text-16 font-medium text-red-500">
+        <p className="mobile:text-12 text-16 font-medium text-red-500">
           초대받은 대시보드를 불러오는 중 오류가 발생했습니다.
         </p>
-        <p className="mt-8 text-14 text-gray-500">
+        <p className="mobile:text-10 mt-8 text-14 text-gray-500">
           {error?.message || '다시 시도해주세요.'}
         </p>
       </div>
@@ -96,7 +96,7 @@ export default function InvitedDashboardTable() {
   if (allInvitations.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-60">
-        <div className="relative mb-24 h-100 w-100">
+        <div className="mobile:size-60 relative mb-24 h-100 w-100">
           <Image
             src="/images/unsubscribe.svg"
             alt="초대받은 대시보드 없음"
@@ -104,7 +104,7 @@ export default function InvitedDashboardTable() {
             className="object-contain"
           />
         </div>
-        <p className="Text-gray-light text-16 font-medium">
+        <p className="Text-gray-light mobile:text-12 text-16 font-medium">
           아직 초대받은 대시보드가 없어요.
         </p>
       </div>
@@ -117,8 +117,8 @@ export default function InvitedDashboardTable() {
       {/* 검색창 */}
       <SearchInput value={searchQuery} onChange={setSearchQuery} />
 
-      {/* 테이블 헤더 */}
-      <div className="grid grid-cols-3 items-center gap-20 pl-36 pr-32">
+      {/* 테이블 헤더 - 모바일에서 숨김 */}
+      <div className="mobile:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
         <span className="Text-gray-light text-16 font-normal">이름</span>
         <span className="Text-gray-light text-center text-16 font-normal">
           초대자
@@ -133,7 +133,7 @@ export default function InvitedDashboardTable() {
         {searchQuery.trim() && filteredInvitations.length === 0 ? (
           // 검색 결과 없음
           <div className="flex flex-col items-center justify-center py-60">
-            <p className="Text-gray-light text-16 font-medium">
+            <p className="Text-gray-light mobile:text-12 text-16 font-medium">
               `{searchQuery}`에 대한 검색 결과가 없습니다.
             </p>
           </div>
@@ -155,7 +155,7 @@ export default function InvitedDashboardTable() {
       {/* 더 이상 데이터가 없을 때 */}
       {!hasNextPage && allInvitations.length > 0 && (
         <div className="py-20 text-center">
-          <p className="Text-gray-light text-14 font-normal">
+          <p className="Text-gray-light mobile:text-10 text-14 font-normal">
             모든 초대를 확인했습니다.
           </p>
         </div>
diff --git a/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
index 805d188..b1e8653 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
@@ -14,7 +14,7 @@ export default function AddDashboardCard() {
   return (
     <button
       onClick={handleClick}
-      className="BG-white Border-btn hover:BG-gray group flex h-70 w-332 items-center justify-center gap-12 rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
+      className="BG-white Border-btn hover:BG-gray tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group flex h-70 w-332 items-center justify-center gap-12 rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
     >
       <span className="Text-black text-16 font-medium">새로운 대시보드</span>
 
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
index 0d3b984..1fa39d1 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
@@ -19,7 +19,7 @@ export default function MyDashboardCard({ dashboard }: MyDashboardCardProps) {
   return (
     <div
       onClick={handleClick}
-      className="BG-white Border-btn hover:BG-gray group h-70 w-332 cursor-pointer rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
+      className="BG-white Border-btn hover:BG-gray tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group h-70 w-332 cursor-pointer rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-12">
@@ -30,7 +30,7 @@ export default function MyDashboardCard({ dashboard }: MyDashboardCardProps) {
           />
 
           {/* 대시보드 제목 */}
-          <h3 className="Text-black max-w-200 truncate text-16 font-medium">
+          <h3 className="Text-black tablet:max-w-140 mobile:max-w-160 max-w-200 truncate text-16 font-medium">
             {dashboard.title}
           </h3>
 
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
index 72d167a..42e87b0 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
@@ -22,7 +22,7 @@ export default function MyDashboardGrid() {
   if (isLoading) {
     return (
       <section className="mb-40">
-        <div className="flex max-w-[1020px] flex-wrap gap-12">
+        <div className="tablet:max-w-[520px] mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
           {/* 새 대시보드 추가 버튼은 항상 표시 */}
           <AddDashboardCard />
 
@@ -30,7 +30,7 @@ export default function MyDashboardGrid() {
           {Array.from({ length: 5 }).map((_, index) => (
             <div
               key={index}
-              className="h-70 w-332 animate-pulse rounded-8 bg-gray-200"
+              className="tablet:h-68 tablet:w-247 mobile:h-58 mobile:w-260 h-70 w-332 animate-pulse rounded-8 bg-gray-200"
             />
           ))}
         </div>
@@ -61,7 +61,7 @@ export default function MyDashboardGrid() {
 
   return (
     <section className="mb-40">
-      <div className="flex max-w-[1020px] flex-wrap gap-12">
+      <div className="tablet:max-w-[520px] mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
         {/* 새 대시보드 추가 카드는 항상 첫 번째 고정 */}
         <AddDashboardCard />
 
@@ -76,7 +76,7 @@ export default function MyDashboardGrid() {
 
       {/* 페이지네이션 */}
       {totalPages > 1 && (
-        <div className="mt-24 flex max-w-[1020px] items-center justify-end gap-12">
+        <div className="tablet:max-w-[520px] mobile:max-w-[260px] mt-24 flex max-w-[1020px] items-center justify-end gap-12">
           <span className="Text-black text-14 font-normal">
             {currentPage} 페이지 중 {totalPages}
           </span>
diff --git a/src/app/mydashboard/page.tsx b/src/app/mydashboard/page.tsx
index b572f56..415f6b8 100644
--- a/src/app/mydashboard/page.tsx
+++ b/src/app/mydashboard/page.tsx
@@ -13,17 +13,17 @@ export default function MyDashboardPage() {
       <Sidebar />
 
       {/* 메인 */}
-      <div className="BG-gray ml-300 flex-1">
+      <div className="BG-gray tablet:ml-160 mobile:ml-67 ml-300 flex-1">
         {/* 헤더 */}
         <Header />
 
         {/* 페이지 콘텐츠 */}
-        <main className="p-40">
+        <main className="tablet:p-24 mobile:p-16 p-40">
           <MyDashboardGrid />
 
           {/* 초대받은 대시보드 섹션 */}
-          <section className="BG-white w-1022 rounded-16 p-40 pb-120 pt-24">
-            <h2 className="Text-black mb-64 text-24 font-bold">
+          <section className="BG-white tablet:w-504 mobile:w-260 tablet:p-24 mobile:p-16 w-1022 rounded-16 p-40 pb-120 pt-24">
+            <h2 className="Text-black tablet:text-20 mobile:text-14 mb-64 text-24 font-bold">
               초대받은 대시보드
             </h2>
 

From 73e2898d583fd0b2a5aab83ddb91a2a811035cc7 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 06:19:38 +0900
Subject: [PATCH 4/9] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=ED=98=B8=EB=B2=84=20=EC=83=89=EC=83=81?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/shared/components/common/sidebar/DashboardItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/components/common/sidebar/DashboardItem.tsx b/src/app/shared/components/common/sidebar/DashboardItem.tsx
index 16f5d9f..42a788c 100644
--- a/src/app/shared/components/common/sidebar/DashboardItem.tsx
+++ b/src/app/shared/components/common/sidebar/DashboardItem.tsx
@@ -18,7 +18,7 @@ export default function DashboardItem({
       type="button"
       aria-current={isActive ? 'page' : undefined}
       onClick={handleClick}
-      className={`Text-black tablet:gap-8 tablet:px-8 tablet:py-6 tablet:text-16 mobile:justify-center mobile:px-4 mobile:py-6 flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors hover:bg-gray-50 ${
+      className={`Text-black tablet:gap-8 tablet:px-8 tablet:py-6 tablet:text-16 mobile:justify-center mobile:px-4 mobile:py-6 BG-Input-hovered flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors ${
         isActive ? 'BG-currentDashboard font-medium' : ''
       }`}
     >

From 49ce8b2cba707637c7be838879756abf342ff543 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 06:23:01 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EB=82=B4=20?=
 =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=98=B8=EB=B2=84=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx | 2 +-
 .../mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
index b1e8653..ed1e7cc 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
@@ -14,7 +14,7 @@ export default function AddDashboardCard() {
   return (
     <button
       onClick={handleClick}
-      className="BG-white Border-btn hover:BG-gray tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group flex h-70 w-332 items-center justify-center gap-12 rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
+      className="BG-white Border-btn BG-Input-hovered tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group flex h-70 w-332 items-center justify-center gap-12 rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
     >
       <span className="Text-black text-16 font-medium">새로운 대시보드</span>
 
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
index 1fa39d1..dda745c 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
@@ -19,7 +19,7 @@ export default function MyDashboardCard({ dashboard }: MyDashboardCardProps) {
   return (
     <div
       onClick={handleClick}
-      className="BG-white Border-btn hover:BG-gray tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group h-70 w-332 cursor-pointer rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
+      className="BG-white Border-btn BG-Input-hovered tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group h-70 w-332 cursor-pointer rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-12">

From 43bff6ff3a6e4b1c9c8cd31fe562461a43d64045 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 06:50:43 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=82=B4=20=EB=8C=80?=
 =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EB=B0=98=EC=9D=91=ED=98=95(2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InvitedDashboardRow.tsx                   | 96 +++++++++++++------
 .../InvitedDashboardTable.tsx                 |  6 +-
 .../InvitedDashboardTable/SearchInput.tsx     |  4 +-
 .../MyDashboardGrid/MyDashboardCard.tsx       |  2 +-
 .../MyDashboardGrid/MyDashboardGrid.tsx       |  4 +-
 src/app/mydashboard/page.tsx                  |  2 +-
 6 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
index 9a75959..97d8173 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
@@ -52,34 +52,74 @@ export default function InvitedDashboardRow({
   const handleReject = () => handleInvitationResponse(false)
 
   return (
-    <div className="grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32">
-      {/* 대시보드 이름 */}
-      <span className="Text-black text-16">
-        {invitation.dashboard.title || '제목 없음'}
-      </span>
-
-      {/* 초대자 */}
-      <span className="Text-black text-center text-16">
-        {invitation.inviter.nickname || invitation.inviter.email}
-      </span>
-
-      {/* 수락/거절 버튼들 */}
-      <div className="flex items-center justify-center gap-10">
-        <button
-          onClick={handleAccept}
-          disabled={isProcessing}
-          className="BG-blue flex h-32 w-70 items-center justify-center rounded-8 text-14 font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {isProcessing ? '처리 중' : '수락'}
-        </button>
-        <button
-          onClick={handleReject}
-          disabled={isProcessing}
-          className="BG-white Border-blue Text-blue flex h-32 w-70 items-center justify-center rounded-8 border text-14 font-medium transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {isProcessing ? '처리 중' : '거절'}
-        </button>
+    <>
+      {/* 데스크톱/태블릿 테이블 레이아웃 */}
+      <div className="mobile:hidden grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32">
+        {/* 대시보드 이름 */}
+        <span className="Text-black text-16">
+          {invitation.dashboard.title || '제목 없음'}
+        </span>
+
+        {/* 초대자 */}
+        <span className="Text-black text-center text-16">
+          {invitation.inviter.nickname || invitation.inviter.email}
+        </span>
+
+        {/* 수락/거절 버튼들 */}
+        <div className="flex items-center justify-center gap-10">
+          <button
+            onClick={handleAccept}
+            disabled={isProcessing}
+            className="BG-blue tablet:w-72 tablet:h-30 tablet:text-12 flex h-32 w-70 items-center justify-center rounded-8 text-14 font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? '처리 중' : '수락'}
+          </button>
+          <button
+            onClick={handleReject}
+            disabled={isProcessing}
+            className="BG-white Border-blue Text-blue tablet:w-72 tablet:h-30 tablet:text-12 flex h-32 w-70 items-center justify-center rounded-8 border text-14 font-medium transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? '처리 중' : '거절'}
+          </button>
+        </div>
+      </div>
+
+      {/* 모바일 카드 레이아웃 */}
+      <div className="mobile:block mb-12 hidden rounded-8 p-16">
+        {/* 이름 */}
+        <div className="mb-8 flex items-center gap-8">
+          <span className="Text-gray-light text-14 font-medium">이름</span>
+          <span className="Text-black text-14">
+            {invitation.dashboard.title || '제목 없음'}
+          </span>
+        </div>
+
+        {/* 초대자 */}
+        <div className="mb-12 flex items-center gap-8">
+          <span className="Text-gray-light text-14 font-medium">초대자</span>
+          <span className="Text-black text-14">
+            {invitation.inviter.nickname || invitation.inviter.email}
+          </span>
+        </div>
+
+        {/* 버튼들 */}
+        <div className="flex gap-8">
+          <button
+            onClick={handleAccept}
+            disabled={isProcessing}
+            className="BG-blue flex h-32 w-109 items-center justify-center rounded-8 text-12 font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? '처리 중' : '수락'}
+          </button>
+          <button
+            onClick={handleReject}
+            disabled={isProcessing}
+            className="BG-white Border-blue Text-blue flex h-32 w-109 items-center justify-center rounded-8 border text-12 font-medium transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isProcessing ? '처리 중' : '거절'}
+          </button>
+        </div>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
index 82bd039..1638477 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
@@ -50,7 +50,7 @@ export default function InvitedDashboardTable() {
     return (
       <div className="space-y-24">
         {/* 검색창 스켈레톤 */}
-        <div className="h-40 animate-pulse rounded-8 bg-gray-200" />
+        <div className="mobile:h-36 h-40 animate-pulse rounded-8 bg-gray-200" />
 
         {/* 테이블 헤더 */}
         <div className="mobile:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
@@ -67,7 +67,7 @@ export default function InvitedDashboardTable() {
         {Array.from({ length: 3 }).map((_, index) => (
           <div
             key={index}
-            className="mobile:flex mobile:flex-col mobile:gap-8 mobile:p-16 mobile:rounded-8 mobile:bg-gray-50 grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32"
+            className="mobile:rounded-8 mobile:bg-gray-50 mobile:p-16 mobile:mb-12 grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32"
           >
             <div className="h-20 animate-pulse rounded-4 bg-gray-200" />
             <div className="h-20 animate-pulse rounded-4 bg-gray-200" />
@@ -129,7 +129,7 @@ export default function InvitedDashboardTable() {
       </div>
 
       {/* 테이블 바디 */}
-      <div className="space-y-0">
+      <div className="mobile:space-y-0">
         {searchQuery.trim() && filteredInvitations.length === 0 ? (
           // 검색 결과 없음
           <div className="flex flex-col items-center justify-center py-60">
diff --git a/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx b/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
index fd88d38..57027dc 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
@@ -14,13 +14,13 @@ export default function SearchInput({
   placeholder = '검색',
 }: SearchInputProps) {
   return (
-    <div className="relative h-40 w-960">
+    <div className="mobile:h-36 relative h-40 w-full">
       <input
         type="text"
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="Border-btn h-40 w-full rounded-8 border pl-40 pr-12 text-14 placeholder-gray-400 focus:border-blue-500 focus:outline-none"
+        className="Border-btn mobile:h-36 mobile:text-14 mobile:placeholder:text-14 h-40 w-full rounded-8 border pl-40 pr-12 text-14 placeholder-gray-400 focus:border-blue-500 focus:outline-none"
       />
       <div className="absolute left-16 top-1/2 -translate-y-1/2 transform">
         <Image
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
index dda745c..30b3012 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
@@ -30,7 +30,7 @@ export default function MyDashboardCard({ dashboard }: MyDashboardCardProps) {
           />
 
           {/* 대시보드 제목 */}
-          <h3 className="Text-black tablet:max-w-140 mobile:max-w-160 max-w-200 truncate text-16 font-medium">
+          <h3 className="Text-black tablet:max-w-140 mobile:max-w-160 mobile:text-14 max-w-200 truncate text-16 font-medium">
             {dashboard.title}
           </h3>
 
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
index 42e87b0..d6c9ad0 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
@@ -22,7 +22,7 @@ export default function MyDashboardGrid() {
   if (isLoading) {
     return (
       <section className="mb-40">
-        <div className="tablet:max-w-[520px] mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
+        <div className="tablet:grid tablet:grid-cols-2 tablet:gap-12 tablet:max-w-[520px] mobile:flex mobile:flex-col mobile:gap-12 mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
           {/* 새 대시보드 추가 버튼은 항상 표시 */}
           <AddDashboardCard />
 
@@ -61,7 +61,7 @@ export default function MyDashboardGrid() {
 
   return (
     <section className="mb-40">
-      <div className="tablet:max-w-[520px] mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
+      <div className="tablet:grid tablet:grid-cols-2 tablet:gap-12 tablet:max-w-[520px] mobile:flex mobile:flex-col mobile:gap-12 mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
         {/* 새 대시보드 추가 카드는 항상 첫 번째 고정 */}
         <AddDashboardCard />
 
diff --git a/src/app/mydashboard/page.tsx b/src/app/mydashboard/page.tsx
index 415f6b8..0311ade 100644
--- a/src/app/mydashboard/page.tsx
+++ b/src/app/mydashboard/page.tsx
@@ -23,7 +23,7 @@ export default function MyDashboardPage() {
 
           {/* 초대받은 대시보드 섹션 */}
           <section className="BG-white tablet:w-504 mobile:w-260 tablet:p-24 mobile:p-16 w-1022 rounded-16 p-40 pb-120 pt-24">
-            <h2 className="Text-black tablet:text-20 mobile:text-14 mb-64 text-24 font-bold">
+            <h2 className="Text-black tablet:text-20 mobile:text-20 mb-64 text-24 font-bold">
               초대받은 대시보드
             </h2>
 

From 5df302ca6b12cbc320508f733069826fdfe32167 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 06:57:58 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EA=B8=B4=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EB=86=92=EC=9D=B4=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/shared/components/common/sidebar/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx
index 6541066..6d2dd8e 100644
--- a/src/app/shared/components/common/sidebar/Sidebar.tsx
+++ b/src/app/shared/components/common/sidebar/Sidebar.tsx
@@ -52,7 +52,7 @@ export default function Sidebar(): JSX.Element {
     error instanceof Error ? error.message : '대시보드 목록 불러오기 실패'
 
   return (
-    <aside className="BG-white Border-section tablet:w-160 mobile:w-67 fixed left-0 top-0 flex h-screen w-300 flex-col">
+    <aside className="BG-white Border-section tablet:w-160 mobile:w-67 fixed left-0 top-0 flex h-full w-300 flex-col">
       {/* 로고 섹션 */}
       <div className="tablet:px-12 mobile:px-8 mobile:justify-center flex h-70 flex-shrink-0 items-center px-20">
         <Link href="/" className="flex items-center gap-8">

From 1cdaaa20ca0f1b509cb09cf443324a533ccfaec8 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 07:15:09 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=8C=80=EC=8B=9C?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=83=9D=EC=84=B1=20=ED=9B=84=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=9E=90=EB=8F=99=20=EC=97=85?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/modal/CreateDashboardModal.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/app/shared/components/common/modal/CreateDashboardModal.tsx b/src/app/shared/components/common/modal/CreateDashboardModal.tsx
index e80c28a..7b6ba7a 100644
--- a/src/app/shared/components/common/modal/CreateDashboardModal.tsx
+++ b/src/app/shared/components/common/modal/CreateDashboardModal.tsx
@@ -3,6 +3,7 @@
 import { DASHBOARD_COLORS } from '@constants/colors'
 import authHttpClient from '@lib/axios'
 import { useModalStore } from '@store/useModalStore'
+import { useQueryClient } from '@tanstack/react-query'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
@@ -11,6 +12,7 @@ import { CreateDashboardRequest } from '@/types/dashboard'
 
 export default function CreateDashboardModal() {
   const router = useRouter()
+  const queryClient = useQueryClient()
   const { modalType, closeModal } = useModalStore()
   const isModalOpen = modalType === 'createDashboard'
 
@@ -52,6 +54,16 @@ export default function CreateDashboardModal() {
 
       const data = response.data
 
+      // 사이드바 무한스크롤 쿼리 무효화 - 새로운 대시보드가 바로 보이도록
+      queryClient.invalidateQueries({
+        queryKey: ['dashboards', 'infinite'],
+      })
+
+      // 내 대시보드 페이지 쿼리도 무효화
+      queryClient.invalidateQueries({
+        queryKey: ['myDashboards'],
+      })
+
       // 성공 시 대시보드 상세 페이지로 이동
       router.push(`/dashboard/${data.id}`)
       closeModal()

From c45744e08f2c20c42c86ea8262ee770855fdb535 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sun, 22 Jun 2025 07:25:06 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EC=BB=AC=EB=9F=BC?=
 =?UTF-8?q?=20=ED=8E=B8=EC=A7=91=20=EB=AA=A8=EB=8B=AC=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=ED=81=AC=EA=B8=B0(PC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/features/dashboard_Id/components/EditColumnModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/features/dashboard_Id/components/EditColumnModal.tsx b/src/app/features/dashboard_Id/components/EditColumnModal.tsx
index 02bca26..9c8c98d 100644
--- a/src/app/features/dashboard_Id/components/EditColumnModal.tsx
+++ b/src/app/features/dashboard_Id/components/EditColumnModal.tsx
@@ -158,7 +158,7 @@ export default function EditColumnModal() {
             <button
               type="button"
               onClick={handleDeleteClick}
-              className="BG-white Border-btn Text-gray h-54 w-144 rounded-8 px-16 py-10 text-16 font-medium"
+              className="BG-white Border-btn Text-gray h-54 w-256 rounded-8 px-16 py-10 text-16 font-medium"
             >
               삭제
             </button>
@@ -167,7 +167,7 @@ export default function EditColumnModal() {
             <button
               type="submit"
               disabled={isUpdateDisabled}
-              className={`BG-violet h-54 w-144 rounded-8 px-16 py-10 text-16 font-medium text-white transition-opacity ${
+              className={`BG-violet h-54 w-256 rounded-8 px-16 py-10 text-16 font-medium text-white transition-opacity ${
                 isUpdateDisabled
                   ? 'cursor-not-allowed opacity-50'
                   : 'hover:opacity-90'