삭제 컨펌 경고 모달 추가

frontend/src/components/common/TripInformation/TripButtons/TripButtons.style.ts

@@ -2,38 +2,6 @@ import { css } from '@emotion/react';
 
 import { Theme } from 'hang-log-design-system';
 
-export const moreButtonStyling = css({
-  border: 'none',
-  outline: 0,
-
-  backgroundColor: 'transparent',
-
-  cursor: 'pointer',
-
-  '& svg': {
-    width: '20px',
-    height: '20px',
-  },
-});
-
-export const moreMenuStyling = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-
-  marginLeft: Theme.spacer.spacing3,
-});
-
-export const moreMenuListStyling = css({
-  transform: 'translateY(64px)',
-
-  '& > li': {
-    padding: `${Theme.spacer.spacing2} ${Theme.spacer.spacing3}`,
-
-    color: Theme.color.gray800,
-  },
-});
-
 export const svgButtonStyling = css({
   width: '20px',
   height: '20px',
@@ -53,3 +21,25 @@ export const editIconStyling = css({
     fill: Theme.color.white,
   },
 });
+
+export const modalContentStyling = css({
+  width: '350px',
+
+  '& h6': {
+    marginBottom: Theme.spacer.spacing3,
+
+    color: Theme.color.red300,
+  },
+});
+
+export const modalButtonContainerStyling = css({
+  gap: Theme.spacer.spacing1,
+  alignItems: 'stretch',
+
+  width: '100%',
+  marginTop: Theme.spacer.spacing5,
+
+  '& > *': {
+    width: '100%',
+  },
+});

frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx

@@ -1,10 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 
-import { Button } from 'hang-log-design-system';
+import { Box, Button, Flex, Heading, Modal, Text, useOverlay } from 'hang-log-design-system';
 
 import {
   binIconStyling,
   editIconStyling,
+  modalButtonContainerStyling,
+  modalContentStyling,
   svgButtonStyling,
 } from '@components/common/TripInformation/TripButtons/TripButtons.style';
 import TripShareButton from '@components/common/TripInformation/TripShareButton/TripShareButton';
@@ -27,6 +29,12 @@ export const TripButtons = ({ tripId, sharedCode }: TripButtonsProps) => {
   const navigate = useNavigate();
   const deleteTripMutation = useDeleteTripMutation();
 
+  const {
+    isOpen: isDeleteModalOpen,
+    close: closeDeleteModal,
+    open: openDeleteModal,
+  } = useOverlay();
+
   const goToEditPage = () => {
     navigate(PATH.EDIT_TRIP(tripId));
   };
@@ -51,7 +59,21 @@ export const TripButtons = ({ tripId, sharedCode }: TripButtonsProps) => {
       </Button>
       <TripShareButton tripId={tripId} sharedCode={sharedCode} />
       <EditIcon css={[svgButtonStyling, editIconStyling]} onClick={goToEditPage} />
-      <BinIcon css={[svgButtonStyling, binIconStyling]} onClick={handleDeleteButtonClick} />
+      <BinIcon css={[svgButtonStyling, binIconStyling]} onClick={openDeleteModal} />
+      <Modal isOpen={isDeleteModalOpen} closeModal={closeDeleteModal}>
+        <Box css={modalContentStyling}>
+          <Heading size="xSmall">여행 아이템을 삭제하겠어요?</Heading>
+          <Text>여행 아이템을 한번 삭제하면 다시 복구하기는 힘들어요.</Text>
+          <Flex css={modalButtonContainerStyling}>
+            <Button variant="default" onClick={closeDeleteModal}>
+              취소
+            </Button>
+            <Button variant="danger" onClick={handleDeleteButtonClick}>
+              삭제
+            </Button>
+          </Flex>
+        </Box>
+      </Modal>
     </>
   );
 };

frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts

@@ -58,3 +58,25 @@ export const editIconStyling = css({
     fill: Theme.color.blue600,
   },
 });
+
+export const modalContentStyling = css({
+  width: '350px',
+
+  '& h6': {
+    marginBottom: Theme.spacer.spacing3,
+
+    color: Theme.color.red300,
+  },
+});
+
+export const modalButtonContainerStyling = css({
+  gap: Theme.spacer.spacing1,
+  alignItems: 'stretch',
+
+  width: '100%',
+  marginTop: Theme.spacer.spacing5,
+
+  '& > *': {
+    width: '100%',
+  },
+});

frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx

@@ -1,9 +1,11 @@
-import { Flex, useOverlay } from 'hang-log-design-system';
+import { Box, Button, Flex, Heading, Modal, Text, useOverlay } from 'hang-log-design-system';
 
 import {
   binIconStyling,
   editIconStyling,
   getEditMenuStyling,
+  modalButtonContainerStyling,
+  modalContentStyling,
 } from '@components/common/TripItem/EditMenu/EditMenu.style';
 import TripItemAddModal from '@components/trip/TripItemAddModal/TripItemAddModal';
 
@@ -25,6 +27,11 @@ const EditMenu = ({ tripId, dayLogId, hasImage, imageHeight, ...information }: E
   const deleteTripItemMutation = useDeleteTripItemMutation();
 
   const { isOpen: isEditModalOpen, open: openEditModal, close: closeEditModal } = useOverlay();
+  const {
+    isOpen: isDeleteModalOpen,
+    close: closeDeleteModal,
+    open: openDeleteModal,
+  } = useOverlay();
 
   const handleTripItemDelete = () => {
     deleteTripItemMutation.mutate({ tripId, itemId: information.id });
@@ -37,12 +44,7 @@ const EditMenu = ({ tripId, dayLogId, hasImage, imageHeight, ...information }: E
         css={getEditMenuStyling(hasImage, imageHeight)}
       >
         <EditIcon css={editIconStyling} role="button" aria-label="수정" onClick={openEditModal} />
-        <BinIcon
-          css={binIconStyling}
-          role="button"
-          aria-label="삭제"
-          onClick={handleTripItemDelete}
-        />
+        <BinIcon css={binIconStyling} role="button" aria-label="삭제" onClick={openDeleteModal} />
       </Flex>
       {isEditModalOpen && (
         <TripItemAddModal
@@ -69,6 +71,20 @@ const EditMenu = ({ tripId, dayLogId, hasImage, imageHeight, ...information }: E
           }}
         />
       )}
+      <Modal isOpen={isDeleteModalOpen} closeModal={closeDeleteModal}>
+        <Box css={modalContentStyling}>
+          <Heading size="xSmall">여행 기록을 삭제하겠어요?</Heading>
+          <Text>여행 기록을 한번 삭제하면 다시 복구하기는 힘들어요.</Text>
+          <Flex css={modalButtonContainerStyling}>
+            <Button variant="default" onClick={closeDeleteModal}>
+              취소
+            </Button>
+            <Button variant="danger" onClick={handleTripItemDelete}>
+              삭제
+            </Button>
+          </Flex>
+        </Box>
+      </Modal>
     </>
   );
 };