[Refactor/#227] shadow-Soft 통일 및 랜딩·대시보드 레이아웃 정리

[Seojegyeong]

🚨 관련 이슈

#227

✨ 변경사항

• 🐞 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.)

✏️ 작업 내용

• 그림자 shadow-Soft 단일 토큰으로 통일, 그림자 연하게 스타일 조정
• 랜딩 배경 워시·히어로 딤을 @theme / Tailwind 유틸로 정리
• 대시보드 캠페인 미리보기 카드 그림자 적용 후 레이아웃 겹침 수정

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

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

Summary by CodeRabbit

릴리스 노트

• Style
  • 전체 UI 컴포넌트의 그림자 효과가 더욱 일관성 있게 개선되었습니다.
  • 카드, 버튼, 모달, 드롭다운 메뉴 등 주요 UI 요소의 시각적 표현이 업데이트되었습니다.
  • 배경 스타일 및 레이아웃이 미세하게 조정되어 전반적인 디자인 일관성이 향상되었습니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 290abb5d-1c03-466b-9bf8-d0b100960f6e

📥 Commits

Reviewing files that changed from the base of the PR and between e3c7dbf and 0986009.

📒 Files selected for processing (6)

• src/components/dashboard/overview/skeleton/OverviewSkeleton.tsx
• src/components/landing/LandingMultiDevice.tsx
• src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx
• src/pages/dashboard/overview/sections/OverviewCampaignSnapshotCard.tsx
• src/styles/tokens.css
• src/styles/utilities.css

✅ Files skipped from review due to trivial changes (1)

• src/components/landing/LandingMultiDevice.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• src/styles/tokens.css
• src/styles/utilities.css

---

📝 Walkthrough

Walkthrough

이 PR은 전체 애플리케이션의 shadow 디자인 토큰을 CSS 변수 기반 다중 레이어로 재정의하고, 산재된 shadow 클래스들을 새로운 shadow-Soft 토큰으로 통일하는 대규모 디자인 시스템 개선입니다. 45개 컴포넌트와 스타일 파일에서 shadow 클래스를 일관되게 변경하고, 관련 레이아웃 구조도 조정했습니다.

Changes

Shadow 토큰 시스템 및 컴포넌트 마이그레이션

Layer / File(s)	Summary
Shadow 토큰 정의 및 배경 이미지 업데이트 src/styles/utilities.css, src/styles/tokens.css, src/stories/Shadows.stories.tsx	.shadow-Soft의 box-shadow를 고정 RGBA에서 color-mix 기반 두 단계 그림자(0 1px 2px, 0 4px 20px)로 재정의. 랜딩 섹션 배경 워시용 --background-image-landing-guide-wash CSS 커스텀 프로퍼티 추가.
공통 UI 컴포넌트 Shadow 마이그레이션 src/components/common/button/Button.tsx, src/components/common/card/Card.tsx, src/components/common/card/StatCard.tsx, src/components/common/drawer/Drawer.tsx, src/components/common/dropdownmenu/DropdownMenu.tsx, src/components/common/modal/Modal.tsx, src/components/common/select/SearchSelect.tsx, src/components/common/toggle/Toggle.tsx, src/components/common/ComingSoonPlaceholder.tsx	Button의 shadow-primary-500/30, Card/StatCard의 shadow-card hover:shadow-card-hover, Drawer의 shadow-2xl, DropdownMenu/Modal의 shadow-Medium, SearchSelect/Toggle의 shadow-sm 등을 모두 shadow-Soft로 통일. 호버 shadow 효과 제거.
랜딩 페이지 컴포넌트 Shadow 마이그레이션 src/components/landing/GuideOverviewChart.tsx, src/components/landing/GuidePlatform.tsx, src/components/landing/GuideTimeline.tsx, src/components/landing/LandingFAQ.tsx, src/components/landing/LandingFeatures.tsx, src/components/landing/LandingGuide.tsx, src/components/landing/LandingHeader.tsx, src/components/landing/LandingHero.tsx, src/components/landing/LandingMultiDevice.tsx, src/components/landing/LandingPricing.tsx, src/pages/landing/LandingPage.tsx	shadow-landing-pill, shadow-landing-dropdown, shadow-landing-tooltip, shadow-landing-featured-plan, shadow-landing-cta, shadow-landing-card-deep, shadow-landing-float, shadow-card 등의 랜딩 특화 shadow 토큰을 shadow-Soft로 통합. LandingHero의 배경 scrim을 bg-landing-hero-scrim에서 bg-text-400/64로 변경.
대시보드 및 워크스페이스 컴포넌트 Shadow 마이그레이션 src/components/dashboard/platform/SinglePlatformView.tsx, src/components/dashboard/overview/skeleton/OverviewSkeleton.tsx, src/components/workspace/MemberManagementLoading.tsx, src/components/workspace/WorkspaceCard.tsx, src/components/workspace/WorkspaceListLoading.tsx, src/pages/workspace/Workspace.tsx	SinglePlatformView의 스켈레톤과 기간 선택 버튼, OverviewSkeleton의 KPI 카드, WorkspaceCard의 카드, Workspace 페이지의 로고 미리보기 버튼에서 shadow-card, shadow-sm 등을 shadow-Soft로 통일. 호버 shadow 효과 제거.
레이아웃 미세 조정 및 스타일 최적화 src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx, src/pages/dashboard/overview/sections/OverviewCampaignSnapshotCard.tsx	OverviewBudgetSection의 예산 영역 flex 비율을 flex-[2_1_0%]에서 flex-1로 정리하고 overflow-hidden 추가. 캠페인 스냅샷 래퍼를 min-h-60 flex-[1_1_0%]에서 shrink-0로 단순화. OverviewCampaignSnapshotCard의 강제 패딩 클래스(pb-3!) 제거하여 외부 컨테이너의 크기 조정 로직 개선.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• WhereYouAd/WhereYouAd-Frontend#171: StatCard.tsx 컴포넌트의 shadow 클래스 변경과 동일 파일의 compact prop 리팩토링이 겹침.
• WhereYouAd/WhereYouAd-Frontend#105: Card.tsx의 shadow/hover-shadow 유틸리티 변경과 transition 조정이 동일 파일 className 편집으로 중복 가능성.
• WhereYouAd/WhereYouAd-Frontend#223: OverviewSkeleton.tsx의 shadow 클래스 업데이트가 해당 파일의 OverviewKpiCardSkeleton 정의와 관련.

Suggested reviewers

• jjjsun
• YermIm

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 주요 변경사항(shadow-Soft 통일 및 레이아웃 정리)을 명확하게 요약하고 있습니다.
Description check	✅ Passed	PR 설명에서 관련 이슈, 변경사항 체크, 작업 내용이 모두 포함되어 있으며 템플릿 구조를 따르고 있습니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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/#227

---

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-hwwwnlytna.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=307

[YermIm]

P4: 확인했습니다!