feat(ui): center 컴포넌트 개발 (#113)

* feat(ui): center 컴포넌트 개발

* feat(ui): center storybook 작성

* chore(ui): 리뷰 반영

packages/ui/src/Center/Center.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Center as CenterComponent } from '.';
+
+type Center = typeof CenterComponent;
+
+const meta: Meta<Center> = {
+  argTypes: {
+    tag: {
+      control: 'select',
+      option: ['div', 'span', 'button'],
+    },
+  },
+  component: CenterComponent,
+  title: 'Components/Center',
+};
+
+export default meta;
+
+export const Default: StoryObj<Center> = {
+  render: (args) => (
+    <CenterComponent {...args}>
+      <div style={{ width: '80px', height: '80px', backgroundColor: 'pink' }} />
+    </CenterComponent>
+  ),
+};

packages/ui/src/Center/index.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import type { ElementType, ForwardedRef, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type CenterProps = {
+  tag?: ElementType;
+  width?: string;
+  height?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const Center = forwardRef(function Center(
+  { tag = 'div', children, width = '100%', height = '100%', ...props }: CenterProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <StyledCenter ref={ref} as={tag} width={width} height={height} {...props}>
+      {children}
+    </StyledCenter>
+  );
+});
+
+const StyledCenter = styled.div<CenterProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  text-align: center;
+`;