feat: publish Skeleton component

packages/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,26 @@
+import type { SkeletonProps as RadixSkeletonProps } from '@radix-ui/themes';
+import { Skeleton as RadixSkeleton } from '@radix-ui/themes';
+import '@radix-ui/themes/styles.css';
+import { colors } from '@sopt-makers/colors';
+import { forwardRef } from 'react';
+
+export type SkeletonProps = RadixSkeletonProps;
+
+/**
+ * - 자세한 옵션은 [radix-ui/Skeleton](https://www.radix-ui.com/themes/docs/components/skeleton)문서를 참고해주세요.
+ */
+export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>((props, forwardedRef) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <RadixSkeleton
+      ref={forwardedRef}
+      style={{ backgroundColor: colors.gray700, borderRadius: '9999px' }}
+      {...restProps}
+    >
+      {children}
+    </RadixSkeleton>
+  );
+});
+
+Skeleton.displayName = 'Skeleton';

packages/ui/Skeleton/index.ts

@@ -0,0 +1 @@
+export * from './Skeleton';

packages/ui/index.ts

@@ -12,6 +12,7 @@ export { default as Tag } from './Tag';
 export { default as Chip } from './Chip';
 export { default as Callout } from './Callout';
 export { default as Tab } from './Tab';
+export * from './Skeleton';
 
 // test component
 export { default as Test } from './Test';