✨ styles: button ghost

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -48,6 +48,18 @@
       }
     }
   }
+
+  &.ghost {
+    @apply bg-white;
+    color: var(--primary);
+    border: 1px solid var(--primary);
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+
   &.large {
     padding: 3.2rem 4.8rem;
     &.loading {

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -5,8 +5,8 @@ import s from './ButtonCommon.module.scss'
 
 interface Props {
     children?: React.ReactNode,
-    type?: ButonType,
-    size?: ButtonSize,
+    type?: 'primary' | 'light' | 'ghost',
+    size?: 'default' | 'large',
     icon?: any,
     isIconSuffix?: boolean,
     loading?: boolean,
@@ -14,7 +14,7 @@ interface Props {
     onClick?: () => void,
 }
 
-const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default,
+const ButtonCommon = memo(({ type = 'primary', size = 'default',
     icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
     return (
         <button className={classNames({

src/components/common/InputCommon/InputCommon.module.scss

@@ -1,5 +1,5 @@
 @import "../../../styles/utilities";
 
 .inputCommon {
-  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+  @apply custom-border-radius bg-primary transition-all duration-200;
 }

src/components/common/InputCommon/InputCommon.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { InputType, KEY } from 'src/utils/constanst.utils';
+import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
 
 type Ref = {
@@ -10,7 +10,7 @@ interface Props {
     children?: React.ReactNode,
     value?: string | number,
     placeholder?: string,
-    type?: InputType,
+    type?: 'text' | 'number',
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }

src/utils/constanst.utils.ts

@@ -1,20 +1,3 @@
-
-
-export enum ButonType {
-    primary = 'primary',
-    light = 'light',
-}
-
-export enum ButtonSize {
-    default = 'default',
-    large = 'large',
-}
-
-export enum InputType {
-    text = 'text',
-    number = 'number',
-}
-
 export const KEY = {
     ENTER: 'Enter',
 }