[Refactor/#109] AI 요약 버튼 및 모달 개선

[Seojegyeong]

🚨 관련 이슈

#109

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

• 모달 rounded 수정
• AI 요약하기 svg 내부 그라데이션 개선 및 화살표 제거
• 예산 정보 한달 기준에서 전체 기간으로 수정

2026-03-20.10.30.28.mov

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 스파클 펄스 애니메이션 효과 추가

• 스타일

  • 예산 게이지 차트의 UI를 간소화하고 레이아웃 개선
  • 기간 진행률 정보 표시 제거
  • 태블릿 드로어 패널의 모서리 스타일 조정

[coderabbitai]

📝 Walkthrough

Walkthrough

드로어의 태블릿 UI 코너 라운딩을 조정하고, 예산 차트의 기간 계산 로직을 제거하며 메시지 판정을 단순화했습니다. 또한 새로운 스파클 펄스 애니메이션 유틸리티를 추가했습니다.

Changes

Cohort / File(s)	Summary
UI 스타일링 & 애니메이션 src/components/common/drawer/Drawer.tsx, src/index.css	드로어 태블릿 바텀 시트의 bottom-left 코너 라운딩을 tablet:rounded-bl-none 클래스로 조정하고, 새로운 @keyframes sparkle-pulse 애니메이션과 .animate-sparkle-pulse 유틸리티 클래스를 추가했습니다.
차트 컴포넌트 로직 리팩토링 src/components/dashboard/charts/BudgetGaugeChart.tsx	기간 계산 로직(periodElapsedDays, periodTotalDays, periodElapsedRate)과 useMemo를 제거하고, 인사이트 메시지 분기를 단순화했습니다. 또한 UI 레이블을 "이번 달 사용 예산"에서 "사용 예산"으로 변경하고, "기간 진행률" 카드 섹션을 제거했으며, "남은 예산" 표시를 2칼럼 그리드에서 싱글 스택 블록으로 재구성했습니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• WhereYouAd/WhereYouAd-Frontend #96 — BudgetGaugeChart.tsx의 인사이트 메시지 로직과 threshold 판정 변경이 겹치는 영역이 있습니다.
• WhereYouAd/WhereYouAd-Frontend #87 — BudgetGaugeChart.tsx의 상태 표시와 남은 예산 레이아웃 변경에 관련된 UI 로직 수정이 있습니다.
• WhereYouAd/WhereYouAd-Frontend #105 — Drawer.tsx와 BudgetGaugeChart.tsx 양쪽 모두 수정하는 변경사항이 포함되어 있습니다.

Suggested labels

🎨 Html&css, 🔨 Refactor

Suggested reviewers

• YermIm
• jjjsun

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 PR의 주요 변경사항(모달 rounded 수정, AI 요약 SVG 개선, 예산 정보 기간 수정)을 포괄적으로 반영하고 있습니다.
Description check	✅ Passed	PR 설명이 템플릿 구조를 따르고 있으며, 관련 이슈, 변경사항 체크박스, 작업 내용, 스크린샷, 미완성 작업 섹션을 모두 포함하고 있습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/#109

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

📚 Storybook 배포 완료

항목	링크
📖 Storybook	https://69a147b60a56365d9e2185ef-vnijubklde.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=108

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/dashboard/charts/BudgetGaugeChart.tsx (1)

121-123: 초과 상태에서도 라벨이 ‘남은 예산’으로 고정되어 의미가 헷갈릴 수 있습니다.

isOverBudget일 때 값은 음수 표현인데 라벨은 그대로라서, 사용자 입장에서 해석 비용이 생깁니다. 상태에 따라 라벨을 동적으로 바꿔주면 더 명확합니다.

제안 diff

-        <span className="font-caption font-medium text-text-auth-sub">
-          남은 예산
-        </span>
+        <span className="font-caption font-medium text-text-auth-sub">
+          {isOverBudget ? "초과 예산" : "남은 예산"}
+        </span>

Also applies to: 130-130

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/dashboard/charts/BudgetGaugeChart.tsx` around lines 121 - 123,
The label “남은 예산” in BudgetGaugeChart is confusing when isOverBudget is true
because the displayed value becomes negative; update the JSX to render a dynamic
label based on the isOverBudget flag (e.g., isOverBudget ? '초과 금액' or '초과' : '남은
예산') so the label matches the state, and apply this change to both occurrences
of the span with className "font-caption font-medium text-text-auth-sub" (the
two places around the budget display).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/dashboard/charts/BudgetGaugeChart.tsx`:
- Around line 72-74: The visual title currently rendered as a <span> in the
BudgetGaugeChart component should be a semantic heading for accessibility;
replace the <span className="font-body2 font-semibold text-text-auth-sub
mb-3">사용 예산</span> with an appropriate heading element (e.g., <h3>) preserving
the existing className and styling, and ensure the heading level chosen fits the
page structure (adjust to h2/h4 if needed) so screen readers treat it as a real
heading; update any tests or snapshots that assert this element if present.

---

Nitpick comments:
In `@src/components/dashboard/charts/BudgetGaugeChart.tsx`:
- Around line 121-123: The label “남은 예산” in BudgetGaugeChart is confusing when
isOverBudget is true because the displayed value becomes negative; update the
JSX to render a dynamic label based on the isOverBudget flag (e.g., isOverBudget
? '초과 금액' or '초과' : '남은 예산') so the label matches the state, and apply this
change to both occurrences of the span with className "font-caption font-medium
text-text-auth-sub" (the two places around the budget display).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6b4c3348-2633-4df6-90d7-d7163890d71b

📥 Commits

Reviewing files that changed from the base of the PR and between dd200a8 and bac8bab.

⛔ Files ignored due to path filters (3)

• ai-button-preview.html is excluded by none and included by none
• src/assets/icon/chevron/chevron-right.svg is excluded by !**/*.svg and included by src/**
• src/assets/logo/service-logo/ai-요약버튼.svg is excluded by !**/*.svg and included by src/**

📒 Files selected for processing (3)

• src/components/common/drawer/Drawer.tsx
• src/components/dashboard/charts/BudgetGaugeChart.tsx
• src/index.css

[jjjsun]

P4: 확인했습니다! 고생하셨어요!

[YermIm]

P4: 확인했습니다!! 수고하셨어요 :)