refactor(ui-kit): 코드 정리

ui-kit/.storybook/preview.js

@@ -1,6 +1,6 @@
 import '../src/sass/index.scss';
 import React from 'react';
-import { LubyconUIKitProvider, Container } from '../src/components';
+import { LubyconUIKitProvider, Container } from 'src';
 
 export const decorators = [(Story => (
   <LubyconUIKitProvider>

ui-kit/rollup.config.js

@@ -8,8 +8,8 @@ import typescript from 'rollup-plugin-typescript2';
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
 export default [
-  buildCJS('src/components/index.ts'),
-  buildESM('src/components/index.ts'),
+  buildCJS('src/index.ts'),
+  buildESM('src/index.ts'),
   buildCSS('src/sass/index.scss', 'css/lubycon-ui-kit.css'),
   buildCSS('src/sass/index.scss', 'css/lubycon-ui-kit.min.css', {
     minimize: {

ui-kit/src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import React, { Ref, forwardRef } from 'react';
 import classnames from 'classnames';
 import { CombineElementProps } from 'src/types/utils';
-import { Text } from '..';
+import Text from '../Text';
 
 interface ButtonBaseProps {
   size?: 'small' | 'medium' | 'large';
@@ -14,7 +14,7 @@ const Button = (
 ) => {
   return (
     <button
-      className={classnames('lubycon-button', `lubycon-button__${size}`)}
+      className={classnames('lubycon-button', `lubycon-button--${size}`)}
       disabled={disabled}
       style={style}
       ref={ref}

ui-kit/src/components/Checkbox/index.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, Ref } from 'react';
 import { CombineElementProps } from 'src/types/utils';
 import classnames from 'classnames';
 import { generateID } from 'utils/index';
-import { Text } from '..';
+import Text from '../Text';
 
 interface CheckboxBaseProps {
   label?: string;
@@ -24,9 +24,9 @@ const Checkbox = (
       })}
       style={style}
     >
-      <span className="lubycon-checkbox--input">
+      <span className="lubycon-checkbox__input">
         <input id={id} name="checkbox" ref={ref} type="checkbox" {...props} disabled={disabled} />
-        <span className="lubycon-checkbox--control">
+        <span className="lubycon-checkbox__control">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="12"

ui-kit/src/components/Grid/Column.tsx

@@ -22,7 +22,7 @@ const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
     () =>
       sizes.map((size) => {
         const { [size]: sizeValue } = props;
-        return sizeValue ? `lubycon-grid-column--${size}--${sizeValue}` : '';
+        return sizeValue ? `lubycon-grid__column--${size}--${sizeValue}` : '';
       }),
     []
   );
@@ -31,7 +31,11 @@ const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
   const Component = target;
 
   return (
-    <Component ref={ref} className={classNames(`lubycon-grid-column`, ...spanClasses)} {...props} />
+    <Component
+      ref={ref}
+      className={classNames(`lubycon-grid__column`, ...spanClasses)}
+      {...props}
+    />
   );
 };
 

ui-kit/src/components/Grid/Row.tsx

@@ -27,10 +27,10 @@ const Row = <T extends ElementType = typeof DEFAULT_ELEMENT>(
     <Component
       ref={ref}
       className={classnames(
-        'lubycon-grid-row',
-        `lubycon-grid-row--direction__${direction}`,
-        `lubycon-grid-row--justify__${justify}`,
-        `lubycon-grid-row--align-items__${alignItems}`
+        'lubycon-grid__row',
+        `lubycon-grid__row--direction-${direction}`,
+        `lubycon-grid__row--justify-${justify}`,
+        `lubycon-grid__row--align-items-${alignItems}`
       )}
       {...props}
     />

ui-kit/src/components/Radio/index.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef, Ref } from 'react';
 import { CombineElementProps } from 'src/types/utils';
-import clxs from 'classnames';
+import classnames from 'classnames';
 import { generateID } from 'src/utils/generateID';
-import { Text } from '..';
+import Text from '../Text';
 
 interface RadioBaseProps {
   label?: string;
@@ -18,21 +18,21 @@ const Radio = (
 
   return (
     <span
-      className={clxs('lubycon-radio', `lubycon-radio--display-${display}`, {
+      className={classnames('lubycon-radio', `lubycon-radio--display-${display}`, {
         'lubycon-radio--disabled': disabled,
       })}
       style={style}
     >
-      <label htmlFor={id} className="lubycon-radio--label">
+      <label htmlFor={id} className="lubycon-radio__label">
         <input
-          className="lubycon-radio--input"
+          className="lubycon-radio__input"
           ref={ref}
           type="radio"
           disabled={disabled}
           {...props}
           id={id}
         />
-        <div className="lubycon-radio--indicator"></div>
+        <div className="lubycon-radio__indicator"></div>
         {label ? <Text>{label}</Text> : null}
       </label>
     </span>

ui-kit/src/components/Switch/index.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, Ref } from 'react';
 import { CombineElementProps } from 'src/types/utils';
 import classnames from 'classnames';
 import { generateID } from 'src/utils/generateID';
-import { Text } from '..';
+import Text from '../Text';
 
 interface SwitchBaseProps {
   label?: string;

ui-kit/src/components/Text/index.tsx

@@ -21,8 +21,8 @@ const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
       className={classnames(
         'lubycon-text',
         {
-          [`lubycon-typography--${typography}`]: typography != null,
-          [`lubycon-text--font-weight--${fontWeight}`]: fontWeight != null,
+          [`lubycon-typography-${typography}`]: typography != null,
+          [`lubycon-text--font-weight-${fontWeight}`]: fontWeight != null,
         },
         className
       )}

ui-kit/src/index.ts

@@ -0,0 +1,25 @@
+export { default as Alert } from './components/Alert';
+export { default as Button } from './components/Button';
+export { default as Checkbox } from './components/Checkbox';
+export { Row, Column } from './components/Grid';
+export { default as Container } from './components/Container';
+export { default as Radio } from './components/Radio';
+export { default as Selection } from './components/Selection';
+export { default as Switch } from './components/Switch';
+export { default as Text } from './components/Text';
+export { default as LubyconUIKitProvider } from './components/LubyconUIKitProvider';
+export { default as Toast } from './components/Toast';
+export { default as Tooltip } from './components/Tooltip';
+export { Tabs, TabPane } from './components/Tabs';
+export {
+  default as Card,
+  CardHeader,
+  CardContent,
+  CardImageContent,
+  CardFooter,
+} from './components/Card';
+export { default as Snackbar } from './components/Snackbar';
+export { Portal } from './contexts/Portal';
+export { useToast } from './contexts/Toast';
+export { useSnackbar } from './contexts/Snackbar';
+export { colors } from './constants/colors';

ui-kit/src/sass/components/_Button.scss

@@ -11,13 +11,13 @@
   -webkit-font-smoothing: antialiased;
   transition: background-color 0.2s ease-in-out;
 
-  &__small {
+  &--small {
     padding: 4px 16px;
   }
-  &__medium {
+  &--medium {
     padding: 8px 16px;
   }
-  &__large {
+  &--large {
     padding: 12px 32px;
     border-radius: 8px;
   }

ui-kit/src/sass/components/_Checkbox.scss

@@ -6,12 +6,12 @@ $box-size: 16px;
   cursor: pointer;
 
   &:hover:not(&--disabled) {
-    .lubycon-checkbox--control {
+    .lubycon-checkbox__control {
       border-color: get-color('green50');
     }
   }
 
-  &--input {
+  &__input {
     display: grid;
     grid-template-areas: 'checkbox';
 
@@ -29,7 +29,7 @@ $box-size: 16px;
     }
   }
 
-  &--control {
+  &__control {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -46,10 +46,10 @@ $box-size: 16px;
     }
   }
 
-  &--input input:checked + &--control svg {
+  &__input input:checked + &__control svg {
     transform: scale(1);
   }
-  &--input input:checked + &--control {
+  &__input input:checked + &__control {
     background-color: get-color('green50');
     border-color: get-color('green50');
   }
@@ -66,7 +66,7 @@ $box-size: 16px;
       cursor: not-allowed;
     }
 
-    .lubycon-checkbox--input > input:checked + .lubycon-checkbox--control {
+    .lubycon-checkbox__input > input:checked + .lubycon-checkbox__control {
       border-color: get-color('gray40');
       background-color: get-color('gray40');
     }

ui-kit/src/sass/components/_Column.scss

@@ -1,7 +1,7 @@
-.lubycon-grid-column {
+.lubycon-grid__column {
   position: relative;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: ($grid-gutter / 2);
+  padding-left: ($grid-gutter / 2);
   flex-basis: 0;
   flex-grow: 1;
   min-width: 0;
@@ -10,12 +10,12 @@
 }
 
 @each $breakpoint, $size in $breakpoints {
-  .lubycon-grid-column--#{$breakpoint}--auto {
+  .lubycon-grid__column--#{$breakpoint}--auto {
     flex: 0 0 auto;
   }
 
   @for $i from 1 through $max-columns {
-    .lubycon-grid-column--#{$breakpoint}--#{$i} {
+    .lubycon-grid__column--#{$breakpoint}--#{$i} {
       @include media-breakpoint($breakpoint) {
         flex: 0 0 percentage($i / $max-columns);
         width: percentage($i / $max-columns);

ui-kit/src/sass/components/_Radio.scss

@@ -11,7 +11,7 @@ $indicator-size: 16px;
     cursor: pointer;
   }
 
-  .lubycon-radio--indicator {
+  .lubycon-radio__indicator {
     position: relative;
     width: $indicator-size;
     height: $indicator-size;
@@ -33,16 +33,16 @@ $indicator-size: 16px;
     }
   }
 
-  .lubycon-radio--label {
+  .lubycon-radio__label {
     display: flex;
     align-items: center;
   }
 
-  .lubycon-radio--input {
+  .lubycon-radio__input {
     position: absolute;
     visibility: hidden;
     appearance: none;
-    &:checked + .lubycon-radio--indicator {
+    &:checked + .lubycon-radio__indicator {
       border-color: get-color('green50');
       background-color: get-color('green50');
       &::before {
@@ -52,7 +52,7 @@ $indicator-size: 16px;
   }
 
   &:hover:not(&--disabled) {
-    .lubycon-radio--indicator {
+    .lubycon-radio__indicator {
       border-color: get-color('green50');
     }
   }
@@ -67,7 +67,7 @@ $indicator-size: 16px;
       color: get-color('gray40');
       cursor: not-allowed;
     }
-    .lubycon-radio--input:checked + .lubycon-radio--indicator {
+    .lubycon-radio__input:checked + .lubycon-radio__indicator {
       border-color: get-color('gray40');
       background-color: get-color('gray40');
     }

ui-kit/src/sass/components/_Row.scss

@@ -1,22 +1,22 @@
 @mixin direction($direction) {
-  &--direction__#{$direction} {
+  &--direction-#{$direction} {
     flex-direction: $direction;
   }
 }
 @mixin justify($align) {
-  &--justify__#{$align} {
+  &--justify-#{$align} {
     justify-content: $align;
   }
 }
 @mixin alignItems($align) {
-  &--align-items__#{$align} {
+  &--align-items-#{$align} {
     align-items: $align;
   }
 }
 
-.lubycon-grid-row {
+.lubycon-grid__row {
   display: flex;
-  margin: #{-$gutter / 2};
+  margin: #{-$grid-gutter / 2};
   flex-wrap: wrap;
   box-sizing: border-box;
 

ui-kit/src/sass/components/_Text.scss

@@ -1,6 +1,6 @@
 .lubycon-text {
   @each $name, $value in $font-weights {
-    &.lubycon-text--font-weight--#{$name} {
+    &.lubycon-text--font-weight-#{$name} {
       @include font-weight($name, map-get($font-weights, $name));
     }
   }

ui-kit/src/sass/utils/_grid.scss

@@ -1,2 +1,2 @@
 $max-columns: 12;
-$gutter: 12px;
+$grid-gutter: 12px;

ui-kit/src/sass/utils/_typography.scss

@@ -6,15 +6,15 @@
     --lubycon-line-height-#{$font-size-number}: #{$line-height};
   }
 
-  .lubycon-font-size--#{$font-size-number} {
+  .lubycon-font-size-#{$font-size-number} {
     font-size: $font-size;
     font-size: var(--lubycon-font-size-#{$font-size-number});
     line-height: $line-height;
     line-height: var(--lubycon-line-height-#{$font-size-number});
   }
 
-  .lubycon-typography--#{$name} {
-    @extend .lubycon-font-size--#{$font-size-number};
+  .lubycon-typography-#{$name} {
+    @extend .lubycon-font-size-#{$font-size-number};
   }
 }
 

ui-kit/src/stories/Alert.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Alert from 'components/Alert';
 import { Meta } from '@storybook/react/types-6-0';
-import { Column, Row } from 'src/components';
+import { Column, Row } from 'src/components/Grid';
 import { SemanticColor } from 'src/constants/colors';
 
 export default {