MyPage 리팩토링

frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.style.ts

@@ -25,11 +25,37 @@ export const buttonStyling = css({
 });
 
 export const deleteButtonStyling = css({
-  marginTop: Theme.spacer.spacing1,
+  marginTop: Theme.spacer.spacing3,
+  padding: 0,
 
   color: Theme.color.gray600,
+  fontWeight: 'normal',
 
   '&:hover': {
-    color: Theme.color.gray800,
+    backgroundColor: 'transparent !important',
+
+    color: Theme.color.gray700,
+  },
+});
+
+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/myPage/EditUserProfileForm/EditUserProfileForm.tsx

@@ -1,10 +1,12 @@
-import { Button } from 'hang-log-design-system';
+import { Box, Button, Flex, Heading, Modal, Text, useOverlay } from 'hang-log-design-system';
 
 import {
   buttonStyling,
   deleteButtonStyling,
   formStyling,
   imageInputStyling,
+  modalButtonContainerStyling,
+  modalContentStyling,
 } from '@components/myPage/EditUserProfileForm/EditUserProfileForm.style';
 import NicknameInput from '@components/myPage/EditUserProfileForm/NicknameInput/NicknameInput';
 import ProfileImageInput from '@components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput';
@@ -22,37 +24,62 @@ const EditUserProfileForm = ({ initialData }: EditUserProfileForm) => {
   const { userInfo, isNicknameError, updateInputValue, disableNicknameError, handleSubmit } =
     useEditUserProfileForm(initialData);
 
+  const {
+    isOpen: isDeleteModalOpen,
+    close: closeDeleteModal,
+    open: openDeleteModal,
+  } = useOverlay();
+
   const deleteAccountMutation = useDeleteAccountMutation();
 
   const handleAccountDelete = () => {
     deleteAccountMutation.mutate();
   };
 
   return (
-    <form css={formStyling} onSubmit={handleSubmit} noValidate>
-      <ProfileImageInput
-        css={imageInputStyling}
-        initialImageUrl={initialData.imageUrl}
-        updateInputValue={updateInputValue}
-      />
-      <NicknameInput
-        value={userInfo.nickname}
-        isError={isNicknameError}
-        updateInputValue={updateInputValue}
-        disableError={disableNicknameError}
-      />
-      <Button variant="primary" css={buttonStyling}>
-        수정하기
-      </Button>
-      <Button
-        type="button"
-        css={[buttonStyling, deleteButtonStyling]}
-        variant="text"
-        onClick={handleAccountDelete}
-      >
-        탈퇴하기
-      </Button>
-    </form>
+    <>
+      <form css={formStyling} onSubmit={handleSubmit} noValidate>
+        <ProfileImageInput
+          css={imageInputStyling}
+          initialImageUrl={initialData.imageUrl}
+          updateInputValue={updateInputValue}
+        />
+        <NicknameInput
+          value={userInfo.nickname}
+          isError={isNicknameError}
+          updateInputValue={updateInputValue}
+          disableError={disableNicknameError}
+        />
+        <Button variant="primary" css={buttonStyling}>
+          수정하기
+        </Button>
+        <Button
+          type="button"
+          css={[buttonStyling, deleteButtonStyling]}
+          variant="text"
+          size="small"
+          onClick={openDeleteModal}
+        >
+          탈퇴하기
+        </Button>
+      </form>
+      <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={handleAccountDelete}>
+              탈퇴
+            </Button>
+          </Flex>
+        </Box>
+      </Modal>
+    </>
   );
 };