[FEAT] 스크롤바 사이즈 유틸리티 클래스 추가 by jjangminii · Pull Request #135 · Team-Timo/Timo-client

jjangminii · 2026-07-10T09:54:01Z

ISSUE 🔗

close #132

What is this PR? 🔍

전역 스크롤바 스타일 위에, 필요한 곳에서만 덮어쓸 수 있는 작은 스크롤바 유틸리티 클래스를 추가했습니다.

배경

기존 구조: packages/tailwind-config/scrollbar.css에서 * 셀렉터로 전역 스크롤바 두께(8px)를 고정하고 있었습니다.
발생 문제: 특정 한두 곳에서만 더 얇은 스크롤바가 필요했지만, 사용 빈도가 낮아 별도 컴포넌트나 variant 체계를 만들 정도는 아니었습니다.
해결 방향: class selector가 * selector보다 specificity가 높다는 점을 이용해, opt-in 클래스를 추가해 필요한 요소에만 덮어쓰도록 했습니다.

스크롤바 사이즈 유틸리티

변경 요약: .scrollbar-sm 클래스를 추가해 ::-webkit-scrollbar 두께를 4px로 오버라이드할 수 있게 했습니다.
이유: 전역 스크롤바(8px)와 별개로 특정 요소에서만 더 얇은 스크롤바가 필요했습니다.
구현 방식: .scrollbar-sm::-webkit-scrollbar { width: 4px; height: 4px; }로 선언했습니다. class selector가 기존 *::-webkit-scrollbar selector보다 specificity가 높아 !important 없이 오버라이드됩니다. Firefox의 scrollbar-width는 전역에서 이미 thin(가장 얇은 옵션)으로 설정돼 있어 별도 오버라이드는 필요 없었습니다. 필요한 요소에 className="scrollbar-sm"만 추가하면 적용됩니다.

scrollbar-sm 유틸리티 클래스가 적용되지 않는 문제 해결

문제 상황

scrollbar-sm 클래스로 스크롤바 두께를 4px로 줄이려고 했는데, 기본 스크롤바(8px)와 시각적으로 전혀 구분되지 않는 문제가 있었어요.

css*::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-sm::-webkit-scrollbar {
  width: 4px;
}

CSS 선언 순서도 맞고, DevTools상으로도 .scrollbar-sm::-webkit-scrollbar { width: 4px }가 activated 상태로 잡혔는데도 실제 렌더링에는 전혀 반영되지 않았습니다.

원인 파악

DevTools Computed 탭에서 값을 극단적으로(2px, 20px 등) 바꿔가며 테스트한 결과, ::-webkit-scrollbar 자체가 완전히 무시되고 있다는 것을 확인했습니다.
원인은 같은 요소에 공존하던 표준 스펙 속성이었습니다.

css* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-timo-gray-600) transparent;
}

Chrome 최신 버전은 scrollbar-width/scrollbar-color 같은 표준 스크롤바 속성이 하나라도 지정되어 있으면, 해당 요소를 "표준 스크롤바 렌더링 모드"로 전환하고, 이 모드에서는 ::-webkit-scrollbar/::-webkit-scrollbar-thumb 등 webkit 전용 pseudo-element 커스터마이징을 전부 무시합니다. scrollbar-width만 지웠을 때도 안 됐던 건 scrollbar-color가 여전히 남아있어 계속 표준 모드로 렌더링됐기 때문이었어요.

해결책

두 스펙(webkit 전용 vs 표준)은 같은 요소에서 세밀하게 병행 사용이 불가능하다는 걸 확인했고, 두 가지 옵션을 검토했습니다.

옵션 A: webkit 전용으로 완전 통일 → 두께/색상 모두 세밀 조정 가능, 단 Firefox 미지원
옵션 B: 표준 속성만 사용 → 브라우저 전체 지원, 단 두께는 auto/thin/none 3단계로 제한되어 scrollbar-sm 같은 세밀한 px 조정 불가능

최종 결정

옵션 A를 선택했습니다. scrollbar-width/scrollbar-color를 제거하고 ::-webkit-scrollbar 계열로 통일하여, gray-600 등 디자인 시스템 컬러와 세밀한 두께 조정(scrollbar-sm)을 모두 유지했습니다. 대신 Firefox에서는 스크롤바 커스터마이징이 적용되지 않고 브라우저 기본 스타일로 노출되는데, 이 부분은 디자이너와 협의하여 Firefox 지원 범위에서 제외하기로 합의했습니다.

css* {
  scrollbar-color: var(--color-timo-gray-600) transparent; /* Firefox 폴백용으로 유지 여부 재검토 필요 */
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-timo-gray-600);
  border-radius: 9999px;
}

.scrollbar-sm::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

To Reviewers

단순 CSS 유틸리티 추가이며, 별도 판단이 필요한 구조 선택은 없습니다.

Screenshot 📷

Test Checklist ✔

