♻️ refactor: 반응형 레이아웃 일관성 개선(브레이크포인트 추가)

src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx

@@ -54,7 +54,7 @@ export default function InvitedDashboardRow({
   return (
     <>
       {/* 데스크톱/태블릿 테이블 레이아웃 */}
-      <div className="mobile:hidden grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32">
+      <div className="mobile-wide: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 || '제목 없음'}
@@ -70,22 +70,22 @@ export default function InvitedDashboardRow({
           <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"
+            className="BG-blue tablet-wide:w-72 tablet-wide:h-30 tablet-wide: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"
+            className="BG-white Border-blue Text-blue tablet-wide:w-72 tablet-wide:h-30 tablet-wide: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="mobile-wide: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>

src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx

@@ -50,10 +50,10 @@ export default function InvitedDashboardTable() {
     return (
       <div className="space-y-24">
         {/* 검색창 스켈레톤 */}
-        <div className="mobile:h-36 h-40 animate-pulse rounded-8 bg-gray-200" />
+        <div className="mobile-wide: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">
+        <div className="mobile-wide: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="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"
+            className="mobile-wide:rounded-8 mobile-wide:bg-gray-50 mobile-wide:p-16 mobile-wide: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" />
@@ -82,10 +82,10 @@ export default function InvitedDashboardTable() {
   if (isError) {
     return (
       <div className="flex flex-col items-center justify-center py-60">
-        <p className="mobile:text-12 text-16 font-medium text-red-500">
+        <p className="mobile-wide:text-12 text-16 font-medium text-red-500">
           초대받은 대시보드를 불러오는 중 오류가 발생했습니다.
         </p>
-        <p className="mobile:text-10 mt-8 text-14 text-gray-500">
+        <p className="mobile-wide:text-10 mt-8 text-14 text-gray-500">
           {error?.message || '다시 시도해주세요.'}
         </p>
       </div>
@@ -96,15 +96,15 @@ export default function InvitedDashboardTable() {
   if (allInvitations.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-60">
-        <div className="mobile:size-60 relative mb-24 h-100 w-100">
+        <div className="mobile-wide:size-60 relative mb-24 h-100 w-100">
           <Image
             src="/images/unsubscribe.svg"
             alt="초대받은 대시보드 없음"
             fill
             className="object-contain"
           />
         </div>
-        <p className="Text-gray-light mobile:text-12 text-16 font-medium">
+        <p className="Text-gray-light mobile-wide:text-12 text-16 font-medium">
           아직 초대받은 대시보드가 없어요.
         </p>
       </div>
@@ -118,7 +118,7 @@ export default function InvitedDashboardTable() {
       <SearchInput value={searchQuery} onChange={setSearchQuery} />
 
       {/* 테이블 헤더 - 모바일에서 숨김 */}
-      <div className="mobile:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
+      <div className="mobile-wide: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">
           초대자
@@ -129,11 +129,11 @@ export default function InvitedDashboardTable() {
       </div>
 
       {/* 테이블 바디 */}
-      <div className="mobile:space-y-0">
+      <div className="mobile-wide:space-y-0">
         {searchQuery.trim() && filteredInvitations.length === 0 ? (
           // 검색 결과 없음
           <div className="flex flex-col items-center justify-center py-60">
-            <p className="Text-gray-light mobile:text-12 text-16 font-medium">
+            <p className="Text-gray-light mobile-wide: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 mobile:text-10 text-14 font-normal">
+          <p className="Text-gray-light mobile-wide:text-10 text-14 font-normal">
             모든 초대를 확인했습니다.
           </p>
         </div>

src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx

@@ -14,13 +14,13 @@ export default function SearchInput({
   placeholder = '검색',
 }: SearchInputProps) {
   return (
-    <div className="mobile:h-36 relative h-40 w-full">
+    <div className="mobile-wide:h-36 relative h-40 w-full">
       <input
         type="text"
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        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"
+        className="Border-btn mobile-wide:h-36 mobile-wide:text-14 mobile-wide: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

src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx

@@ -14,7 +14,7 @@ export default function AddDashboardCard() {
   return (
     <button
       onClick={handleClick}
-      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"
+      className="BG-white Border-btn BG-Input-hovered tablet-wide:w-247 tablet-wide:h-68 mobile-wide:w-260 mobile-wide: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>
 

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 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"
+      className="BG-white Border-btn BG-Input-hovered tablet-wide:w-247 tablet-wide:h-68 mobile-wide:w-260 mobile-wide: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 tablet:max-w-140 mobile:max-w-160 mobile:text-14 max-w-200 truncate text-16 font-medium">
+          <h3 className="Text-black tablet-wide:max-w-140 mobile-wide:max-w-160 mobile-wide:text-14 max-w-200 truncate text-16 font-medium">
             {dashboard.title}
           </h3>
 

src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx

@@ -22,15 +22,15 @@ export default function MyDashboardGrid() {
   if (isLoading) {
     return (
       <section className="mb-40">
-        <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">
+        <div className="tablet-wide:grid tablet-wide:grid-cols-2 tablet-wide:gap-12 tablet-wide:max-w-[520px] mobile-wide:flex mobile-wide:flex-col mobile-wide:gap-12 mobile-wide:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
           {/* 새 대시보드 추가 버튼은 항상 표시 */}
           <AddDashboardCard />
 
           {/* 로딩 스켈레톤*/}
           {Array.from({ length: 5 }).map((_, index) => (
             <div
               key={index}
-              className="tablet:h-68 tablet:w-247 mobile:h-58 mobile:w-260 h-70 w-332 animate-pulse rounded-8 bg-gray-200"
+              className="tablet-wide:h-68 tablet-wide:w-247 mobile-wide:h-58 mobile-wide: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="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">
+      <div className="tablet-wide:grid tablet-wide:grid-cols-2 tablet-wide:gap-12 tablet-wide:max-w-[520px] mobile-wide:flex mobile-wide:flex-col mobile-wide:gap-12 mobile-wide:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
         {/* 새 대시보드 추가 카드는 항상 첫 번째 고정 */}
         <AddDashboardCard />
 
@@ -76,7 +76,7 @@ export default function MyDashboardGrid() {
 
       {/* 페이지네이션 */}
       {totalPages > 1 && (
-        <div className="tablet:max-w-[520px] mobile:max-w-[260px] mt-24 flex max-w-[1020px] items-center justify-end gap-12">
+        <div className="tablet-wide:max-w-[520px] mobile-wide: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>

src/app/mydashboard/page.tsx

@@ -13,17 +13,17 @@ export default function MyDashboardPage() {
       <Sidebar />
 
       {/* 메인 */}
-      <div className="BG-gray ml-300 flex-1 mobile:ml-67 tablet:ml-160">
+      <div className="BG-gray mobile-wide:ml-67 tablet-wide:ml-160 ml-300 flex-1">
         {/* 헤더 */}
         <Header />
 
         {/* 페이지 콘텐츠 */}
-        <main className="p-40 mobile:p-16 tablet:p-24">
+        <main className="mobile-wide:p-16 tablet-wide:p-24 p-40">
           <MyDashboardGrid />
 
           {/* 초대받은 대시보드 섹션 */}
-          <section className="BG-white w-1022 rounded-16 p-40 pb-120 pt-24 mobile:w-260 mobile:p-16 tablet:w-504 tablet:p-24">
-            <h2 className="Text-black mb-64 text-24 font-bold mobile:text-20 tablet:text-20">
+          <section className="BG-white mobile-wide:w-260 mobile-wide:p-16 tablet-wide:w-504 tablet-wide:p-24 w-1022 rounded-16 p-40 pb-120 pt-24">
+            <h2 className="Text-black mobile-wide:text-20 tablet-wide:text-20 mb-64 text-24 font-bold">
               초대받은 대시보드
             </h2>
 

src/app/shared/components/common/sidebar/DashboardItem.tsx

@@ -18,22 +18,24 @@ export default function DashboardItem({
       type="button"
       aria-current={isActive ? 'page' : undefined}
       onClick={handleClick}
-      className={`Text-black BG-Input-hovered flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors mobile:justify-center mobile:px-4 mobile:py-6 tablet:gap-8 tablet:px-8 tablet:py-6 tablet:text-16 ${
+      className={`Text-black BG-Input-hovered mobile-wide:justify-center mobile-wide:px-4 mobile-wide:py-6 tablet-wide:gap-8 tablet-wide:px-8 tablet-wide:py-6 tablet-wide:text-16 flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors ${
         isActive ? 'BG-currentDashboard font-medium' : ''
       }`}
     >
       {/* 컬러 도트 */}
       <div
-        className="size-8 flex-shrink-0 rounded-full mobile:size-12 tablet:size-6"
+        className="mobile-wide:size-12 tablet-wide:size-6 size-8 flex-shrink-0 rounded-full"
         style={{ backgroundColor: dashboard.color }}
       />
 
       {/* 대시보드 제목 */}
-      <span className="flex-1 truncate mobile:hidden">{dashboard.title}</span>
+      <span className="mobile-wide:hidden flex-1 truncate">
+        {dashboard.title}
+      </span>
 
       {/* 내가 만든 대시보드에 왕관 아이콘 */}
       {dashboard.createdByMe && (
-        <div className="relative h-12 w-14 flex-shrink-0 mobile:hidden tablet:h-10 tablet:w-12">
+        <div className="mobile-wide:hidden tablet-wide:h-10 tablet-wide:w-12 relative h-12 w-14 flex-shrink-0">
           <Image
             src="/images/crown.png"
             alt="내가 만든 대시보드"