refactor: [1주차 리뷰] gap을 optional 타입으로 지정

kakao-tech-campus-2nd-step2 · Jun 30, 2024 · b75eff0 · b75eff0
1 parent 7f91189
commit b75eff0
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 3 deletions.
diff --git a/src/components/Layout/Grid.tsx b/src/components/Layout/Grid.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 export interface IGrid {
-  gap: number;
+  gap?: number;
   children: React.ReactNode;
   columns: number | 'ResponseGridStyle';
 }
@@ -38,6 +38,6 @@ const GridContainer = styled.div<IGrid>`
   display: grid;
   grid-template-columns: ${(props) =>
     props.columns === 'ResponseGridStyle' ? columnStyles : `repeat(${props.columns}, 1fr)`};
-  gap: ${(props) => props.gap};
+  gap: ${(props) => `${props.gap}px`};
   align-items: center;
 `;
diff --git a/src/stories/Grid.stories.tsx b/src/stories/Grid.stories.tsx
@@ -10,7 +10,6 @@ const Template: StoryFn<IGrid> = (args) => <Grid {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  gap: 1,
   children: Array.from({ length: 16 }, (_, index) => <div key={index}>{index + 1}</div>),
   columns: 3,
 };