pnpm lint 통과
pnpm check-types 통과
로컬 dev 서버에 임시 테스트 페이지를 만들어 scrollbar-sm 적용 시 스크롤바 두께가 얇아지는 것을 확인 (테스트 페이지는 커밋에서 제외하고 삭제)
pnpm build — 미실행: CI에서 확인 예정

- 한두 곳에서만 덮어쓸 수 있는 scrollbar-sm 유틸리티 클래스를 추가했습니다

vercel · 2026-07-10T09:54:07Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
timo	Ready	Preview, Comment	Jul 10, 2026 9:54am

coderabbitai · 2026-07-10T09:54:33Z

Walkthrough

기본 스크롤바 크기를 8px로 조정하고, 전역 scrollbar-width·scrollbar-color 설정과 hover 스타일을 제거했다. scrollbar-sm 변형에는 4px 크기를 추가했다.

Changes

스크롤바 스타일

Layer / File(s)	Summary
기본 및 소형 스크롤바 크기 정의 `packages/tailwind-config/scrollbar.css`	기본 WebKit 스크롤바 크기를 8px로 변경하고 전역 스크롤바 속성을 제거했다. 기존 트랙·thumb 스타일은 유지하며 hover 규칙을 삭제했고, `scrollbar-sm` 변형에 4px 크기를 추가했다.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	`.scrollbar-sm`는 추가됐지만 요청된 `Scrollbar.stories.tsx` 변형 스토리가 보이지 않아 이슈 요구를 완전히 충족하지 못합니다.	variant 스토리를 추가하고, 전역 스타일 변경이 의도된 범위인지 함께 확인해 주세요.
Out of Scope Changes check	⚠️ Warning	기능 추가 외에 전역 스크롤바 두께, hover, Firefox 설정까지 바뀌어 범위를 넓힌 변경이 함께 보입니다.	전역 스타일 변경은 필요한 최소 범위로 줄이고, 별도 정리할 내용은 분리해 주세요.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	제목이 `.scrollbar-sm` 유틸리티 클래스 추가라는 핵심 변경을 잘 요약합니다.
Description check	✅ Passed	설명이 전역 스크롤바를 덮어쓰는 `.scrollbar-sm` 추가와 구현 배경을 정확히 담고 있습니다.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/ui/132-scrollbar-size-variant

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

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

github-actions · 2026-07-10T09:54:46Z

Storybook Preview

항목	링크
Storybook	열기
Chromatic 빌드	확인

마지막 업데이트: 2026-07-10 09:54 UTC

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/tailwind-config/scrollbar.css (1)
10-13: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

::-webkit-scrollbar-thumb:hover 규칙 삭제로 인터랙션 피드백이 사라졌습니다.

thumb:hover 스타일이 제거되어 WebKit 기반 브라우저에서 스크롤바 thumb에 마우스를 올렸을 때 시각적 변화가 없습니다. 사용자가 스크롤바가 상호작용 가능한 요소인지 인지하기 어려워질 수 있습니다.

의도적 삭제라면 무시하셔도 되지만, 실수로 삭제된 경우라면 hover 상태를 복원하는 것을 권장합니다.

참고: MDN - ::-webkit-scrollbar
🤖 Prompt for 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.

In `@packages/tailwind-config/scrollbar.css` around lines 10 - 13, Restore the
missing *::-webkit-scrollbar-thumb:hover rule alongside the existing scrollbar
thumb styles, using an appropriate hover color to provide visual interaction
feedback while preserving the current base background-color and border-radius
behavior.

🤖 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 `@packages/tailwind-config/scrollbar.css`:
- Around line 1-4: Restore the global Firefox scrollbar declarations alongside
the existing *::-webkit-scrollbar rule in scrollbar.css, using scrollbar-width
and scrollbar-color with values matching the intended scrollbar appearance; if
needed, keep Firefox-specific styling in a separate selector while preserving
cross-browser compatibility.

---

Outside diff comments:
In `@packages/tailwind-config/scrollbar.css`:
- Around line 10-13: Restore the missing *::-webkit-scrollbar-thumb:hover rule
alongside the existing scrollbar thumb styles, using an appropriate hover color
to provide visual interaction feedback while preserving the current base
background-color and border-radius behavior.

🪄 Autofix (Beta)

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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: ccd80fae-96ad-498a-be51-e8a7d10aae40

📥 Commits

Reviewing files that changed from the base of the PR and between f3e2dd6 and d6cc73a.

📒 Files selected for processing (1)

packages/tailwind-config/scrollbar.css

coderabbitai · 2026-07-10T09:56:40Z

 *::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
 }


🩺 Stability & Availability | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash # Description: Check if scrollbar-width/scrollbar-color are re-defined in consumer globals.css rg -n 'scrollbar-(width|color)' --type css

Repository: Team-Timo/Timo-client

Length of output: 159

Firefox용 전역 스크롤바 선언을 다시 넣어주세요.
packages/tailwind-config/scrollbar.css:1-4에서 scrollbar-width/scrollbar-color를 제거하면 Firefox는 ::-webkit-scrollbar를 지원하지 않아 기본 스크롤바로 돌아갑니다. 전역 스타일의 호환성을 유지하려면 이 선언을 복원하거나, Firefox용 스타일을 별도로 유지해야 합니다.
참고: MDN scrollbar-width, MDN scrollbar-color

