feat(skeleton): Skeleton 컴포넌트 추가 (#114)

.github/workflows/alpha-storybook-publish.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   storybook-publish:
-    if: "!contains(github.event.head_commit.message, '[skip ci]') && contains(github.event.head_commit.message, '(docs)')"
+    if: "!contains(github.event.head_commit.message, '[skip ci]')"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1

.github/workflows/deploy-ui-kit-lib.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   ui-kit-publish:
-    if: "!contains(github.event.head_commit.message, '[skip ci]') && contains(github.event.head_commit.message, '(ui-kit)')"
+    if: "!contains(github.event.head_commit.message, '[skip ci]')"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1

.github/workflows/live-storybook-publish.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   storybook-publish:
-    if: "!contains(github.event.head_commit.message, '[skip ci]') && contains(github.event.head_commit.message, '(docs)')"
+    if: "!contains(github.event.head_commit.message, '[skip ci]')"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1

src/components/Skeleton/Circle.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CombineElementProps } from 'src/types/utils';
+
+type Props = Omit<
+  CombineElementProps<
+    'div',
+    {
+      width: number;
+      height: number;
+      backgroundStyle: string;
+    }
+  >,
+  'role'
+>;
+
+const Circle = ({ width, height, backgroundStyle, style, ...rest }: Props) => {
+  return (
+    <div
+      style={{
+        display: 'inline-block',
+        width: `${width}px`,
+        height: `${height}px`,
+        background: backgroundStyle,
+        borderRadius: '50%',
+        ...style,
+      }}
+      role="img"
+      {...rest}
+    />
+  );
+};
+
+export default Circle;

src/components/Skeleton/Rect.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CombineElementProps } from 'src/types/utils';
+
+type Props = Omit<
+  CombineElementProps<
+    'div',
+    {
+      width: number;
+      height: number;
+      backgroundStyle: string;
+    }
+  >,
+  'role'
+>;
+
+const Rect = ({ width, height, backgroundStyle, style, ...rest }: Props) => {
+  return (
+    <div
+      style={{
+        display: 'inline-block',
+        width: `${width}px`,
+        height: `${height}px`,
+        background: backgroundStyle,
+        ...style,
+      }}
+      role="img"
+      {...rest}
+    />
+  );
+};
+
+export default Rect;

src/components/Skeleton/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { CombineElementProps } from 'src/types/utils';
+import { colors } from 'src/constants/colors';
+import { useAnimateGradient } from './useAnimateGradient';
+import Rect from './Rect';
+import Circle from './Circle';
+
+type Props = Omit<
+  CombineElementProps<
+    'div',
+    {
+      type?: 'rect' | 'circle';
+      width: number;
+      height: number;
+      backgroundColor?: string;
+      foregroundColor?: string;
+    }
+  >,
+  'role'
+>;
+
+const Skeleton = ({
+  type = 'rect',
+  width,
+  height,
+  backgroundColor = colors.gray30,
+  foregroundColor = colors.gray20,
+  ...rest
+}: Props) => {
+  const gradientStyle = useAnimateGradient({
+    foregroundColor,
+    backgroundColor,
+  });
+
+  if (type === 'rect') {
+    return <Rect width={width} height={height} backgroundStyle={gradientStyle} {...rest} />;
+  } else {
+    return <Circle width={width} height={height} backgroundStyle={gradientStyle} {...rest} />;
+  }
+};
+
+export default Skeleton;
+
+Skeleton.Circle = Circle;
+Skeleton.Rect = Rect;

src/components/Skeleton/useAnimateGradient.tsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { useState } from 'react';
+import { useAnimationFrame } from 'src/hooks/useAnimationFrame';
+
+const gradientDegree = 90;
+
+export interface GradientOptions {
+  foregroundColor: string;
+  backgroundColor: string;
+  progress: number;
+  width: number;
+}
+export function calcGradient({
+  foregroundColor,
+  backgroundColor,
+  progress,
+  width,
+}: GradientOptions) {
+  const startPosition = Math.max(progress - width, 0);
+  const endPosition = Math.min(progress + width, 100);
+
+  return `linear-gradient(${gradientDegree}deg, ${backgroundColor} ${startPosition}%, ${foregroundColor} ${progress}%, ${backgroundColor} ${endPosition}%)`;
+}
+
+interface Options {
+  foregroundColor: string;
+  backgroundColor: string;
+}
+export function useAnimateGradient({ foregroundColor, backgroundColor }: Options) {
+  const [progress, setProgress] = useState(-200);
+
+  const updateProgress = useCallback(() => {
+    setProgress((prev) => (prev >= 200 ? -200 : prev + 3));
+  }, []);
+
+  useAnimationFrame(updateProgress);
+
+  return calcGradient({
+    foregroundColor,
+    backgroundColor,
+    progress,
+    width: 20,
+  });
+}

src/hooks/useAnimationFrame.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+
+export function useAnimationFrame(callback: () => void) {
+  const animateRequestRef = useRef<number>();
+
+  useEffect(() => {
+    const animate = () => {
+      callback();
+      console.log('callback');
+      animateRequestRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      if (animateRequestRef.current != null) {
+        cancelAnimationFrame(animateRequestRef.current);
+      }
+    };
+  }, [callback]);
+}

src/index.ts

@@ -10,6 +10,7 @@ export { colors } from './constants/colors';
 export { default as Icon } from './components/Icon';
 export { default as Shadow } from './components/Shadow';
 export { default as Spacing } from './components/Spacing';
+export { default as Skeleton } from './components/Skeleton';
 export { default as useProgress } from './hooks/useProgress';
 export { default as useResizeObserver } from './hooks/useResizeObserver';
 export { useOverlay } from './contexts/Overlay';

src/stories/Components/Skeleton/index.stories.mdx

@@ -0,0 +1,18 @@
+import { Skeleton, Spacing } from 'src';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+<Meta title="components/Skeleton" components={Skeleton} />
+
+# Skeleton
+
+Skeleton 컴포넌트는
+
+<Canvas>
+  <Story name="Skeleton">
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <Skeleton width={50} height={50} type="circle" />
+      <Spacing size={10} />
+      <Skeleton width={100} height={20} />
+    </div>
+  </Story>
+</Canvas>