fix: title prop 삭제

GDSC-Hongik · Aug 16, 2024 · 262cc63 · 262cc63
1 parent ae98ec8
commit 262cc63
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/ui/src/components/Modal/Modal.stories.tsx b/packages/ui/src/components/Modal/Modal.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useModalState } from "src/hooks";
 
+import Text from "../Text";
 import Modal from ".";
 
 const meta = {
@@ -19,7 +20,11 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: "상세 정보가 등록되었어요.",
+    children: (
+      <Text as="h1" typo="h1">
+        상세 정보가 등록되었어요.
+      </Text>
+    ),
     closeModal: () => {
       console.log("모달 닫기");
     },
@@ -33,7 +38,11 @@ export const StateModal = () => {
     <>
       <button onClick={openModal}>모달 열기</button>
       {isOpen && (
-        <Modal closeModal={closeModal} title="상세 정보가 등록되었어요." />
+        <Modal closeModal={closeModal}>
+          <Text as="h1" typo="h1">
+            상세 정보가 등록되었어요.
+          </Text>
+        </Modal>
       )}
     </>
   );

diff --git a/packages/ui/src/components/Modal/index.tsx b/packages/ui/src/components/Modal/index.tsx
@@ -6,19 +6,17 @@ import type { MouseEventHandler, ReactNode } from "react";
 import { useCallback, useRef } from "react";
 
 export interface ModalProps {
-  title: ReactNode;
   closeModal: () => void;
   children?: ReactNode;
 }
 
 /**
  * @description 모달 컴포넌트입니다.
  *
- * @param {ReactNode} title - 모달 컴포넌트의 제목.
  * @param {() => void} closeModal - 모달 컴포넌트를 닫기 위한 함수.
  * @param {ReactNode} [children] - 모달 컴포넌트에 들어갈 자식 요소.
  */
-const Modal = ({ title, children, closeModal }: ModalProps) => {
+const Modal = ({ children, closeModal }: ModalProps) => {
   const overlay = useRef<HTMLDivElement>(null);
 
   const onClick: MouseEventHandler = useCallback(
@@ -42,9 +40,6 @@ const Modal = ({ title, children, closeModal }: ModalProps) => {
         <button className={closeButtonStyle} onClick={closeModal}>
           X
         </button>
-        <styled.h1 className={css({ textStyle: "h1", textAlign: "center" })}>
-          {title}
-        </styled.h1>
         {children}
       </styled.dialog>
     </Flex>
@@ -56,10 +51,8 @@ const dialogStyle = css({
   height: "28.125rem",
 
   display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
   alignItems: "center",
-  gap: "1.75rem",
+  justifyContent: "center",
 
   position: "relative",