🤖 Prompt for 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. In `@packages/tailwind-config/scrollbar.css` around lines 1 - 4, Restore the global Firefox scrollbar declarations alongside the existing *::-webkit-scrollbar rule in scrollbar.css, using scrollbar-width and scrollbar-color with values matching the intended scrollbar appearance; if needed, keep Firefox-specific styling in a separate selector while preserving cross-browser compatibility.

github-actions · 2026-07-10T09:57:05Z

Timo Performance Report

Bundle Size — timo-web

라우트	크기	First Load JS
`/[locale]`	0 B	🟡 205.79 kB
`/[locale]/focus`	0 B	🟡 205.79 kB
`/[locale]/home`	0 B	🟡 205.79 kB
`/[locale]/onboarding`	0 B	🟡 205.79 kB
`/[locale]/settings`	0 B	🟡 205.79 kB
`/[locale]/settings/account`	0 B	🟡 205.79 kB
`/[locale]/settings/policy`	0 B	🟡 205.79 kB
`/[locale]/statistics`	0 B	🟡 205.79 kB
`/[locale]/today`	0 B	🟡 205.79 kB

공유 번들: 205.79 kB
🟢 < 200kB | 🟡 < 350kB | 🔴 ≥ 350kB (First Load JS · gzip)

Lighthouse — timo-web

⚠️ Lighthouse 결과를 가져오지 못했습니다.

Image Optimization — timo-web

public/ 디렉토리에 이미지가 없습니다.

측정 커밋: 0dcab28

ehye1

아하!! webkit-scrollbar 커스터마이징이 안 먹었던 게 specifiity나 @layer 문제인 줄 알았는데 전역에 적용된 scrollbar-width/scrollbar-color가 webkit을 완전히 무시해서 그랬던 거군요... 표준이랑 webkit 중에 선택해야 했구나!!! 스크롤바가 두 가지가 있어서 고생정말 많으셨어요.. 해결 굿굿 !!😙😍

kimminna

확인했습니다!

yumin-kim2

PR에 원인 분석부터 결정 근거까지 적혀있어서 좋네용👍👍 고생하셨습니다!

feat(ui): 스크롤바 사이즈 변형 클래스 추가 (#132)

d6cc73a

- 한두 곳에서만 덮어쓸 수 있는 scrollbar-sm 유틸리티 클래스를 추가했습니다

jjangminii requested review from ehye1, kimminna and yumin-kim2 as code owners July 10, 2026 09:54

github-actions Bot assigned jjangminii Jul 10, 2026

github-actions Bot added ✨ Feature 새로운 기능(기능성) 구현 ♠️ 정민 정민양 labels Jul 10, 2026

vercel Bot deployed to Preview July 10, 2026 09:54 View deployment

coderabbitai Bot reviewed Jul 10, 2026

View reviewed changes

ehye1 approved these changes Jul 10, 2026

View reviewed changes

kimminna approved these changes Jul 10, 2026

View reviewed changes

yumin-kim2 approved these changes Jul 10, 2026

View reviewed changes

jjangminii merged commit c6e0879 into develop Jul 10, 2026
26 checks passed

jjangminii deleted the feat/ui/132-scrollbar-size-variant branch July 10, 2026 12:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[FEAT] 스크롤바 사이즈 유틸리티 클래스 추가#135

[FEAT] 스크롤바 사이즈 유틸리티 클래스 추가#135
jjangminii merged 1 commit into
developfrom
feat/ui/132-scrollbar-size-variant

jjangminii commented Jul 10, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 10, 2026 •

edited

Loading

❌ Failed checks (2 warnings)

Uh oh!

github-actions Bot commented Jul 10, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 10, 2026

Uh oh!

github-actions Bot commented Jul 10, 2026

Uh oh!

ehye1 left a comment

Uh oh!

kimminna left a comment

Uh oh!

yumin-kim2 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

jjangminii commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ISSUE 🔗

What is this PR? 🔍

배경

스크롤바 사이즈 유틸리티

scrollbar-sm 유틸리티 클래스가 적용되지 않는 문제 해결

문제 상황

원인 파악

해결책

최종 결정

To Reviewers

Screenshot 📷

Test Checklist ✔

Uh oh!

vercel Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (2 warnings)

Uh oh!

github-actions Bot commented Jul 10, 2026

Storybook Preview

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 10, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 10, 2026

Timo Performance Report

Uh oh!

ehye1 left a comment

Choose a reason for hiding this comment

Uh oh!

kimminna left a comment

Choose a reason for hiding this comment

Uh oh!

yumin-kim2 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jjangminii commented Jul 10, 2026 •

edited

Loading

vercel Bot commented Jul 10, 2026 •

edited

Loading

coderabbitai Bot commented Jul 10, 2026 •

edited

Loading