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

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

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react';
+import classnames from 'classnames';
+import { CombineElementProps } from 'src/types/utils';
+import Text from '../Text';
+
+const noop = (value: number) => value;
+
+export type ProgressBarLabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type Props = CombineElementProps<
+  'div',
+  {
+    value: number;
+    max: number;
+    showLabel?: boolean;
+    labelPosition?: ProgressBarLabelPosition;
+    labelFormatter?: (value: number) => string;
+  }
+>;
+const ProgressBar = forwardRef<HTMLDivElement, Props>(function ProgressBar(
+  { value, max, className, labelFormatter = noop, showLabel, labelPosition = 'top', ...props },
+  ref
+) {
+  const layoutDirection = ['top', 'bottom'].includes(labelPosition) ? 'column' : 'row';
+  const ratio = (value / max) * 100;
+
+  return (
+    <div
+      ref={ref}
+      className={classnames(
+        'lubycon-progress-bar',
+        `lubycon-progress-bar--direction-${layoutDirection}`,
+        className
+      )}
+      {...props}
+    >
+      {showLabel === true ? (
+        <Text
+          className={classnames(
+            'lubycon-progress-bar__label',
+            `lubycon-progress-bar__label--position-${labelPosition}`
+          )}
+          typography="caption"
+        >
+          {labelFormatter(value)}
+        </Text>
+      ) : null}
+      <div className="lubycon-progress-bar__bar">
+        <div className="lubycon-progress-bar__bar__fill" style={{ width: `${ratio}%` }} />
+      </div>
+    </div>
+  );
+});
+
+export default ProgressBar;

ui-kit/src/index.ts

@@ -21,6 +21,7 @@ export {
 export { default as Snackbar } from './components/Snackbar';
 export { default as List, ListItem } from './components/List';
 export { default as Input } from './components/Input';
+export { default as ProgressBar } from './components/ProgressBar';
 export { Portal } from './contexts/Portal';
 export { useToast } from './contexts/Toast';
 export { useSnackbar } from './contexts/Snackbar';

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

@@ -0,0 +1,48 @@
+$label-vertical-space: 4px;
+$label-horizontal-space: 12px;
+
+.lubycon-progress-bar {
+  display: flex;
+
+  &--direction-row {
+    flex-direction: row;
+    align-items: center;
+  }
+  &--direction-column {
+    flex-direction: column;
+  }
+
+  &__label {
+    text-align: center;
+    &--position-top {
+      margin-bottom: $label-vertical-space;
+      order: 0;
+    }
+    &--position-bottom {
+      margin-top: $label-vertical-space;
+      order: 2;
+    }
+    &--position-right {
+      margin-left: $label-horizontal-space;
+      order: 2;
+    }
+    &--position-left {
+      margin-right: $label-horizontal-space;
+      order: 0;
+    }
+  }
+  &__bar {
+    display: flex;
+    flex-grow: 1;
+    order: 1;
+    width: 100%;
+    background-color: get-color('gray30');
+    height: 4px;
+    border-radius: 100px;
+    overflow: hidden;
+    &__fill {
+      transition: width 0.3s ease-out;
+      background-color: get-color('blue50');
+    }
+  }
+}

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

@@ -16,3 +16,4 @@
 @import './Container';
 @import './List';
 @import './Input';
+@import './ProgressBar';

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

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+import { ProgressBar, Text } from 'src';
+import { ProgressBarLabelPosition } from 'src/components/ProgressBar';
+
+export default {
+  title: 'Lubycon UI Kit/ProgressBar',
+} as Meta;
+
+const MAX_VALUE = 100;
+const getProgressValue = (value: number) => (value === MAX_VALUE ? 0 : value + 1);
+
+export const Default = () => {
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setValue(getProgressValue), 100);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <div>
+      <ProgressBar value={value} max={MAX_VALUE} />
+    </div>
+  );
+};
+
+const labelPosition: ProgressBarLabelPosition[] = ['top', 'bottom', 'left', 'right'];
+export const Label = () => {
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setValue(getProgressValue), 100);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <ul style={{ margin: 0, padding: 0 }}>
+      {labelPosition.map((position) => (
+        <li style={{ listStyle: 'none', marginBottom: 16 }} key={position}>
+          <Text fontWeight="bold">{position}</Text>
+          <ProgressBar value={value} max={MAX_VALUE} showLabel={true} labelPosition={position} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export const LabelFormatter = () => {
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setValue(getProgressValue), 100);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <>
+      <ProgressBar
+        style={{ marginBottom: 16 }}
+        value={value}
+        max={MAX_VALUE}
+        showLabel={true}
+        labelFormatter={(value) => `${value}/${100}`}
+      />
+      <ProgressBar
+        style={{ marginBottom: 16 }}
+        value={value}
+        max={MAX_VALUE}
+        showLabel={true}
+        labelFormatter={(value) =>
+          value > MAX_VALUE * 0.5 ? '거의 다 왔어요!' : `현재 값은 ${value}입니다`
+        }
+      />
+      <ProgressBar
+        style={{ marginBottom: 16 }}
+        value={value}
+        max={MAX_VALUE}
+        showLabel={true}
+        labelFormatter={(value) => `${Math.floor((value / MAX_VALUE) * 100)}%`}
+      />
+    </>
+  );
+};