From b13fc5bd16b60bc2f7954666666ce6bd2bf07ff3 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Thu, 9 Nov 2023 15:44:30 +0900
Subject: [PATCH] feat: Add custom dialog component

---
 src/components/CloseButton/index.jsx       | 18 +++++++++
 src/components/CustomDialog/Transition.jsx | 14 +++++++
 src/components/CustomDialog/index.jsx      | 46 ++++++++++++++++++++++
 src/styles/CloseButton.styles.js           | 20 ++++++++++
 src/styles/CustomDialog.styles.js          | 17 ++++++++
 5 files changed, 115 insertions(+)
 create mode 100644 src/components/CloseButton/index.jsx
 create mode 100644 src/components/CustomDialog/Transition.jsx
 create mode 100644 src/components/CustomDialog/index.jsx
 create mode 100644 src/styles/CloseButton.styles.js
 create mode 100644 src/styles/CustomDialog.styles.js

diff --git a/src/components/CloseButton/index.jsx b/src/components/CloseButton/index.jsx
new file mode 100644
index 0000000..9ed5c0a
--- /dev/null
+++ b/src/components/CloseButton/index.jsx
@@ -0,0 +1,18 @@
+import * as S from '../../styles/CloseButton.styles';
+
+function CloseButton({ onClick }) {
+  return (
+    <S.CloseButton onClick={onClick}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="24"
+        viewBox="0 -960 960 960"
+        width="24"
+      >
+        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+      </svg>
+    </S.CloseButton>
+  );
+}
+
+export default CloseButton;
diff --git a/src/components/CustomDialog/Transition.jsx b/src/components/CustomDialog/Transition.jsx
new file mode 100644
index 0000000..7ea4baf
--- /dev/null
+++ b/src/components/CustomDialog/Transition.jsx
@@ -0,0 +1,14 @@
+import { Slide } from '@mui/material';
+import React from 'react';
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return (
+    <Slide
+      direction="up"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export default Transition;
diff --git a/src/components/CustomDialog/index.jsx b/src/components/CustomDialog/index.jsx
new file mode 100644
index 0000000..5cfc498
--- /dev/null
+++ b/src/components/CustomDialog/index.jsx
@@ -0,0 +1,46 @@
+import * as S from '../../styles/CustomDialog.styles';
+import { Dialog } from '@mui/material';
+import Transition from './transition';
+import CloseButton from '../CloseButton';
+
+function CustomDialog({
+  children,
+  open,
+  onClose,
+  hasCloseButton = true,
+  title,
+}) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Transition}
+      PaperProps={{
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '24px',
+          padding: '24px',
+          borderRadius: '20px',
+        },
+      }}
+      slotProps={{
+        backdrop: {
+          style: {
+            backdropFilter: 'blur(5px)',
+          },
+        },
+      }}
+    >
+      {hasCloseButton && (
+        <S.DialogHeader>
+          <S.DialogTitle>{title}</S.DialogTitle>
+          <CloseButton onClick={onClose} />
+        </S.DialogHeader>
+      )}
+      {children}
+    </Dialog>
+  );
+}
+
+export default CustomDialog;
diff --git a/src/styles/CloseButton.styles.js b/src/styles/CloseButton.styles.js
new file mode 100644
index 0000000..e861288
--- /dev/null
+++ b/src/styles/CloseButton.styles.js
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const CloseButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+
+  & > svg {
+    width: 24px;
+    height: 24px;
+    fill: ${({ theme }) => theme.colors.gray700};
+  }
+`;
diff --git a/src/styles/CustomDialog.styles.js b/src/styles/CustomDialog.styles.js
new file mode 100644
index 0000000..962906f
--- /dev/null
+++ b/src/styles/CustomDialog.styles.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const DialogHeader = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const DialogTitle = styled.h2`
+  font-size: 18px;
+  font-weight: 700;
+  padding: 0 8px;
+  margin: 0;
+  user-select: none;
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.colors.gray900};
+`;