From 5682f4047df9fcefb08690c600ae373f03216f43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= Date: Thu, 19 Mar 2026 23:26:50 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=8B=AC=20border=20?= =?UTF-8?q?=EB=B0=8F=20=EC=98=88=EC=82=B0=20=EC=A0=95=EB=B3=B4=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/common/drawer/Drawer.tsx | 2 +- .../dashboard/charts/BudgetGaugeChart.tsx | 91 +++++-------------- 2 files changed, 23 insertions(+), 70 deletions(-) diff --git a/src/components/common/drawer/Drawer.tsx b/src/components/common/drawer/Drawer.tsx index 33196254..8eb3919e 100644 --- a/src/components/common/drawer/Drawer.tsx +++ b/src/components/common/drawer/Drawer.tsx @@ -113,7 +113,7 @@ export default function Drawer({ // [데스크톱] 우측 슬라이드 "relative w-full rounded-l-4xl overflow-hidden max-w-md bg-white shadow-2xl h-full flex flex-col transform transition-transform duration-300 ease-in-out", // [태블릿] 하단 bottom sheet - "tablet:rounded-t-4xl tablet:h-auto tablet:max-h-[85vh] tablet:max-w-none tablet:border-t tablet:border-bg-disabled", + "tablet:rounded-t-4xl tablet:rounded-bl-none tablet:h-auto tablet:max-h-[85vh] tablet:max-w-none tablet:border-t tablet:border-bg-disabled", isOpen ? "translate-x-0 tablet:translate-y-0" : "translate-x-full tablet:translate-x-0 tablet:translate-y-full", diff --git a/src/components/dashboard/charts/BudgetGaugeChart.tsx b/src/components/dashboard/charts/BudgetGaugeChart.tsx index 63dd91ad..f06f0022 100644 --- a/src/components/dashboard/charts/BudgetGaugeChart.tsx +++ b/src/components/dashboard/charts/BudgetGaugeChart.tsx @@ -1,4 +1,4 @@ -import { memo, useMemo } from "react"; +import { memo } from "react"; import { twMerge } from "tailwind-merge"; import { useIsMounted } from "@/hooks/common/useIsMounted"; @@ -51,22 +51,6 @@ const BudgetGaugeChart = memo(function BudgetGaugeChart({ const isOverBudget = spent > totalBudget; const remaining = isOverBudget ? spent - totalBudget : totalBudget - spent; - const { periodElapsedDays, periodTotalDays, periodElapsedRate } = - useMemo(() => { - const now = new Date(); - const elapsed = now.getDate(); - const total = new Date( - now.getFullYear(), - now.getMonth() + 1, - 0, - ).getDate(); - return { - periodElapsedDays: elapsed, - periodTotalDays: total, - periodElapsedRate: Math.round((elapsed / total) * 100), - }; - }, []); - const status = getBudgetStatus(percentage, warningThreshold, dangerThreshold); // 데이터 인사이트 메시지 @@ -74,31 +58,20 @@ const BudgetGaugeChart = memo(function BudgetGaugeChart({ if (isOverBudget) { insightDesc = "예산을 초과했습니다. 캠페인 조정이 필요해요."; - } else if ( - percentage >= dangerThreshold || - percentage > periodElapsedRate + 15 - ) { + } else if (percentage >= dangerThreshold) { insightDesc = "예산 소진이 빨라요. 일일 한도 점검을 추천해요."; - } else if ( - percentage >= warningThreshold || - percentage > periodElapsedRate + 5 - ) { + } else if (percentage >= warningThreshold) { insightDesc = "예산 소진 속도가 다소 높아요. 매체 효율을 확인해 보세요."; - } else if (percentage < periodElapsedRate - 5) { - insightDesc = "예산이 여유로워요. 효율이 좋은 매체에 더 투자해 보세요."; } else { - insightDesc = "계획된 일정에 맞게 예산이 잘 사용되고 있어요."; + insightDesc = "계획된 예산 범위 내에서 잘 사용되고 있어요."; } return (
-
-
- - 이번 달 사용 예산 - -
- +
+ + 사용 예산 +
{percentage}% @@ -109,10 +82,10 @@ const BudgetGaugeChart = memo(function BudgetGaugeChart({
-
+
-
-
- - 남은 예산 - - - {isOverBudget ? "-" : ""}₩{remaining.toLocaleString()} - -
- -
-
- - 기간 진행률 - - - {periodElapsedRate}% - -
- - {periodElapsedDays}일 - - {" "} - / {periodTotalDays}일 - - -
+
+ + 남은 예산 + + + {isOverBudget ? "-" : ""}₩{remaining.toLocaleString()} +
From 3018879283a1b067cfe049be327832b35fb4a58f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= Date: Fri, 20 Mar 2026 10:21:41 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20ai=20=EC=9A=94=EC=95=BD=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20chevron=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ai-button-preview.html | 381 ++++++++++++++++++ src/assets/icon/chevron/chevron-right.svg | 3 + ...4\354\225\275\353\262\204\355\212\274.svg" | 16 +- .../dashboard/charts/BudgetGaugeChart.tsx | 2 +- src/index.css | 24 ++ 5 files changed, 418 insertions(+), 8 deletions(-) create mode 100644 ai-button-preview.html create mode 100644 src/assets/icon/chevron/chevron-right.svg diff --git a/ai-button-preview.html b/ai-button-preview.html new file mode 100644 index 00000000..3b9dbd05 --- /dev/null +++ b/ai-button-preview.html @@ -0,0 +1,381 @@ + + + + + +AI 요약하기 — Periwinkle CTA Preview + + + + + + + + +
+ + +
+ + Default +
+ + +
+ + Hover +
+ +
+ + +
+

Color reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleValueSwatch
Icon gradient start
Sparkle — left edge		#6B8EF5
Icon gradient end
Sparkle — right edge / arrow		#A78BFA
Label
font-weight 700, 13px, -0.02em		#4B7BF5
Background default#EEF2FF
Background hover#E5EAFF
Border default#C7D2FE
Border hover#A5B4FC
Glow (hover)
box-shadow 0 0 12px		rgba(107,142,245, 0.35)
Page background#EEF2F7
+
+ + + diff --git a/src/assets/icon/chevron/chevron-right.svg b/src/assets/icon/chevron/chevron-right.svg new file mode 100644 index 00000000..6fd1b50e --- /dev/null +++ b/src/assets/icon/chevron/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git "a/src/assets/logo/service-logo/ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" "b/src/assets/logo/service-logo/ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" index 625b4264..14e16db1 100644 --- "a/src/assets/logo/service-logo/ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" +++ "b/src/assets/logo/service-logo/ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" @@ -1,11 +1,13 @@ - - - - - - + + + + - + + + + + diff --git a/src/components/dashboard/charts/BudgetGaugeChart.tsx b/src/components/dashboard/charts/BudgetGaugeChart.tsx index f06f0022..9ce84307 100644 --- a/src/components/dashboard/charts/BudgetGaugeChart.tsx +++ b/src/components/dashboard/charts/BudgetGaugeChart.tsx @@ -117,7 +117,7 @@ const BudgetGaugeChart = memo(function BudgetGaugeChart({
-
+
남은 예산 diff --git a/src/index.css b/src/index.css index 21bb614a..8e3ef1f0 100644 --- a/src/index.css +++ b/src/index.css @@ -370,6 +370,30 @@ button { } } + /* AI 요약 버튼 스파클 pulse 애니메이션 */ + @keyframes sparkle-pulse { + 0%, + 100% { + transform: scale(1); + opacity: 0.7; + } + 50% { + transform: scale(1.2); + opacity: 1; + } + } + + .animate-sparkle-pulse { + animation: sparkle-pulse 2.8s ease-in-out infinite; + } + + @media (prefers-reduced-motion: reduce) { + .animate-sparkle-pulse { + animation: none; + opacity: 1; + } + } + /* 토스트 애니메이션 */ @keyframes fade-in-up { from { From bac8babf50903adb166f8ddd3dbf03c2defca159 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= Date: Fri, 20 Mar 2026 10:27:08 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20ai=20=EC=9A=94=EC=95=BD=20=EA=B7=B8?= =?UTF-8?q?=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git "a/src/assets/logo/service-logo/ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" "b/src/assets/logo/service-logo/ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" index 14e16db1..21bf98de 100644 --- "a/src/assets/logo/service-logo/ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" +++ "b/src/assets/logo/service-logo/ai-\354\232\224\354\225\275\353\262\204\355\212\274.svg" @@ -4,8 +4,9 @@ - - + + + From b0104dbf401dff5a4f26b71f3d312808f5a44f5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=84=9C=EC=A0=9C=EA=B2=BD?= Date: Fri, 20 Mar 2026 10:52:27 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20coderabbit=20=EB=A6=AC=EB=B7=B0=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/charts/BudgetGaugeChart.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/dashboard/charts/BudgetGaugeChart.tsx b/src/components/dashboard/charts/BudgetGaugeChart.tsx index 9ce84307..ee890cda 100644 --- a/src/components/dashboard/charts/BudgetGaugeChart.tsx +++ b/src/components/dashboard/charts/BudgetGaugeChart.tsx @@ -69,9 +69,9 @@ const BudgetGaugeChart = memo(function BudgetGaugeChart({ return (
- +

사용 예산 - +

{percentage}%