feat: @megabrain/ui Container Atom 추가

.prettierrc

@@ -6,4 +6,4 @@
   "trailingComma": "es5",
   "printWidth": 120,
   "bracketSpacing": true
-}
+}

packages/ui/components/Button/Button.style.ts

@@ -20,10 +20,6 @@ export const BaseButton = styled('button', {
   transition:
     'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
 
-  '&:hover': {
-    $$backgroundColor: '$colors$on-secondary',
-  },
-
   svg: {
     display: 'inline-block',
     height: '100%',

packages/ui/components/Container/Container.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Container } from './Container';
 
 const meta: Meta<typeof Container> = {
-  title: 'Container',
+  title: 'Container/Base',
   component: Container,
 };
 
@@ -12,5 +12,5 @@ export default meta;
 type Story = StoryObj<typeof Container>;
 
 export const Primary: Story = {
-  render: () => <Container />,
+  args: {},
 };

packages/ui/components/Container/Container.style.ts

@@ -0,0 +1,90 @@
+import { styled } from '@/styles';
+import { css } from '@stitches/react';
+
+const baseCenter = css({
+  width: 1200,
+  '@tablet': {
+    width: 975,
+  },
+  '@mobile': {
+    width: 580,
+  },
+});
+
+export const BaseContainer = styled('div', {
+  display: 'block',
+
+  variants: {
+    //#region Display
+
+    display: {
+      block: {
+        display: 'block',
+      },
+      'inline-block': {
+        display: 'inline-block',
+      },
+      inline: {
+        display: 'inline',
+      },
+    },
+    //#endregion
+
+    //#region Padding
+    pad: {
+      true: {
+        padding: '10px 15px',
+      },
+    },
+
+    m: {
+      true: {
+        margin: '10px 15px',
+      },
+    },
+    //#endregion
+
+    //#region  Scroll
+    overflow: {
+      hidden: {
+        overflow: 'hidden',
+      },
+      'scroll-y-auto': {
+        overflowY: 'auto',
+        overflowX: 'hidden',
+      },
+      'scroll-x-auto': {
+        overflowY: 'hidden',
+        overflowX: 'auto',
+      },
+      'scroll-y-always': {
+        overflowY: 'scroll',
+        overflowX: 'hidden',
+      },
+      'scroll-x-always': {
+        overflowY: 'hidden',
+        overflowX: 'scroll',
+      },
+      always: {
+        overflow: 'scroll',
+      },
+    },
+    //#endregion
+
+    //#region Center
+    center: {
+      full: {
+        ...baseCenter,
+      },
+      vertical: {
+        ...baseCenter,
+        margin: 'auto 0px',
+      },
+      horizontal: {
+        ...baseCenter,
+        margin: '0px auto',
+      },
+    },
+    //#endregion
+  },
+});

packages/ui/components/Container/Container.tsx

@@ -1,5 +1,26 @@
-export const Container: React.FC = () => {
-  return <div>Container</div>;
-};
+import { forwardRef } from 'react';
+import { BaseContainer } from './Container.style';
+import { ContainerProps } from './types';
 
-export default Container;
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  ({ display, pad, m, overflow, center, css, children, onClick }, ref) => {
+    return (
+      <BaseContainer
+        ref={ref}
+        m={m}
+        display={display}
+        pad={pad}
+        center={center}
+        onClick={onClick}
+        css={css}
+        overflow={overflow}
+      >
+        {children}
+      </BaseContainer>
+    );
+  }
+);
+
+Container.displayName = 'Container';
+
+export default BaseContainer;

packages/ui/components/Container/Flex.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Flex } from './Flex';
+
+const meta: Meta<typeof Flex> = {
+  title: 'Container/Flex',
+  component: Flex,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Flex>;
+
+export const Primary: Story = {
+  args: {},
+};

packages/ui/components/Container/Flex.style.ts

@@ -0,0 +1,72 @@
+import { BaseContainer } from './Container.style';
+import { styled } from '@/styles';
+
+export const BaseFlex = styled(BaseContainer, {
+  display: 'flex',
+
+  variants: {
+    inline: {
+      true: {
+        display: 'inline-flex',
+      },
+    },
+
+    nowrap: {
+      true: {
+        flexWrap: 'nowrap',
+      },
+    },
+
+    flow: {
+      true: {
+        flex: 1,
+      },
+    },
+
+    //#region JustifyContent
+    justify: {
+      end: {
+        justifyContent: 'flex-end',
+      },
+      start: {
+        justifyContent: 'flex-start',
+      },
+      between: {
+        justifyContent: 'space-between',
+      },
+      evenly: {
+        justifyContent: 'space-evenly',
+      },
+      around: {
+        justifyContent: 'space-around',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      left: {
+        justifyContent: 'left',
+      },
+      right: {
+        justifyContent: 'right',
+      },
+    },
+    //#endregion
+
+    //#region AlignItems
+    items: {
+      base: {
+        alignItems: 'baseline',
+      },
+      center: {
+        alignItems: 'center',
+      },
+      start: {
+        alignItems: 'flex-start',
+      },
+      end: {
+        alignItems: 'flex-end',
+      },
+    },
+    //#endregion
+  },
+});

packages/ui/components/Container/Flex.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { FlexProps } from './types';
+import { BaseFlex } from './Flex.style';
+
+export const Flex = forwardRef<HTMLDivElement, FlexProps>(
+  ({ items, justify, nowrap, flow, inline, ...containerProps }, ref) => {
+    return (
+      <BaseFlex
+        items={items}
+        justify={justify}
+        nowrap={nowrap}
+        flow={flow}
+        inline={inline}
+        ref={ref}
+        {...containerProps}
+      />
+    );
+  }
+);
+
+Flex.displayName = 'Flex';
+
+export default Flex;

packages/ui/components/Container/Grid.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Grid } from './Grid';
+
+const meta: Meta<typeof Grid> = {
+  title: 'Container/Grid',
+  component: Grid,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+export const Primary: Story = {
+  args: {},
+};

packages/ui/components/Container/Grid.style.ts

@@ -0,0 +1,8 @@
+import { Container } from './Container';
+import { styled } from '@/styles';
+
+export const BaseGrid = styled(Container, {
+  display: 'grid',
+
+  variants: {},
+});

packages/ui/components/Container/Grid.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from 'react';
+
+import { BaseGrid } from './Grid.style';
+import { GridProps } from './types';
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(({ ...containerProps }, ref) => {
+  return <BaseGrid ref={ref} {...containerProps} />;
+});
+
+Grid.displayName = 'Grid';
+
+export default Grid;

packages/ui/components/Container/index.ts

@@ -1 +1,3 @@
 export * from './Container';
+export * from './Flex';
+export * from './Grid';

packages/ui/components/Container/types.ts

@@ -0,0 +1,40 @@
+import { CSS } from '@/styles';
+import { MouseEventHandler, ReactNode } from 'react';
+import { BaseHTMLAttributes } from 'react';
+
+type ContainerDisplay = 'block' | 'inline-block' | 'inline';
+
+type ContainerOverflow =
+  | 'hidden'
+  | 'scroll-y-auto'
+  | 'scroll-x-auto'
+  | 'scroll-y-always'
+  | 'scroll-x-always'
+  | 'always';
+
+type ContainerCenter = 'full' | 'vertical' | 'horizontal';
+
+export interface ContainerProps {
+  display?: ContainerDisplay;
+  pad?: boolean;
+  m?: boolean;
+  overflow?: ContainerOverflow;
+  center?: ContainerCenter;
+  css?: BaseHTMLAttributes<HTMLDivElement> & CSS;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  children?: ReactNode;
+}
+
+type FlexJustify = 'end' | 'start' | 'between' | 'evenly' | 'around' | 'center' | 'left' | 'right';
+
+type FlexAlignItems = 'base' | 'center' | 'start' | 'end';
+
+export interface FlexProps extends ContainerProps {
+  inline?: boolean;
+  nowrap?: boolean;
+  flow?: boolean;
+  justify?: FlexJustify;
+  items?: FlexAlignItems;
+}
+
+export interface GridProps extends ContainerProps {}