feat(ui-kit): Column scss mixin 및 functions 추가

ui-kit/src/components/Column/index.stories.tsx

@@ -7,4 +7,13 @@ export default {
   component: Column,
 } as Meta;
 
-export const Default = () => <Column style={{ backgroundColor: 'red' }}>Column</Column>;
+export const Default = () => (
+  <div style={{ display: 'flex', flexDirection: 'row' }}>
+    <Column style={{ backgroundColor: 'red' }} md={4}>
+      Column
+    </Column>
+    <Column style={{ backgroundColor: 'blue' }} md={8}>
+      Column
+    </Column>
+  </div>
+);

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

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { HTMLAttributes } from 'react';
+import '../../sass/components/_Column.scss';
 
 type NumberAttribute =
   | number
@@ -41,7 +42,7 @@ export default function Column({ children, ...props }: ColumnProps): JSX.Element
     const infix = size !== 'xs' ? `-${size}` : '';
 
     if (span) {
-      spans.push(span ? `column${infix}` : `column${infix}-${span}`);
+      spans.push(span ? `column${infix}-${span}`: `column${infix}`);
     }
 
     if (offset) {

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

@@ -0,0 +1,70 @@
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin make-column($size, $columns: $grid-columns) {
+  flex: 0 0 auto;
+  width: percentage($size / $columns);
+}
+
+@mixin generate-grid-columns($columns: 12, $gutter: 12px, $breakpoints: $grid-breakpoints) {
+  %grid-column {
+    position: relative;
+    width: 100%;
+    padding-right: ($gutter / 2);
+    padding-left: ($gutter / 2);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @for $i from 1 through $columns {
+      .column#{$infix}-#{$i} {
+        @extend %grid-column;
+      }
+    }
+    .column#{$infix} {
+      @extend %grid-column;
+    }
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      .column#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+
+      @for $i from 1 through $columns {
+        .column#{$infix}-#{$i} {
+          @include make-column($i, $columns);
+        }
+      }
+    }
+  }
+}
+
+@include generate-grid-columns();

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

@@ -1,3 +1,4 @@
 @import './Button';
 @import './Text';
 @import './Radio';
+@import './Column';