From 0048f14fb74811fdd92da0464d80cb2dcf318887 Mon Sep 17 00:00:00 2001
From: kangbyeonghyeon <rkdqudgus9806@gmail.com>
Date: Mon, 23 Sep 2024 22:09:30 +0900
Subject: [PATCH] refactor: change gap props in Flex component

---
 src/components/common/Flex/index.stories.tsx |  6 +++--
 src/components/common/Flex/index.tsx         | 24 ++++++++------------
 src/components/common/Input/index.tsx        |  5 ++--
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/components/common/Flex/index.stories.tsx b/src/components/common/Flex/index.stories.tsx
index 05005a8..9d89843 100644
--- a/src/components/common/Flex/index.stories.tsx
+++ b/src/components/common/Flex/index.stories.tsx
@@ -16,8 +16,10 @@ export const Default: Story = {
     direction: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    xGap: '10px',
-    yGap: '10px',
+    gap: {
+      x: '10px',
+      y: '10px',
+    },
   },
   render: (args) => (
     <Flex {...args}>
diff --git a/src/components/common/Flex/index.tsx b/src/components/common/Flex/index.tsx
index 72e33bf..bba89d1 100644
--- a/src/components/common/Flex/index.tsx
+++ b/src/components/common/Flex/index.tsx
@@ -2,10 +2,14 @@ import styled from '@emotion/styled';
 import type * as CSS from 'csstype';
 import { HTMLAttributes } from 'react';
 
+type FlexGap = {
+  x: string;
+  y: string;
+};
+
 interface FlexProps {
   direction?: 'column' | 'row';
-  xGap?: string;
-  yGap?: string;
+  gap?: FlexGap;
   justifyContent?: CSS.Properties['justifyContent'];
   alignItems?: CSS.Properties['alignItems'];
 }
@@ -14,22 +18,14 @@ type Props = HTMLAttributes<HTMLDivElement> & FlexProps;
 
 export default function Flex({
   direction = 'row',
-  xGap,
-  yGap,
+  gap,
   justifyContent = 'start',
   alignItems = 'start',
   children,
   ...rest
 }: Props) {
   return (
-    <Container
-      direction={direction}
-      xGap={xGap}
-      yGap={yGap}
-      justifyContent={justifyContent}
-      alignItems={alignItems}
-      {...rest}
-    >
+    <Container direction={direction} gap={gap} justifyContent={justifyContent} alignItems={alignItems} {...rest}>
       {children}
     </Container>
   );
@@ -41,6 +37,6 @@ const Container = styled.div<FlexProps>`
   flex-direction: ${(p) => p.direction};
   justify-content: ${(p) => p.justifyContent};
   align-items: ${(p) => p.alignItems};
-  column-gap: ${(p) => p.xGap};
-  row-gap: ${(p) => p.yGap};
+  column-gap: ${(p) => p.gap?.x};
+  row-gap: ${(p) => p.gap?.y};
 `;
diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx
index f943827..91a59e0 100644
--- a/src/components/common/Input/index.tsx
+++ b/src/components/common/Input/index.tsx
@@ -1,6 +1,5 @@
 import { InputHTMLAttributes } from 'react';
 import styled from '@emotion/styled';
-import Flex from '@components/common/Flex';
 import palettes from '@assets/styles/global/pallets';
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
@@ -9,10 +8,10 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
 
 export default function Input({ label, ...rest }: Props) {
   return (
-    <Flex xGap="8px" alignItems="center">
+    <>
       {label && <label>{label}</label>}
       <InputContainer {...rest} />
-    </Flex>
+    </>
   );
 }