refactor(ConfirmDeleteModal): Modal 합성 컴포넌트의 하위 컴포넌트 사용하도록 변경

woowacourse-teams · Oct 17, 2024 · 21ca869 · 21ca869
1 parent ce63a7a
commit 21ca869
Showing 1 changed file with 13 additions and 15 deletions.
diff --git a/frontend/src/pages/MyTemplatesPage/components/ConfirmDeleteModal/ConfirmDeleteModal.tsx b/frontend/src/pages/MyTemplatesPage/components/ConfirmDeleteModal/ConfirmDeleteModal.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Modal, Text } from '@/components';
+import { Button, Modal, Text } from '@/components';
 
 interface Props {
   isDeleteModalOpen: boolean;
@@ -8,20 +8,18 @@ interface Props {
 
 const ConfirmDeleteModal = ({ isDeleteModalOpen, toggleDeleteModal, handleDelete }: Props) => (
   <Modal isOpen={isDeleteModalOpen} toggleModal={toggleDeleteModal} size='xsmall'>
-    <Flex direction='column' justify='space-between' align='center' margin='1rem 0 0 0' gap='2rem'>
-      <Flex direction='column' justify='center' align='center' gap='0.75rem'>
-        <Text.Large color='black' weight='bold'>
-          정말 삭제하시겠습니까?
-        </Text.Large>
-        <Text.Medium color='black'>삭제된 템플릿은 복구할 수 없습니다.</Text.Medium>
-      </Flex>
-      <Flex justify='center' align='center' gap='0.5rem'>
-        <Button variant='outlined' onClick={toggleDeleteModal}>
-          취소
-        </Button>
-        <Button onClick={handleDelete}>삭제</Button>
-      </Flex>
-    </Flex>
+    <Modal.Body>
+      <Text.Large color='black' weight='bold'>
+        정말 삭제하시겠습니까?
+      </Text.Large>
+      <Text.Medium color='black'>삭제된 템플릿은 복구할 수 없습니다.</Text.Medium>
+    </Modal.Body>
+    <Modal.Footer>
+      <Button variant='outlined' onClick={toggleDeleteModal}>
+        취소
+      </Button>
+      <Button onClick={handleDelete}>삭제</Button>
+    </Modal.Footer>
   </Modal>
 );