fix: body, footer Flex extends

GDSC-Hongik · Sep 16, 2024 · ab9e60c · ab9e60c
1 parent ad6ef6d
commit ab9e60c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 28 deletions.
diff --git a/packages/wow-ui/src/components/ActionSheet/ActionSheet.stories.tsx b/packages/wow-ui/src/components/ActionSheet/ActionSheet.stories.tsx
@@ -72,16 +72,14 @@ export const Controlled = () => {
     <>
       <Button onClick={onOpen}>Open</Button>
       <ActionSheet isOpen={open} onClose={onClose}>
-        <ActionSheet.Header
-          style={{ paddingBottom: "1rem" }}
-          subText="subtext"
-          text="Text"
-        />
-        <ActionSheet.Body style={{ paddingBottom: "1rem" }}>
+        <ActionSheet.Header subText="subtext" text="Text" />
+        <ActionSheet.Body gap="md" paddingY="md">
+          <Box text="Box" />
           <Box text="Box" />
         </ActionSheet.Body>
-        <ActionSheet.Footer>
-          <Button style={{ minWidth: "100%" }}>Button</Button>
+        <ActionSheet.Footer gap="md">
+          <Button variant="outline">Button</Button>
+          <Button>Button</Button>
         </ActionSheet.Footer>
       </ActionSheet>
     </>

diff --git a/packages/wow-ui/src/components/ActionSheet/ActionSheetBody.tsx b/packages/wow-ui/src/components/ActionSheet/ActionSheetBody.tsx
@@ -1,25 +1,22 @@
 "use client";
-
-import { styled } from "@styled-system/jsx";
-import type { CSSProperties, PropsWithChildren } from "react";
+import type { FlexProps } from "@styled-system/jsx";
+import { Flex } from "@styled-system/jsx";
+import type { ReactNode } from "react";
 
 /**
  * @description ActionSheet의 바디 요소를 나타내는 ActionSheetBody 컴포넌트입니다.
  *
  * @param {string} children 액션시트의 바디 요소.
- * @param {CSSProperties} [style] 액션시트 바디의 커스텀 스타일.
- * @param {string} [className] 액션시트 바디에 전달하는 커스텀 클래스.
  */
-export interface ActionSheetBodyProps extends PropsWithChildren {
-  style?: CSSProperties;
-  className?: string;
+export interface ActionSheetBodyProps extends FlexProps {
+  children: ReactNode;
 }
 
 const ActionSheetBody = ({ children, ...rest }: ActionSheetBodyProps) => {
   return (
-    <styled.div width="100%" {...rest}>
+    <Flex direction="column" width="100%" {...rest}>
       {children}
-    </styled.div>
+    </Flex>
   );
 };
 

diff --git a/packages/wow-ui/src/components/ActionSheet/ActionSheetFooter.tsx b/packages/wow-ui/src/components/ActionSheet/ActionSheetFooter.tsx
@@ -1,25 +1,28 @@
 "use client";
 
-import { styled } from "@styled-system/jsx";
-import type { CSSProperties, PropsWithChildren } from "react";
+import type { FlexProps } from "@styled-system/jsx";
+import { Flex } from "@styled-system/jsx";
+import type { ReactElement } from "react";
+
+import type Button from "@/components/Button";
+import type TextButton from "@/components/TextButton";
 
 /**
  * @description ActionSheet의 푸터 요소를 나타내는 ActionSheetFooter 컴포넌트입니다.
  *
- * @param {children} text 액션시트의 푸터에 들어갈 버튼.
- * @param {CSSProperties} [style] 액션시트 푸터의 커스텀 스타일.
- * @param {string} [className] 액션시트 푸터에 전달하는 커스텀 클래스.
+ * @param {children} children 액션시트의 푸터에 들어갈 버튼.
  */
-export interface ActionSheetFooterProps extends PropsWithChildren {
-  style?: CSSProperties;
-  className?: string;
+export interface ActionSheetFooterProps extends FlexProps {
+  children:
+    | ReactElement<typeof Button | typeof TextButton>
+    | ReactElement<typeof Button | typeof TextButton>[];
 }
 
 const ActionSheetFooter = ({ children, ...rest }: ActionSheetFooterProps) => {
   return (
-    <styled.div width="100%" {...rest}>
+    <Flex width="100%" {...rest}>
       {children}
-    </styled.div>
+    </Flex>
   );
 };