From 9e52d6f017941d346b7e2dba61f33a52de2a157e Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 15:07:21 +0900
Subject: [PATCH 01/57] =?UTF-8?q?style:=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(grid-cols-2=EB=A1=9C=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=A0=84=EC=B2=B4=EC=A0=81=EC=9D=B8=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=94=94=ED=85=8C=EC=9D=BC=20=EA=B9=94?=
 =?UTF-8?q?=EB=81=8C=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/workspace/WorkspaceCard.tsx    | 102 +++++++++++-------
 .../workspace/WorkspaceListLoading.tsx        |  29 ++---
 src/pages/workspace/Workspace.tsx             |   4 +-
 3 files changed, 75 insertions(+), 60 deletions(-)

diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index 75968f34..88304f4e 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -4,7 +4,8 @@ import { twMerge } from "tailwind-merge";
 import type { TWorkspace } from "@/types/workspace/workspace";
 import { ROLE_LABEL_MAP } from "@/constants/workspaceRole";
 
-import BuildingIcon from "@/assets/icon/common/building.svg?react";
+import Badge from "@/components/common/badge/Badge";
+
 import { getImageUrl } from "@/lib/getImageUrl";
 
 type TProps = {
@@ -22,60 +23,81 @@ function WorkspaceCard({ workspace: w, isSelected = false, onClick }: TProps) {
 
   const imageSrc = w.logoUrl ? getImageUrl(w.logoUrl) : null;
   const showPlaceholder = !imageSrc || imageError;
+  const initial = (w.name.trim()[0] ?? "?").toUpperCase();
 
   return (
-    <li className="block w-full">
+    <li className="block h-full">
       <button
         type="button"
         className={twMerge(
-          "flex w-full items-center justify-between rounded-2xl border bg-surface-100 px-6 py-5 text-left shadow-Soft tablet:px-4 tablet:py-4 focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none",
+          "relative flex h-full min-h-52 w-full flex-col rounded-2xl border-[1.5px] bg-surface-100 p-6 text-left shadow-Soft",
+          "focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none",
+          "tablet:min-h-48 tablet:p-5",
           onClick &&
-            "cursor-pointer transition-all duration-300 ease-out hover:-translate-y-1 hover:border-primary-400/30 hover:bg-primary-100/50 active:scale-[0.98]",
+            "cursor-pointer transition-all duration-300 ease-out hover:-translate-y-1 hover:border-primary-300 hover:bg-primary-100/35 active:scale-[0.98]",
           isSelected
-            ? "border-primary-500/40 bg-primary-100/50"
-            : "border-surface-400 focus-within:border-primary-400/50",
+            ? "border-primary-400 bg-primary-100/55 ring-2 ring-primary-400/30"
+            : "border-surface-400",
         )}
         onClick={onClick}
       >
-        <div className="flex items-center gap-5 min-w-0 tablet:gap-3">
-          <div className="h-24 w-24 shrink-0 rounded-lg bg-surface-200 tablet:h-16 tablet:w-16">
-            {showPlaceholder ? (
-              <div className="w-full h-full flex items-center justify-center">
-                <BuildingIcon className="w-8 h-8 text-text-placeholder" />
-              </div>
-            ) : (
-              <img
-                src={imageSrc}
-                alt={`${w.name} 로고`}
-                className="w-full h-full object-cover rounded-lg pointer-events-none"
-                onError={() => {
-                  setImageError(true);
-                }}
-              />
+        {isSelected && (
+          <span
+            role="status"
+            className="absolute top-5 right-5 shrink-0 rounded-full bg-primary-500/85 px-2.5 py-1 font-caption text-surface-100"
+          >
+            현재 기준
+          </span>
+        )}
+
+        <div
+          className={twMerge(
+            "mb-5 flex h-18 w-18 items-center justify-center overflow-hidden rounded-2xl",
+            "tablet:mb-4 tablet:h-14 tablet:w-14",
+            showPlaceholder
+              ? "bg-primary-100 text-primary-500"
+              : "bg-surface-200",
+          )}
+        >
+          {showPlaceholder ? (
+            <span className="font-heading3">{initial}</span>
+          ) : (
+            <img
+              src={imageSrc}
+              alt={`${w.name} 로고`}
+              className="h-full w-full object-cover pointer-events-none"
+              onError={() => setImageError(true)}
+            />
+          )}
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col pr-12">
+          <div
+            className={twMerge(
+              "truncate font-heading4",
+              isSelected ? "text-surface-500" : "text-text-title",
             )}
+          >
+            {w.name}
           </div>
 
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <div className="truncate font-heading4 text-text-title">
-                {w.name}
-              </div>
-              {isSelected && (
-                <span
-                  role="status"
-                  className="shrink-0 rounded-full bg-primary-500/12 px-2 py-1 font-caption text-primary-500"
-                >
-                  현재 대시보드 기준
-                </span>
-              )}
-            </div>
+          {w.description ? (
+            <p className="mt-1.5 line-clamp-2 font-body2 text-text-muted">
+              {w.description}
+            </p>
+          ) : (
+            <p className="mt-1.5 font-body2 text-text-placeholder">
+              설명이 없습니다
+            </p>
+          )}
 
-            <div className="mt-1 truncate font-body2 text-text-title">
-              {w.description ?? ""}
-            </div>
-            <div className="mt-2 font-body1 text-text-muted">
+          <div className="mt-auto pt-5">
+            <Badge
+              variant={w.myRole === "ADMIN" ? "infoBlue" : "surface"}
+              className="h-6 px-2"
+            >
               {ROLE_LABEL_MAP[w.myRole]}
-            </div>
+            </Badge>
           </div>
         </div>
       </button>
diff --git a/src/components/workspace/WorkspaceListLoading.tsx b/src/components/workspace/WorkspaceListLoading.tsx
index 55beb01f..15fc5404 100644
--- a/src/components/workspace/WorkspaceListLoading.tsx
+++ b/src/components/workspace/WorkspaceListLoading.tsx
@@ -2,18 +2,15 @@ import { Skeleton } from "@/components/common/skeleton/Skeleton";
 
 function WorkspaceCardSkeleton() {
   return (
-    <>
-      <li className="flex items-center justify-between rounded-2xl border border-surface-400 bg-surface-100 px-6 py-5 shadow-Soft tablet:px-4 tablet:py-4">
-        <div className="flex items-center gap-5 min-w-0 tablet:gap-3">
-          <Skeleton className="w-24 h-24 shrink-0 rounded-lg tablet:h-18 tablet:w-18" />
-          <div className="flex flex-col gap-2 min-w-0">
-            <Skeleton className="h-5 w-40" />
-            <Skeleton className="h-4 w-64" />
-            <Skeleton className="h-4 w-16" />
-          </div>
-        </div>
-      </li>
-    </>
+    <li className="flex h-full min-h-52 flex-col rounded-2xl border border-surface-400 bg-surface-100 p-6 shadow-Soft tablet:min-h-48 tablet:p-5">
+      <Skeleton className="mb-5 h-16 w-16 rounded-2xl tablet:mb-4 tablet:h-14 tablet:w-14" />
+      <Skeleton className="h-5 w-36" />
+      <Skeleton className="mt-2 h-4 w-full" />
+      <Skeleton className="mt-1.5 h-4 w-4/5" />
+      <div className="mt-auto pt-5">
+        <Skeleton className="h-6 w-14 rounded-full" />
+      </div>
+    </li>
   );
 }
 
@@ -24,16 +21,12 @@ export default function WorkspaceListLoading() {
       aria-label="워크스페이스 목록 불러오는 중"
       className="w-full flex flex-col gap-8"
     >
-      <div className="space-y-3">
-        <Skeleton className="h-8 w-50" />
-        <Skeleton className="h-5 w-60 tablet:w-56" />
-      </div>
       <div className="flex items-center justify-between gap-4 tablet:flex-col tablet:items-stretch">
         <Skeleton className="h-15 w-full rounded-2xl" />
         <Skeleton className="h-15 w-56 rounded-2xl tablet:w-full" />
       </div>
-      <ul className="space-y-5">
-        {Array.from({ length: 7 }).map((_, i) => (
+      <ul className="grid grid-cols-2 gap-5 tablet:grid-cols-1">
+        {Array.from({ length: 6 }).map((_, i) => (
           <WorkspaceCardSkeleton key={i} />
         ))}
       </ul>
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index a6f485f1..3d623af1 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -168,13 +168,13 @@ export default function WorkspacePage() {
     }
     if (sortedWorkspaces.length === 0) {
       return (
-        <ul className="space-y-5">
+        <ul className="grid grid-cols-2 gap-5 rounded-2xl bg-surface-200/80 p-4 tablet:grid-cols-1">
           <WorkspaceEmptyState message="워크스페이스가 없습니다" />
         </ul>
       );
     }
     return (
-      <ul className="space-y-5">
+      <ul className="grid grid-cols-2 gap-5 tablet:grid-cols-1">
         {sortedWorkspaces.map((w) => (
           <WorkspaceCard
             key={String(w.orgId)}

From 47a5b5e6b271d1daeba335c47dcc7a3712b16f02 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 15:27:29 +0900
Subject: [PATCH 02/57] =?UTF-8?q?style:=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EB=AA=A9=EB=A1=9D=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=94=94=ED=85=8C=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/workspace/WorkspaceCard.tsx    | 53 ++++++++++++-------
 .../workspace/WorkspaceListLoading.tsx        | 53 ++++++++++++++-----
 src/pages/workspace/Workspace.tsx             |  2 +-
 3 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index 88304f4e..3d539410 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -6,6 +6,7 @@ import { ROLE_LABEL_MAP } from "@/constants/workspaceRole";
 
 import Badge from "@/components/common/badge/Badge";
 
+import ChevronRightIcon from "@/assets/icon/chevron/chevron-right.svg?react";
 import { getImageUrl } from "@/lib/getImageUrl";
 
 type TProps = {
@@ -30,11 +31,11 @@ function WorkspaceCard({ workspace: w, isSelected = false, onClick }: TProps) {
       <button
         type="button"
         className={twMerge(
-          "relative flex h-full min-h-52 w-full flex-col rounded-2xl border-[1.5px] bg-surface-100 p-6 text-left shadow-Soft",
+          "group relative flex h-full min-h-52 w-full flex-col rounded-2xl border-[1.5px] bg-surface-100 p-6 text-left shadow-Soft",
           "focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none",
           "tablet:min-h-48 tablet:p-5",
           onClick &&
-            "cursor-pointer transition-all duration-300 ease-out hover:-translate-y-1 hover:border-primary-300 hover:bg-primary-100/35 active:scale-[0.98]",
+            "cursor-pointer transition-all duration-300 ease-out hover:-translate-y-1 hover:border-primary-400/30 hover:bg-primary-100/35 active:scale-[0.98]",
           isSelected
             ? "border-primary-400 bg-primary-100/55 ring-2 ring-primary-400/30"
             : "border-surface-400",
@@ -71,27 +72,29 @@ function WorkspaceCard({ workspace: w, isSelected = false, onClick }: TProps) {
           )}
         </div>
 
-        <div className="flex min-w-0 flex-1 flex-col pr-12">
-          <div
-            className={twMerge(
-              "truncate font-heading4",
-              isSelected ? "text-surface-500" : "text-text-title",
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="pr-12">
+            <div
+              className={twMerge(
+                "truncate font-heading4",
+                isSelected ? "text-surface-500" : "text-text-title",
+              )}
+            >
+              {w.name}
+            </div>
+
+            {w.description ? (
+              <p className="mt-1.5 line-clamp-2 font-body2 text-text-muted">
+                {w.description}
+              </p>
+            ) : (
+              <p className="mt-1.5 font-body2 text-text-placeholder">
+                설명이 없습니다
+              </p>
             )}
-          >
-            {w.name}
           </div>
 
-          {w.description ? (
-            <p className="mt-1.5 line-clamp-2 font-body2 text-text-muted">
-              {w.description}
-            </p>
-          ) : (
-            <p className="mt-1.5 font-body2 text-text-placeholder">
-              설명이 없습니다
-            </p>
-          )}
-
-          <div className="mt-auto pt-5">
+          <div className="mt-auto flex items-center pt-5 pr-8">
             <Badge
               variant={w.myRole === "ADMIN" ? "infoBlue" : "surface"}
               className="h-6 px-2"
@@ -100,6 +103,16 @@ function WorkspaceCard({ workspace: w, isSelected = false, onClick }: TProps) {
             </Badge>
           </div>
         </div>
+
+        <ChevronRightIcon
+          aria-hidden
+          className={twMerge(
+            "pointer-events-none absolute right-5 bottom-6 h-5 w-5 transition-all duration-300 ease-out tablet:bottom-5 tablet:right-4",
+            isSelected
+              ? "text-primary-500"
+              : "text-text-muted group-hover:text-primary-500",
+          )}
+        />
       </button>
     </li>
   );
diff --git a/src/components/workspace/WorkspaceListLoading.tsx b/src/components/workspace/WorkspaceListLoading.tsx
index 15fc5404..492b48dc 100644
--- a/src/components/workspace/WorkspaceListLoading.tsx
+++ b/src/components/workspace/WorkspaceListLoading.tsx
@@ -2,19 +2,50 @@ import { Skeleton } from "@/components/common/skeleton/Skeleton";
 
 function WorkspaceCardSkeleton() {
   return (
-    <li className="flex h-full min-h-52 flex-col rounded-2xl border border-surface-400 bg-surface-100 p-6 shadow-Soft tablet:min-h-48 tablet:p-5">
-      <Skeleton className="mb-5 h-16 w-16 rounded-2xl tablet:mb-4 tablet:h-14 tablet:w-14" />
-      <Skeleton className="h-5 w-36" />
-      <Skeleton className="mt-2 h-4 w-full" />
-      <Skeleton className="mt-1.5 h-4 w-4/5" />
-      <div className="mt-auto pt-5">
-        <Skeleton className="h-6 w-14 rounded-full" />
+    <li className="relative flex h-full min-h-52 flex-col rounded-2xl border-[1.5px] border-surface-400 bg-surface-100 p-6 shadow-Soft tablet:min-h-48 tablet:p-5">
+      <Skeleton className="mb-5 h-18 w-18 shrink-0 rounded-2xl tablet:mb-4 tablet:h-14 tablet:w-14" />
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="pr-12">
+          <Skeleton className="h-5 w-36" />
+          <Skeleton className="mt-1.5 h-4 w-full" />
+          <Skeleton className="mt-1 h-4 w-4/5" />
+        </div>
+
+        <div className="mt-auto flex items-center pt-5 pr-8">
+          <Skeleton className="h-6 w-14 rounded-full" />
+        </div>
       </div>
+
+      <Skeleton className="absolute right-5 bottom-6 h-5 w-5 rounded-md tablet:bottom-5 tablet:right-4" />
     </li>
   );
 }
 
-export default function WorkspaceListLoading() {
+function WorkspaceCardListSkeleton() {
+  return (
+    <ul className="grid grid-cols-2 gap-5 tablet:grid-cols-1">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <WorkspaceCardSkeleton key={i} />
+      ))}
+    </ul>
+  );
+}
+
+type TProps = {
+  /** 페이지 내부 로딩: 카드 그리드만. 라우트 Suspense: 전체 스켈레톤 */
+  listOnly?: boolean;
+};
+
+export default function WorkspaceListLoading({ listOnly = false }: TProps) {
+  if (listOnly) {
+    return (
+      <div role="status" aria-label="워크스페이스 목록 불러오는 중">
+        <WorkspaceCardListSkeleton />
+      </div>
+    );
+  }
+
   return (
     <section
       role="status"
@@ -25,11 +56,7 @@ export default function WorkspaceListLoading() {
         <Skeleton className="h-15 w-full rounded-2xl" />
         <Skeleton className="h-15 w-56 rounded-2xl tablet:w-full" />
       </div>
-      <ul className="grid grid-cols-2 gap-5 tablet:grid-cols-1">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <WorkspaceCardSkeleton key={i} />
-        ))}
-      </ul>
+      <WorkspaceCardListSkeleton />
     </section>
   );
 }
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index 3d623af1..f4940dba 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -156,7 +156,7 @@ export default function WorkspacePage() {
 
   const renderWorkspaceContent = () => {
     if (isListLoading) {
-      return <WorkspaceListLoading />;
+      return <WorkspaceListLoading listOnly />;
     }
     if (listErrorMsg) {
       return (

From c0a57dd8cbaea92264562d6fb5926fa6bb48f251 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 15:46:22 +0900
Subject: [PATCH 03/57] =?UTF-8?q?style:=20=EB=B9=88=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EB=A5=BC=20=EC=A0=84=EC=B2=B4=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20?=
 =?UTF-8?q?=ED=8F=AD=EC=9C=BC=EB=A1=9C=20=EB=9E=9C=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/workspace/Workspace.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index f4940dba..3ef55bce 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -169,7 +169,9 @@ export default function WorkspacePage() {
     if (sortedWorkspaces.length === 0) {
       return (
         <ul className="grid grid-cols-2 gap-5 rounded-2xl bg-surface-200/80 p-4 tablet:grid-cols-1">
-          <WorkspaceEmptyState message="워크스페이스가 없습니다" />
+          <li className="col-span-full">
+            <WorkspaceEmptyState message="워크스페이스가 없습니다" />
+          </li>
         </ul>
       );
     }

From 10b1943cfed00aef168c47780196d813cd71f09b Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 6 Aug 2026 16:43:04 +0900
Subject: [PATCH 04/57] =?UTF-8?q?refactor:=20=ED=94=8C=EB=9E=AB=ED=8F=BC?=
 =?UTF-8?q?=20sync=20mutation=EC=9D=84=20usePlatformSyncMutations=20?=
 =?UTF-8?q?=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../integration/usePlatformSyncMutations.ts   | 105 ++++++++++++++++++
 .../integration/PlatformIntegrationsPage.tsx  |  87 ++-------------
 2 files changed, 116 insertions(+), 76 deletions(-)
 create mode 100644 src/hooks/integration/usePlatformSyncMutations.ts

diff --git a/src/hooks/integration/usePlatformSyncMutations.ts b/src/hooks/integration/usePlatformSyncMutations.ts
new file mode 100644
index 00000000..ba38e251
--- /dev/null
+++ b/src/hooks/integration/usePlatformSyncMutations.ts
@@ -0,0 +1,105 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import type {
+  IGoogleSyncData,
+  IMetaSyncData,
+  INaverSyncData,
+} from "@/types/integration/platformSync";
+
+import type { TNaverSyncFormValues } from "@/utils/integration/naverSyncSchema";
+import { getPlatformSyncToast } from "@/utils/integration/platformSync";
+
+import { useCoreMutation } from "@/hooks/customQuery";
+
+import { syncGoogleAdData } from "@/api/integration/google";
+import { syncMetaAdData } from "@/api/integration/meta";
+import { syncNaverAdData } from "@/api/integration/naver";
+import { QUERY_KEYS } from "@/lib/queryKeys";
+
+interface IUsePlatformSyncMutationsOptions {
+  /** sync success/error 공통 — syncingProvider 초기화 */
+  onSyncSettled?: () => void;
+  /** Naver sync success — sync 모달 닫기 */
+  onNaverSyncSuccess?: () => void;
+}
+
+export function usePlatformSyncMutations(
+  options?: IUsePlatformSyncMutationsOptions,
+) {
+  const queryClient = useQueryClient();
+  const { onSyncSettled, onNaverSyncSuccess } = options ?? {};
+
+  const invalidateConnections = async (requestOrgId: number) => {
+    await queryClient.invalidateQueries({
+      queryKey: QUERY_KEYS.platform.connections(requestOrgId),
+    });
+  };
+
+  const metaSyncMutation = useCoreMutation<IMetaSyncData, number>(
+    (requestOrgId) => syncMetaAdData(requestOrgId),
+    {
+      userOnSuccess: async (data, requestOrgId) => {
+        await invalidateConnections(requestOrgId);
+        const { type, message } = getPlatformSyncToast("META", data);
+        if (type === "success") toast.success(message);
+        else toast.warning(message);
+        onSyncSettled?.();
+      },
+      userOnError: (apiError) => {
+        toast.error(apiError.message ?? "Meta 동기화에 실패했습니다.");
+        onSyncSettled?.();
+      },
+    },
+  );
+
+  const googleSyncMutation = useCoreMutation<IGoogleSyncData, number>(
+    () => syncGoogleAdData(),
+    {
+      userOnSuccess: async (data, requestOrgId) => {
+        await invalidateConnections(requestOrgId);
+        const { type, message } = getPlatformSyncToast("GOOGLE", data);
+        if (type === "success") toast.success(message);
+        else toast.warning(message);
+        onSyncSettled?.();
+      },
+      userOnError: (apiError) => {
+        toast.error(apiError.message ?? "Google 동기화에 실패했습니다.");
+        onSyncSettled?.();
+      },
+    },
+  );
+
+  const naverSyncMutation = useCoreMutation<
+    INaverSyncData,
+    { requestOrgId: number; body: TNaverSyncFormValues }
+  >(({ requestOrgId, body }) => syncNaverAdData(requestOrgId, body), {
+    userOnSuccess: async (data, { requestOrgId }) => {
+      await invalidateConnections(requestOrgId);
+      const { type, message } = getPlatformSyncToast("NAVER", data);
+      if (type === "success") toast.success(message);
+      else toast.warning(message);
+      onSyncSettled?.();
+      onNaverSyncSuccess?.();
+    },
+    userOnError: (apiError) => {
+      toast.error(apiError.message ?? "네이버 동기화에 실패했습니다.");
+      onSyncSettled?.();
+    },
+  });
+
+  const isSyncPending =
+    metaSyncMutation.isPending ||
+    googleSyncMutation.isPending ||
+    naverSyncMutation.isPending;
+
+  return {
+    syncMeta: (requestOrgId: number) => metaSyncMutation.mutate(requestOrgId),
+    syncGoogle: (requestOrgId: number) =>
+      googleSyncMutation.mutate(requestOrgId),
+    syncNaver: (requestOrgId: number, body: TNaverSyncFormValues) =>
+      naverSyncMutation.mutate({ requestOrgId, body }),
+    isSyncPending,
+    isNaverSyncPending: naverSyncMutation.isPending,
+  };
+}
diff --git a/src/pages/integration/PlatformIntegrationsPage.tsx b/src/pages/integration/PlatformIntegrationsPage.tsx
index da9d4512..2e0a5615 100644
--- a/src/pages/integration/PlatformIntegrationsPage.tsx
+++ b/src/pages/integration/PlatformIntegrationsPage.tsx
@@ -7,19 +7,14 @@ import type {
   IPlatformConnectionItem,
   TIntegrationProvider,
 } from "@/types/integration/platformConnection";
-import type {
-  IGoogleSyncData,
-  IMetaSyncData,
-  INaverSyncData,
-} from "@/types/integration/platformSync";
 
 import type { TNaverSyncFormValues } from "@/utils/integration/naverSyncSchema";
-import { getPlatformSyncToast } from "@/utils/integration/platformSync";
 import { startPlatformConnect } from "@/utils/integration/startPlatformConnect";
 
 import { useCoreMutation } from "@/hooks/customQuery";
 import { useIntegrationOAuthReturn } from "@/hooks/integration/useIntegrationOAuthReturn";
 import { usePlatformConnections } from "@/hooks/integration/usePlatformConnections";
+import { usePlatformSyncMutations } from "@/hooks/integration/usePlatformSyncMutations";
 
 import AreaErrorFallback from "@/components/common/error/AreaErrorFallback";
 import { ErrorBoundary } from "@/components/common/error/ErrorBoundary";
@@ -33,9 +28,6 @@ import {
   KakaoUpcomingCard,
 } from "@/components/integration/UpcomingPlatformCard";
 
-import { syncGoogleAdData } from "@/api/integration/google";
-import { syncMetaAdData } from "@/api/integration/meta";
-import { syncNaverAdData } from "@/api/integration/naver";
 import {
   disconnectPlatformAccount,
   reconnectPlatformAccount,
@@ -111,68 +103,11 @@ export default function PlatformIntegrationsPage() {
     },
   );
 
-  const invalidateConnections = async (requestOrgId: number) => {
-    await queryClient.invalidateQueries({
-      queryKey: QUERY_KEYS.platform.connections(requestOrgId),
+  const { syncMeta, syncGoogle, syncNaver, isSyncPending, isNaverSyncPending } =
+    usePlatformSyncMutations({
+      onSyncSettled: () => setSyncingProvider(null),
+      onNaverSyncSuccess: () => setIsNaverSyncModalOpen(false),
     });
-  };
-
-  const metaSyncMutation = useCoreMutation<IMetaSyncData, number>(
-    (requestOrgId) => syncMetaAdData(requestOrgId),
-    {
-      userOnSuccess: async (data, requestOrgId) => {
-        await invalidateConnections(requestOrgId);
-        const { type, message } = getPlatformSyncToast("META", data);
-        if (type === "success") toast.success(message);
-        else toast.warning(message);
-        setSyncingProvider(null);
-      },
-      userOnError: (apiError) => {
-        toast.error(apiError.message ?? "Meta 동기화에 실패했습니다.");
-        setSyncingProvider(null);
-      },
-    },
-  );
-
-  const googleSyncMutation = useCoreMutation<IGoogleSyncData, number>(
-    () => syncGoogleAdData(),
-    {
-      userOnSuccess: async (data, requestOrgId) => {
-        await invalidateConnections(requestOrgId);
-        const { type, message } = getPlatformSyncToast("GOOGLE", data);
-        if (type === "success") toast.success(message);
-        else toast.warning(message);
-        setSyncingProvider(null);
-      },
-      userOnError: (apiError) => {
-        toast.error(apiError.message ?? "Google 동기화에 실패했습니다.");
-        setSyncingProvider(null);
-      },
-    },
-  );
-
-  const naverSyncMutation = useCoreMutation<
-    INaverSyncData,
-    { requestOrgId: number; body: TNaverSyncFormValues }
-  >(({ requestOrgId, body }) => syncNaverAdData(requestOrgId, body), {
-    userOnSuccess: async (data, { requestOrgId }) => {
-      await invalidateConnections(requestOrgId);
-      const { type, message } = getPlatformSyncToast("NAVER", data);
-      if (type === "success") toast.success(message);
-      else toast.warning(message);
-      setSyncingProvider(null);
-      setIsNaverSyncModalOpen(false);
-    },
-    userOnError: (apiError) => {
-      toast.error(apiError.message ?? "네이버 동기화에 실패했습니다.");
-      setSyncingProvider(null);
-    },
-  });
-
-  const isSyncPending =
-    metaSyncMutation.isPending ||
-    googleSyncMutation.isPending ||
-    naverSyncMutation.isPending;
 
   useIntegrationOAuthReturn(orgId);
 
@@ -276,20 +211,20 @@ export default function PlatformIntegrationsPage() {
     setSyncingProvider(provider);
 
     if (provider === "META") {
-      metaSyncMutation.mutate(orgId);
+      syncMeta(orgId);
       return;
     }
 
     if (provider === "GOOGLE") {
-      googleSyncMutation.mutate(orgId);
+      syncGoogle(orgId);
     }
   };
 
   const handleNaverSyncSubmit = (values: TNaverSyncFormValues) => {
-    if (orgId == null || naverSyncMutation.isPending) return;
+    if (orgId == null || isNaverSyncPending) return;
 
     setSyncingProvider("NAVER");
-    naverSyncMutation.mutate({ requestOrgId: orgId, body: values });
+    syncNaver(orgId, values);
   };
 
   return (
@@ -366,11 +301,11 @@ export default function PlatformIntegrationsPage() {
         <NaverSyncModal
           isOpen={isNaverSyncModalOpen}
           onClose={() => {
-            if (naverSyncMutation.isPending) return;
+            if (isNaverSyncPending) return;
             setIsNaverSyncModalOpen(false);
           }}
           onSubmit={handleNaverSyncSubmit}
-          isLoading={naverSyncMutation.isPending}
+          isLoading={isNaverSyncPending}
         />
       ) : null}
       <PlatformDisconnectModal

From 6b3207cc002bb1bfdb60b6b30252bf4dd9021518 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 6 Aug 2026 16:48:19 +0900
Subject: [PATCH 05/57] =?UTF-8?q?feat:=20Google=20OAuth=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99=20=EC=84=B1=EA=B3=B5=20=ED=9B=84=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=8F=99=EA=B8=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/integration/useIntegrationOAuthReturn.ts | 14 +++++++++++++-
 src/pages/integration/PlatformIntegrationsPage.tsx |  4 +++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/hooks/integration/useIntegrationOAuthReturn.ts b/src/hooks/integration/useIntegrationOAuthReturn.ts
index ba873840..5f644985 100644
--- a/src/hooks/integration/useIntegrationOAuthReturn.ts
+++ b/src/hooks/integration/useIntegrationOAuthReturn.ts
@@ -19,12 +19,23 @@ const PROVIDER_LABEL: Record<TOAuthReturnProvider, string> = {
   GOOGLE: "Google",
 };
 
+interface IUseIntegrationOAuthReturnOptions {
+  /** Google OAuth success 직후 초기 sync */
+  onGoogleConnectSuccess?: (requestOrgId: number) => void;
+}
+
 /** OAuth 연동 완료 후 `/integrations?status=&provider=` 쿼리 처리 (Google 전용) */
-export function useIntegrationOAuthReturn(orgId: number | null) {
+export function useIntegrationOAuthReturn(
+  orgId: number | null,
+  options?: IUseIntegrationOAuthReturnOptions,
+) {
   const [searchParams, setSearchParams] = useSearchParams();
   const queryClient = useQueryClient();
   const processedRef = useRef(false);
 
+  const onGoogleConnectSuccessRef = useRef(options?.onGoogleConnectSuccess);
+  onGoogleConnectSuccessRef.current = options?.onGoogleConnectSuccess;
+
   useLayoutEffect(() => {
     if (orgId == null) return;
 
@@ -45,6 +56,7 @@ export function useIntegrationOAuthReturn(orgId: number | null) {
 
     if (status === "success") {
       toast.success(`${label} 광고 계정을 연동했습니다.`);
+      onGoogleConnectSuccessRef.current?.(orgId);
     } else {
       toast.error(detail ?? `${label} 연동에 실패했습니다.`);
     }
diff --git a/src/pages/integration/PlatformIntegrationsPage.tsx b/src/pages/integration/PlatformIntegrationsPage.tsx
index 2e0a5615..d434ebb9 100644
--- a/src/pages/integration/PlatformIntegrationsPage.tsx
+++ b/src/pages/integration/PlatformIntegrationsPage.tsx
@@ -109,7 +109,9 @@ export default function PlatformIntegrationsPage() {
       onNaverSyncSuccess: () => setIsNaverSyncModalOpen(false),
     });
 
-  useIntegrationOAuthReturn(orgId);
+  useIntegrationOAuthReturn(orgId, {
+    onGoogleConnectSuccess: (requestOrgId) => syncGoogle(requestOrgId),
+  });
 
   const startNewConnect = async (provider: TIntegrationProvider) => {
     if (orgId == null) {

From 9ef914b9b04a73c5ebf26fdf037a59b7cae5ca41 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 6 Aug 2026 17:35:37 +0900
Subject: [PATCH 06/57] =?UTF-8?q?feat:=20Naver=20=EC=B5=9C=EC=B4=88=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EC=84=B1=EA=B3=B5=20=ED=9B=84=20sync=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=9E=90=EB=8F=99=20=EC=98=A4=ED=94=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/integration/NaverConnectModal.tsx   | 6 ++++++
 src/pages/integration/PlatformIntegrationsPage.tsx | 5 +++++
 2 files changed, 11 insertions(+)

diff --git a/src/components/integration/NaverConnectModal.tsx b/src/components/integration/NaverConnectModal.tsx
index 11e59c67..5afdc913 100644
--- a/src/components/integration/NaverConnectModal.tsx
+++ b/src/components/integration/NaverConnectModal.tsx
@@ -26,6 +26,8 @@ interface INaverConnectModalProps {
   orgId: number;
   mode?: TNaverConnectMode;
   initialCustomerId?: string;
+  /** 최초 connect success 직후 sync 모달 오픈 (reconnect 제외) */
+  onConnectSuccess?: () => void;
 }
 
 type TNaverConnectFormValues = z.infer<typeof naverConnectSchema>;
@@ -36,6 +38,7 @@ export default function NaverConnectModal({
   orgId,
   mode = "connect",
   initialCustomerId,
+  onConnectSuccess,
 }: INaverConnectModalProps) {
   const {
     register,
@@ -82,6 +85,9 @@ export default function NaverConnectModal({
         );
         reset();
         onClose();
+        if (mode === "connect") {
+          onConnectSuccess?.();
+        }
       },
       userOnError: (error) => {
         toast.error(
diff --git a/src/pages/integration/PlatformIntegrationsPage.tsx b/src/pages/integration/PlatformIntegrationsPage.tsx
index d434ebb9..9bfd6428 100644
--- a/src/pages/integration/PlatformIntegrationsPage.tsx
+++ b/src/pages/integration/PlatformIntegrationsPage.tsx
@@ -113,6 +113,10 @@ export default function PlatformIntegrationsPage() {
     onGoogleConnectSuccess: (requestOrgId) => syncGoogle(requestOrgId),
   });
 
+  const handleNaverConnectSuccess = () => {
+    setIsNaverSyncModalOpen(true);
+  };
+
   const startNewConnect = async (provider: TIntegrationProvider) => {
     if (orgId == null) {
       toast.error("워크스페이스를 선택해 주세요.");
@@ -297,6 +301,7 @@ export default function PlatformIntegrationsPage() {
           orgId={orgId}
           mode={naverModalMode}
           initialCustomerId={naverCustomerId}
+          onConnectSuccess={handleNaverConnectSuccess}
         />
       ) : null}
       {orgId != null ? (

From f051f5c136bd31da09e90ebd4b67b40e3a62eeaa Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 6 Aug 2026 17:49:50 +0900
Subject: [PATCH 07/57] =?UTF-8?q?fix:=20Google=20OAuth=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=20sync=20=EC=A4=91=20=EC=B9=B4=EB=93=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/integration/PlatformIntegrationsPage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/integration/PlatformIntegrationsPage.tsx b/src/pages/integration/PlatformIntegrationsPage.tsx
index 9bfd6428..fd1a64e4 100644
--- a/src/pages/integration/PlatformIntegrationsPage.tsx
+++ b/src/pages/integration/PlatformIntegrationsPage.tsx
@@ -110,7 +110,10 @@ export default function PlatformIntegrationsPage() {
     });
 
   useIntegrationOAuthReturn(orgId, {
-    onGoogleConnectSuccess: (requestOrgId) => syncGoogle(requestOrgId),
+    onGoogleConnectSuccess: (requestOrgId) => {
+      setSyncingProvider("GOOGLE");
+      syncGoogle(requestOrgId);
+    },
   });
 
   const handleNaverConnectSuccess = () => {

From 71305142888a92e94796e53a45a85181ea6f7ea5 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 18:02:15 +0900
Subject: [PATCH 08/57] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20sort/filter=20=ED=83=80=EC=9E=85=20=EC=A0=95?=
 =?UTF-8?q?=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/timeline/api.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/types/timeline/api.ts b/src/types/timeline/api.ts
index 5e1a96e9..3846b2d1 100644
--- a/src/types/timeline/api.ts
+++ b/src/types/timeline/api.ts
@@ -23,6 +23,9 @@ export const TIMELINE_PERFORMANCE_STATUS = [
 export type TTimelinePerformanceStatus =
   (typeof TIMELINE_PERFORMANCE_STATUS)[number];
 
+export const TIMELINE_SORTS = ["DISPLAY_ORDER", "LATEST", "OLDEST"] as const;
+export type TTimelineSort = (typeof TIMELINE_SORTS)[number];
+
 /** API 3종 + UI 전용 미정(PENDING). null/미지 값은 UI에서 PENDING으로 정규화 */
 export type TTimelinePerformanceStatusUi =
   | TTimelinePerformanceStatus
@@ -102,3 +105,13 @@ export interface IUpdateTimelineVariables {
   timelineId: number;
   body: ITimelineUpsertRequest;
 }
+
+/*목록 조회 쿼리. status가 생략되면 전체보이도록*/
+export interface ITimelineListParams {
+  status?: TTimelinePerformanceStatus;
+  sort?: TTimelineSort;
+}
+
+export interface IUpdateTimelineDisplayOrderRequest {
+  timelineIds: number[];
+}

From 1c3336babda69de47dbf651c8b7e20c82d4d63d5 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 18:14:32 +0900
Subject: [PATCH 09/57] =?UTF-8?q?feat:=20list=ED=82=A4=EC=97=90=20sort/sta?=
 =?UTF-8?q?tus=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/queryKeys.ts      | 13 +++++++++++++
 src/types/timeline/api.ts |  1 +
 2 files changed, 14 insertions(+)

diff --git a/src/lib/queryKeys.ts b/src/lib/queryKeys.ts
index aba20f01..aa8d3457 100644
--- a/src/lib/queryKeys.ts
+++ b/src/lib/queryKeys.ts
@@ -82,7 +82,20 @@ export const QUERY_KEYS = {
   },
 
   timeline: {
+    /*invalidate용 prefix - status/sort 없이 */
     list: (orgId: number | null) => ["timeline", "list", orgId] as const,
+    /*실제 useQuery용*/
+    listWithParams: (
+      orgId: number | null,
+      params: { status?: string | null; sort?: string } = {},
+    ) =>
+      [
+        "timeline",
+        "list",
+        orgId,
+        params.status ?? null,
+        params.sort ?? "DISPLAY_ORDER",
+      ] as const,
     detail: (orgId: number | null, timelineId: number | null) =>
       ["timeline", "detail", orgId, timelineId] as const,
   },
diff --git a/src/types/timeline/api.ts b/src/types/timeline/api.ts
index 3846b2d1..66ca27ce 100644
--- a/src/types/timeline/api.ts
+++ b/src/types/timeline/api.ts
@@ -47,6 +47,7 @@ export interface ITimelineListItem {
   endDate: string;
   /** 성과 미산출 시 null일 수 있음 */
   performanceStatus: TTimelinePerformanceStatus | null;
+  displayOrder: number;
 }
 
 export interface ITimelineDailyTrend {

From 8c6626903c1a2f76e9a86a88080b3f05fb2e98a0 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 18:17:21 +0900
Subject: [PATCH 10/57] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=EC=A1=B0=ED=9A=8C=20API=ED=9B=85=EC=97=90=20params?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/timeline/timeline.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/api/timeline/timeline.ts b/src/api/timeline/timeline.ts
index 78a1bac2..9a713d16 100644
--- a/src/api/timeline/timeline.ts
+++ b/src/api/timeline/timeline.ts
@@ -2,6 +2,7 @@ import type { ICommonResponse } from "@/types/common/common";
 import {
   type ITimelineDetail,
   type ITimelineListItem,
+  type ITimelineListParams,
   type ITimelineMutationResponse,
   type ITimelineUpsertRequest,
   type TTimelineEmptyResponse,
@@ -23,10 +24,16 @@ export const getTimelineDetail = async (
 //타임라인 목록 조회 API
 export const getTimelineList = async (
   orgId: number,
+  params: ITimelineListParams = {},
 ): Promise<ITimelineListItem[]> => {
   const { data } = await axiosInstance.get<
     ICommonResponse<ITimelineListItem[]>
-  >(`/api/org/${orgId}/timeline`);
+  >(`/api/org/${orgId}/timeline`, {
+    params: {
+      ...(params.status ? { status: params.status } : {}),
+      ...(params.sort ? { sort: params.sort } : {}),
+    },
+  });
   return data.data;
 };
 

From f3732642d8fcc696876f5e97a25ecf6b5ed3dffc Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 18:20:52 +0900
Subject: [PATCH 11/57] =?UTF-8?q?feat:=20useTimelineList=ED=9B=85=20params?=
 =?UTF-8?q?=EB=B0=9B=EC=95=84=EC=84=9C=20=EC=BF=BC=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/timeline/useTimelineList.ts | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/hooks/timeline/useTimelineList.ts b/src/hooks/timeline/useTimelineList.ts
index dcdd50f5..1c61bcab 100644
--- a/src/hooks/timeline/useTimelineList.ts
+++ b/src/hooks/timeline/useTimelineList.ts
@@ -1,14 +1,25 @@
+import type { ITimelineListParams } from "@/types/timeline/api";
+
 import { useCoreQuery } from "@/hooks/customQuery";
 
 import { getTimelineList } from "@/api/timeline/timeline";
 import { QUERY_KEYS } from "@/lib/queryKeys";
 import useWorkspaceStore from "@/store/useWorkspaceStore";
 
-export function useTimelineList() {
+export function useTimelineList(params: ITimelineListParams = {}) {
   const orgId = useWorkspaceStore((s) => s.selectedOrgId);
+  const sort = params.sort ?? "DISPLAY_ORDER";
+
   return useCoreQuery(
-    QUERY_KEYS.timeline.list(orgId),
-    () => getTimelineList(orgId!),
+    QUERY_KEYS.timeline.listWithParams(orgId, {
+      status: params.status ?? null,
+      sort,
+    }),
+    () =>
+      getTimelineList(orgId!, {
+        status: params.status,
+        sort,
+      }),
     {
       enabled: orgId != null,
     },

From 4dca9638286df369f11f102452bc193244ff6483 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 22:41:33 +0900
Subject: [PATCH 12/57] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0/=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC=20=EB=9D=BC=EB=B2=A8=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/timeline/filterSort.ts | 36 ++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/constants/timeline/filterSort.ts

diff --git a/src/constants/timeline/filterSort.ts b/src/constants/timeline/filterSort.ts
new file mode 100644
index 00000000..60eb5531
--- /dev/null
+++ b/src/constants/timeline/filterSort.ts
@@ -0,0 +1,36 @@
+import type {
+  TTimelinePerformanceStatus,
+  TTimelineSort,
+} from "@/types/timeline/api";
+
+import { TIMELINE_PERFORMANCE_STATUS_STYLE } from "./statusStyle";
+
+export type TTimelineStatusFilter = TTimelinePerformanceStatus | "ALL";
+
+export const TIMELINE_STATUS_FILTER_OPTIONS: {
+  value: TTimelineStatusFilter;
+  label: string;
+}[] = [
+  { value: "ALL", label: "전체" },
+  {
+    value: "ON_TRACK",
+    label: TIMELINE_PERFORMANCE_STATUS_STYLE.ON_TRACK.label,
+  },
+  {
+    value: "ABOVE_AVG",
+    label: TIMELINE_PERFORMANCE_STATUS_STYLE.ABOVE_AVG.label,
+  },
+  {
+    value: "UNDERPERFORM",
+    label: TIMELINE_PERFORMANCE_STATUS_STYLE.UNDERPERFORM.label,
+  },
+];
+
+export const TIMELINE_SORT_OPTIONS: {
+  value: TTimelineSort;
+  label: string;
+}[] = [
+  { value: "DISPLAY_ORDER", label: "생성 순서" },
+  { value: "LATEST", label: "종료일 가까운 순" },
+  { value: "OLDEST", label: "종료일 먼 순" },
+];

From eadc24ded5b2315082370eabe7b51cc68772a9ec Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 6 Aug 2026 22:44:29 +0900
Subject: [PATCH 13/57] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20off-canvas=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/useSidebarStore.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/store/useSidebarStore.ts b/src/store/useSidebarStore.ts
index 530093e5..4828f664 100644
--- a/src/store/useSidebarStore.ts
+++ b/src/store/useSidebarStore.ts
@@ -4,12 +4,19 @@ interface ISidebarState {
   isCollapsed: boolean;
   setIsCollapsed: (next: boolean) => void;
   toggleSidebar: () => void;
+  /** tablet 이하 off-canvas 열림 */
+  isMobileOpen: boolean;
+  setIsMobileOpen: (next: boolean) => void;
+  closeMobile: () => void;
 }
 
 const useSidebarStore = create<ISidebarState>((set) => ({
   isCollapsed: true,
   setIsCollapsed: (next) => set({ isCollapsed: next }),
   toggleSidebar: () => set((prev) => ({ isCollapsed: !prev.isCollapsed })),
+  isMobileOpen: false,
+  setIsMobileOpen: (next) => set({ isMobileOpen: next }),
+  closeMobile: () => set({ isMobileOpen: false }),
 }));
 
 export default useSidebarStore;

From ccbf7470e6b6d7950f9c3f4c6e248756f87c3e2d Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 22:55:57 +0900
Subject: [PATCH 14/57] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EC=A0=95=EB=A0=AC/=ED=95=84=ED=84=B0=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timeline/TimelineFilterSortMenus.tsx      | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/components/timeline/TimelineFilterSortMenus.tsx

diff --git a/src/components/timeline/TimelineFilterSortMenus.tsx b/src/components/timeline/TimelineFilterSortMenus.tsx
new file mode 100644
index 00000000..57859e7a
--- /dev/null
+++ b/src/components/timeline/TimelineFilterSortMenus.tsx
@@ -0,0 +1,73 @@
+import { twMerge } from "tailwind-merge";
+
+import type { TTimelineSort } from "@/types/timeline/api";
+import {
+  TIMELINE_SORT_OPTIONS,
+  TIMELINE_STATUS_FILTER_OPTIONS,
+  type TTimelineStatusFilter,
+} from "@/constants/timeline/filterSort";
+
+import {
+  DropdownMenu,
+  type TMenuItem,
+} from "../common/dropdownmenu/DropdownMenu";
+
+import FilterIcon from "@/assets/icon/timeline/filter.svg?react";
+import SortIcon from "@/assets/icon/timeline/sort.svg?react";
+
+const TOOLBAR_ACTIONS_CLASS =
+  "flex cursor-pointer items-center gap-1.5 rounded-lg px-2 py-1.5 font-caption text-text-muted transition-all hover:bg-surface-200 hover:text-text-body";
+
+interface ITimelineFilterSortMenusProps {
+  statusFilter: TTimelineStatusFilter;
+  sort: TTimelineSort;
+  onStatusFilterChange: (value: TTimelineStatusFilter) => void;
+  onSortChange: (value: TTimelineSort) => void;
+  className?: string;
+}
+
+export default function TimelineFilterSortMenus({
+  statusFilter,
+  sort,
+  onStatusFilterChange,
+  onSortChange,
+  className,
+}: ITimelineFilterSortMenusProps) {
+  const sortItems: TMenuItem[] = TIMELINE_SORT_OPTIONS.map((opt) => ({
+    label: opt.label,
+    active: sort === opt.value,
+    onClick: () => onSortChange(opt.value),
+  }));
+
+  const filterItems: TMenuItem[] = TIMELINE_STATUS_FILTER_OPTIONS.map(
+    (opt) => ({
+      label: opt.label,
+      active: statusFilter === opt.value,
+      onClick: () => onStatusFilterChange(opt.value),
+    }),
+  );
+  return (
+    <div className={twMerge("flex items-center gap-3", className)}>
+      <DropdownMenu
+        aria-label="타임라인 정렬"
+        items={sortItems}
+        trigger={
+          <span className={TOOLBAR_ACTIONS_CLASS}>
+            <SortIcon className="h-4 w-4" />
+            Sort
+          </span>
+        }
+      />
+      <DropdownMenu
+        aria-label="성과 상태 필터"
+        items={filterItems}
+        trigger={
+          <span className={TOOLBAR_ACTIONS_CLASS}>
+            <FilterIcon className="h-4 w-4" />
+            Filter
+          </span>
+        }
+      />
+    </div>
+  );
+}

From 43ae445fbfe619735840eb7f6c49628dc518d6cd Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 22:57:01 +0900
Subject: [PATCH 15/57] =?UTF-8?q?feat:=20mock=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/timeline/timeline.mock.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types/timeline/timeline.mock.ts b/src/types/timeline/timeline.mock.ts
index 637b7a1c..1582aed7 100644
--- a/src/types/timeline/timeline.mock.ts
+++ b/src/types/timeline/timeline.mock.ts
@@ -43,6 +43,7 @@ export const TIMELINE_LIST_MOCK: ITimelineListItem[] = [
     startDate: "2026-06-01",
     endDate: "2026-06-30",
     performanceStatus: "ON_TRACK",
+    displayOrder: 1,
   },
   {
     timelineId: 2,
@@ -50,6 +51,7 @@ export const TIMELINE_LIST_MOCK: ITimelineListItem[] = [
     startDate: "2026-06-10",
     endDate: "2026-06-30",
     performanceStatus: "UNDERPERFORM",
+    displayOrder: 2,
   },
 ];
 

From 59704504717e936ceaa806291e1aae8c0548a3c0 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 6 Aug 2026 23:07:56 +0900
Subject: [PATCH 16/57] =?UTF-8?q?feat:=20=ED=96=84=EB=B2=84=EA=B1=B0=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EB=B0=8F=20off-canvas=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/sidebar/menu.svg |  3 ++
 src/layout/main/MainLayout.tsx   | 59 ++++++++++++++++++++++++++++++--
 2 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icon/sidebar/menu.svg

diff --git a/src/assets/icon/sidebar/menu.svg b/src/assets/icon/sidebar/menu.svg
new file mode 100644
index 00000000..f28554ee
--- /dev/null
+++ b/src/assets/icon/sidebar/menu.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 5H20M4 12H20M4 19H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/layout/main/MainLayout.tsx b/src/layout/main/MainLayout.tsx
index d9935e4f..5b850984 100644
--- a/src/layout/main/MainLayout.tsx
+++ b/src/layout/main/MainLayout.tsx
@@ -7,6 +7,7 @@ import {
   useState,
 } from "react";
 import { Link, Outlet, useLocation } from "react-router-dom";
+import { twMerge } from "tailwind-merge";
 
 import { footerNav, mainNav } from "@/constants/sidebarNav";
 
@@ -23,7 +24,9 @@ import Sidebar from "@/components/sidebar/Sidebar";
 
 import { getMyInfo } from "@/api/auth/auth";
 import { getMyWorkspaces, getSavedWorkspace } from "@/api/workspace/org";
+import MenuIcon from "@/assets/icon/sidebar/menu.svg?react";
 import { QUERY_KEYS } from "@/lib/queryKeys";
+import useSidebarStore from "@/store/useSidebarStore";
 import useWorkspaceStore from "@/store/useWorkspaceStore";
 
 export type TMainLayoutOutletContext = {
@@ -53,6 +56,9 @@ export default function MainLayout() {
     getMyWorkspaces,
   );
   const selectedOrgId = useWorkspaceStore((s) => s.selectedOrgId);
+  const isMobileOpen = useSidebarStore((s) => s.isMobileOpen);
+  const setIsMobileOpen = useSidebarStore((s) => s.setIsMobileOpen);
+  const closeMobile = useSidebarStore((s) => s.closeMobile);
 
   const navForHeader = useMemo(
     () => [...applyWorkspacePathsToNav(mainNav, selectedOrgId), ...footerNav],
@@ -110,6 +116,27 @@ export default function MainLayout() {
     }
   }, [isAdsCampaignDetailPath]);
 
+  useEffect(() => {
+    closeMobile();
+  }, [location.pathname, closeMobile]);
+
+  useEffect(() => {
+    if (!isMobileOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeMobile();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isMobileOpen, closeMobile]);
+
+  useEffect(() => {
+    if (!isMobileOpen) return;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isMobileOpen]);
+
   const { parentLabel, currentLabel, parentTo, currentTo } = useMemo(() => {
     const path = pathname;
     if (/^\/ads\/[^/]+\/[^/]+$/.test(path)) {
@@ -164,13 +191,37 @@ export default function MainLayout() {
           autoStart={!localStorage.getItem("hasSeenOnboarding")}
         />
       )}
-      <div className="flex h-full shrink-0">
+      <div
+        className={twMerge(
+          "flex h-full shrink-0",
+          "tablet:fixed tablet:inset-y-0 tablet:left-0 tablet:z-50",
+          "tablet:transition-transform tablet:duration-300 tablet:ease-out",
+          isMobileOpen ? "tablet:translate-x-0" : "tablet:-translate-x-full",
+        )}
+      >
         <Sidebar />
       </div>
+      {isMobileOpen ? (
+        <button
+          type="button"
+          aria-label="메뉴 닫기"
+          className="fixed inset-0 z-40 hidden bg-text-title/40 tablet:block"
+          onClick={closeMobile}
+        />
+      ) : null}
       <main className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-y-auto scroll-pt-14">
         <header className="sticky top-0 z-30 shrink-0 border-b border-surface-300 bg-surface-100">
-          <div className="flex h-14 items-center justify-between px-6 tablet:px-4">
+          <div className="flex h-14 items-center justify-between gap-2 px-6 tablet:px-4">
             <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+              <button
+                type="button"
+                aria-label="메뉴 열기"
+                aria-expanded={isMobileOpen}
+                className="hidden shrink-0 rounded-xl p-2 text-text-body hover:bg-surface-200 tablet:flex"
+                onClick={() => setIsMobileOpen(true)}
+              >
+                <MenuIcon className="h-6 w-6" />
+              </button>
               {isAdsCampaignDetailPath ? (
                 <>
                   <Link to="/ads" className={`shrink-0 ${crumbLinkBody}`}>
@@ -223,7 +274,9 @@ export default function MainLayout() {
               )}
             </div>
 
-            <div className="flex items-center gap-2">{headerRight}</div>
+            <div className="flex shrink-0 items-center gap-2">
+              {headerRight}
+            </div>
           </div>
         </header>
         <div className="w-full min-w-0 px-8 py-6 tablet:px-6">

From c4c83156c7ae0a12209e8472f36bca20b49ca0c6 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 6 Aug 2026 23:26:31 +0900
Subject: [PATCH 17/57] =?UTF-8?q?feat:=20tablet=20Sidebar=20drawer=20UX=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20submenu=20=EC=9E=94=EB=A5=98?=
 =?UTF-8?q?=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sidebar/Sidebar.tsx     | 12 +++++++---
 src/components/sidebar/SidebarItem.tsx |  3 +++
 src/components/sidebar/SubMenu.tsx     |  9 ++++++-
 src/hooks/sidebar/useSidebar.ts        | 33 ++++++++++++++++++++++----
 4 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 328035d6..9418bdc8 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -87,12 +87,15 @@ function collapsedSubmenuInteractionProps(
 export default function Sidebar() {
   const {
     isCollapsed,
+    isCollapsedStore,
+    isMobileOpen,
     openId,
     setOpenId,
     handleItemClick,
     pathname,
     toggleSidebar,
     toggleOpenId,
+    closeMobileDrawer,
   } = useSidebar();
 
   const { showComingSoon } = useComingSoon();
@@ -201,7 +204,7 @@ export default function Sidebar() {
                 key={item.id}
                 className="relative flex flex-col"
                 {...collapsedSubmenuInteractionProps(
-                  isCollapsed && !!item.children?.length,
+                  isCollapsedStore && !isMobileOpen && !!item.children?.length,
                   item.id,
                   setOpenId,
                 )}
@@ -216,6 +219,7 @@ export default function Sidebar() {
                     isOpen={isOpen}
                     className="flex-1 h-full"
                     onClick={handleItemClick}
+                    onNavigate={closeMobileDrawer}
                   />
                   {showChevron && (
                     <button
@@ -248,8 +252,9 @@ export default function Sidebar() {
                     <SubMenu
                       key={item.id}
                       items={item.children}
-                      isCollapsed={isCollapsed}
+                      isCollapsed={isCollapsedStore && !isMobileOpen}
                       parentLabel={item.label}
+                      onNavigate={closeMobileDrawer}
                     />
                   ) : null}
                 </AnimatePresence>
@@ -276,6 +281,7 @@ export default function Sidebar() {
                   isCollapsed={isCollapsed}
                   className="w-full h-full"
                   onClick={handleFooterItemClick}
+                  onNavigate={closeMobileDrawer}
                   trailing={
                     item.id === "integrations" &&
                     showIntegrationsAttention &&
@@ -288,7 +294,7 @@ export default function Sidebar() {
             );
           })}
 
-          <div className="mt-2 pt-2 border-t border-surface-300">
+          <div className="mt-2 border-t border-surface-300 pt-2 tablet:hidden">
             <button
               type="button"
               aria-label={isCollapsed ? "사이드바 펼치기" : "사이드바 접기"}
diff --git a/src/components/sidebar/SidebarItem.tsx b/src/components/sidebar/SidebarItem.tsx
index e2ab2612..a1da8992 100644
--- a/src/components/sidebar/SidebarItem.tsx
+++ b/src/components/sidebar/SidebarItem.tsx
@@ -10,6 +10,7 @@ interface ISidebarItemProps {
   isOpen?: boolean;
   className: string;
   onClick: (id: string, hasChildren: boolean) => void;
+  onNavigate?: () => void;
   trailing?: ReactNode;
 }
 
@@ -19,6 +20,7 @@ export const SidebarItem = memo(function SidebarItem({
   isOpen,
   className,
   onClick,
+  onNavigate,
   trailing,
 }: ISidebarItemProps) {
   const hasChildren = !!item.children?.length;
@@ -52,6 +54,7 @@ export const SidebarItem = memo(function SidebarItem({
         onClick={(e) => {
           if (e.defaultPrevented) return;
           onClick(item.id, hasChildren);
+          onNavigate?.();
         }}
       >
         {content}
diff --git a/src/components/sidebar/SubMenu.tsx b/src/components/sidebar/SubMenu.tsx
index 260d581f..32ffaa23 100644
--- a/src/components/sidebar/SubMenu.tsx
+++ b/src/components/sidebar/SubMenu.tsx
@@ -8,9 +8,15 @@ interface ISubMenuProps {
   items: INavItem[];
   isCollapsed: boolean;
   parentLabel?: string;
+  onNavigate?: () => void;
 }
 
-export function SubMenu({ items, isCollapsed, parentLabel }: ISubMenuProps) {
+export function SubMenu({
+  items,
+  isCollapsed,
+  parentLabel,
+  onNavigate,
+}: ISubMenuProps) {
   const getSubItemClass = (isActive: boolean) =>
     twMerge(
       "flex items-center rounded-xl px-3 font-body2 transition-all duration-200 whitespace-nowrap",
@@ -60,6 +66,7 @@ export function SubMenu({ items, isCollapsed, parentLabel }: ISubMenuProps) {
           to={child.path ?? "#"}
           end
           className={({ isActive }) => getSubItemClass(isActive)}
+          onClick={() => onNavigate?.()}
         >
           {isCollapsed && parentLabel ? (
             <div className="flex min-w-0 flex-col items-start">
diff --git a/src/hooks/sidebar/useSidebar.ts b/src/hooks/sidebar/useSidebar.ts
index db4b3ae0..ec4f434f 100644
--- a/src/hooks/sidebar/useSidebar.ts
+++ b/src/hooks/sidebar/useSidebar.ts
@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { useLocation } from "react-router-dom";
 
 import { mainNavSidebar } from "@/utils/navigation/mainNavSidebar";
@@ -9,14 +15,30 @@ import useSidebarStore from "@/store/useSidebarStore";
 export const useSidebar = () => {
   const location = useLocation();
   const [openId, setOpenId] = useState<string | null>(null);
-  const isCollapsed = useSidebarStore((s) => s.isCollapsed);
+  const isCollapsedStore = useSidebarStore((s) => s.isCollapsed);
+  const isMobileOpen = useSidebarStore((s) => s.isMobileOpen);
+  const closeMobileFromStore = useSidebarStore((s) => s.closeMobile);
   const setIsCollapsed = useSidebarStore((s) => s.setIsCollapsed);
+  /** tablet drawer 열림 시 항상 expanded */
+  const isCollapsed = isMobileOpen ? false : isCollapsedStore;
 
   const lastPathRef = useRef("");
   const pathname = normalizePathname(location.pathname);
 
   const { childIdToParentId } = mainNavSidebar;
 
+  /** drawer 닫힘 시 flyout submenu(openId) 잔류 방지 */
+  useLayoutEffect(() => {
+    if (!isMobileOpen) {
+      setOpenId(null);
+    }
+  }, [isMobileOpen]);
+
+  const closeMobileDrawer = useCallback(() => {
+    setOpenId(null);
+    closeMobileFromStore();
+  }, [closeMobileFromStore]);
+
   useEffect(() => {
     if (isCollapsed) return;
     const parentId = mainNavSidebar.resolveParentId(pathname);
@@ -28,8 +50,8 @@ export const useSidebar = () => {
   }, [pathname, isCollapsed]);
 
   const toggleSidebar = () => {
-    setIsCollapsed(!isCollapsed);
-    if (!isCollapsed) lastPathRef.current = "";
+    setIsCollapsed(!isCollapsedStore);
+    if (!isCollapsedStore) lastPathRef.current = "";
     setOpenId(null);
   };
 
@@ -51,11 +73,14 @@ export const useSidebar = () => {
 
   return {
     isCollapsed,
+    isCollapsedStore,
+    isMobileOpen,
     openId,
     setOpenId,
     pathname,
     toggleSidebar,
     handleItemClick,
     toggleOpenId,
+    closeMobileDrawer,
   };
 };

From f4d44a4880f71800dfb4f134238e0dfd297ae9fd Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 23:33:29 +0900
Subject: [PATCH 18/57] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=EB=90=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=82=BD=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dashboard/timeline/Timeline.tsx | 57 +++++++++++------------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/pages/dashboard/timeline/Timeline.tsx b/src/pages/dashboard/timeline/Timeline.tsx
index 98acf1ef..8451fc05 100644
--- a/src/pages/dashboard/timeline/Timeline.tsx
+++ b/src/pages/dashboard/timeline/Timeline.tsx
@@ -2,11 +2,13 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { twMerge } from "tailwind-merge";
 
+import type { TTimelineSort } from "@/types/timeline/api";
 import type { ITimelineSummaryPanelData } from "@/types/timeline/summary";
 import type {
   ITimelineCampaignBar,
   TTimelineViewUnit,
 } from "@/types/timeline/ui";
+import type { TTimelineStatusFilter } from "@/constants/timeline/filterSort";
 import {
   TIMELINE_COL_WIDTH,
   TIMELINE_PAGE_HEIGHT,
@@ -31,6 +33,7 @@ import TimelineAxis from "@/components/timeline/TimelineAxis";
 import TimelineBar from "@/components/timeline/TimelineBar";
 import TimelineCreateModal from "@/components/timeline/TimelineCreateModal";
 import TimelineEmptyState from "@/components/timeline/TimelineEmptyState";
+import TimelineFilterSortMenus from "@/components/timeline/TimelineFilterSortMenus";
 import TimelineGrid from "@/components/timeline/TimelineGrid";
 import TimelinePerformancePanel from "@/components/timeline/TimelinePerformancePanel";
 import {
@@ -41,15 +44,10 @@ import TimelineStatusLegend from "@/components/timeline/TimelineStatusLegend";
 
 import PlusIcon from "@/assets/icon/common/plus.svg?react";
 import TrashIcon from "@/assets/icon/common/trash.svg?react";
-import FilterIcon from "@/assets/icon/timeline/filter.svg?react";
-import SortIcon from "@/assets/icon/timeline/sort.svg?react";
 
 const SUMMARY_POLL_INTERVAL_MS = 1500;
 const SUMMARY_POLL_TIMEOUT_MS = 90000;
 
-const TOOLBAR_ACTION_CLASS =
-  "flex items-center gap-1.5 rounded-lg px-2 py-1.5 font-caption text-text-muted opacity-50 cursor-not-allowed";
-
 export default function Timeline() {
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -71,12 +69,9 @@ export default function Timeline() {
     number | null
   >(null);
 
-  const {
-    data: timelineList = [],
-    isLoading,
-    isError,
-    error,
-  } = useTimelineList();
+  const [statusFilter, setStatusFilter] =
+    useState<TTimelineStatusFilter>("ALL");
+  const [sort, setSort] = useState<TTimelineSort>("DISPLAY_ORDER");
 
   const { mutate: deleteTimeline, isPending: isDeleting } = useDeleteTimeline();
   const { mutate: requestSummary, isPending: isSummaryPending } =
@@ -103,6 +98,21 @@ export default function Timeline() {
     };
   }, [editDetail]);
 
+  const listParams = useMemo(
+    () => ({
+      status: statusFilter === "ALL" ? undefined : statusFilter,
+      sort,
+    }),
+    [statusFilter, sort],
+  );
+
+  const {
+    data: timelineList = [],
+    isLoading,
+    isError,
+    error,
+  } = useTimelineList(listParams);
+
   const gridData = useMemo(
     () => buildTimelineGrid({ items: timelineList, viewUnit, periodIndex }),
     [timelineList, viewUnit, periodIndex],
@@ -325,24 +335,13 @@ export default function Timeline() {
                 onGoToToday={handleGoToToday}
                 className="justify-self-center"
               />
-              <div className="flex items-center justify-self-end gap-3 tablet:justify-self-end">
-                <span
-                  className={TOOLBAR_ACTION_CLASS}
-                  title="준비 중"
-                  aria-disabled
-                >
-                  <SortIcon className="h-4 w-4" />
-                  Sort
-                </span>
-                <span
-                  className={TOOLBAR_ACTION_CLASS}
-                  title="준비 중"
-                  aria-disabled
-                >
-                  <FilterIcon className="h-4 w-4" />
-                  Filter
-                </span>
-              </div>
+              <TimelineFilterSortMenus
+                statusFilter={statusFilter}
+                sort={sort}
+                onStatusFilterChange={setStatusFilter}
+                onSortChange={setSort}
+                className="justify-self-end"
+              />
             </div>
           </div>
           {hasNoTimelines ? (

From 08eba537e345412b32c84e5880d8b0090aaf7c6d Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 23:37:48 +0900
Subject: [PATCH 19/57] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EC=A0=95=EB=A0=AC=20=EB=9D=BC=EB=B2=A8=EC=9D=84=20?=
 =?UTF-8?q?=EC=8B=A4=EC=A0=9C=20=EC=A0=95=EB=A0=AC=EC=88=9C=EC=84=9C?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/timeline/filterSort.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/constants/timeline/filterSort.ts b/src/constants/timeline/filterSort.ts
index 60eb5531..76b5dff6 100644
--- a/src/constants/timeline/filterSort.ts
+++ b/src/constants/timeline/filterSort.ts
@@ -30,7 +30,7 @@ export const TIMELINE_SORT_OPTIONS: {
   value: TTimelineSort;
   label: string;
 }[] = [
-  { value: "DISPLAY_ORDER", label: "생성 순서" },
-  { value: "LATEST", label: "종료일 가까운 순" },
-  { value: "OLDEST", label: "종료일 먼 순" },
+  { value: "DISPLAY_ORDER", label: "기본 순서" },
+  { value: "LATEST", label: "종료일 먼 순" },
+  { value: "OLDEST", label: "종료일 가까운 순" },
 ];

From b173bb074547e92e843357f401b306f72357f7eb Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 23:51:05 +0900
Subject: [PATCH 20/57] =?UTF-8?q?fix:=20=EC=83=81=EB=8C=80=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=84=EC=B9=AD=20import=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelineFilterSortMenus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/TimelineFilterSortMenus.tsx b/src/components/timeline/TimelineFilterSortMenus.tsx
index 57859e7a..54e68d8d 100644
--- a/src/components/timeline/TimelineFilterSortMenus.tsx
+++ b/src/components/timeline/TimelineFilterSortMenus.tsx
@@ -10,7 +10,7 @@ import {
 import {
   DropdownMenu,
   type TMenuItem,
-} from "../common/dropdownmenu/DropdownMenu";
+} from "@/components/common/dropdownmenu/DropdownMenu";
 
 import FilterIcon from "@/assets/icon/timeline/filter.svg?react";
 import SortIcon from "@/assets/icon/timeline/sort.svg?react";

From 3d16801c4d0491c7c26b0d29a7f7911fd065fc6d Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 23:56:41 +0900
Subject: [PATCH 21/57] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EB=B0=94=20=EC=A0=95=EB=A0=AC/=ED=95=84=ED=84=B0?=
 =?UTF-8?q?=20=EA=B0=92=20=ED=8E=98=EC=9D=B4=EC=A7=80=20unmount=ED=9B=84?=
 =?UTF-8?q?=EC=97=90=EB=8F=84=20=EB=82=A8=EC=95=84=EC=9D=B4=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20Zustand=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dashboard/timeline/Timeline.tsx | 10 +++++-----
 src/store/useTimelineStore.ts             | 20 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 src/store/useTimelineStore.ts

diff --git a/src/pages/dashboard/timeline/Timeline.tsx b/src/pages/dashboard/timeline/Timeline.tsx
index 8451fc05..637ca7ce 100644
--- a/src/pages/dashboard/timeline/Timeline.tsx
+++ b/src/pages/dashboard/timeline/Timeline.tsx
@@ -2,13 +2,11 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { twMerge } from "tailwind-merge";
 
-import type { TTimelineSort } from "@/types/timeline/api";
 import type { ITimelineSummaryPanelData } from "@/types/timeline/summary";
 import type {
   ITimelineCampaignBar,
   TTimelineViewUnit,
 } from "@/types/timeline/ui";
-import type { TTimelineStatusFilter } from "@/constants/timeline/filterSort";
 import {
   TIMELINE_COL_WIDTH,
   TIMELINE_PAGE_HEIGHT,
@@ -44,6 +42,7 @@ import TimelineStatusLegend from "@/components/timeline/TimelineStatusLegend";
 
 import PlusIcon from "@/assets/icon/common/plus.svg?react";
 import TrashIcon from "@/assets/icon/common/trash.svg?react";
+import useTimelineStore from "@/store/useTimelineStore";
 
 const SUMMARY_POLL_INTERVAL_MS = 1500;
 const SUMMARY_POLL_TIMEOUT_MS = 90000;
@@ -69,9 +68,10 @@ export default function Timeline() {
     number | null
   >(null);
 
-  const [statusFilter, setStatusFilter] =
-    useState<TTimelineStatusFilter>("ALL");
-  const [sort, setSort] = useState<TTimelineSort>("DISPLAY_ORDER");
+  const statusFilter = useTimelineStore((s) => s.statusFilter);
+  const sort = useTimelineStore((s) => s.sort);
+  const setStatusFilter = useTimelineStore((s) => s.setStatusFilter);
+  const setSort = useTimelineStore((s) => s.setSort);
 
   const { mutate: deleteTimeline, isPending: isDeleting } = useDeleteTimeline();
   const { mutate: requestSummary, isPending: isSummaryPending } =
diff --git a/src/store/useTimelineStore.ts b/src/store/useTimelineStore.ts
new file mode 100644
index 00000000..ec21240e
--- /dev/null
+++ b/src/store/useTimelineStore.ts
@@ -0,0 +1,20 @@
+import { create } from "zustand";
+
+import type { TTimelineSort } from "@/types/timeline/api";
+import type { TTimelineStatusFilter } from "@/constants/timeline/filterSort";
+
+interface ITimelineUiState {
+  statusFilter: TTimelineStatusFilter;
+  sort: TTimelineSort;
+  setStatusFilter: (statusFilter: TTimelineStatusFilter) => void;
+  setSort: (sort: TTimelineSort) => void;
+}
+
+const useTimelineStore = create<ITimelineUiState>((set) => ({
+  statusFilter: "ALL",
+  sort: "DISPLAY_ORDER",
+  setStatusFilter: (statusFilter) => set({ statusFilter }),
+  setSort: (sort) => set({ sort }),
+}));
+
+export default useTimelineStore;

From 70524a654830ac2dd9fa524b9abee686637ef157 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 00:08:03 +0900
Subject: [PATCH 22/57] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20=EC=A0=84?=
 =?UTF-8?q?=ED=99=98=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=83=81=EB=8B=A8=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/PlatformViewSwitcher.tsx         | 94 +++++++++++++++++++
 .../dashboard/platform/SinglePlatformView.tsx |  4 +-
 src/index.css                                 |  1 +
 .../dashboard/platform/PlatformDashboard.tsx  | 66 +++----------
 4 files changed, 112 insertions(+), 53 deletions(-)
 create mode 100644 src/components/dashboard/platform/PlatformViewSwitcher.tsx

diff --git a/src/components/dashboard/platform/PlatformViewSwitcher.tsx b/src/components/dashboard/platform/PlatformViewSwitcher.tsx
new file mode 100644
index 00000000..74802183
--- /dev/null
+++ b/src/components/dashboard/platform/PlatformViewSwitcher.tsx
@@ -0,0 +1,94 @@
+import { twMerge } from "tailwind-merge";
+
+import Button from "@/components/common/button/Button";
+import { DropdownMenu } from "@/components/common/dropdownmenu/DropdownMenu";
+
+import ChevronDownIcon from "@/assets/icon/chevron/chevron-up.svg?react";
+
+type TPlatformViewSwitcherItem = {
+  label: string;
+  onClick: () => void;
+};
+
+interface IPlatformViewSwitcherProps {
+  isAllView: boolean;
+  selectedPlatformLabel: string;
+  platformItems: TPlatformViewSwitcherItem[];
+  onSelectAll: () => void;
+  layout?: "header" | "mobile";
+  className?: string;
+}
+
+export default function PlatformViewSwitcher({
+  isAllView,
+  selectedPlatformLabel,
+  platformItems,
+  onSelectAll,
+  layout = "header",
+  className,
+}: IPlatformViewSwitcherProps) {
+  const isMobileLayout = layout === "mobile";
+
+  return (
+    <div
+      className={twMerge(
+        isMobileLayout
+          ? "hidden w-full min-w-0 grid-cols-2 gap-2 mobile:grid"
+          : "flex items-center gap-2",
+        className,
+      )}
+    >
+      <Button
+        type="button"
+        size="small"
+        variant={isAllView ? "primary" : "custom"}
+        onClick={onSelectAll}
+        className={twMerge(
+          "rounded-2xl py-5 font-body1",
+          isMobileLayout ? "w-full min-w-0" : "w-28 shrink-0",
+          !isAllView &&
+            "border border-surface-400 bg-surface-100 text-text-muted hover:bg-surface-200",
+        )}
+      >
+        전체보기
+      </Button>
+      <div className={isMobileLayout ? "min-w-0" : undefined}>
+        <DropdownMenu
+          fullWidth={isMobileLayout}
+          menuClassName={twMerge("w-34", isMobileLayout && "w-full")}
+          trigger={
+            <Button
+              type="button"
+              size="small"
+              variant={!isAllView ? "primary" : "custom"}
+              className={twMerge(
+                "flex items-center rounded-2xl py-5",
+                isMobileLayout
+                  ? "w-full min-w-0 justify-between"
+                  : "w-34 shrink-0",
+                isAllView &&
+                  "border border-surface-400 bg-surface-100 text-text-muted hover:bg-surface-200",
+              )}
+            >
+              <span
+                className={twMerge(
+                  "truncate font-body1",
+                  isAllView ? "text-text-muted" : "text-surface-100",
+                )}
+              >
+                {selectedPlatformLabel}
+              </span>
+              <ChevronDownIcon
+                className={twMerge(
+                  "ml-2 h-3 w-3 shrink-0 rotate-180 transition-transform",
+                  isAllView ? "text-text-muted" : "text-surface-100",
+                )}
+              />
+            </Button>
+          }
+          items={platformItems}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/dashboard/platform/SinglePlatformView.tsx b/src/components/dashboard/platform/SinglePlatformView.tsx
index dce1fd9f..793ae19d 100644
--- a/src/components/dashboard/platform/SinglePlatformView.tsx
+++ b/src/components/dashboard/platform/SinglePlatformView.tsx
@@ -92,8 +92,8 @@ export default function SinglePlatformView({
 
   return (
     <div className="flex flex-col gap-8">
-      {/* platform header */}
-      <div className="flex items-center justify-between">
+      {/* platform header — mobile에서는 dropdown으로 플랫폼명 표시 */}
+      <div className="flex items-center justify-between mobile:hidden">
         <div className="h-10 flex items-center">
           {logoInfo ? (
             <logoInfo.component
diff --git a/src/index.css b/src/index.css
index 7951fa68..9c07e02e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @custom-variant tablet (@media (max-width: 1280px));
+@custom-variant mobile (@media (max-width: 639px));
 
 @import "./styles/tokens.css";
 @import "./styles/base.css";
diff --git a/src/pages/dashboard/platform/PlatformDashboard.tsx b/src/pages/dashboard/platform/PlatformDashboard.tsx
index 1eb72fe9..02098047 100644
--- a/src/pages/dashboard/platform/PlatformDashboard.tsx
+++ b/src/pages/dashboard/platform/PlatformDashboard.tsx
@@ -1,17 +1,13 @@
 import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { useOutletContext } from "react-router-dom";
-import { twMerge } from "tailwind-merge";
 
 import type { TProviderType } from "@/types/dashboard/overview";
 import { PLATFORM_MAP, PROVIDER_TYPES } from "@/types/dashboard/provider";
 
-import Button from "@/components/common/button/Button";
-import { DropdownMenu } from "@/components/common/dropdownmenu/DropdownMenu";
 import AllPlatformView from "@/components/dashboard/platform/AllPlatformView";
+import PlatformViewSwitcher from "@/components/dashboard/platform/PlatformViewSwitcher";
 import SinglePlatformView from "@/components/dashboard/platform/SinglePlatformView";
 
-import ChevronDownIcon from "@/assets/icon/chevron/chevron-up.svg?react";
-
 type TPlatformView = "전체" | TProviderType;
 
 type TDashboardHeaderContext = {
@@ -43,52 +39,13 @@ export default function PlatformDashboard() {
     if (!setHeaderRight) return;
 
     setHeaderRight(
-      <div className="flex items-center gap-3">
-        <Button
-          type="button"
-          size="small"
-          variant={isAllView ? "primary" : "custom"}
-          onClick={() => setSelectedPlatform("전체")}
-          className={twMerge(
-            "w-28 py-5 font-body1 rounded-2xl",
-            !isAllView &&
-              "border border-surface-400 bg-surface-100 text-text-muted hover:bg-surface-200",
-          )}
-        >
-          전체보기
-        </Button>
-        <DropdownMenu
-          menuClassName="w-34"
-          trigger={
-            <Button
-              type="button"
-              size="small"
-              variant={!isAllView ? "primary" : "custom"}
-              className={twMerge(
-                "flex items-center w-34 py-5 rounded-2xl",
-                isAllView &&
-                  "border border-surface-400 bg-surface-100 text-text-muted hover:bg-surface-200",
-              )}
-            >
-              <span
-                className={twMerge(
-                  "font-body1",
-                  isAllView ? "text-text-muted" : "text-surface-100",
-                )}
-              >
-                {selectedPlatformLabel}
-              </span>
-              <ChevronDownIcon
-                className={twMerge(
-                  "w-3 h-3 rotate-180 ml-2 transition-transform",
-                  isAllView ? "text-text-muted" : "text-surface-100",
-                )}
-              />
-            </Button>
-          }
-          items={platformItems}
-        />
-      </div>,
+      <PlatformViewSwitcher
+        isAllView={isAllView}
+        selectedPlatformLabel={selectedPlatformLabel}
+        platformItems={platformItems}
+        onSelectAll={() => setSelectedPlatform("전체")}
+        className="mobile:hidden"
+      />,
     );
 
     return () => setHeaderRight(null);
@@ -96,6 +53,13 @@ export default function PlatformDashboard() {
 
   return (
     <section className="flex w-full min-w-0 flex-col gap-8">
+      <PlatformViewSwitcher
+        isAllView={isAllView}
+        selectedPlatformLabel={selectedPlatformLabel}
+        platformItems={platformItems}
+        onSelectAll={() => setSelectedPlatform("전체")}
+        layout="mobile"
+      />
       {isAllView ? (
         <AllPlatformView />
       ) : (

From 6d4f3226806e420b64a4d2a44a492f7c7de5a265 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 00:14:08 +0900
Subject: [PATCH 23/57] =?UTF-8?q?style:=20=ED=94=8C=EB=9E=AB=ED=8F=BC?=
 =?UTF-8?q?=EB=B7=B0=20KPI=20=EB=AA=A8=EB=B0=94=EC=9D=BC=201=EC=97=B4=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/platform/SinglePlatformView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dashboard/platform/SinglePlatformView.tsx b/src/components/dashboard/platform/SinglePlatformView.tsx
index 793ae19d..93f2018b 100644
--- a/src/components/dashboard/platform/SinglePlatformView.tsx
+++ b/src/components/dashboard/platform/SinglePlatformView.tsx
@@ -110,7 +110,7 @@ export default function SinglePlatformView({
         FallbackComponent={MetricErrorFallback}
         resetKeys={[platformData]}
       >
-        <div className="grid grid-cols-4 tablet:grid-cols-2 gap-4">
+        <div className="grid grid-cols-4 gap-4 tablet:grid-cols-2 grid-mobile-1">
           {isMetricsLoading ? (
             Array.from({ length: 4 }).map((_, i) => (
               <div

From bc2325a02537b08c3407c3df31471633154a8774 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 00:17:35 +0900
Subject: [PATCH 24/57] =?UTF-8?q?style:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=94=8C=EB=9E=AB=ED=8F=BC=20=EC=84=A0=ED=83=9D=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EA=B0=80=EC=9A=B4?=
 =?UTF-8?q?=EB=8D=B0=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/platform/PlatformViewSwitcher.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/dashboard/platform/PlatformViewSwitcher.tsx b/src/components/dashboard/platform/PlatformViewSwitcher.tsx
index 74802183..8fb54492 100644
--- a/src/components/dashboard/platform/PlatformViewSwitcher.tsx
+++ b/src/components/dashboard/platform/PlatformViewSwitcher.tsx
@@ -63,9 +63,7 @@ export default function PlatformViewSwitcher({
               variant={!isAllView ? "primary" : "custom"}
               className={twMerge(
                 "flex items-center rounded-2xl py-5",
-                isMobileLayout
-                  ? "w-full min-w-0 justify-between"
-                  : "w-34 shrink-0",
+                isMobileLayout ? "w-full min-w-0" : "w-34 shrink-0",
                 isAllView &&
                   "border border-surface-400 bg-surface-100 text-text-muted hover:bg-surface-200",
               )}

From f0ea81951505bccd164c666c89ca9d7376099aec Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 00:22:31 +0900
Subject: [PATCH 25/57] =?UTF-8?q?style:=20=ED=94=8C=EB=9E=AB=ED=8F=BC?=
 =?UTF-8?q?=EB=B7=B0=20KPI=20=ED=86=B5=ED=95=A9=EC=97=90=20=EB=A7=9E?=
 =?UTF-8?q?=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/platform/SinglePlatformView.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/dashboard/platform/SinglePlatformView.tsx b/src/components/dashboard/platform/SinglePlatformView.tsx
index 93f2018b..d2454089 100644
--- a/src/components/dashboard/platform/SinglePlatformView.tsx
+++ b/src/components/dashboard/platform/SinglePlatformView.tsx
@@ -115,11 +115,11 @@ export default function SinglePlatformView({
             Array.from({ length: 4 }).map((_, i) => (
               <div
                 key={i}
-                className="rounded-3xl border border-surface-100/40 bg-surface-100/80 p-7 shadow-Soft backdrop-blur-sm flex flex-col gap-4"
+                className="flex flex-col gap-3 rounded-3xl border border-surface-100/40 bg-surface-100/80 px-7 py-5 shadow-Soft backdrop-blur-sm"
               >
                 <Skeleton className="h-4 w-16" />
-                <Skeleton className="h-8 w-24" />
-                <Skeleton className="h-6 w-14 rounded-full" />
+                <Skeleton className="h-7 w-24" />
+                <Skeleton className="h-5 w-14 rounded-full" />
               </div>
             ))
           ) : isMetricsError ? (
@@ -137,6 +137,8 @@ export default function SinglePlatformView({
                 title={kpi.title}
                 value={kpi.value}
                 trend={kpi.trend}
+                className="gap-3 py-5"
+                compact
               />
             ))
           )}

From 749f3d9612261676aa7c9386e93ba3b870b501e8 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 00:31:22 +0900
Subject: [PATCH 26/57] =?UTF-8?q?style:=20=EC=84=B1=EA=B3=BC=20=EC=9A=B0?=
 =?UTF-8?q?=EC=88=98=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=EC=97=90=EC=84=9C=20=EB=A1=9C=EA=B3=A0=EB=A7=8C=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/platform/TopPerformanceList.tsx      | 4 ++--
 .../dashboard/platform/skeleton/PlatformSkeleton.tsx          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/dashboard/platform/TopPerformanceList.tsx b/src/components/dashboard/platform/TopPerformanceList.tsx
index 2b1d5916..fb19ac4b 100644
--- a/src/components/dashboard/platform/TopPerformanceList.tsx
+++ b/src/components/dashboard/platform/TopPerformanceList.tsx
@@ -35,9 +35,9 @@ export const TopPerformanceList = memo(function TopPerformanceList({
                 {item.rank}
               </span>
               <div className="shrink-0" aria-hidden="true">
-                {Logo && <Logo className="w-8 h-8" />}
+                {Logo && <Logo className="h-8 w-8" />}
               </div>
-              <span className="font-body1 text-text-title truncate">
+              <span className="truncate font-body1 text-text-title mobile:sr-only">
                 {name}
               </span>
             </div>
diff --git a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
index 08e6e770..336deee5 100644
--- a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
+++ b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
@@ -13,7 +13,7 @@ export function TopPerformanceListSkeleton() {
         <div key={i} className="flex items-center gap-4 w-full">
           <Skeleton className="h-4 w-4 shrink-0" /> {/* 순위 숫자 */}
           <SkeletonCircle className="h-8 w-8 shrink-0" /> {/* 로고 */}
-          <Skeleton className="h-4 flex-1" /> {/* 이름 */}
+          <Skeleton className="h-4 flex-1 mobile:hidden" /> {/* 이름 */}
           <Skeleton className="h-6 w-20" /> {/* 수치 */}
         </div>
       ))}

From 9cae937b54f1e52c6cae7f6470c9072a7772d172 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 00:41:48 +0900
Subject: [PATCH 27/57] =?UTF-8?q?style:=20=EC=84=B1=EA=B3=BC=20=ED=9A=A8?=
 =?UTF-8?q?=EC=9C=A8=20=EC=B0=A8=ED=8A=B8=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?Y=EC=B6=95=20=EC=88=A8=EA=B9=80=20=EB=B0=8F=20=EB=9D=BC?=
 =?UTF-8?q?=EB=B2=A8=20=EC=97=AC=EB=B0=B1=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/PerformanceEfficiencyChart.tsx     | 34 ++++++++++++++++---
 .../performanceEfficiencyChart.config.ts      | 15 +++++---
 .../platform/skeleton/PlatformSkeleton.tsx    |  4 +--
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/dashboard/charts/PerformanceEfficiencyChart.tsx b/src/components/dashboard/charts/PerformanceEfficiencyChart.tsx
index 9d814efe..0a4fa3a5 100644
--- a/src/components/dashboard/charts/PerformanceEfficiencyChart.tsx
+++ b/src/components/dashboard/charts/PerformanceEfficiencyChart.tsx
@@ -1,4 +1,4 @@
-import { lazy, memo, Suspense, useMemo } from "react";
+import { lazy, memo, Suspense, useMemo, useSyncExternalStore } from "react";
 
 import type { IPlatformPerformance } from "@/types/dashboard/platform";
 import { PLATFORM_MAP } from "@/types/dashboard/provider";
@@ -9,15 +9,37 @@ import { getMixedChartOptions } from "./performanceEfficiencyChart.config";
 
 const Chart = lazy(() => import("react-apexcharts"));
 
+const MOBILE_MQ = "(max-width: 639px)";
+
+function subscribeMobile(onStoreChange: () => void) {
+  const mq = window.matchMedia(MOBILE_MQ);
+  mq.addEventListener("change", onStoreChange);
+  return () => mq.removeEventListener("change", onStoreChange);
+}
+
+function getMobileSnapshot() {
+  return window.matchMedia(MOBILE_MQ).matches;
+}
+
+function getServerMobileSnapshot() {
+  return false;
+}
+
 export const PerformanceEfficiencyChart = memo(
   ({ data }: { data: IPlatformPerformance[] }) => {
+    const isMobile = useSyncExternalStore(
+      subscribeMobile,
+      getMobileSnapshot,
+      getServerMobileSnapshot,
+    );
+
     const categories = useMemo(
       () => data.map((d) => PLATFORM_MAP[d.provider] || d.provider),
       [data],
     );
     const options = useMemo(
-      () => getMixedChartOptions(categories),
-      [categories],
+      () => getMixedChartOptions(categories, { compact: isMobile }),
+      [categories, isMobile],
     );
 
     const series = [
@@ -40,9 +62,11 @@ export const PerformanceEfficiencyChart = memo(
       },
     ];
 
+    const chartHeight = isMobile ? 175 : 150;
+
     return (
-      <Suspense fallback={<div className="h-40" />}>
-        <Chart options={options} series={series} height={150} />
+      <Suspense fallback={<div className={isMobile ? "h-44" : "h-40"} />}>
+        <Chart options={options} series={series} height={chartHeight} />
       </Suspense>
     );
   },
diff --git a/src/components/dashboard/charts/performanceEfficiencyChart.config.ts b/src/components/dashboard/charts/performanceEfficiencyChart.config.ts
index 648244fe..19df3cfc 100644
--- a/src/components/dashboard/charts/performanceEfficiencyChart.config.ts
+++ b/src/components/dashboard/charts/performanceEfficiencyChart.config.ts
@@ -2,7 +2,10 @@ import type { ApexOptions } from "apexcharts";
 
 import { METRIC_REGISTRY as M } from "@/utils/dashboard/metricRegistry";
 
-export const getMixedChartOptions = (categories: string[]): ApexOptions => ({
+export const getMixedChartOptions = (
+  categories: string[],
+  { compact = false }: { compact?: boolean } = {},
+): ApexOptions => ({
   chart: {
     type: "line",
     toolbar: { show: false },
@@ -35,6 +38,7 @@ export const getMixedChartOptions = (categories: string[]): ApexOptions => ({
   xaxis: {
     categories: categories,
     labels: {
+      hideOverlappingLabels: !compact,
       style: {
         fontSize: "14px",
         fontWeight: 500,
@@ -47,6 +51,7 @@ export const getMixedChartOptions = (categories: string[]): ApexOptions => ({
   yaxis: [
     {
       seriesName: M.ctr.label,
+      show: !compact,
       labels: {
         formatter: (val) => M.ctr.format(val),
         style: {
@@ -62,6 +67,7 @@ export const getMixedChartOptions = (categories: string[]): ApexOptions => ({
     {
       opposite: true,
       seriesName: M.impressions.label,
+      show: !compact,
       labels: {
         offsetX: -10,
         formatter: (val) => M.impressions.format(val),
@@ -90,10 +96,9 @@ export const getMixedChartOptions = (categories: string[]): ApexOptions => ({
   grid: {
     borderColor: "var(--color-surface-200)",
     yaxis: { lines: { show: true } },
-    padding: {
-      bottom: -15,
-      top: -15,
-    },
+    padding: compact
+      ? { bottom: 4, top: 0, left: 4, right: 4 }
+      : { bottom: -15, top: -15 },
   },
   legend: { show: false },
 });
diff --git a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
index 336deee5..943b733d 100644
--- a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
+++ b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
@@ -56,8 +56,8 @@ export function AdStatusChartSkeleton() {
 //플랫폼별 성과 효율
 export function PerformanceEfficiencyChartSkeleton() {
   return (
-    <div className="flex-1 flex items-center justify-center w-full px-5">
-      <Skeleton className="w-full h-35 rounded-2xl mb-2" />
+    <div className="flex w-full flex-1 items-center justify-center px-5">
+      <Skeleton className="mb-2 h-35 w-full rounded-2xl" />
     </div>
   );
 }

From c09dcee6bfe7b974b25c74f6699940a191f3d64c Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 00:47:04 +0900
Subject: [PATCH 28/57] =?UTF-8?q?style:=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EC=B9=B4=EB=93=9C=20KPI=20heading3?=
 =?UTF-8?q?=EB=A1=9C=20=EC=B6=95=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/card/StatCard.tsx                      | 4 ++++
 src/components/dashboard/platform/PlatformDetailCard.tsx     | 2 ++
 .../dashboard/platform/skeleton/PlatformSkeleton.tsx         | 5 +++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/common/card/StatCard.tsx b/src/components/common/card/StatCard.tsx
index f498a15e..3fab741f 100644
--- a/src/components/common/card/StatCard.tsx
+++ b/src/components/common/card/StatCard.tsx
@@ -16,6 +16,8 @@ export interface IStatCardProps extends HTMLAttributes<HTMLDivElement> {
   trend?: ITrend;
   /** 수치·트렌드 배지를 기본보다 한 단계 작게 (제목은 동일) */
   compact?: boolean;
+  /** 수치 타이포 오버라이드 (중첩 카드 등) */
+  valueClassName?: string;
 }
 
 const trendClasses: Record<ITrend["direction"], string> = {
@@ -61,6 +63,7 @@ const StatCard = memo(function StatCard({
   trend,
   className,
   compact = false,
+  valueClassName,
   ...rest
 }: IStatCardProps) {
   return (
@@ -76,6 +79,7 @@ const StatCard = memo(function StatCard({
         className={twMerge(
           "text-text-title tracking-tight",
           compact ? "font-heading2" : "font-heading1",
+          valueClassName,
         )}
       >
         {value}
diff --git a/src/components/dashboard/platform/PlatformDetailCard.tsx b/src/components/dashboard/platform/PlatformDetailCard.tsx
index 900cc2c8..e134cf78 100644
--- a/src/components/dashboard/platform/PlatformDetailCard.tsx
+++ b/src/components/dashboard/platform/PlatformDetailCard.tsx
@@ -43,6 +43,8 @@ export const PlatformDetailCard = memo(
               value={kpi.value}
               trend={kpi.trend}
               className={innerCardClass}
+              compact
+              valueClassName="font-heading3"
             />
           ))}
         </div>
diff --git a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
index 943b733d..cf02db89 100644
--- a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
+++ b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
@@ -33,10 +33,11 @@ export function PlatformDetailCardSkeleton() {
         {[1, 2, 3, 4].map((i) => (
           <div
             key={i}
-            className="flex flex-col gap-3 rounded-2xl bg-surface-100/40 p-5"
+            className="flex flex-col gap-2 rounded-2xl bg-surface-100/40 p-2"
           >
             <Skeleton className="h-4 w-12" />
-            <Skeleton className="h-15 w-30" />
+            <Skeleton className="h-6 w-24" />
+            <Skeleton className="h-5 w-14 rounded-full" />
           </div>
         ))}
       </div>

From 9b8d68b0694c89d9b83d6db3c3d029523a8ad2ec Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 00:51:54 +0900
Subject: [PATCH 29/57] =?UTF-8?q?style:=20=EC=98=88=EC=82=B0=20=EA=B2=8C?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=82=A8=EC=9D=80=20%=20=EC=B6=95?=
 =?UTF-8?q?=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/charts/BudgetGaugeChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dashboard/charts/BudgetGaugeChart.tsx b/src/components/dashboard/charts/BudgetGaugeChart.tsx
index 7f2761ca..c0729507 100644
--- a/src/components/dashboard/charts/BudgetGaugeChart.tsx
+++ b/src/components/dashboard/charts/BudgetGaugeChart.tsx
@@ -122,7 +122,7 @@ const BudgetGaugeChart = memo(function BudgetGaugeChart({
           </div>
         )}
         <div className={twMerge("flex items-baseline gap-2", remainingRowGap)}>
-          <span className="font-heading1 text-text-title tabular-nums leading-none">
+          <span className="font-heading2 text-text-title tabular-nums leading-none">
             {remainingPct}%
           </span>
           <span className="font-body2 text-text-body tabular-nums">남음</span>

From ba2db360c148c33758ea3438bf94377509c3af88 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 01:15:49 +0900
Subject: [PATCH 30/57] =?UTF-8?q?fix:=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EC=B9=B4=EB=93=9C=20KPI=EB=A5=BC=20headin?=
 =?UTF-8?q?g2=EB=A1=9C=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/platform/PlatformDetailCard.tsx       | 3 +--
 .../dashboard/platform/skeleton/PlatformSkeleton.tsx           | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/dashboard/platform/PlatformDetailCard.tsx b/src/components/dashboard/platform/PlatformDetailCard.tsx
index e134cf78..7df092fa 100644
--- a/src/components/dashboard/platform/PlatformDetailCard.tsx
+++ b/src/components/dashboard/platform/PlatformDetailCard.tsx
@@ -43,8 +43,7 @@ export const PlatformDetailCard = memo(
               value={kpi.value}
               trend={kpi.trend}
               className={innerCardClass}
-              compact
-              valueClassName="font-heading3"
+              valueClassName="font-heading2"
             />
           ))}
         </div>
diff --git a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
index cf02db89..b0e0af8a 100644
--- a/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
+++ b/src/components/dashboard/platform/skeleton/PlatformSkeleton.tsx
@@ -36,7 +36,7 @@ export function PlatformDetailCardSkeleton() {
             className="flex flex-col gap-2 rounded-2xl bg-surface-100/40 p-2"
           >
             <Skeleton className="h-4 w-12" />
-            <Skeleton className="h-6 w-24" />
+            <Skeleton className="h-7 w-24" />
             <Skeleton className="h-5 w-14 rounded-full" />
           </div>
         ))}

From e115f02d9c405692cb84f30a999f43f8d7c7c358 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 01:16:49 +0900
Subject: [PATCH 31/57] =?UTF-8?q?style:=20=EC=BA=A0=ED=8E=98=EC=9D=B8=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=AA=A8=EB=B0=94=EC=9D=BC=C2=B7=ED=83=9C?=
 =?UTF-8?q?=EB=B8=94=EB=A6=BF=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=83=80=EC=9D=B4=ED=8F=AC=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ads/CampaignRow.tsx            | 24 ++++++----
 src/components/ads/CampaignTable.tsx          | 10 ++--
 src/components/ads/skeleton/AdsSkeleton.tsx   | 36 +++++++-------
 .../common/progressbar/ProgressBar.tsx        |  2 +-
 src/pages/ads/list/AdsListPage.tsx            | 48 ++++++++++---------
 src/styles/utilities.css                      | 13 +++++
 6 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/src/components/ads/CampaignRow.tsx b/src/components/ads/CampaignRow.tsx
index da201e1d..54c97fed 100644
--- a/src/components/ads/CampaignRow.tsx
+++ b/src/components/ads/CampaignRow.tsx
@@ -22,10 +22,14 @@ interface ICampaignRowProps {
 
 const LogoMap: Record<TPlatform, ReactNode> = {
   meta: (
-    <MetaLogo className="h-7 w-7 shrink-0 text-text-title tablet:h-6 tablet:w-6" />
+    <MetaLogo className="h-7 w-7 shrink-0 text-text-title tablet:h-6 tablet:w-6 mobile:h-5 mobile:w-5" />
+  ),
+  google: (
+    <GoogleLogo className="h-7 w-7 shrink-0 tablet:h-6 tablet:w-6 mobile:h-5 mobile:w-5" />
+  ),
+  naver: (
+    <NaverLogo className="h-7 w-7 shrink-0 tablet:h-6 tablet:w-6 mobile:h-5 mobile:w-5" />
   ),
-  google: <GoogleLogo className="h-7 w-7 shrink-0 tablet:h-6 tablet:w-6" />,
-  naver: <NaverLogo className="h-7 w-7 shrink-0 tablet:h-6 tablet:w-6" />,
 };
 
 export default function CampaignRow({
@@ -42,7 +46,7 @@ export default function CampaignRow({
   return (
     <li
       className={twMerge(
-        "flex list-none cursor-pointer items-center border-b border-surface-400/50 px-6 py-5 transition-colors last:border-b-0 tablet:px-5 tablet:py-4",
+        "flex list-none cursor-pointer items-center border-b border-surface-400/50 px-6 py-5 transition-colors last:border-b-0 tablet:px-5 tablet:py-4 mobile:px-3 mobile:py-3",
         isSelected
           ? "bg-primary-100/35 hover:bg-primary-100/45"
           : "bg-surface-100 hover:bg-surface-200/50",
@@ -59,7 +63,7 @@ export default function CampaignRow({
       }}
     >
       <div
-        className="flex w-11 shrink-0 items-center justify-center tablet:w-10"
+        className="flex w-11 shrink-0 items-center justify-center tablet:w-10 mobile:w-8"
         role="presentation"
         onClick={(e) => e.stopPropagation()}
         onKeyDown={(e) => e.stopPropagation()}
@@ -73,10 +77,10 @@ export default function CampaignRow({
         />
       </div>
 
-      <div className="min-w-0 flex-1 pr-5 tablet:pr-4">
+      <div className="min-w-0 flex-1 pr-5 tablet:pr-4 mobile:pr-2">
         <div
           className={twMerge(
-            "truncate font-body1",
+            "truncate font-body1-rsp",
             isPaused ? "text-text-muted" : "text-text-title",
           )}
         >
@@ -84,9 +88,9 @@ export default function CampaignRow({
         </div>
       </div>
 
-      <div className="mr-24 flex w-28 shrink-0 items-center justify-start tablet:mr-20 tablet:w-24">
+      <div className="mr-24 flex w-28 shrink-0 items-center justify-start tablet:mr-20 tablet:w-24 mobile:mr-2 mobile:w-auto">
         {providers && providers.length > 0 ? (
-          <div className="flex items-center justify-start gap-1">
+          <div className="flex items-center justify-start gap-1 mobile:gap-0.5">
             {providers.map((p, idx) => (
               <span key={idx} className="flex shrink-0">
                 {LogoMap[p.toLowerCase() as TPlatform] ?? (
@@ -102,7 +106,7 @@ export default function CampaignRow({
 
       <div
         className={twMerge(
-          "w-[28%] shrink-0 tablet:w-[26%]",
+          "w-[28%] shrink-0 tablet:w-[26%] mobile:w-[30%] mobile:max-w-28",
           isPaused && "opacity-80",
         )}
       >
diff --git a/src/components/ads/CampaignTable.tsx b/src/components/ads/CampaignTable.tsx
index c60c8a94..e52a1c44 100644
--- a/src/components/ads/CampaignTable.tsx
+++ b/src/components/ads/CampaignTable.tsx
@@ -53,9 +53,9 @@ export default function CampaignTable({
           : "rounded-xl border border-surface-400/40",
       )}
     >
-      <div className="flex shrink-0 items-center border-b border-surface-400/50 bg-surface-200/60 px-6 py-4 tablet:px-5 tablet:py-3.5">
+      <div className="flex shrink-0 items-center border-b border-surface-400/50 bg-surface-200/60 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:px-3 mobile:py-3">
         <div
-          className="flex w-11 shrink-0 items-center justify-center tablet:w-10"
+          className="flex w-11 shrink-0 items-center justify-center tablet:w-10 mobile:w-8"
           role="presentation"
           onClick={(e) => e.stopPropagation()}
         >
@@ -71,10 +71,10 @@ export default function CampaignTable({
         <div className="min-w-0 flex-1 font-label text-text-muted">
           캠페인 명
         </div>
-        <div className="w-28 shrink-0 text-left font-label text-text-muted whitespace-nowrap mr-24 tablet:w-24 tablet:mr-20">
-          플랫폼
+        <div className="mr-24 w-28 shrink-0 whitespace-nowrap text-left font-label text-text-muted tablet:mr-20 tablet:w-24 mobile:mr-2 mobile:w-auto">
+          <span className="mobile:hidden">플랫폼</span>
         </div>
-        <div className="w-[28%] shrink-0 text-left font-label text-text-muted tablet:w-[26%]">
+        <div className="w-[28%] shrink-0 text-left font-label text-text-muted tablet:w-[26%] mobile:w-[30%] mobile:max-w-28">
           <span className="tablet:hidden">예산 소진 현황</span>
           <span className="hidden tablet:inline">예산</span>
         </div>
diff --git a/src/components/ads/skeleton/AdsSkeleton.tsx b/src/components/ads/skeleton/AdsSkeleton.tsx
index a439e2ec..217273eb 100644
--- a/src/components/ads/skeleton/AdsSkeleton.tsx
+++ b/src/components/ads/skeleton/AdsSkeleton.tsx
@@ -17,20 +17,20 @@ const PLATFORM_DROPDOWN_COUNT = 3;
 function CampaignTableRowSkeleton() {
   return (
     <li
-      className="flex list-none items-center border-b border-surface-400/50 px-6 py-5 last:border-b-0 tablet:px-5 tablet:py-4"
+      className="flex list-none items-center border-b border-surface-400/50 px-6 py-5 last:border-b-0 tablet:px-5 tablet:py-4 mobile:px-3 mobile:py-3"
       aria-hidden
     >
-      <div className="flex w-11 shrink-0 items-center justify-center tablet:w-10">
+      <div className="flex w-11 shrink-0 items-center justify-center tablet:w-10 mobile:w-8">
         <Skeleton className="h-4 w-4 rounded" />
       </div>
-      <div className="min-w-0 flex-1 pr-5 tablet:pr-4">
+      <div className="min-w-0 flex-1 pr-5 tablet:pr-4 mobile:pr-2">
         <Skeleton className="h-4 w-full max-w-48" />
       </div>
-      <div className="mr-24 flex w-28 shrink-0 items-center gap-1 tablet:mr-20 tablet:w-24">
-        <SkeletonCircle className="h-7 w-7 tablet:h-6 tablet:w-6" />
-        <SkeletonCircle className="h-7 w-7 tablet:h-6 tablet:w-6" />
+      <div className="mr-24 flex w-28 shrink-0 items-center gap-1 tablet:mr-20 tablet:w-24 mobile:mr-2 mobile:w-auto mobile:gap-0.5">
+        <SkeletonCircle className="h-7 w-7 tablet:h-6 tablet:w-6 mobile:h-5 mobile:w-5" />
+        <SkeletonCircle className="h-7 w-7 tablet:h-6 tablet:w-6 mobile:h-5 mobile:w-5" />
       </div>
-      <div className="w-[28%] shrink-0 tablet:w-[26%]">
+      <div className="w-[28%] shrink-0 tablet:w-[26%] mobile:w-[30%] mobile:max-w-28">
         <Skeleton className="h-2 w-full rounded-full" />
       </div>
     </li>
@@ -43,14 +43,14 @@ export function CampaignTableSkeleton() {
       className="flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-surface-100"
       aria-hidden
     >
-      <div className="flex shrink-0 items-center border-b border-surface-400/50 bg-surface-200/60 px-6 py-4 tablet:px-5 tablet:py-3.5">
-        <div className="flex w-11 shrink-0 items-center justify-center tablet:w-10">
+      <div className="flex shrink-0 items-center border-b border-surface-400/50 bg-surface-200/60 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:px-3 mobile:py-3">
+        <div className="flex w-11 shrink-0 items-center justify-center tablet:w-10 mobile:w-8">
           <Skeleton className="h-4 w-4 rounded" />
         </div>
         <Skeleton className="h-4 w-16" />
         <div className="flex-1" aria-hidden />
-        <Skeleton className="mr-24 h-4 w-12 tablet:mr-20" />
-        <Skeleton className="h-4 w-24" />
+        <Skeleton className="mr-24 h-4 w-12 tablet:mr-20 mobile:mr-2 mobile:hidden" />
+        <Skeleton className="h-4 w-24 mobile:w-16" />
       </div>
 
       <ul className="m-0 list-none p-0">
@@ -70,15 +70,17 @@ export function AdsListPageSkeleton() {
       aria-label="캠페인 목록 로딩 중"
     >
       <Card className="flex flex-col overflow-hidden p-0">
-        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/45 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5">
-          <div className="flex min-w-0 flex-1 flex-col gap-2">
+        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/45 bg-surface-100 px-6 py-4 tablet:flex-col tablet:items-stretch tablet:px-5 tablet:py-3.5 mobile:px-3">
+          <div className="flex min-w-0 flex-1 flex-col gap-2 tablet:flex-none">
             <Skeleton className="h-3 w-8" />
             <Skeleton className="h-6 w-28" />
           </div>
-          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-            <Skeleton className="h-9 w-14 rounded-xl" />
-            <Skeleton className="h-9 w-14 rounded-xl" />
-            <Skeleton className="h-9 w-32 rounded-xl" />
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 tablet:w-full tablet:flex-col tablet:items-stretch">
+            <div className="flex items-center gap-2 tablet:w-full">
+              <Skeleton className="h-9 w-14 rounded-xl tablet:min-w-0 tablet:flex-1" />
+              <Skeleton className="h-9 w-14 rounded-xl tablet:min-w-0 tablet:flex-1" />
+            </div>
+            <Skeleton className="h-9 w-32 rounded-xl tablet:w-full" />
           </div>
         </div>
 
diff --git a/src/components/common/progressbar/ProgressBar.tsx b/src/components/common/progressbar/ProgressBar.tsx
index 45004434..339e5afe 100644
--- a/src/components/common/progressbar/ProgressBar.tsx
+++ b/src/components/common/progressbar/ProgressBar.tsx
@@ -26,7 +26,7 @@ export default function ProgressBar({
         />
       </div>
       {/* 퍼센트 텍스트 */}
-      <span className="min-w-8 w-11 shrink-0 text-right font-body1 text-text-muted">
+      <span className="min-w-8 w-11 shrink-0 text-right font-body1-rsp text-text-muted">
         {progress}%
       </span>
     </div>
diff --git a/src/pages/ads/list/AdsListPage.tsx b/src/pages/ads/list/AdsListPage.tsx
index 8c6d5734..4e29b895 100644
--- a/src/pages/ads/list/AdsListPage.tsx
+++ b/src/pages/ads/list/AdsListPage.tsx
@@ -147,8 +147,8 @@ export default function AdsListPage() {
   return (
     <section className="flex w-full flex-col">
       <Card className="flex flex-col overflow-hidden p-0">
-        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/45 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5">
-          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/45 bg-surface-100 px-6 py-4 tablet:flex-col tablet:items-stretch tablet:px-5 tablet:py-3.5 mobile:px-3">
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5 tablet:flex-none">
             <p className="font-caption text-text-placeholder">광고</p>
             <div className="flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1">
               <h2 className="font-heading3 text-text-title">캠페인 목록</h2>
@@ -168,30 +168,34 @@ export default function AdsListPage() {
               ) : null}
             </div>
           </div>
-          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-            <Button
-              type="button"
-              size="small"
-              variant="dangerSoft"
-              onClick={openPauseModal}
-              disabled={!canPause || bulkStop.isLoading}
-            >
-              중단
-            </Button>
-            <Button
-              type="button"
-              size="small"
-              variant="outline"
-              className="border-info-blue text-info-blue hover:bg-info-blue/5"
-              onClick={openResumeModal}
-              disabled={!canResume || bulkResume.isLoading}
-            >
-              재개
-            </Button>
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 tablet:w-full tablet:flex-col tablet:items-stretch">
+            <div className="flex items-center gap-2 tablet:w-full">
+              <Button
+                type="button"
+                size="small"
+                variant="dangerSoft"
+                className="tablet:min-w-0 tablet:flex-1"
+                onClick={openPauseModal}
+                disabled={!canPause || bulkStop.isLoading}
+              >
+                중단
+              </Button>
+              <Button
+                type="button"
+                size="small"
+                variant="outline"
+                className="border-info-blue text-info-blue hover:bg-info-blue/5 tablet:min-w-0 tablet:flex-1"
+                onClick={openResumeModal}
+                disabled={!canResume || bulkResume.isLoading}
+              >
+                재개
+              </Button>
+            </div>
             <Button
               type="button"
               size="small"
               variant="gradient"
+              className="tablet:w-full"
               onClick={handleCampaignGroupClick}
             >
               통합 캠페인 등록
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index 9169b129..4306b8a0 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -115,6 +115,19 @@
     }
   }
 
+  .font-body1-rsp {
+    font-size: var(--type-body1-size);
+    font-weight: var(--type-body1-weight);
+    line-height: var(--type-body1-leading);
+  }
+  @media (max-width: 639px) {
+    .font-body1-rsp {
+      font-size: var(--type-body2-size);
+      font-weight: var(--type-body2-weight);
+      line-height: var(--type-body2-leading);
+    }
+  }
+
   /* 모바일(< 640px)에서 그리드를 1열로 강제 — tablet: 커스텀 변형 우선순위 우회 */
   .grid-mobile-1 {}
   @media (max-width: 639px) {

From 5d72d3bcba2881be9315fb6abbbdab714596253f Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 01:38:04 +0900
Subject: [PATCH 32/57] =?UTF-8?q?style:=20=EC=BA=A0=ED=8E=98=EC=9D=B8=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EB=AA=A8=EB=B0=94=EC=9D=BC=C2=B7=ED=83=9C?=
 =?UTF-8?q?=EB=B8=94=EB=A6=BF=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ads/AdRow.tsx                  | 21 +++++++-----
 .../ads/CampaignPlatformSection.tsx           |  9 +++--
 src/components/ads/skeleton/AdsSkeleton.tsx   | 33 ++++++++++---------
 src/pages/ads/list/AdsListPage.tsx            | 14 ++++----
 src/pages/ads/list/CampaignDetail.tsx         | 17 +++++-----
 5 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/src/components/ads/AdRow.tsx b/src/components/ads/AdRow.tsx
index bdb76144..6c8ff115 100644
--- a/src/components/ads/AdRow.tsx
+++ b/src/components/ads/AdRow.tsx
@@ -12,18 +12,18 @@ import NaverLogo from "@/assets/logo/social-logo/circle/naver-circle.svg?react";
 
 /** 체크박스 | 광고 명 | 상태 | (플랫폼) | 펼침 — AdListTable과 동일 그리드 */
 const adListTableGridColsWithPlatform =
-  "grid w-full min-w-0 grid-cols-[2.75rem_minmax(0,1fr)_5.5rem_2.75rem_2.5rem] items-center gap-x-3";
+  "grid w-full min-w-0 grid-cols-[2.75rem_minmax(0,1fr)_5.5rem_2.75rem_2.5rem] items-center gap-x-3 mobile:grid-cols-[2rem_minmax(0,1fr)_auto_2rem_1.75rem] mobile:gap-x-1.5";
 
 const adListTableGridColsWithoutPlatform =
-  "grid w-full min-w-0 grid-cols-[2.75rem_minmax(0,1fr)_5.5rem_2.5rem] items-center gap-x-3";
+  "grid w-full min-w-0 grid-cols-[2.75rem_minmax(0,1fr)_5.5rem_2.5rem] items-center gap-x-3 mobile:grid-cols-[2rem_minmax(0,1fr)_auto_1.75rem] mobile:gap-x-1.5";
 
 const adListTableGridPadding = {
-  header: "px-6 py-4 tablet:px-5 tablet:py-3.5",
-  row: "px-6 py-5 tablet:px-5 tablet:py-4",
+  header: "px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:px-3 mobile:py-3",
+  row: "px-6 py-5 tablet:px-5 tablet:py-4 mobile:px-3 mobile:py-3",
 } as const;
 
 export function getAdListTableStatusCellClass() {
-  return "flex min-w-0 items-center justify-center justify-self-center self-center";
+  return "flex min-w-0 items-center justify-center justify-self-center self-center mobile:justify-self-end";
 }
 
 export function getAdListTableHeaderGridClass(hidePlatformColumn = false) {
@@ -117,7 +117,7 @@ export default function AdRow({
           onClick={onToggle}
           aria-expanded={isOpen}
           className={twMerge(
-            "min-w-0 cursor-pointer truncate text-left font-body1 outline-none transition-colors hover:text-primary-500",
+            "min-w-0 cursor-pointer truncate text-left font-body1-rsp outline-none transition-colors hover:text-primary-500",
             isPaused ? "text-text-muted" : "text-text-title",
             isOpen && "text-primary-500",
           )}
@@ -126,13 +126,16 @@ export default function AdRow({
         </button>
 
         <div className={getAdListTableStatusCellClass()}>
-          <Badge variant={runStatus === "running" ? "infoBlue" : "surface"}>
+          <Badge
+            variant={runStatus === "running" ? "infoBlue" : "surface"}
+            className="mobile:h-6 mobile:px-2"
+          >
             {runStatusText}
           </Badge>
         </div>
 
         {!hidePlatformColumn ? (
-          <div className="flex min-w-11 items-center justify-start justify-self-start">
+          <div className="flex min-w-11 items-center justify-start justify-self-start mobile:min-w-0">
             <span className="flex shrink-0" title={platform}>
               {LogoMap[platform] ?? (
                 <span className="font-caption text-text-muted">?</span>
@@ -146,7 +149,7 @@ export default function AdRow({
             type="button"
             onClick={onToggle}
             aria-label={isOpen ? `${name} 상세 접기` : `${name} 상세 펼치기`}
-            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-text-auth-sub transition-colors hover:bg-surface-200/80 hover:text-text-title"
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-text-auth-sub transition-colors hover:bg-surface-200/80 hover:text-text-title mobile:h-8 mobile:w-8"
           >
             <ChevronIcon
               className={twMerge(
diff --git a/src/components/ads/CampaignPlatformSection.tsx b/src/components/ads/CampaignPlatformSection.tsx
index 57980157..bd4c798f 100644
--- a/src/components/ads/CampaignPlatformSection.tsx
+++ b/src/components/ads/CampaignPlatformSection.tsx
@@ -92,8 +92,13 @@ export default function CampaignPlatformSection({
           <div className="flex min-w-0 flex-1 items-center gap-3">
             {PLATFORM_LOGO[platform]}
             <div className="flex min-w-0 flex-col gap-1">
-              <h2 className="font-heading3 text-text-title">
-                {PLATFORM_LABEL[platform]}
+              <h2 className="text-text-title">
+                <span className="font-heading3 mobile:hidden">
+                  {PLATFORM_LABEL[platform]}
+                </span>
+                <span className="hidden font-heading4 mobile:inline">
+                  {PLATFORM_LABEL[platform]}
+                </span>
               </h2>
               {platformBudget?.adCampaignName ? (
                 <p className="truncate font-body2 text-text-muted">
diff --git a/src/components/ads/skeleton/AdsSkeleton.tsx b/src/components/ads/skeleton/AdsSkeleton.tsx
index 217273eb..c1711802 100644
--- a/src/components/ads/skeleton/AdsSkeleton.tsx
+++ b/src/components/ads/skeleton/AdsSkeleton.tsx
@@ -70,17 +70,17 @@ export function AdsListPageSkeleton() {
       aria-label="캠페인 목록 로딩 중"
     >
       <Card className="flex flex-col overflow-hidden p-0">
-        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/45 bg-surface-100 px-6 py-4 tablet:flex-col tablet:items-stretch tablet:px-5 tablet:py-3.5 mobile:px-3">
-          <div className="flex min-w-0 flex-1 flex-col gap-2 tablet:flex-none">
+        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/45 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:flex-col mobile:items-stretch mobile:px-3">
+          <div className="flex min-w-0 flex-1 flex-col gap-2 mobile:flex-none">
             <Skeleton className="h-3 w-8" />
             <Skeleton className="h-6 w-28" />
           </div>
-          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 tablet:w-full tablet:flex-col tablet:items-stretch">
-            <div className="flex items-center gap-2 tablet:w-full">
-              <Skeleton className="h-9 w-14 rounded-xl tablet:min-w-0 tablet:flex-1" />
-              <Skeleton className="h-9 w-14 rounded-xl tablet:min-w-0 tablet:flex-1" />
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 mobile:w-full mobile:flex-col mobile:items-stretch">
+            <div className="flex items-center gap-2 mobile:w-full">
+              <Skeleton className="h-9 w-14 rounded-xl mobile:min-w-0 mobile:flex-1" />
+              <Skeleton className="h-9 w-14 rounded-xl mobile:min-w-0 mobile:flex-1" />
             </div>
-            <Skeleton className="h-9 w-32 rounded-xl tablet:w-full" />
+            <Skeleton className="h-9 w-32 rounded-xl mobile:w-full" />
           </div>
         </div>
 
@@ -94,8 +94,11 @@ export function AdsListPageSkeleton() {
 
 export function CampaignDetailHeaderSkeleton() {
   return (
-    <Card className="px-6 py-8 tablet:px-5 tablet:py-7" aria-hidden>
-      <header className="flex w-full flex-col gap-6">
+    <Card
+      className="px-6 py-8 tablet:px-5 tablet:py-7 mobile:px-4 mobile:py-6"
+      aria-hidden
+    >
+      <header className="flex w-full flex-col gap-6 mobile:gap-7">
         <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
           <div className="flex min-w-0 flex-wrap items-center gap-3">
             <Skeleton className="h-8 w-48 max-w-full" />
@@ -190,18 +193,18 @@ export function AdListTableSkeleton({
 export function CampaignDetailAdsSectionSkeleton() {
   return (
     <Card className="flex flex-col overflow-hidden p-0">
-      <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/75 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5">
-        <div className="flex min-w-0 flex-1 flex-col gap-2">
+      <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/75 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:flex-col mobile:items-stretch mobile:px-3">
+        <div className="flex min-w-0 flex-1 flex-col gap-2 mobile:flex-none">
           <Skeleton className="h-3 w-20" />
           <Skeleton className="h-6 w-28" />
         </div>
-        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-          <Skeleton className="h-9 w-14 rounded-xl" />
-          <Skeleton className="h-9 w-14 rounded-xl" />
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 mobile:w-full">
+          <Skeleton className="h-9 w-14 rounded-xl mobile:min-w-0 mobile:flex-1" />
+          <Skeleton className="h-9 w-14 rounded-xl mobile:min-w-0 mobile:flex-1" />
         </div>
       </div>
 
-      <div className="flex flex-col gap-6 px-6 py-6 tablet:px-5 tablet:py-5">
+      <div className="flex flex-col gap-6 px-6 py-6 tablet:px-5 tablet:py-5 mobile:gap-4 mobile:px-3 mobile:py-4">
         <div className="flex items-stretch gap-3">
           <span
             className="w-1 shrink-0 self-stretch rounded-r-md bg-surface-400"
diff --git a/src/pages/ads/list/AdsListPage.tsx b/src/pages/ads/list/AdsListPage.tsx
index 4e29b895..08ebf17e 100644
--- a/src/pages/ads/list/AdsListPage.tsx
+++ b/src/pages/ads/list/AdsListPage.tsx
@@ -147,8 +147,8 @@ export default function AdsListPage() {
   return (
     <section className="flex w-full flex-col">
       <Card className="flex flex-col overflow-hidden p-0">
-        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/45 bg-surface-100 px-6 py-4 tablet:flex-col tablet:items-stretch tablet:px-5 tablet:py-3.5 mobile:px-3">
-          <div className="flex min-w-0 flex-1 flex-col gap-0.5 tablet:flex-none">
+        <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/45 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:flex-col mobile:items-stretch mobile:px-3">
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5 mobile:flex-none">
             <p className="font-caption text-text-placeholder">광고</p>
             <div className="flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1">
               <h2 className="font-heading3 text-text-title">캠페인 목록</h2>
@@ -168,13 +168,13 @@ export default function AdsListPage() {
               ) : null}
             </div>
           </div>
-          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 tablet:w-full tablet:flex-col tablet:items-stretch">
-            <div className="flex items-center gap-2 tablet:w-full">
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 mobile:w-full mobile:flex-col mobile:items-stretch">
+            <div className="flex items-center gap-2 mobile:w-full">
               <Button
                 type="button"
                 size="small"
                 variant="dangerSoft"
-                className="tablet:min-w-0 tablet:flex-1"
+                className="mobile:min-w-0 mobile:flex-1"
                 onClick={openPauseModal}
                 disabled={!canPause || bulkStop.isLoading}
               >
@@ -184,7 +184,7 @@ export default function AdsListPage() {
                 type="button"
                 size="small"
                 variant="outline"
-                className="border-info-blue text-info-blue hover:bg-info-blue/5 tablet:min-w-0 tablet:flex-1"
+                className="border-info-blue text-info-blue hover:bg-info-blue/5 mobile:min-w-0 mobile:flex-1"
                 onClick={openResumeModal}
                 disabled={!canResume || bulkResume.isLoading}
               >
@@ -195,7 +195,7 @@ export default function AdsListPage() {
               type="button"
               size="small"
               variant="gradient"
-              className="tablet:w-full"
+              className="mobile:w-full"
               onClick={handleCampaignGroupClick}
             >
               통합 캠페인 등록
diff --git a/src/pages/ads/list/CampaignDetail.tsx b/src/pages/ads/list/CampaignDetail.tsx
index d3442123..c0e58612 100644
--- a/src/pages/ads/list/CampaignDetail.tsx
+++ b/src/pages/ads/list/CampaignDetail.tsx
@@ -39,7 +39,7 @@ const PLATFORM_WORDMARK: Record<TPlatform, string> = {
 };
 
 const platformSectionBlockClass =
-  "flex flex-col gap-6 px-6 py-6 tablet:px-5 tablet:py-6";
+  "flex flex-col gap-6 px-6 py-6 tablet:px-5 tablet:py-5 mobile:gap-4 mobile:px-3 mobile:py-4";
 
 const platformSectionDividerClass = "border-t border-surface-400/75";
 
@@ -249,11 +249,11 @@ export default function CampaignDetail() {
 
   return (
     <section className="flex w-full flex-col gap-8">
-      <Card className="px-6 py-8 tablet:px-5 tablet:py-7">
-        <header className="flex w-full flex-col gap-6">
+      <Card className="px-6 py-8 tablet:px-5 tablet:py-7 mobile:px-4 mobile:py-6">
+        <header className="flex w-full flex-col gap-6 mobile:gap-7">
           <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
             <div className="flex min-w-0 flex-wrap items-center gap-3">
-              <h1 className="min-w-0 wrap-break-word font-heading2 text-text-title">
+              <h1 className="min-w-0 wrap-break-word font-heading2-rsp text-text-title">
                 {data.name}
               </h1>
               <Badge
@@ -307,8 +307,8 @@ export default function CampaignDetail() {
         <CampaignDetailAdsSectionSkeleton />
       ) : (
         <Card className="flex flex-col overflow-hidden p-0">
-          <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/75 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5">
-            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/75 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:flex-col mobile:items-stretch mobile:px-3">
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5 mobile:flex-none">
               <p className="font-caption text-text-placeholder">광고</p>
               <div className="flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1">
                 <h2 className="font-heading3 text-text-title">광고 모아보기</h2>
@@ -328,11 +328,12 @@ export default function CampaignDetail() {
                 ) : null}
               </div>
             </div>
-            <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+            <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 mobile:w-full">
               <Button
                 type="button"
                 size="small"
                 variant="dangerSoft"
+                className="mobile:min-w-0 mobile:flex-1"
                 onClick={openAdPauseModal}
                 disabled={!canPauseAds || bulkAdPause.isLoading}
               >
@@ -342,7 +343,7 @@ export default function CampaignDetail() {
                 type="button"
                 size="small"
                 variant="outline"
-                className="border-info-blue text-info-blue hover:bg-info-blue/5"
+                className="border-info-blue text-info-blue hover:bg-info-blue/5 mobile:min-w-0 mobile:flex-1"
                 onClick={openAdResumeModal}
                 disabled={!canResumeAds || bulkAdResume.isLoading}
               >

From 024370484837d0eb7c54c0af34a441dcf9055c8d Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 01:43:04 +0900
Subject: [PATCH 33/57] =?UTF-8?q?style:=20=ED=86=B5=ED=95=A9=20=EC=BA=A0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B8=20=EB=93=B1=EB=A1=9D=20=ED=83=9C=EB=B8=94?=
 =?UTF-8?q?=EB=A6=BF/=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=8C=A8=EB=94=A9=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ads/new/CampaignGroup.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/ads/new/CampaignGroup.tsx b/src/pages/ads/new/CampaignGroup.tsx
index a7814bf4..fae3604a 100644
--- a/src/pages/ads/new/CampaignGroup.tsx
+++ b/src/pages/ads/new/CampaignGroup.tsx
@@ -40,16 +40,16 @@ export default function CampaignGroup() {
   } = useCampaignGroup();
 
   return (
-    <section className="flex w-full flex-col gap-8 pb-20">
+    <section className="flex w-full flex-col gap-8 pb-20 mobile:gap-6 mobile:pb-12">
       {/* 캠페인 기본 정보 */}
-      <Card className="flex flex-col gap-8 p-8 tablet:p-10">
+      <Card className="flex flex-col gap-8 p-8 mobile:gap-6 mobile:p-5">
         <div className="flex flex-col gap-2">
           <h3 className="font-heading3 text-text-title">캠페인 기본 정보</h3>
           <p className="font-body1 leading-relaxed text-text-muted">
             워크스페이스에서 묶어 관리할 통합 캠페인 그룹의 기본 정보입니다.
           </p>
         </div>
-        <div className="flex w-full flex-col gap-10">
+        <div className="flex w-full flex-col gap-10 mobile:gap-6">
           {/* 캠페인명 */}
           <div className="flex flex-col gap-2">
             <label
@@ -87,7 +87,7 @@ export default function CampaignGroup() {
       </Card>
 
       {/* 플랫폼별 캠페인 연결 */}
-      <Card className="flex flex-col gap-8 p-8 tablet:p-10">
+      <Card className="flex flex-col gap-8 p-8 mobile:gap-6 mobile:p-5">
         <div className="flex flex-col gap-2">
           <h3 className="font-heading3 text-text-title">
             플랫폼별 캠페인 연결
@@ -104,7 +104,7 @@ export default function CampaignGroup() {
           {isPlatformCampaignsLoading ? (
             <CampaignGroupDropdownSkeleton />
           ) : (
-            <div className="flex flex-col gap-10">
+            <div className="flex flex-col gap-10 mobile:gap-6">
               {/* Google */}
               <div className="flex flex-col gap-3">
                 <div className="flex items-center gap-2 px-1">

From bef528a3f6d3b55feeed95953d38bf172fb5fb26 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 01:47:02 +0900
Subject: [PATCH 34/57] =?UTF-8?q?style:=20=ED=86=B5=ED=95=A9=20=EC=BA=A0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B8=20=EB=93=B1=EB=A1=9D=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EC=84=A4=EB=AA=85=20=EB=AC=B8=EA=B5=AC=20=EC=B6=95?=
 =?UTF-8?q?=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ads/new/CampaignGroup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ads/new/CampaignGroup.tsx b/src/pages/ads/new/CampaignGroup.tsx
index fae3604a..0563f79d 100644
--- a/src/pages/ads/new/CampaignGroup.tsx
+++ b/src/pages/ads/new/CampaignGroup.tsx
@@ -45,7 +45,7 @@ export default function CampaignGroup() {
       <Card className="flex flex-col gap-8 p-8 mobile:gap-6 mobile:p-5">
         <div className="flex flex-col gap-2">
           <h3 className="font-heading3 text-text-title">캠페인 기본 정보</h3>
-          <p className="font-body1 leading-relaxed text-text-muted">
+          <p className="font-body1-rsp leading-relaxed text-text-muted">
             워크스페이스에서 묶어 관리할 통합 캠페인 그룹의 기본 정보입니다.
           </p>
         </div>
@@ -92,7 +92,7 @@ export default function CampaignGroup() {
           <h3 className="font-heading3 text-text-title">
             플랫폼별 캠페인 연결
           </h3>
-          <p className="font-body1 leading-relaxed text-text-muted">
+          <p className="font-body1-rsp leading-relaxed text-text-muted">
             매체별 운영 중인 캠페인을 선택해 통합 그룹에 연결합니다. 최소 1개
             매체에서 캠페인을 선택해야 합니다.
           </p>

From 064fa89842a2c1aeb33c1725d48977eae04a9d9d Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 01:49:12 +0900
Subject: [PATCH 35/57] =?UTF-8?q?style:=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EC=B9=B4=EB=93=9C=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=ED=8C=A8=EB=94=A9=20=EC=B6=95=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/integration/PlatformIntegrationCard.tsx          | 2 +-
 src/components/integration/UpcomingPlatformCard.tsx             | 2 +-
 .../integration/skeleton/PlatformIntegrationsSkeleton.tsx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/integration/PlatformIntegrationCard.tsx b/src/components/integration/PlatformIntegrationCard.tsx
index b1e5575b..8cca066c 100644
--- a/src/components/integration/PlatformIntegrationCard.tsx
+++ b/src/components/integration/PlatformIntegrationCard.tsx
@@ -250,7 +250,7 @@ function PlatformIntegrationCard({
       : STATUS_LABEL[status];
 
   return (
-    <div className="flex h-full min-h-70 w-full flex-col gap-5 rounded-3xl bg-surface-100 p-8 shadow-Soft">
+    <div className="flex h-full min-h-70 w-full flex-col gap-5 rounded-3xl bg-surface-100 p-8 shadow-Soft mobile:p-6">
       <div className="flex min-w-0 items-center justify-between gap-3">
         <div className="flex min-w-0 items-center gap-3">
           <div className="shrink-0">{PLATFORM_LOGOS[provider]}</div>
diff --git a/src/components/integration/UpcomingPlatformCard.tsx b/src/components/integration/UpcomingPlatformCard.tsx
index 5ee3d3c5..0a8f9a16 100644
--- a/src/components/integration/UpcomingPlatformCard.tsx
+++ b/src/components/integration/UpcomingPlatformCard.tsx
@@ -6,7 +6,7 @@ import Button from "@/components/common/button/Button";
 import KakaoLogo from "@/assets/logo/social-logo/circle/kakao-circle.svg?react";
 
 const UPCOMING_CARD_SHELL_CLASS =
-  "flex h-full min-h-70 w-full rounded-3xl bg-surface-100 p-8 shadow-Soft tablet:p-8";
+  "flex h-full min-h-70 w-full rounded-3xl bg-surface-100 p-8 shadow-Soft mobile:p-6";
 const UPCOMING_CARD_DISABLED_CLASS =
   "pointer-events-none select-none opacity-70 grayscale";
 
diff --git a/src/components/integration/skeleton/PlatformIntegrationsSkeleton.tsx b/src/components/integration/skeleton/PlatformIntegrationsSkeleton.tsx
index 7699c2a5..bf8a008c 100644
--- a/src/components/integration/skeleton/PlatformIntegrationsSkeleton.tsx
+++ b/src/components/integration/skeleton/PlatformIntegrationsSkeleton.tsx
@@ -8,7 +8,7 @@ const SKELETON_COUNT = 3;
 export function PlatformIntegrationCardSkeleton() {
   return (
     <div
-      className="flex h-full min-h-70 w-full flex-col gap-5 rounded-3xl bg-surface-100 p-8 shadow-Soft"
+      className="flex h-full min-h-70 w-full flex-col gap-5 rounded-3xl bg-surface-100 p-8 shadow-Soft mobile:p-6"
       aria-hidden
     >
       <div className="flex min-w-0 items-center justify-between gap-3">

From 4d4a98fae206192a644c7d50346eccab0ae67ec6 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 01:51:17 +0900
Subject: [PATCH 36/57] =?UTF-8?q?style:=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=95=88?=
 =?UTF-8?q?=EB=82=B4=20=EB=AC=B8=EA=B5=AC=C2=B7=EA=B0=84=EA=B2=A9=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/integration/PlatformIntegrationCard.tsx | 4 ++--
 src/pages/integration/PlatformIntegrationsPage.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/integration/PlatformIntegrationCard.tsx b/src/components/integration/PlatformIntegrationCard.tsx
index 8cca066c..7225fe85 100644
--- a/src/components/integration/PlatformIntegrationCard.tsx
+++ b/src/components/integration/PlatformIntegrationCard.tsx
@@ -284,9 +284,9 @@ function PlatformIntegrationCard({
 
       <div className="flex-1" aria-hidden />
 
-      <div className="mt-auto flex w-full flex-col gap-4">
+      <div className="mt-auto flex w-full flex-col gap-4 mobile:gap-3">
         {status === "disconnected" ? (
-          <p className="font-body2 text-text-muted/80">
+          <p className="font-body2 leading-relaxed text-text-muted/80 mobile:leading-snug">
             {platformAccountId != null ? (
               <>
                 기존 계정을 다시 연동하면 대시보드와 캠페인에서 데이터를 확인할
diff --git a/src/pages/integration/PlatformIntegrationsPage.tsx b/src/pages/integration/PlatformIntegrationsPage.tsx
index fd1a64e4..f2b2bf25 100644
--- a/src/pages/integration/PlatformIntegrationsPage.tsx
+++ b/src/pages/integration/PlatformIntegrationsPage.tsx
@@ -280,8 +280,8 @@ export default function PlatformIntegrationsPage() {
             </ul>
           </ErrorBoundary>
 
-          <div className="flex w-full min-w-0 flex-col items-center gap-8 pt-15">
-            <p className="w-full text-center font-body1 text-text-muted/70">
+          <div className="flex w-full min-w-0 flex-col items-center gap-8 pt-15 mobile:gap-6 mobile:pt-10">
+            <p className="w-full text-center font-body1-rsp text-text-muted/70">
               더 많은 플랫폼 연동을 준비하고 있어요. 지원 범위는 변경될 수
               있습니다.
             </p>

From 2bbd08727b69f9feff55364e960171f2b210b4cc Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 01:55:35 +0900
Subject: [PATCH 37/57] =?UTF-8?q?style:=20=EA=B4=91=EA=B3=A0=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=8C=A8=EB=94=A9=20?=
 =?UTF-8?q?=EC=B6=95=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ads/AdDetailContent.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ads/AdDetailContent.tsx b/src/components/ads/AdDetailContent.tsx
index 96500bfa..d88cd3da 100644
--- a/src/components/ads/AdDetailContent.tsx
+++ b/src/components/ads/AdDetailContent.tsx
@@ -60,8 +60,8 @@ export default function AdDetailContent({ ad }: { ad: IAd }) {
   return (
     <div className="animate-fade-in">
       <div className="border-t border-surface-400/60">
-        <div className="flex flex-col gap-4 px-4 pb-2 pt-4 tablet:px-5">
-          <section className="rounded-lg border border-surface-400/40 bg-surface-100 px-4 py-3">
+        <div className="flex flex-col gap-4 px-4 pb-2 pt-4 tablet:px-5 mobile:gap-3 mobile:px-3 mobile:pt-3">
+          <section className="rounded-lg border border-surface-400/40 bg-surface-100 px-4 py-3 mobile:px-3 mobile:py-2.5">
             <h3 className="mb-2 font-caption text-text-placeholder">
               광고 소재
             </h3>
@@ -70,7 +70,7 @@ export default function AdDetailContent({ ad }: { ad: IAd }) {
             </p>
           </section>
 
-          <section className="rounded-lg border border-surface-400/40 bg-surface-100 px-4 py-3">
+          <section className="rounded-lg border border-surface-400/40 bg-surface-100 px-4 py-3 mobile:px-3 mobile:py-2.5">
             <h3 className="mb-2 font-caption text-text-placeholder">타겟</h3>
             <div className="flex flex-wrap gap-2">
               {tags.length > 0 ? (
@@ -91,7 +91,7 @@ export default function AdDetailContent({ ad }: { ad: IAd }) {
             </div>
           </section>
 
-          <section className="rounded-lg border border-surface-400/40 bg-surface-100 px-4 py-3">
+          <section className="rounded-lg border border-surface-400/40 bg-surface-100 px-4 py-3 mobile:px-3 mobile:py-2.5">
             <h3 className="mb-2 font-caption text-text-placeholder">
               랜딩 URL
             </h3>
@@ -116,8 +116,8 @@ export default function AdDetailContent({ ad }: { ad: IAd }) {
           </section>
         </div>
 
-        <div className="mx-4 mb-4 mt-1 overflow-hidden rounded-lg border border-surface-400/40 bg-surface-100 tablet:mx-5">
-          <div className="flex flex-wrap items-start justify-between gap-3 gap-y-3 px-4 py-4">
+        <div className="mx-4 mb-4 mt-1 overflow-hidden rounded-lg border border-surface-400/40 bg-surface-100 tablet:mx-5 mobile:mx-3 mobile:mb-3">
+          <div className="flex flex-wrap items-start justify-between gap-3 gap-y-3 px-4 py-4 mobile:px-3 mobile:py-3">
             <div className="min-w-0 flex-1">
               <p className="font-caption text-text-placeholder">트래킹</p>
               <p className="mt-1 font-body1 text-text-title">

From 67e8e31eb8ea5557ed3b889b3a82cb9110a4cb81 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 02:03:53 +0900
Subject: [PATCH 38/57] =?UTF-8?q?fix:=20=EA=B3=B5=ED=86=B5=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84=ED=8A=BC=C2=B7?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=A2=8C=EC=9A=B0=20=EC=97=AC=EB=B0=B1=20?=
 =?UTF-8?q?=ED=99=95=EB=B3=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/modal/Modal.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 67d663b9..27e05117 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -192,9 +192,11 @@ function Modal({
             <motion.div
               ref={modalRef}
               className={twMerge(
-                "relative w-full max-h-[90vh] overflow-auto rounded-2xl bg-surface-100 shadow-Soft",
+                "relative mx-4 w-full max-h-[90vh] overflow-auto rounded-2xl bg-surface-100 shadow-Soft",
                 sizeClasses[size],
                 paddingClasses[padding],
+                // absolute 닫기 버튼(top-4 right-4)과 본문 겹침 방지
+                !hideCloseButton && "pr-12",
                 className,
               )}
               initial={{ opacity: 0, scale: reduceMotion ? 1 : 0.95 }}

From 675b786df859c17d90d750a3aadc857da0f182e0 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 03:06:34 +0900
Subject: [PATCH 39/57] ci: retrigger CI


From 88cc6ef0136284260e198bc4d58218ce4e41e439 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Thu, 6 Aug 2026 23:59:50 +0900
Subject: [PATCH 40/57] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EB=B3=B4=EA=B8=B0=20=EB=8B=A8=EC=9C=84=20=EC=9B=94?=
 =?UTF-8?q?=20=EC=84=A0=ED=83=9D=EC=8B=9C=20=EC=9B=94=EC=B4=88=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B0=80=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dashboard/timeline/Timeline.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/dashboard/timeline/Timeline.tsx b/src/pages/dashboard/timeline/Timeline.tsx
index 637ca7ce..20ef0ea8 100644
--- a/src/pages/dashboard/timeline/Timeline.tsx
+++ b/src/pages/dashboard/timeline/Timeline.tsx
@@ -179,7 +179,7 @@ export default function Timeline() {
     if (hasNoTimelines) return;
     const el = scrollRef.current;
     if (!el) return;
-    el.scrollLeft = el.scrollWidth - el.clientWidth;
+    el.scrollLeft = viewUnit === "MONTH" ? 0 : el.scrollWidth - el.clientWidth;
   }, [columns, hasNoTimelines, viewUnit]);
 
   useEffect(() => {

From 913d77fb993fa16fdab6064c0d64272ab19f9711 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 15:36:07 +0900
Subject: [PATCH 41/57] =?UTF-8?q?fix:=20=EC=BA=A0=ED=8E=98=EC=9D=B8=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=94=8C?=
 =?UTF-8?q?=EB=9E=AB=ED=8F=BC=20=EC=97=B4=20=ED=8F=AD=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ads/CampaignRow.tsx          | 20 ++++++++++++-----
 src/components/ads/CampaignTable.tsx        | 19 +++++++++++++---
 src/components/ads/skeleton/AdsSkeleton.tsx | 24 +++++++++++++++------
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/components/ads/CampaignRow.tsx b/src/components/ads/CampaignRow.tsx
index 54c97fed..e02b37b0 100644
--- a/src/components/ads/CampaignRow.tsx
+++ b/src/components/ads/CampaignRow.tsx
@@ -20,6 +20,14 @@ interface ICampaignRowProps {
   onClick?: () => void;
 }
 
+/** 헤더·행·스켈레톤 플랫폼 열 — 모바일에서 로고 최대 3개 폭 예약 */
+export const CAMPAIGN_PLATFORM_COL_CLASS =
+  "mr-24 w-28 shrink-0 tablet:mr-20 tablet:w-24 mobile:mr-2 mobile:w-16";
+
+/** 헤더·행·스켈레톤 예산 열 */
+export const CAMPAIGN_BUDGET_COL_CLASS =
+  "w-[28%] shrink-0 tablet:w-[26%] mobile:w-[30%] mobile:max-w-28";
+
 const LogoMap: Record<TPlatform, ReactNode> = {
   meta: (
     <MetaLogo className="h-7 w-7 shrink-0 text-text-title tablet:h-6 tablet:w-6 mobile:h-5 mobile:w-5" />
@@ -88,7 +96,12 @@ export default function CampaignRow({
         </div>
       </div>
 
-      <div className="mr-24 flex w-28 shrink-0 items-center justify-start tablet:mr-20 tablet:w-24 mobile:mr-2 mobile:w-auto">
+      <div
+        className={twMerge(
+          CAMPAIGN_PLATFORM_COL_CLASS,
+          "flex items-center justify-start",
+        )}
+      >
         {providers && providers.length > 0 ? (
           <div className="flex items-center justify-start gap-1 mobile:gap-0.5">
             {providers.map((p, idx) => (
@@ -105,10 +118,7 @@ export default function CampaignRow({
       </div>
 
       <div
-        className={twMerge(
-          "w-[28%] shrink-0 tablet:w-[26%] mobile:w-[30%] mobile:max-w-28",
-          isPaused && "opacity-80",
-        )}
+        className={twMerge(CAMPAIGN_BUDGET_COL_CLASS, isPaused && "opacity-80")}
       >
         <ProgressBar value={budgetUsageRate} />
       </div>
diff --git a/src/components/ads/CampaignTable.tsx b/src/components/ads/CampaignTable.tsx
index e52a1c44..ed908553 100644
--- a/src/components/ads/CampaignTable.tsx
+++ b/src/components/ads/CampaignTable.tsx
@@ -3,7 +3,10 @@ import { twMerge } from "tailwind-merge";
 
 import type { ICampaign } from "@/types/ads/campaign";
 
-import CampaignRow from "./CampaignRow";
+import CampaignRow, {
+  CAMPAIGN_BUDGET_COL_CLASS,
+  CAMPAIGN_PLATFORM_COL_CLASS,
+} from "./CampaignRow";
 
 interface ICampaignTableProps {
   campaigns: ICampaign[];
@@ -71,10 +74,20 @@ export default function CampaignTable({
         <div className="min-w-0 flex-1 font-label text-text-muted">
           캠페인 명
         </div>
-        <div className="mr-24 w-28 shrink-0 whitespace-nowrap text-left font-label text-text-muted tablet:mr-20 tablet:w-24 mobile:mr-2 mobile:w-auto">
+        <div
+          className={twMerge(
+            CAMPAIGN_PLATFORM_COL_CLASS,
+            "whitespace-nowrap text-left font-label text-text-muted",
+          )}
+        >
           <span className="mobile:hidden">플랫폼</span>
         </div>
-        <div className="w-[28%] shrink-0 text-left font-label text-text-muted tablet:w-[26%] mobile:w-[30%] mobile:max-w-28">
+        <div
+          className={twMerge(
+            CAMPAIGN_BUDGET_COL_CLASS,
+            "text-left font-label text-text-muted",
+          )}
+        >
           <span className="tablet:hidden">예산 소진 현황</span>
           <span className="hidden tablet:inline">예산</span>
         </div>
diff --git a/src/components/ads/skeleton/AdsSkeleton.tsx b/src/components/ads/skeleton/AdsSkeleton.tsx
index c1711802..708b4cab 100644
--- a/src/components/ads/skeleton/AdsSkeleton.tsx
+++ b/src/components/ads/skeleton/AdsSkeleton.tsx
@@ -4,6 +4,10 @@ import {
   getAdListTableHeaderGridClass,
   getAdListTableRowGridClass,
 } from "@/components/ads/AdRow";
+import {
+  CAMPAIGN_BUDGET_COL_CLASS,
+  CAMPAIGN_PLATFORM_COL_CLASS,
+} from "@/components/ads/CampaignRow";
 import Card from "@/components/common/card/Card";
 import {
   Skeleton,
@@ -26,11 +30,16 @@ function CampaignTableRowSkeleton() {
       <div className="min-w-0 flex-1 pr-5 tablet:pr-4 mobile:pr-2">
         <Skeleton className="h-4 w-full max-w-48" />
       </div>
-      <div className="mr-24 flex w-28 shrink-0 items-center gap-1 tablet:mr-20 tablet:w-24 mobile:mr-2 mobile:w-auto mobile:gap-0.5">
+      <div
+        className={twMerge(
+          CAMPAIGN_PLATFORM_COL_CLASS,
+          "flex items-center gap-1 mobile:gap-0.5",
+        )}
+      >
         <SkeletonCircle className="h-7 w-7 tablet:h-6 tablet:w-6 mobile:h-5 mobile:w-5" />
         <SkeletonCircle className="h-7 w-7 tablet:h-6 tablet:w-6 mobile:h-5 mobile:w-5" />
       </div>
-      <div className="w-[28%] shrink-0 tablet:w-[26%] mobile:w-[30%] mobile:max-w-28">
+      <div className={CAMPAIGN_BUDGET_COL_CLASS}>
         <Skeleton className="h-2 w-full rounded-full" />
       </div>
     </li>
@@ -47,10 +56,13 @@ export function CampaignTableSkeleton() {
         <div className="flex w-11 shrink-0 items-center justify-center tablet:w-10 mobile:w-8">
           <Skeleton className="h-4 w-4 rounded" />
         </div>
-        <Skeleton className="h-4 w-16" />
-        <div className="flex-1" aria-hidden />
-        <Skeleton className="mr-24 h-4 w-12 tablet:mr-20 mobile:mr-2 mobile:hidden" />
-        <Skeleton className="h-4 w-24 mobile:w-16" />
+        <div className="min-w-0 flex-1">
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <div className={CAMPAIGN_PLATFORM_COL_CLASS} aria-hidden />
+        <div className={CAMPAIGN_BUDGET_COL_CLASS}>
+          <Skeleton className="h-4 w-24 mobile:w-16" />
+        </div>
       </div>
 
       <ul className="m-0 list-none p-0">

From 6365cbbac0a5df54c3980fec43d7a1f8b86bff2a Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 15:37:30 +0900
Subject: [PATCH 42/57] =?UTF-8?q?feat:=20=EB=93=9C=EB=9E=8D=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EC=98=A4=ED=94=88=EC=8B=9C=20=EB=86=92=EC=9D=B4=20?=
 =?UTF-8?q?=ED=99=95=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/dropdownmenu/DropdownMenu.tsx       | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/common/dropdownmenu/DropdownMenu.tsx b/src/components/common/dropdownmenu/DropdownMenu.tsx
index 20a815fd..1081d3dd 100644
--- a/src/components/common/dropdownmenu/DropdownMenu.tsx
+++ b/src/components/common/dropdownmenu/DropdownMenu.tsx
@@ -77,6 +77,7 @@ export function DropdownMenu({
   menuClassName,
   fullWidth = false,
   placement = "bottom",
+  inFlow = false,
   "aria-label": ariaLabel,
   onOpenChange,
 }: {
@@ -88,6 +89,7 @@ export function DropdownMenu({
   fullWidth?: boolean;
   /** bottom: 아래 / top: 위 / auto: 공간에 따라 자동 */
   placement?: TDropdownPlacement;
+  inFlow?: boolean;
   "aria-label"?: string;
   onOpenChange?: (open: boolean) => void;
 }) {
@@ -114,7 +116,10 @@ export function DropdownMenu({
   }, []);
 
   useLayoutEffect(() => {
-    if (!open) return;
+    if (!open || inFlow) {
+      setResolvedPlacement("bottom");
+      return;
+    }
 
     if (placement === "bottom") {
       setResolvedPlacement("bottom");
@@ -130,13 +135,13 @@ export function DropdownMenu({
     if (!el) return;
 
     setResolvedPlacement(resolveAutoPlacement(el, items.length));
-  }, [open, placement, items.length]);
+  }, [open, placement, items.length, inFlow]);
 
   useEffect(() => {
     onOpenChange?.(open);
   }, [open, onOpenChange]);
 
-  const isTopPlacement = resolvedPlacement === "top";
+  const isTopPlacement = !inFlow && resolvedPlacement === "top";
 
   return (
     <div
@@ -180,10 +185,15 @@ export function DropdownMenu({
             }}
             className={twMerge(
               "absolute z-50 rounded-2xl border border-surface-300 bg-surface-100 py-3 px-1 shadow-Soft",
+              inFlow
+                ? "relative mt-2"
+                : twMerge(
+                    "absolute",
+                    isTopPlacement ? "bottom-full mb-2" : "top-full mt-2",
+                  ),
               fullWidth
                 ? "left-0 right-0 w-full"
                 : "right-0 w-56 max-w-[calc(100vw-40px)]",
-              isTopPlacement ? "bottom-full mb-2" : "top-full mt-2",
               menuClassName,
             )}
             initial={{ opacity: 0, scale: reduceMotion ? 1 : 0.96 }}

From 9511bd3f9a6e913d06a3891258e53b3237e062fa Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 15:40:58 +0900
Subject: [PATCH 43/57] =?UTF-8?q?fix:=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20?=
 =?UTF-8?q?=EC=A0=84=ED=99=98=20=EB=B2=84=ED=8A=BC=20=EB=86=92=EC=9D=B4=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/platform/PlatformViewSwitcher.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/platform/PlatformViewSwitcher.tsx b/src/components/dashboard/platform/PlatformViewSwitcher.tsx
index 8fb54492..ffa9584d 100644
--- a/src/components/dashboard/platform/PlatformViewSwitcher.tsx
+++ b/src/components/dashboard/platform/PlatformViewSwitcher.tsx
@@ -44,7 +44,7 @@ export default function PlatformViewSwitcher({
         variant={isAllView ? "primary" : "custom"}
         onClick={onSelectAll}
         className={twMerge(
-          "rounded-2xl py-5 font-body1",
+          "h-12 rounded-2xl font-body1",
           isMobileLayout ? "w-full min-w-0" : "w-28 shrink-0",
           !isAllView &&
             "border border-surface-400 bg-surface-100 text-text-muted hover:bg-surface-200",
@@ -62,7 +62,7 @@ export default function PlatformViewSwitcher({
               size="small"
               variant={!isAllView ? "primary" : "custom"}
               className={twMerge(
-                "flex items-center rounded-2xl py-5",
+                "flex h-12 items-center rounded-2xl",
                 isMobileLayout ? "w-full min-w-0" : "w-34 shrink-0",
                 isAllView &&
                   "border border-surface-400 bg-surface-100 text-text-muted hover:bg-surface-200",

From f776f1f92ef016ce46d923e9939117933c6a90f8 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 15:41:14 +0900
Subject: [PATCH 44/57] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EC=83=9D=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EC=84=B1?=
 =?UTF-8?q?=EA=B3=BC=EA=B8=B0=EA=B0=84=EC=84=A0=ED=83=9D=20=EB=93=9C?=
 =?UTF-8?q?=EB=9E=8D=EB=8B=A4=EC=9A=B4=20=EB=86=92=EC=9D=B4=20=ED=99=95?=
 =?UTF-8?q?=EC=9E=A5=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelineCreateModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/timeline/TimelineCreateModal.tsx b/src/components/timeline/TimelineCreateModal.tsx
index 2ce74790..88f90674 100644
--- a/src/components/timeline/TimelineCreateModal.tsx
+++ b/src/components/timeline/TimelineCreateModal.tsx
@@ -260,6 +260,7 @@ export default function TimelineCreateModal({
                 render={() => (
                   <DropdownMenu
                     fullWidth
+                    inFlow
                     aria-label="비교 기간 선택"
                     items={comparisonMenuItems}
                     trigger={(open) => (

From 5b87551d291d691ad5070aa0283bf2631a3540e9 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 15:45:20 +0900
Subject: [PATCH 45/57] =?UTF-8?q?style:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EC=83=9D=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EC=84=B1?=
 =?UTF-8?q?=EA=B3=BC=EC=A7=80=ED=91=9C=20=EC=B9=A9=20=EC=9B=80=EC=A7=81?=
 =?UTF-8?q?=EC=9E=84=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelineCreateModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/TimelineCreateModal.tsx b/src/components/timeline/TimelineCreateModal.tsx
index 88f90674..089e9dad 100644
--- a/src/components/timeline/TimelineCreateModal.tsx
+++ b/src/components/timeline/TimelineCreateModal.tsx
@@ -229,7 +229,7 @@ export default function TimelineCreateModal({
                           aria-pressed={isSelected}
                           onClick={() => toggleMetric(option.value)}
                           className={twMerge(
-                            "inline-flex h-8 items-center rounded-full border px-4 font-body2 transition-colors",
+                            "inline-flex h-8 items-center rounded-full border px-4 font-body2 transition-all duration-300 ease-out active:scale-95",
                             isSelected
                               ? "border-info-blue/40 bg-info-blue/15 text-info-blue"
                               : "border-text-placeholder/40 bg-surface-200 text-text-muted hover:bg-surface-300",

From 76576624f6c04d8f4ff8e282bdb9f3ac39929cde Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 15:47:00 +0900
Subject: [PATCH 46/57] =?UTF-8?q?style:=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20?=
 =?UTF-8?q?=EC=84=B8=EB=A1=9C=20=EA=B0=AD=20=EC=B6=95=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/timeline/layout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/timeline/layout.ts b/src/constants/timeline/layout.ts
index 711b91bc..1a21f267 100644
--- a/src/constants/timeline/layout.ts
+++ b/src/constants/timeline/layout.ts
@@ -2,7 +2,7 @@
 
 // 열 최소 너비. 컨테이너가 더 넓으면 균등 분배로 커짐
 export const TIMELINE_COL_WIDTH = 92;
-export const TIMELINE_ROW_HEIGHT = 104;
+export const TIMELINE_ROW_HEIGHT = 92;
 export const TIMELINE_ROW_OFFSET = 24;
 export const TIMELINE_AXIS_HEIGHT = 56;
 export const TIMELINE_BAR_HEIGHT = 80;

From 131e7cb097453185bd07cfa872a6389655bab908 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 15:50:08 +0900
Subject: [PATCH 47/57] =?UTF-8?q?fix:=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20?=
 =?UTF-8?q?=EC=A0=84=EC=B2=B4=EB=B3=B4=EA=B8=B0=20KPI=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=20=EC=88=AB=EC=9E=90=20=EC=98=A4=EB=B2=84=ED=94=8C=EB=A1=9C?=
 =?UTF-8?q?=EC=9A=B0=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/card/StatCard.tsx                  | 5 +++--
 src/components/dashboard/platform/PlatformDetailCard.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/common/card/StatCard.tsx b/src/components/common/card/StatCard.tsx
index 3fab741f..23663101 100644
--- a/src/components/common/card/StatCard.tsx
+++ b/src/components/common/card/StatCard.tsx
@@ -69,15 +69,16 @@ const StatCard = memo(function StatCard({
   return (
     <div
       className={twMerge(
-        "bg-surface-100/80 backdrop-blur-sm rounded-3xl shadow-Soft p-7 flex flex-col gap-4 border border-surface-100/40",
+        "flex flex-col gap-4 rounded-3xl border border-surface-100/40 bg-surface-100/80 p-7 shadow-Soft backdrop-blur-sm",
         className,
       )}
       {...rest}
     >
       <p className="font-body2 text-text-muted">{title}</p>
       <p
+        title={String(value)}
         className={twMerge(
-          "text-text-title tracking-tight",
+          "tracking-tight text-text-title",
           compact ? "font-heading2" : "font-heading1",
           valueClassName,
         )}
diff --git a/src/components/dashboard/platform/PlatformDetailCard.tsx b/src/components/dashboard/platform/PlatformDetailCard.tsx
index 7df092fa..bbca0306 100644
--- a/src/components/dashboard/platform/PlatformDetailCard.tsx
+++ b/src/components/dashboard/platform/PlatformDetailCard.tsx
@@ -24,10 +24,10 @@ export const PlatformDetailCard = memo(
     const kpis = useMemo(() => metricsToKpis(data), [data]);
 
     const innerCardClass =
-      "shadow-none! hover:shadow-none! !rounded-2xl p-2! gap-2!";
+      "min-w-0 shadow-none! hover:shadow-none! !rounded-2xl p-2! gap-2!";
 
     return (
-      <Card className="flex-1 p-7">
+      <Card className="min-w-0 flex-1 p-7">
         <div className="mb-8 flex items-center gap-2">
           <div className="shrink-0">{PLATFORM_LOGOS[provider]}</div>
           <h3 className="truncate font-heading4 text-text-title">
@@ -35,7 +35,7 @@ export const PlatformDetailCard = memo(
           </h3>
         </div>
 
-        <div className="grid grid-cols-2 gap-2">
+        <div className="grid min-w-0 grid-cols-2 gap-2">
           {kpis.map((kpi) => (
             <StatCard
               key={kpi.title}
@@ -43,7 +43,7 @@ export const PlatformDetailCard = memo(
               value={kpi.value}
               trend={kpi.trend}
               className={innerCardClass}
-              valueClassName="font-heading2"
+              valueClassName="min-w-0 truncate font-heading2-rsp tabular-nums"
             />
           ))}
         </div>

From 55dc49ba26ebfd71016acfedb1fe65c9a6c179b6 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Fri, 7 Aug 2026 16:14:51 +0900
Subject: [PATCH 48/57] =?UTF-8?q?style:=20=EA=B4=91=EA=B3=A0=20=EB=AA=A8?=
 =?UTF-8?q?=EC=95=84=EB=B3=B4=EA=B8=B0=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=8C=A8=EB=94=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ads/AdDetailContent.tsx      | 4 ++--
 src/components/ads/AdRow.tsx                | 4 ++--
 src/components/ads/skeleton/AdsSkeleton.tsx | 4 ++--
 src/pages/ads/list/CampaignDetail.tsx       | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ads/AdDetailContent.tsx b/src/components/ads/AdDetailContent.tsx
index d88cd3da..e2162e5c 100644
--- a/src/components/ads/AdDetailContent.tsx
+++ b/src/components/ads/AdDetailContent.tsx
@@ -60,7 +60,7 @@ export default function AdDetailContent({ ad }: { ad: IAd }) {
   return (
     <div className="animate-fade-in">
       <div className="border-t border-surface-400/60">
-        <div className="flex flex-col gap-4 px-4 pb-2 pt-4 tablet:px-5 mobile:gap-3 mobile:px-3 mobile:pt-3">
+        <div className="flex flex-col gap-4 px-4 pb-2 pt-4 tablet:px-5 mobile:gap-3 mobile:px-4 mobile:pt-3">
           <section className="rounded-lg border border-surface-400/40 bg-surface-100 px-4 py-3 mobile:px-3 mobile:py-2.5">
             <h3 className="mb-2 font-caption text-text-placeholder">
               광고 소재
@@ -116,7 +116,7 @@ export default function AdDetailContent({ ad }: { ad: IAd }) {
           </section>
         </div>
 
-        <div className="mx-4 mb-4 mt-1 overflow-hidden rounded-lg border border-surface-400/40 bg-surface-100 tablet:mx-5 mobile:mx-3 mobile:mb-3">
+        <div className="mx-4 mb-4 mt-1 overflow-hidden rounded-lg border border-surface-400/40 bg-surface-100 tablet:mx-5 mobile:mx-4 mobile:mb-3">
           <div className="flex flex-wrap items-start justify-between gap-3 gap-y-3 px-4 py-4 mobile:px-3 mobile:py-3">
             <div className="min-w-0 flex-1">
               <p className="font-caption text-text-placeholder">트래킹</p>
diff --git a/src/components/ads/AdRow.tsx b/src/components/ads/AdRow.tsx
index 6c8ff115..332e036e 100644
--- a/src/components/ads/AdRow.tsx
+++ b/src/components/ads/AdRow.tsx
@@ -18,8 +18,8 @@ const adListTableGridColsWithoutPlatform =
   "grid w-full min-w-0 grid-cols-[2.75rem_minmax(0,1fr)_5.5rem_2.5rem] items-center gap-x-3 mobile:grid-cols-[2rem_minmax(0,1fr)_auto_1.75rem] mobile:gap-x-1.5";
 
 const adListTableGridPadding = {
-  header: "px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:px-3 mobile:py-3",
-  row: "px-6 py-5 tablet:px-5 tablet:py-4 mobile:px-3 mobile:py-3",
+  header: "px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:px-4 mobile:py-3",
+  row: "px-6 py-5 tablet:px-5 tablet:py-4 mobile:px-4 mobile:py-3",
 } as const;
 
 export function getAdListTableStatusCellClass() {
diff --git a/src/components/ads/skeleton/AdsSkeleton.tsx b/src/components/ads/skeleton/AdsSkeleton.tsx
index 708b4cab..db2f5d78 100644
--- a/src/components/ads/skeleton/AdsSkeleton.tsx
+++ b/src/components/ads/skeleton/AdsSkeleton.tsx
@@ -205,7 +205,7 @@ export function AdListTableSkeleton({
 export function CampaignDetailAdsSectionSkeleton() {
   return (
     <Card className="flex flex-col overflow-hidden p-0">
-      <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/75 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:flex-col mobile:items-stretch mobile:px-3">
+      <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/75 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:flex-col mobile:items-stretch mobile:px-4">
         <div className="flex min-w-0 flex-1 flex-col gap-2 mobile:flex-none">
           <Skeleton className="h-3 w-20" />
           <Skeleton className="h-6 w-28" />
@@ -216,7 +216,7 @@ export function CampaignDetailAdsSectionSkeleton() {
         </div>
       </div>
 
-      <div className="flex flex-col gap-6 px-6 py-6 tablet:px-5 tablet:py-5 mobile:gap-4 mobile:px-3 mobile:py-4">
+      <div className="flex flex-col gap-6 px-6 py-6 tablet:px-5 tablet:py-5 mobile:gap-4 mobile:px-4 mobile:py-4">
         <div className="flex items-stretch gap-3">
           <span
             className="w-1 shrink-0 self-stretch rounded-r-md bg-surface-400"
diff --git a/src/pages/ads/list/CampaignDetail.tsx b/src/pages/ads/list/CampaignDetail.tsx
index c0e58612..c6c2ab6a 100644
--- a/src/pages/ads/list/CampaignDetail.tsx
+++ b/src/pages/ads/list/CampaignDetail.tsx
@@ -39,7 +39,7 @@ const PLATFORM_WORDMARK: Record<TPlatform, string> = {
 };
 
 const platformSectionBlockClass =
-  "flex flex-col gap-6 px-6 py-6 tablet:px-5 tablet:py-5 mobile:gap-4 mobile:px-3 mobile:py-4";
+  "flex flex-col gap-6 px-6 py-6 tablet:px-5 tablet:py-5 mobile:gap-4 mobile:px-4 mobile:py-4";
 
 const platformSectionDividerClass = "border-t border-surface-400/75";
 
@@ -307,7 +307,7 @@ export default function CampaignDetail() {
         <CampaignDetailAdsSectionSkeleton />
       ) : (
         <Card className="flex flex-col overflow-hidden p-0">
-          <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/75 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:flex-col mobile:items-stretch mobile:px-3">
+          <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface-400/75 bg-surface-100 px-6 py-4 tablet:px-5 tablet:py-3.5 mobile:flex-col mobile:items-stretch mobile:px-4">
             <div className="flex min-w-0 flex-1 flex-col gap-0.5 mobile:flex-none">
               <p className="font-caption text-text-placeholder">광고</p>
               <div className="flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1">
@@ -397,7 +397,7 @@ export default function CampaignDetail() {
               ))}
             </div>
           ) : (
-            <p className="px-6 py-16 text-center font-body1 text-text-placeholder tablet:px-5">
+            <p className="px-6 py-16 text-center font-body1 text-text-placeholder tablet:px-5 mobile:px-4">
               연결된 광고 소재가 없습니다.
             </p>
           )}

From d6daf0659d880f2198beffafb16f1724f7f8c5c9 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 22:40:51 +0900
Subject: [PATCH 49/57] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EC=84=B1=EA=B3=BC=ED=8C=A8=EB=84=90=20=EC=97=B4?=
 =?UTF-8?q?=EC=97=88=EC=9D=84=EB=95=8C=20=EC=9D=BF=EB=B3=84=20=EB=B3=80?=
 =?UTF-8?q?=ED=99=94=EC=B6=94=EC=9D=B4=20=EC=B0=A8=ED=8A=B8=20=EC=BA=A0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B8=20=EC=8B=9C=EC=9E=91=EB=82=A0=EC=A7=9C?=
 =?UTF-8?q?=EB=B6=80=ED=84=B0=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timeline/TimelinePerformancePanel.tsx     |  9 +++++-
 src/utils/timeline/period.ts                  | 32 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index be74a429..9e432e85 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -1,5 +1,5 @@
 import type { FC, SVGProps } from "react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import type { TProviderType } from "@/types/dashboard/provider";
@@ -8,6 +8,7 @@ import type { TTimelineViewUnit } from "@/types/timeline/ui";
 import { resolveTimelinePerformanceStatusStyle } from "@/constants/timeline/statusStyle";
 
 import { getTimelineMetricLabel } from "@/utils/timeline/buildTimelineChartSeries";
+import { getPeriodIndexContainingDate } from "@/utils/timeline/period";
 import {
   canGoToPrevChartPeriod,
   sliceDailyTrendByPeriod,
@@ -150,6 +151,12 @@ export default function TimelinePerformancePanel({
   const chartMetric = data.metrics[0]?.metric ?? "CLICK";
   const chartMetricLabel = getTimelineMetricLabel(chartMetric);
 
+  useEffect(() => {
+    if (!isOpen) return;
+    setViewUnit("WEEK");
+    setChartPeriodIndex(getPeriodIndexContainingDate("WEEK", data.startDate));
+  }, [isOpen, data.startDate]);
+
   const {
     periodLabel: chartPeriodLabel,
     slicedTrend,
diff --git a/src/utils/timeline/period.ts b/src/utils/timeline/period.ts
index 5577903b..e0e00293 100644
--- a/src/utils/timeline/period.ts
+++ b/src/utils/timeline/period.ts
@@ -113,3 +113,35 @@ export function resolveVisiblePeriod(
       periodIndex === 0 ? formatMonthLabel(start) : formatMonthLabel(start),
   };
 }
+
+export function getPeriodIndexContainingDate(
+  viewUnit: TTimelineViewUnit,
+  targetIso: string,
+  today = new Date(),
+): number {
+  const target = startOfDay(parseIsoDate(targetIso));
+  const normalizedToday = startOfDay(today);
+  const dayMs = 24 * 60 * 60 * 1000;
+
+  if (viewUnit === "DAY") {
+    return Math.max(
+      0,
+      Math.round((normalizedToday.getTime() - target.getTime()) / dayMs),
+    );
+  }
+  if (viewUnit === "WEEK") {
+    const todayWeekStart = getWeekStart(normalizedToday);
+    const targetWeekStart = getWeekStart(target);
+    return Math.max(
+      0,
+      Math.round(
+        (todayWeekStart.getTime() - targetWeekStart.getTime()) / (7 * dayMs),
+      ),
+    );
+  }
+
+  const monthDiff =
+    (normalizedToday.getFullYear() - target.getFullYear()) * 12 +
+    (normalizedToday.getMonth() - target.getMonth());
+  return Math.max(0, monthDiff);
+}

From 7b95f580c84562df719b7fdf1d1fc79d505d8013 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 22:41:50 +0900
Subject: [PATCH 50/57] =?UTF-8?q?style:=20=EC=84=B1=EA=B3=BC=20=EC=A7=80?=
 =?UTF-8?q?=ED=91=9C=20=EC=B9=A9=20=EC=BB=AC=EB=9F=AC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelinePerformancePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index 9e432e85..aab6da2b 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -272,7 +272,7 @@ export default function TimelinePerformancePanel({
               <span className="font-body2 text-text-muted">성과 지표</span>
               <div className="flex flex-wrap gap-2">
                 {data.metrics.map((metric) => (
-                  <Badge key={metric.metric} variant="surface">
+                  <Badge key={metric.metric} variant="infoBlue">
                     {metric.label}
                   </Badge>
                 ))}

From c2eb353b26fcfaa22b06669a508dd8ddb4740c64 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 22:43:16 +0900
Subject: [PATCH 51/57] =?UTF-8?q?style:=20AI=20=EC=A7=80=ED=91=9C=20?=
 =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8B=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelinePerformancePanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index aab6da2b..8426e606 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -283,6 +283,7 @@ export default function TimelinePerformancePanel({
 
         {/* AI 요약 */}
         <section className="flex flex-col gap-4 py-3">
+          <h3 className={SECTION_TITLE_CLASS}>AI 요약</h3>
           {aiState === "idle" && (
             <Button
               type="button"

From 7ac103b6ca027bb63974f93b7fd51af81e8c3cb8 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 22:46:08 +0900
Subject: [PATCH 52/57] =?UTF-8?q?style:=20KPI=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelinePerformancePanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index 8426e606..1d08f276 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -325,14 +325,14 @@ export default function TimelinePerformancePanel({
               key={metric.metric}
               className={twMerge(
                 SOFT_CARD_CLASS,
-                "flex min-w-0 flex-1 flex-col gap-1 px-4 py-3.5 tablet:min-w-[calc(50%-0.25rem)]",
+                "flex min-w-0 flex-1 flex-col gap-1 border border-primary-200/40 px-4 py-3.5 tablet:min-w-[calc(50%-0.25rem)]",
               )}
             >
               <span className="ml-1 flex flex-col">
                 <span className="truncate font-body2 text-text-muted">
                   {metric.label}
                 </span>
-                <span className="truncate  text-text-title tracking-tight font-heading4">
+                <span className="truncate text-primary-400 tracking-tight font-heading4">
                   {formatMetricValue(metric.value, metric.unit)}
                 </span>
                 {metric.changeRate !== undefined && (

From e91d5a557436927b316fa4200fb6a2f2143dc2f9 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 23:20:36 +0900
Subject: [PATCH 53/57] =?UTF-8?q?style:=20KPI=EC=A7=80=ED=91=9C=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20gap=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelinePerformancePanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index 1d08f276..cc8b6b67 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -319,13 +319,13 @@ export default function TimelinePerformancePanel({
         </section>
 
         {/* KPI — 선택한 지표 수만큼 가로 균등 분할 */}
-        <section className="flex w-full gap-2 tablet:flex-wrap">
+        <section className="flex w-full justify-start gap-3 tablet:gap-5">
           {data.metrics.map((metric) => (
             <div
               key={metric.metric}
               className={twMerge(
                 SOFT_CARD_CLASS,
-                "flex min-w-0 flex-1 flex-col gap-1 border border-primary-200/40 px-4 py-3.5 tablet:min-w-[calc(50%-0.25rem)]",
+                "flex min-w-0 flex-1 flex-col gap-1 border border-primary-200/40 px-4 py-3.5",
               )}
             >
               <span className="ml-1 flex flex-col">

From 4df582117b9fb6ea68466d0f51c687bd0f8db17f Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 23:28:31 +0900
Subject: [PATCH 54/57] =?UTF-8?q?style:=20AI=EC=9A=94=EC=95=BD=20=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=ED=8B=80=20=EC=9C=84=EC=B9=98=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=BB=AC=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timeline/TimelinePerformancePanel.tsx     | 72 +++++++++++++------
 1 file changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index cc8b6b67..3790403b 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -282,39 +282,71 @@ export default function TimelinePerformancePanel({
         </header>
 
         {/* AI 요약 */}
-        <section className="flex flex-col gap-4 py-3">
-          <h3 className={SECTION_TITLE_CLASS}>AI 요약</h3>
+        {/* AI 요약 */}
+        <section className="flex flex-col">
           {aiState === "idle" && (
-            <Button
-              type="button"
-              variant="gradient"
-              size="big"
-              fullWidth
-              onClick={() => onRequestSummary?.()}
-              disabled={isSummaryPending}
-              className="rounded-2xl px-6 py-4 shadow-Soft"
+            <div
+              className={twMerge(
+                SOFT_CARD_CLASS,
+                "flex flex-col gap-3 px-5 py-4",
+              )}
             >
-              요약하기 생성
-            </Button>
+              <h3
+                className={twMerge(SECTION_TITLE_CLASS, "text-text-auth-sub")}
+              >
+                AI 요약
+              </h3>
+              <Button
+                type="button"
+                variant="gradient"
+                size="big"
+                fullWidth
+                onClick={() => onRequestSummary?.()}
+                disabled={isSummaryPending}
+                className="rounded-2xl px-6 py-4 shadow-Soft"
+              >
+                요약하기 생성
+              </Button>
+            </div>
           )}
 
           {aiState === "loading" && (
-            <div aria-busy="true" className="flex flex-col gap-2 px-1">
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-5/6" />
-              <Skeleton className="h-4 w-4/6" />
+            <div
+              aria-busy="true"
+              className={twMerge(
+                SOFT_CARD_CLASS,
+                "flex flex-col gap-3 px-5 py-4",
+              )}
+            >
+              <h3
+                className={twMerge(SECTION_TITLE_CLASS, "text-text-auth-sub")}
+              >
+                AI 요약
+              </h3>
+              <div className="flex flex-col gap-2">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-5/6" />
+                <Skeleton className="h-4 w-4/6" />
+              </div>
             </div>
           )}
 
           {aiState === "done" && hasSummary && (
-            <p
+            <div
               className={twMerge(
                 SOFT_CARD_CLASS,
-                "px-5 py-4 font-body1 text-text-body break-keep leading-relaxed",
+                "flex flex-col gap-2 px-5 py-4",
               )}
             >
-              {data.aiSummary}
-            </p>
+              <h3
+                className={twMerge(SECTION_TITLE_CLASS, "text-text-auth-sub")}
+              >
+                AI 요약
+              </h3>
+              <p className="font-body1 text-text-body break-keep leading-relaxed">
+                {data.aiSummary}
+              </p>
+            </div>
           )}
         </section>
 

From 84b5affa215f44c628b4be0545ece6304f15d13d Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 23:43:56 +0900
Subject: [PATCH 55/57] =?UTF-8?q?fix:=20inFlow=EC=97=90=EC=84=9C=EB=8F=84?=
 =?UTF-8?q?=20fullWidth=20=EB=86=92=EC=9D=B4=20=EC=A0=9C=ED=95=9C=20?=
 =?UTF-8?q?=ED=95=B4=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/dropdownmenu/DropdownMenu.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/common/dropdownmenu/DropdownMenu.tsx b/src/components/common/dropdownmenu/DropdownMenu.tsx
index 1081d3dd..8e196e53 100644
--- a/src/components/common/dropdownmenu/DropdownMenu.tsx
+++ b/src/components/common/dropdownmenu/DropdownMenu.tsx
@@ -208,7 +208,9 @@ export function DropdownMenu({
             <div
               className={twMerge(
                 "space-y-1",
-                fullWidth && "max-h-60 overflow-y-auto overscroll-contain",
+                fullWidth &&
+                  !inFlow &&
+                  "max-h-60 overflow-y-auto overscroll-contain",
               )}
             >
               {items.map((it, idx) => (

From 508c73748cb36118f42cc4ee7a571d314fc726ce Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 23:44:44 +0900
Subject: [PATCH 56/57] =?UTF-8?q?chore:=20AI=20=EC=9A=94=EC=95=BD=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelinePerformancePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index 3790403b..a473e1b5 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -305,7 +305,7 @@ export default function TimelinePerformancePanel({
                 disabled={isSummaryPending}
                 className="rounded-2xl px-6 py-4 shadow-Soft"
               >
-                요약하기 생성
+                AI 요약 생성하기
               </Button>
             </div>
           )}

From 0096aa48c97b5d199bb32cf7d525019e3d0b87a7 Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Fri, 7 Aug 2026 23:47:33 +0900
Subject: [PATCH 57/57] =?UTF-8?q?style:=20KPI=20=EC=B9=B4=EB=93=9C=20grid?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeline/TimelinePerformancePanel.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index a473e1b5..bc9147d3 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -281,7 +281,6 @@ export default function TimelinePerformancePanel({
           </div>
         </header>
 
-        {/* AI 요약 */}
         {/* AI 요약 */}
         <section className="flex flex-col">
           {aiState === "idle" && (
@@ -351,13 +350,13 @@ export default function TimelinePerformancePanel({
         </section>
 
         {/* KPI — 선택한 지표 수만큼 가로 균등 분할 */}
-        <section className="flex w-full justify-start gap-3 tablet:gap-5">
+        <section className="grid w-full grid-cols-4 gap-3 tablet:grid-cols-4 tablet:gap-5">
           {data.metrics.map((metric) => (
             <div
               key={metric.metric}
               className={twMerge(
                 SOFT_CARD_CLASS,
-                "flex min-w-0 flex-1 flex-col gap-1 border border-primary-200/40 px-4 py-3.5",
+                "flex min-w-0 flex-col gap-1 border border-primary-200/40 px-4 py-3.5",
               )}
             >
               <span className="ml-1 flex flex-col">