🎨 Palette: 버튼 클릭 시 시각적 피드백(:active) 추가

[seonghobae]

💡 What

버튼 요소(.button, .language-switch button)가 클릭될 때 살짝 작아지는(transform: scale(...)) :active 상태 애니메이션을 추가했습니다.

🎯 Why

기존에는 마우스 호버(:hover) 상태만 정의되어 있어 사용자가 버튼을 클릭(터치)했을 때 즉각적인 촉각적/시각적 피드백이 없었습니다. 버튼을 눌렀다는 명확한 시각적 반응을 주어 사용자 경험(UX)과 인터페이스의 반응성을 높이기 위해 추가했습니다.

📸 Before/After

• Before: 클릭 시 색상 외에 시각적 변화가 없음.
• After: 클릭하는 순간 버튼의 크기가 살짝 줄어들어 실제로 눌리는 듯한 피드백을 제공.

♿ Accessibility

키보드 탐색이나 마우스 조작 등 상호작용하는 모든 사용자에게 버튼이 활성화되었음을 시각적으로 명확히 인지할 수 있도록 보완했습니다.

---

PR created automatically by Jules for task 11514326970816294282 started by @seonghobae

Summary by CodeRabbit

• 새 기능

  • 버튼과 언어 전환 버튼을 클릭할 때 즉각적인 축소 효과가 표시됩니다.
  • 버튼 상태 전환이 부드럽게 적용되어 더욱 명확한 시각적 피드백을 제공합니다.

• 문서

  • 예정된 변경 사항에 버튼 클릭 피드백 개선 내용이 추가되었습니다.

• 테스트

  • 버튼의 전환 효과와 클릭 시 축소 동작을 검증하는 회귀 테스트가 추가되었습니다.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

Warning

Review limit reached

@seonghobae, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 19 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 21cd4f60-fe60-4c44-9ac2-8e451df21849

📥 Commits

Reviewing files that changed from the base of the PR and between 22c3bfb and d68ed8b.

📒 Files selected for processing (1)

• tests/test_styles.py

📝 Walkthrough

Walkthrough

언어 전환 버튼과 일반 버튼에 :active 축소 효과와 transform 전환을 추가했습니다. 관련 회귀 테스트, 개발 지침, 변경 기록도 갱신했습니다.

Changes

버튼 피드백

Layer / File(s)	Summary
버튼 활성 상태 스타일 styles.css	언어 전환 버튼은 scale(0.92), 일반 버튼은 scale(0.98)로 축소됩니다. 두 버튼의 transform 전환을 추가했습니다.
검증 및 변경 기록 tests/test_styles.py, .Jules/palette.md, CHANGELOG.md	새 스타일과 :active 상태를 검증하는 테스트를 추가했습니다. 관련 지침과 변경 내역을 갱신했습니다.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 버튼 클릭 시각적 피드백을 추가하는 변경 사항을 정확하고 간결하게 설명합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ 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 palette-button-active-state-11514326970816294282

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/test_styles.py`:
- Around line 63-77: Update test_buttons_have_active_transform_feedback to
assert the exact transform and transition values for both .button and
.language-switch button rules, including scale(0.98) and scale(0.92)
respectively, rather than only checking for generic transform or scale text.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f7f5c5d4-a7c3-47f7-bcce-4011e3c254c4

📥 Commits

Reviewing files that changed from the base of the PR and between 312e452 and 22c3bfb.

📒 Files selected for processing (4)

• .Jules/palette.md
• CHANGELOG.md
• styles.css
• tests/test_styles.py

[seonghobae]

@opencode-agent review-only request for exact current head d68ed8ba3f61face78eb9d97748c700da58c5896. Please review the complete current diff and the exact active-feedback regression values after the resolved CodeRabbit finding. Exact-head Security Scan and SAST Semgrep are successful and CodeRabbit commit status is success. Do not mutate the branch, change ready state, merge, or bypass protection; submit only a formal current-head verdict.