From af69e13bfb312a3adef84f7bf49cee8e916780bd Mon Sep 17 00:00:00 2001
From: Dain Lee <108778921+feb-dain@users.noreply.github.com>
Date: Sat, 29 Jul 2023 17:49:24 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=94=8C=EB=A0=89=EC=8A=A4=20=EB=B0=95?=
=?UTF-8?q?=EC=8A=A4=20`align-items`=EA=B0=80=20=EB=8F=99=EC=9E=91?=
=?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=97=90=EB=9F=AC?=
=?UTF-8?q?=EB=A5=BC=20=EA=B0=9C=EC=84=A0=ED=95=9C=EB=8B=A4=20(#237)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
[#236]
---
.../src/components/common/FlexBox/FlexBox.stories.tsx | 8 ++++++++
frontend/src/components/common/FlexBox/FlexBox.tsx | 6 +++---
2 files changed, 11 insertions(+), 3 deletions(-)
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')};