[design] 공통 Button 컴포넌트 생성

src/app/page.tsx

@@ -25,16 +25,17 @@ export default function Home() {
       <ColorPalette />
 
       <TypoSystem />
-
+
+      {/* 공통 버튼 */}
       <ButtonTest />
-
+
+      {/* 페이지네이션 */}
       <Pagination
         currentPage={currentPage}
         totalPages={totlepages}
         onPageChange={setCurrentPage}
         limit={limit}
       />
-
     </div>
   )
 }

src/components/common/button/Button.tsx

@@ -52,4 +52,4 @@ const Button = ({
   )
 }
 
-export { Button }
+export default Button

src/components/common/button/TextButton.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import LeftArrowIcon from '/public/left-arrow.svg'
+import RightArrowIcon from '/public/right-arrow.svg'
+
+// 아이콘 위치 타입 정의
+type IconPosition = 'left' | 'right'
+
+type TextButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof textButtonVariants> & {
+    iconPosition?: IconPosition
+    asChild?: boolean
+  }
+
+const textButtonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap disabled:pointer-events-none outline-none cursor-pointer',
+  {
+    variants: {
+      size: {
+        xs: 'typo-caption2 gap-0.5',
+        sm: 'typo-caption1 gap-1',
+        md: 'typo-body3 gap-1',
+        lg: 'typo-body2 gap-2',
+        xl: 'typo-h3 gap-2',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+)
+
+// 버튼 size prop에 따른 아이콘 크기 Mapping
+const IconSizeMap = {
+  xs: 'w-2.5 h-2.5',
+  sm: 'w-3 h-3',
+  md: 'w-4.5 h-4.5',
+  lg: 'w-4.5 h-4.5',
+  xl: 'w-6 h-6',
+}
+
+const TextButton = ({
+  className,
+  size = 'md',
+  iconPosition,
+  asChild = false,
+  children,
+  ...props
+}: TextButtonProps) => {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp data-slot="button" className={cn(textButtonVariants({ size, className }))} {...props}>
+      {iconPosition === 'left' && <LeftArrowIcon className={`${IconSizeMap[size!]} text-normal`} />}
+      {children}
+      {iconPosition === 'right' && (
+        <RightArrowIcon className={`${IconSizeMap[size!]} text-normal`} />
+      )}
+    </Comp>
+  )
+}
+
+export default TextButton

src/components/design-system/ButtonTest.tsx

@@ -1,17 +1,21 @@
 import React from 'react'
-import { Button } from '../common/Button/Button'
+import Button from '../common/Button/Button'
+import TextButton from '../common/Button/TextButton'
 
 const ButtonTest = () => {
-  const variants = ['primary', 'secondary', 'tertiary', 'outline']
-  const sizes = ['lg', 'md', 'sm']
+  const defaultButtonVars = ['primary', 'secondary', 'tertiary', 'outline']
+  const defaultButtonSizes = ['lg', 'md', 'sm']
+
+  const textButtonSizes = ['xl', 'lg', 'md', 'sm', 'xs']
+
   return (
     <section className="space-y-8">
       <h2 className="typo-h2 mb-4">기본 버튼</h2>
-      {variants.map((variant) => (
+      {defaultButtonVars.map((variant) => (
         <div key={variant} className="space-y-2">
           <p className="typo-h3">{variant}</p>
           <div className="grid grid-cols-6 gap-2 items-start">
-            {sizes.map((s) => (
+            {defaultButtonSizes.map((s) => (
               <>
                 <Button variant={variant} size={s}>
                   버튼입니다
@@ -24,6 +28,22 @@ const ButtonTest = () => {
           </div>
         </div>
       ))}
+
+      <h2 className="typo-h2 mb-4">텍스트 버튼</h2>
+      {textButtonSizes.map((size) => (
+        <div key={size} className="space-y-2">
+          <p className="typo-h3">{size}</p>
+          <div className="flex gap-10 justify-start">
+            <TextButton size={size}>텍스트버튼(아이콘x)</TextButton>
+            <TextButton size={size} iconPosition="left">
+              텍스트버튼(좌측아이콘)
+            </TextButton>
+            <TextButton size={size} iconPosition="right">
+              텍스트버튼(우측아이콘)
+            </TextButton>
+          </div>
+        </div>
+      ))}
     </section>
   )
 }

src/components/ui/pagination-container.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import RightArrowIcon from '../../../public/rightarrow.svg'
-import LeftArrowIcon from '../../../public/leftarrow.svg'
+import LeftArrowIcon from '/public/left-arrow.svg'
+import RightArrowIcon from '/public/right-arrow.svg'
 
 import { cn } from '@/lib/utils'
 import { Button, buttonVariants } from '@/components/ui/button'

src/styles/globals.css

@@ -157,7 +157,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply rounded-full bg-border-alter;
+    @apply rounded-full bg-alter-line;
   }
 }