feat: Flex 컴포넌트 추가 (#126)

src/components/Flex/index.tsx

@@ -0,0 +1,30 @@
+import { CSSProperties, ElementType, forwardRef, PropsWithRef, Ref } from 'react';
+import { OverridableProps } from 'src/types/OverridableProps';
+
+interface FlexBaseProps {
+  direction?: CSSProperties['flexDirection'];
+  align?: CSSProperties['alignItems'];
+  justify?: CSSProperties['justifyContent'];
+}
+
+type Props<T extends ElementType = 'div'> = OverridableProps<T, FlexBaseProps>;
+const Flex = <T extends ElementType = 'div'>(
+  { direction = 'row', align = 'flex-start', justify = 'flex-start', children }: Props<T>,
+  ref: Ref<any>
+) => {
+  return (
+    <div
+      ref={ref}
+      css={{
+        display: 'flex',
+        flexDirection: direction,
+        alignItems: align,
+        justifyContent: justify,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default forwardRef(Flex) as PropsWithRef<typeof Flex>;

src/index.ts

@@ -14,3 +14,4 @@ export { useOverlay } from './contexts/Overlay';
 export { default as TransitionMotion } from './components/TransitionMotion';
 export { default as useElementSize } from './hooks/useElementSize';
 export { useAnimationFrame } from './hooks/useAnimationFrame';
+export { default as Flex } from './components/Flex';

src/stories/Components/ProgressBar/ProgressBar.tsx

@@ -3,6 +3,7 @@ import { CombineElementProps } from '../../../types/utils';
 import Text from '../../../components/Text';
 import useProgress from '../../../hooks/useProgress';
 import { colors } from '../../../constants/colors';
+import Flex from '../../../components/Flex';
 
 const noop = (value: number) => value;
 
@@ -60,12 +61,9 @@ const ProgressBar = forwardRef<HTMLDivElement, Props>(function ProgressBar(
   const ratio = useProgress({ min, value, max, valueMapper });
 
   return (
-    <div
-      css={{
-        display: 'flex',
-        flexDirection: layoutDirection,
-        alignItems: layoutDirection === 'row' ? 'center' : undefined,
-      }}
+    <Flex
+      direction={layoutDirection}
+      align={layoutDirection === 'row' ? 'center' : undefined}
       ref={ref}
       {...props}
     >
@@ -100,7 +98,7 @@ const ProgressBar = forwardRef<HTMLDivElement, Props>(function ProgressBar(
           }}
         />
       </div>
-    </div>
+    </Flex>
   );
 });
 

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

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

src/stories/Styles/Shadows/components.tsx

@@ -1,11 +1,11 @@
 import { ComponentProps } from 'react';
+import Flex from '../../../components/Flex';
 
 export const Box = ({ children, ...rest }: ComponentProps<'div'>) => {
   return (
-    <div
+    <Flex
+      direction="column"
       style={{
-        display: 'flex',
-        alignItems: 'flex-end',
         height: 80,
         borderRadius: 8,
         backgroundColor: '#fcfcfd',
@@ -14,6 +14,6 @@ export const Box = ({ children, ...rest }: ComponentProps<'div'>) => {
       {...rest}
     >
       {children}
-    </div>
+    </Flex>
   );
 };

src/stories/Styles/Typography/index.stories.mdx

@@ -15,7 +15,7 @@ PC와 모바일의 rem 기준 서체 크기는 16px을 사용합니다. 서체
 
 <Story name="Headings">
   <ul>
-    {typographys.map((typography) => (
+    {Object.keys(typographys).map((typography) => (
       <li style={{ listStyle: 'none' }} key={typography}>
         <Text typography={typography}>{typographyNames[typography]}</Text>
       </li>
@@ -27,7 +27,7 @@ PC와 모바일의 rem 기준 서체 크기는 16px을 사용합니다. 서체
 
 <Story name="Font Weight">
   <ul>
-    {fontWeights.map((fontWeight) => (
+    {Object.keys(fontWeights).map((fontWeight) => (
       <li style={{ listStyle: 'none' }} key={fontWeight}>
         <Text fontWeight={fontWeight}>{fontWeightNames[fontWeight]}</Text>
       </li>

src/types/utils.ts

@@ -1,13 +1,10 @@
-import { ComponentPropsWithoutRef, ComponentType, ElementType, ReactElement } from 'react';
+import { ComponentProps, ComponentType, ElementType, ReactElement } from 'react';
 
 /**
  * @description T와 K에서 T의 프로퍼티를 제거한 타입을 병합합니다.
  */
 export type Combine<T, K> = T & Omit<K, keyof T>;
 
-export type CombineElementProps<E extends ElementType, P = unknown> = Combine<
-  P,
-  ComponentPropsWithoutRef<E>
->;
+export type CombineElementProps<E extends ElementType, P = unknown> = Combine<P, ComponentProps<E>>;
 
 export type ComponentElementType<T> = ReactElement<ComponentType<T>>;