feat(ui-kit): 토스트 포지션 및 스타일 수정 (#40)

Lubycon · Feb 6, 2021 · 420bb1d · 420bb1d
1 parent be2bbb5
commit 420bb1d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 15 deletions.
diff --git a/ui-kit/src/components/Button/index.tsx b/ui-kit/src/components/Button/index.tsx
@@ -9,7 +9,7 @@ interface ButtonBaseProps {
 type ButtonProps = CombineElementProps<'button', ButtonBaseProps>;
 
 const Button = (
-  { size = 'small', disabled, style, ...props }: ButtonProps,
+  { size = 'small', disabled, style, onClick, ...props }: ButtonProps,
   ref: Ref<HTMLButtonElement>
 ) => {
   return (
@@ -18,6 +18,7 @@ const Button = (
       disabled={disabled}
       style={style}
       ref={ref}
+      onClick={onClick}
     >
       <Text typography={size === 'large' ? 'p1' : 'p2'} fontWeight="bold" {...props}></Text>
     </button>

diff --git a/ui-kit/src/components/Text/index.tsx b/ui-kit/src/components/Text/index.tsx
@@ -1,7 +1,7 @@
 import React, { ElementType, Ref, forwardRef } from 'react';
 import { DEFAULT_ELEMENT, FontWeights, Typographys } from './types';
 import { OverridableProps } from 'types/OverridableProps';
-import clxs from 'classnames';
+import classnames from 'classnames';
 
 interface TextBaseProps {
   typography?: Typographys;
@@ -10,18 +10,18 @@ interface TextBaseProps {
 type TextProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<T, TextBaseProps>;
 
 const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
-  { typography = 'p1', fontWeight = 'regular', as, ...props }: TextProps<T>,
+  { typography = 'p1', fontWeight = 'regular', as, className, ...props }: TextProps<T>,
   ref: Ref<any>
 ) => {
   const target = as ?? DEFAULT_ELEMENT;
   const Component = target;
   return (
     <Component
       ref={ref}
-      className={clxs('lubycon-text', {
+      className={`${classnames('lubycon-text', {
         [`lubycon-typography--${typography}`]: typography != null,
         [`lubycon-text--font-weight--${fontWeight}`]: fontWeight != null,
-      })}
+      })} ${className}`}
       {...props}
     />
   );

diff --git a/ui-kit/src/components/Toast/index.tsx b/ui-kit/src/components/Toast/index.tsx
@@ -15,7 +15,7 @@ const getTranslateAnimation = (align: ToastAlign) => {
       };
     case 'center':
       return {
-        from: 'translateY(100%)',
+        from: 'translateY(-100%)',
         to: 'translateY(0)',
       };
     case 'right':

diff --git a/ui-kit/src/sass/components/_Toast.scss b/ui-kit/src/sass/components/_Toast.scss
@@ -1,3 +1,6 @@
+$toast-margin: 12px;
+$toast-container-padding: 48px;
+
 .lubycon-toast {
   overflow: visible;
 
@@ -6,8 +9,10 @@
     padding: 8px 16px;
     min-width: 336px;
     border-radius: 4px;
-    background-color: white;
-    margin: 12px 0;
+    background-color: get-color('gray80');
+    margin: $toast-margin 0;
+    color: #ffffff;
+    -webkit-font-smoothing: antialiased;
     &--align-left {
       text-align: left;
     }
@@ -34,15 +39,16 @@
 %context-container {
   position: fixed;
   display: flex;
-  flex-direction: column-reverse;
-  top: auto;
-  bottom: 40px;
+  flex-direction: column;
+  top: $toast-container-padding;
+  bottom: auto;
+  margin: -$toast-margin 0;
 }
 
 .lubycon-toast__context-container {
   &--align-left {
     @extend %context-container;
-    left: 40px;
+    left: $toast-container-padding;
     right: auto;
   }
   &--align-center {
@@ -54,6 +60,6 @@
   &--align-right {
     @extend %context-container;
     left: auto;
-    right: 40px;
+    right: $toast-container-padding;
   }
 }
diff --git a/ui-kit/src/stories/Toast.stories.tsx b/ui-kit/src/stories/Toast.stories.tsx
@@ -40,8 +40,9 @@ export const AutoHide = () => {
 export const ToastHooks = () => {
   const { openToast } = useToast();
   return (
-    <div>
+    <div style={{ position: 'absolute', top: '50%', left: '50%' }}>
       <Button
+        size="large"
         onClick={() =>
           openToast({
             message: `데이터 전송이 완료되었습니다 - ${generateID('toast-test')}`,
@@ -57,13 +58,14 @@ export const ToastHooks = () => {
 export const Align = () => {
   const { openToast } = useToast();
   return (
-    <div>
+    <div style={{ position: 'absolute', top: '50%', left: '50%' }}>
       <Button
         onClick={() =>
           openToast({
             message: `데이터 전송이 완료되었습니다`,
           })
         }
+        size="large"
       >
         Left
       </Button>
@@ -74,6 +76,7 @@ export const Align = () => {
             align: 'center',
           })
         }
+        size="large"
       >
         Center
       </Button>
@@ -84,6 +87,7 @@ export const Align = () => {
             align: 'right',
           })
         }
+        size="large"
       >
         Right
       </Button>