Merge pull request #24 from Kernel360/common-component-flex

공통 컴포넌트: Flex 컴포넌트 제작

src/components/query/shared/flex/Flex.tsx

@@ -0,0 +1,26 @@
+import { CSSProperties, useMemo } from 'react';
+
+interface FlexProps {
+  align?: CSSProperties['alignItems']
+  justify?: CSSProperties['justifyContent']
+  direction?: CSSProperties['flexDirection']
+  children: React.ReactNode
+}
+
+function Flex({
+  align, justify, direction, children,
+}: FlexProps) {
+  const styles = useMemo(() => {
+    return {
+      display: 'flex', alignItems: align, justifyContent: justify, flexDirection: direction,
+    };
+  }, [align, justify, direction]);
+
+  return (
+    <div style={styles}>
+      {children}
+    </div>
+  );
+}
+
+export default Flex;