feat: TextButton 컴포넌트 추가 (#16)

* feat: TextButton 컴포넌트 추가 * feat: hover, acitve diabled일때 적용 안되도록 설정 * refac: theme, props를 비구조화해서 쓰도록 수정 * fix: svg 경고 수정
Nexters · Jan 27, 2024 · ba22754 · ba22754
1 parent 1e9fd8d
commit ba22754
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 40 deletions.
diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx
@@ -1,4 +1,4 @@
-import { Button, ThemeProvider } from '@boolti/ui';
+import { Button, TextButton, ThemeProvider } from '@boolti/ui';
 
 const Icon = () => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -184,6 +184,12 @@ const App = () => {
             BUTTON
           </Button>
         </div>
+        <TextButton>TEXT BUTTON</TextButton>
+        <TextButton icon={<Icon />}>TEXT BUTTON</TextButton>
+        <TextButton disabled>TEXT BUTTON</TextButton>
+        <TextButton icon={<Icon />} disabled>
+          TEXT BUTTON
+        </TextButton>
       </h1>
     </ThemeProvider>
   );

diff --git a/packages/ui/src/components/Button/Button.style.ts b/packages/ui/src/components/Button/Button.style.ts
@@ -21,93 +21,93 @@ const Container = styled.button<ButtonProps>`
     background-color 0.2s ease-in-out,
     border-color 0.2s ease-in-out,
     color 0.2s ease-in-out;
-  ${(props) => {
-    switch (props.size) {
+  ${({ size, theme }) => {
+    switch (size) {
       case 'bold':
         return `
           height: 48px;
           padding: 13px 20px;
-          ${props.theme.typo.sh1.styles};
+          ${theme.typo.sh1.styles};
         `;
       case 'medium':
         return `
           height: 44px;
           padding: 11px 18px;
-          ${props.theme.typo.sh1.styles};
+          ${theme.typo.sh1.styles};
         `;
       case 'regular':
         return `
           height: 40px;
           padding: 9px 16px;
-          ${props.theme.typo.sh1.styles};
+          ${theme.typo.sh1.styles};
         `;
       case 'small':
         return `
           height: 36px;
           padding: 7px 14px;
-          ${props.theme.typo.sh1.styles};
+          ${theme.typo.sh1.styles};
         `;
       case 'x-small':
         return `
           height: 32px;
           padding: 5px 12px;
-          ${props.theme.typo.b1.styles};
+          ${theme.typo.b1.styles};
         `;
     }
   }}
-  ${(props) => {
-    switch (props.colorTheme) {
+  ${({ colorTheme, theme }) => {
+    switch (colorTheme) {
       case 'primary':
         return `
-          color: ${props.theme.palette.grey.g00};
-          border-color: ${props.theme.palette.primary.o1};
-          background-color: ${props.theme.palette.primary.o1};
-          &:hover, &:active {
-            border-color: ${props.theme.palette.primary.o2};
-            background-color: ${props.theme.palette.primary.o2};
+          color: ${theme.palette.grey.g00};
+          border-color: ${theme.palette.primary.o1};
+          background-color: ${theme.palette.primary.o1};
+          &:hover:not(:disabled), &:active:not(:disabled) {
+            border-color: ${theme.palette.primary.o2};
+            background-color: ${theme.palette.primary.o2};
           }
           &:disabled {
-            color: ${props.theme.palette.grey.g60};
-            border-color: ${props.theme.palette.grey.g20};
-            background-color: ${props.theme.palette.grey.g20};
+            color: ${theme.palette.grey.g60};
+            border-color: ${theme.palette.grey.g20};
+            background-color: ${theme.palette.grey.g20};
           }
         `;
       case 'netural':
         return `
-          color: ${props.theme.palette.grey.g00};
-          border-color: ${props.theme.palette.grey.g90};
-          background-color: ${props.theme.palette.grey.g90};
-          &:hover {
+          color: ${theme.palette.grey.g00};
+          border-color: ${theme.palette.grey.g90};
+          background-color: ${theme.palette.grey.g90};
+          &:hover:not(:disabled) {
             border-color: #707070;
             background-color: #707070;
           }
-          &:active {
-            border-color: ${props.theme.palette.grey.g60};
-            background-color: ${props.theme.palette.grey.g60};
+          &:active:not(:disabled) {
+            border-color: ${theme.palette.grey.g60};
+            background-color: ${theme.palette.grey.g60};
           }
           &:disabled {
-            color: ${props.theme.palette.grey.g60};
-            border-color: ${props.theme.palette.grey.g20};
-            background-color: ${props.theme.palette.grey.g20};
+            color: ${theme.palette.grey.g60};
+            border-color: ${theme.palette.grey.g20};
+            background-color: ${theme.palette.grey.g20};
           }
         `;
       case 'line':
         return `
-          color: ${props.theme.palette.grey.g90};
-          border-color: ${props.theme.palette.grey.g90};
-          background-color: ${props.theme.palette.grey.g00};
-          &:hover {
+          color: ${theme.palette.grey.g90};
+          border-color: ${theme.palette.grey.g90};
+          background-color: ${theme.palette.grey.g00};
+          &:hover:not(:disabled) {
             border-color: #707070;
             color: #707070;
           }
-          &:active {
-            color: ${props.theme.palette.grey.g60};
-            border-color: ${props.theme.palette.grey.g60};
+          &:active:not(:disabled) {
+            color: ${theme.palette.grey.g60};
+            border-color: ${theme.palette.grey.g60};
           }
           &:disabled {
-            color: ${props.theme.palette.grey.g40};
-            border-color: ${props.theme.palette.grey.g20};
-            background-color: ${props.theme.palette.grey.g10};
+            color: ${theme.palette.grey.g40};
+            border-color: ${theme.palette.grey.g20};
+            background-color: ${theme.palette.grey.g10};
           }
         `;
     }

diff --git a/packages/ui/src/components/TextButton/TextButton.style.ts b/packages/ui/src/components/TextButton/TextButton.style.ts
@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+
+const Container = styled.button`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  height: 44px;
+  padding: 11px 18px;
+  border: none;
+  background-color: transparent;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+  color: ${({ theme }) => theme.palette.grey.g90};
+  ${({ theme }) => theme.typo.sh1};
+  &:disabled {
+    cursor: unset;
+  }
+  &:hover:not(:disabled) {
+    background-color: ${({ theme }) => theme.palette.grey.g20};
+  }
+  &:disabled {
+    color: ${({ theme }) => theme.palette.grey.g60};
+  }
+`;
+
+const Icon = styled.div`
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+`;
+
+export default {
+  Container,
+  Icon,
+};
diff --git a/packages/ui/src/components/TextButton/index.tsx b/packages/ui/src/components/TextButton/index.tsx
@@ -0,0 +1,17 @@
+import Styled from './TextButton.style';
+
+interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+const Button = ({ children, icon, ...rest }: Props) => {
+  return (
+    <Styled.Container {...rest}>
+      {icon && <Styled.Icon>{icon}</Styled.Icon>}
+      {children}
+    </Styled.Container>
+  );
+};
+
+export default Button;
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -1,4 +1,5 @@
 import ThemeProvider from './ThemeProvider';
 import Button from './Button';
+import TextButton from './TextButton';
 
-export { ThemeProvider, Button };
+export { ThemeProvider, Button, TextButton };