feat(ui-kit): Row 컴포넌트 추가 및 그리드 인터페이스 확정 (#27)

* feat(ui-kit): Row 컴포넌트 추가

* chore: PR Template 수정

* feat(ui-kit): add variable width story

* feat(ui-kit): remove unused row component

* feat(ui-kit): Row컴포넌트의 direction 스토리 추가

.github/pull_request_template.md

@@ -1,22 +1,10 @@
-<!-- 절취선 -->
-# 이 Pull Request가 BREAKING CHANGE를 포함하고 있나요?
-BREAKING CHANGE가 포함된 PR이라면 Base를 Beta로 잡아주셔야 합니다 !
-확인 후 이 내용은 지워주셔도 됩니다.
-<!-- 절취선 -->
+> 이 PR이 BREAKING_CHANGE를 포함하고 있다면 반드시 명시해주세요!
 
-## 주요 변경사항
-<!-- 이 PR이 해결하는 문제 -->
+## 변경사항
+어떤 사항이 변경되었는지 자세히 적어주세요!
 
-## 링크
-- 디자인 시안 링크: <!-- 제플린, 피그마, 프레이머 등 -->
-- 슬랙 링크: <!-- 관련된 대화가 이루어진 슬랙 링크 -->
+## 디자인 시안 링크
+디자인 시안 링크를 첨부해주세요!
 
-## 시급한 정도
-<!-- 아래에서 선택해주세요. -->
----
-⚠︎ 긴급 : 선 어프루브 후 리뷰를 부탁드립니다. (리뷰는 추후 반영)
-🏃‍♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.
-🐢 천천히 : 급하지 않습니다.
+## 집중적으로 리뷰 받고 싶은 부분이 있나요?
 
-## 중점적으로 봐주었으면 하는 부분
-<!-- 변경사항이 큰 경우 집중해야 할 부분, 또는 불안해서 봐주었으면 하는 부분 등 -->

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

@@ -0,0 +1,38 @@
+import React, { ElementType, useMemo } from 'react';
+import { ColumnSize, ColumnResponsive, DEFAULT_ELEMENT } from './types';
+import { OverridableProps } from 'types/OverridableProps';
+import classNames from 'classnames';
+
+const sizes: ColumnResponsive[] = ['xl', 'lg', 'md', 'sm', 'xs'];
+
+type ColumnBaseProps = {
+  [key in ColumnResponsive]?: ColumnSize;
+};
+
+type ColumnProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<
+  T,
+  ColumnBaseProps
+>;
+
+const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
+  { as, ...props }: ColumnProps<T>,
+  ref: React.Ref<any>
+) => {
+  const spanClasses = useMemo(
+    () =>
+      sizes.map((size) => {
+        const { [size]: sizeValue } = props;
+        return sizeValue ? `lubycon-grid-column--${size}__${sizeValue}` : '';
+      }),
+    []
+  );
+
+  const target = as ?? DEFAULT_ELEMENT;
+  const Component = target;
+
+  return (
+    <Component ref={ref} className={classNames(`lubycon-grid-column`, ...spanClasses)} {...props} />
+  );
+};
+
+export default React.forwardRef(Column) as typeof Column;

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

@@ -0,0 +1,34 @@
+import React, { ElementType, Ref, forwardRef } from 'react';
+import { DEFAULT_ELEMENT } from './types';
+import classnames from 'classnames';
+import { OverridableProps } from 'src/types/OverridableProps';
+
+type BaseAlign = 'flex-start' | 'center' | 'flex-end';
+interface RowBaseProps {
+  direction?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
+  justify?: BaseAlign | 'space-between' | 'space-around' | 'space-evenly';
+  alignItems?: BaseAlign | 'stretch' | 'baseline';
+}
+type RowProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<T, RowBaseProps>;
+
+const Row = (
+  { as, direction = 'row', justify = 'flex-start', alignItems = 'flex-start', ...props }: RowProps,
+  ref: Ref<any>
+) => {
+  const Component = as ?? DEFAULT_ELEMENT;
+
+  return (
+    <Component
+      ref={ref}
+      className={classnames(
+        'lubycon-grid-row',
+        `lubycon-grid-row--direction__${direction}`,
+        `lubycon-grid-row--justify__${justify}`,
+        `lubycon-grid-row--align-items__${alignItems}`
+      )}
+      {...props}
+    />
+  );
+};
+
+export default forwardRef(Row) as typeof Row;

ui-kit/src/components/Grid/index.ts

@@ -0,0 +1,2 @@
+export { default as Row } from './Row';
+export { default as Column } from './Column';

ui-kit/src/components/Grid/types.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_ELEMENT = 'div' as const;
+
+type ColumnNumberSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ColumnSize = boolean | 'auto' | ColumnNumberSize;
+export type ColumnResponsive = 'xl' | 'lg' | 'md' | 'sm' | 'xs';

ui-kit/src/components/index.ts

@@ -1,3 +1,3 @@
 export { default as Button } from './Button';
 export { default as Text } from './Text';
-export { default as Column } from './Column';
+export { Row, Column } from './Grid';

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

@@ -1,70 +1,17 @@
-$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;
-  }
+.lubycon-grid-column {
+  position: relative;
+  width: 100%;
+  padding-right: ($gutter / 2);
+  padding-left: ($gutter / 2);
 }
 
-@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);
-        }
+@each $breakpoint, $size in $breakpoints {
+  @for $i from 1 through $max-columns {
+    .lubycon-grid-column--#{$breakpoint}__#{$i} {
+      @include media-breakpoint($size) {
+        flex: 0 0 auto;
+        width: percentage($i / $max-columns);
       }
     }
   }
 }
-
-@include generate-grid-columns();

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

@@ -0,0 +1,39 @@
+@mixin direction($direction) {
+  &--direction__#{$direction} {
+    flex-direction: $direction;
+  }
+}
+@mixin justify($align) {
+  &--justify__#{$align} {
+    justify-content: $align;
+  }
+}
+@mixin alignItems($align) {
+  &--align-items__#{$align} {
+    align-items: $align;
+  }
+}
+
+.lubycon-grid-row {
+  display: flex;
+  width: 100%;
+  margin: #{-$gutter / 2};
+
+  @include direction(row);
+  @include direction(column);
+  @include direction(row-reverse);
+  @include direction(column-reverse);
+
+  @include justify(flex-start);
+  @include justify(center);
+  @include justify(flex-end);
+  @include justify(space-between);
+  @include justify(space-around);
+  @include justify(space-evenly);
+
+  @include alignItems(flex-start);
+  @include alignItems(center);
+  @include alignItems(flex-end);
+  @include alignItems(stretch);
+  @include alignItems(baseline);
+}

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

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

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

@@ -0,0 +1,13 @@
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+
+@mixin media-breakpoint($size) {
+  @media (min-width: $size) {
+    @content;
+  }
+}

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

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

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

@@ -1,3 +1,5 @@
+@import './breakpoints';
+@import './grid';
 @import './font';
 @import './font-weights';
 @import './typography';