diff --git a/frontend/src/components/common/FlexBox/FlexBox.stories.tsx b/frontend/src/components/common/FlexBox/FlexBox.stories.tsx
index 5fc282b3e..67957fa7f 100644
--- a/frontend/src/components/common/FlexBox/FlexBox.stories.tsx
+++ b/frontend/src/components/common/FlexBox/FlexBox.stories.tsx
@@ -60,6 +60,14 @@ const meta = {
'플렉스 컨테이너 안에 있는 아이템의 위치를 조절할 수 있습니다.
- direction이 row일 경우: 수평을 기준으로 아이템이 이동합니다.
- direction이 column일 경우: 수직을 기준으로 아이템이 이동합니다.',
},
alignContent: {
+ options: Object.keys({ ...FLEX_BOX_ITEM_POSITION, none: undefined }),
+ control: {
+ type: 'select',
+ },
+ description:
+ '플렉스 컨테이너 안에 있는 아이템의 위치를 조절할 수 있습니다.
- direction이 row일 경우: 수직을 기준으로 아이템이 이동합니다.
- direction이 column일 경우: 수평을 기준으로 아이템이 이동합니다.
❗`wrap`(noWrap이 false)일 때만 사용 가능합니다.',
+ },
+ alignItems: {
options: Object.keys({ ...FLEX_BOX_ITEM_POSITION, none: undefined }),
control: {
type: 'select',
diff --git a/frontend/src/components/common/FlexBox/FlexBox.tsx b/frontend/src/components/common/FlexBox/FlexBox.tsx
index a447bdda4..42e97af0f 100644
--- a/frontend/src/components/common/FlexBox/FlexBox.tsx
+++ b/frontend/src/components/common/FlexBox/FlexBox.tsx
@@ -60,9 +60,9 @@ const S = {
height: ${({ height }) => getSize(height)};
flex-wrap: ${({ nowrap }) => (nowrap ? 'nowrap' : 'wrap')};
flex-direction: ${({ direction }) => (direction ? direction : 'row')};
- justify-content: ${({ justifyContent }) => FLEX_BOX_ITEM_POSITION[justifyContent] || 'start'};
- align-items: ${({ alignItems }) => FLEX_BOX_ITEM_POSITION[alignItems] || 'start'};
- align-content: ${({ alignContent }) => FLEX_BOX_ITEM_POSITION[alignContent] || 'start'};
+ justify-content: ${({ justifyContent }) => FLEX_BOX_ITEM_POSITION[justifyContent]};
+ align-items: ${({ alignItems }) => FLEX_BOX_ITEM_POSITION[alignItems]};
+ align-content: ${({ alignContent }) => FLEX_BOX_ITEM_POSITION[alignContent]};
gap: ${({ gap, rowGap, columnGap }) => getGap({ gap, rowGap, columnGap })};
background: ${({ background }) => background || '#fff'};
border: ${({ outlined }) => (outlined ? '0.15rem solid #000' : 'none')};