[style]root 텍스트컬러 및 bg 변경, Button컴포넌트 props명 변경

Author: mtm-git1018

src/app/design-system/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import Button from '@/shared/components/Button';
+import Button from '@/shared/components/button/Button';
+import TextButton from '@/shared/components/button/TextButton';
 import ConfirmPop from '@/shared/components/ModalPop/ConfirmPop';
 import ModalLayout from '@/shared/components/ModalPop/ModalLayout';
 import { useState } from 'react';
@@ -44,14 +45,14 @@ function Page() {
         <div className="space-y-2">
           <h3 className="text-xl font-medium border-b pb-1">Button</h3>
           <Button type="button">버튼</Button>
-          <Button variant="purple" type="button">
+          <Button color="purple" type="button">
             Button
           </Button>
           <Button disabled>button</Button>
           <Button type="button" size="sm">
             버튼
           </Button>
-          <Button type="button" size="sm" variant="purple">
+          <Button type="button" size="sm" color="purple">
             버튼
           </Button>
           <Button size="sm" disabled>

src/shared/components/button/Button.tsx

@@ -10,7 +10,7 @@ import { ButtonHTMLAttributes, Ref } from 'react';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: 'default' | 'sm';
-  variant?: 'default' | 'purple';
+  color?: 'default' | 'purple';
   ref?: Ref<HTMLButtonElement | null>;
   disable?: boolean;
   type?: 'submit' | 'button';
@@ -20,21 +20,21 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 export const ButtonClass = cva(
   `
-  py-1 px-2 rounded-lg text-base font-bold flex-center text-bold text-navy duration-300 disabled:bg-gray disabled:cursor-not-allowed
+  py-1 px-2 rounded-lg text-base font-bold flex-center text-bold text-navy duration-300 disabled:bg-gray disabled:cursor-not-allowed disabled:text-primary
   `,
   {
     variants: {
-      variant: {
-        default: 'bg-secondary text-navy hover:inset-shadow-black',
-        purple: 'bg-tertiary text-secondary hover:inset-shadow-white',
+      color: {
+        default: 'bg-secondary text-navy enabled:hover:inset-shadow-black',
+        purple: 'bg-tertiary text-secondary enabled:hover:inset-shadow-white',
       },
       size: {
         default: 'h-10, min-w-25',
         sm: 'h-8 min-w-20',
       },
     },
     defaultVariants: {
-      variant: 'default',
+      color: 'default',
       size: 'default',
     },
   }
@@ -43,7 +43,7 @@ export const ButtonClass = cva(
 function Button({
   size,
   type = 'button',
-  variant,
+  color,
   children,
   className,
   ref,
@@ -52,7 +52,7 @@ function Button({
 }: Props) {
   return (
     <button
-      className={tw(ButtonClass({ variant, size, className }))}
+      className={tw(ButtonClass({ color, size, className }))}
       type={type}
       ref={ref}
       disabled={disabled}

src/shared/styles/_theme.css

@@ -17,6 +17,6 @@
   --font-serif: 'Hahmlet', serif;
 
 --inset-shadow-black: inset 0 2px 6px rgba(0, 0, 0, 0.3);
---inset-shadow-white: inset 0 0 8px rgba(255, 255, 255, 0.8);
+--inset-shadow-white: inset 0 0 8px rgba(255, 255, 255, 0.4);
 
 }

src/shared/styles/global.css

@@ -12,5 +12,7 @@
   'NanumSquareNeo',sans-serif;
   line-height: 1.5;
   font-weight: 500;
+  color:#fff;
+  background-color: var(--color-primary)
 }