fix: 플렉스 박스 align-items가 동작하지 않는 에러를 개선한다 (#237)

[#236]
woowacourse-teams · Jul 29, 2023 · af69e13 · af69e13
1 parent fd1ee72
commit af69e13
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/frontend/src/components/common/FlexBox/FlexBox.stories.tsx b/frontend/src/components/common/FlexBox/FlexBox.stories.tsx
@@ -60,6 +60,14 @@ const meta = {
         '플렉스 컨테이너 안에 있는 아이템의 위치를 조절할 수 있습니다.<br>- direction이 row일 경우: 수평을 기준으로 아이템이 이동합니다.<br>- direction이 column일 경우: 수직을 기준으로 아이템이 이동합니다.',
     },
     alignContent: {
+      options: Object.keys({ ...FLEX_BOX_ITEM_POSITION, none: undefined }),
+      control: {
+        type: 'select',
+      },
+      description:
+        '플렉스 컨테이너 안에 있는 아이템의 위치를 조절할 수 있습니다.<br>- direction이 row일 경우: 수직을 기준으로 아이템이 이동합니다.<br>- direction이 column일 경우: 수평을 기준으로 아이템이 이동합니다.<br> ❗`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
@@ -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')};