feat: 스크롤 버튼 커스텀

Author: jjangminii

packages/design-system/src/components/textarea/testarea.stories.tsx

@@ -13,12 +13,12 @@ const meta: Meta<typeof Textarea> = {
       description: {
         component:
           '고정 크기 **h-[12rem] / w-[24.8rem]** · 기본 **500자** 제한 · 내용 초과 시 내부 스크롤이 나타나는 텍스트영역입니다. ' +
-          '`maxLength`로 글자수 제한을 변경할 수 있고, `aria-invalid`를 통해 에러 상태 스타일을 적용할 수 있습니다.',
+          '`maxLength`로 글자수 제한을 변경할 수 있습니다.',
       },
     },
   },
   argTypes: {
-    className: { table: { disable: true } }, // 구현 상세 prop 숨김
+    className: { table: { disable: true } },
     maxLength: { control: { type: 'number', min: 1 } },
     placeholder: { control: 'text' },
     defaultValue: { control: 'text' },
@@ -43,35 +43,20 @@ export const Basic: Story = {
 };
 
 export const WithMaxLength100: Story = {
-  name: 'MaxLength=100',
-  args: { maxLength: 100, placeholder: '최대 100자' },
-  render: (args) => <Textarea {...args} />,
-};
-
-export const InvalidState: Story = {
-  name: 'Invalid (aria-invalid)',
-  args: {
-    'aria-invalid': true,
-    defaultValue: '형식이 올바르지 않습니다.',
-  },
-  render: (args) => <Textarea {...args} />,
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, placeholder: '비활성화 상태' },
+  name: 'MaxLength=500',
+  args: { maxLength: 500, placeholder: '최대 500자' },
   render: (args) => <Textarea {...args} />,
 };
 
 export const ScrollableOverflow: Story = {
   name: '넘치면 스크롤',
   args: {
-    defaultValue: 'o '.repeat(400), // 내용 과다로 스크롤 유도
+    defaultValue: 'o '.repeat(400),
   },
   render: (args) => <Textarea {...args} />,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const ta = (await canvas.findByRole('textbox')) as HTMLTextAreaElement;
-    // scrollHeight가 clientHeight보다 크면 내부 스크롤 조건 충족
     await expect(ta.scrollHeight).toBeGreaterThan(ta.clientHeight);
   },
 };

packages/design-system/src/components/textarea/textarea.tsx

@@ -18,8 +18,9 @@ function Textarea({
       className={cn(
         'h-[12rem] w-[24.8rem]',
         'resize-none overflow-y-auto',
-        'body3-r border-gray200 bg-white-bg text-font-gray-3 rounded-[0.4rem] border px-[0.8rem] py-[1.2rem]',
+        'body3-r border-gray200 bg-white-bg text-font-gray-3 rounded-[0.4rem] border px-[0.8rem] py-[1.2rem] pr-[1.4rem]',
         'focus:border-input outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',
+        'ds-scrollbar',
         className
       )}
       style={{ scrollbarGutter: 'stable' }}

packages/tailwind-config/scrollbar-styles.css

@@ -1,37 +1,17 @@
-/* 스크롤바: 이 Textarea에만 적용 (data-slot + 클래스 스코프) */
-:where([data-slot='textarea']).ds-scrollbar {
-  /* Firefox */
-  scrollbar-width: thin;
-  scrollbar-color: color-mix(in oklab, currentColor 35%, transparent)
-    color-mix(in oklab, currentColor 10%, transparent);
-  /* 레이아웃 점프 방지용 여유 공간 확보(지원 브라우저에서만) */
-  scrollbar-gutter: stable;
+/* 공통 스크롤바: ds-scrollbar 클래스가 붙은 요소 */
+:where(.ds-scrollbar) {
+  /* Firefox: thumb 색, track 투명 */
+  scrollbar-color: var(--gray100, #e5e7eb) transparent;
 }
 
-/* WebKit (Chrome, Edge, Safari) */
-:where([data-slot='textarea']).ds-scrollbar::-webkit-scrollbar {
-  width: 8px;
+/* WebKit (Chrome/Edge/Safari 일부) */
+:where(.ds-scrollbar)::-webkit-scrollbar {
+  width: 0.4rem; /* 세로 스크롤 폭 */
+  height: 0.4rem; /* 가로 스크롤 높이 */
 }
-:where([data-slot='textarea']).ds-scrollbar::-webkit-scrollbar-track {
-  background: transparent; /* 또는 color-mix(in oklab, currentColor 10%, transparent) */
+:where(.ds-scrollbar)::-webkit-scrollbar-track {
+  background: transparent; /* 배경 제거 */
 }
-:where([data-slot='textarea']).ds-scrollbar::-webkit-scrollbar-thumb {
-  background: color-mix(in oklab, currentColor 35%, transparent);
-  border-radius: 9999px;
-  border: 2px solid transparent; /* 안쪽만 색이 보이게 */
-  background-clip: padding-box;
-}
-:where([data-slot='textarea']).ds-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in oklab, currentColor 55%, transparent);
-}
-:where([data-slot='textarea']).ds-scrollbar::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-/* 다크 모드 톤 보정 (선택) */
-@media (prefers-color-scheme: dark) {
-  :where([data-slot='textarea']).ds-scrollbar {
-    scrollbar-color: color-mix(in oklab, currentColor 50%, transparent)
-      color-mix(in oklab, currentColor 20%, transparent);
-  }
+:where(.ds-scrollbar)::-webkit-scrollbar-thumb {
+  background: var(--gray100, #e5e7eb); /* 토큰 없으면 fallback */
 }