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')};