[Deploy] develop → main 배포 반영

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;
 };
 

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-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">
               광고 소재
             </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-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>
               <p className="mt-1 font-body1 text-text-title">

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-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() {
-  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(

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">

src/components/ads/CampaignRow.tsx

@@ -20,12 +20,24 @@ 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" />
+    <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 +54,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 +71,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,20 +85,25 @@ 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",
           )}
         >
           {name}
         </div>
       </div>
 
-      <div className="mr-24 flex w-28 shrink-0 items-center justify-start tablet:mr-20 tablet:w-24">
+      <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">
+          <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] ?? (
@@ -101,10 +118,7 @@ export default function CampaignRow({
       </div>
 
       <div
-        className={twMerge(
-          "w-[28%] shrink-0 tablet:w-[26%]",
-          isPaused && "opacity-80",
-        )}
+        className={twMerge(CAMPAIGN_BUDGET_COL_CLASS, isPaused && "opacity-80")}
       >
         <ProgressBar value={budgetUsageRate} />
       </div>

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[];
@@ -53,9 +56,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 +74,20 @@ 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={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%]">
+        <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>