From 1650eb879147dade32f18dc1e4a4d815f7a9d623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=96=91=ED=98=9C=EC=A7=84?= <hjyang@lunit.io>
Date: Mon, 22 Apr 2024 16:36:44 +0900
Subject: [PATCH] feat: change isModal to nonModal

---
 .../src/components/Dialog/Dialog.styled.ts    |  6 ++---
 .../src/components/Dialog/Dialog.tsx          | 24 +++++++++----------
 .../components/Dialog/Dialog.stories.tsx      |  2 +-
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/design-system/src/components/Dialog/Dialog.styled.ts b/packages/design-system/src/components/Dialog/Dialog.styled.ts
index 4f7e15c0..6f4d5e75 100644
--- a/packages/design-system/src/components/Dialog/Dialog.styled.ts
+++ b/packages/design-system/src/components/Dialog/Dialog.styled.ts
@@ -7,7 +7,7 @@ export interface DialogElementStyle {
   [key: string]: CSSObject;
 }
 
-export type DialogStyle = Pick<DialogTypeBase, "isSmall" | "type" | "isModal">;
+export type DialogStyle = Pick<DialogTypeBase, "isSmall" | "type" | "nonModal">;
 
 const DIALOG_WRAPPER_STYLE: DialogElementStyle = {
   small: {
@@ -88,7 +88,7 @@ export const StyledBackdrop = styled("div")({
 });
 
 export const StyledDialog = styled("div")<DialogStyle>(
-  ({ theme, isSmall, isModal, type }) => ({
+  ({ theme, isSmall, nonModal, type }) => ({
     zIndex: 1001,
     maxHeight: "80vh",
     display: "flex",
@@ -99,7 +99,7 @@ export const StyledDialog = styled("div")<DialogStyle>(
     color: theme.palette.lunit_token.core.text_normal,
 
     ...DIALOG_WRAPPER_STYLE[isSmall ? "small" : "medium"],
-    ...DIALOG_WRAPPER_STYLE[isModal ? "modal" : "nonModal"],
+    ...DIALOG_WRAPPER_STYLE[nonModal ? "nonModal" : "modal"],
 
     "& #dialog-title": {
       ...DIALOG_TITLE_STYLE[isSmall ? "small" : "medium"],
diff --git a/packages/design-system/src/components/Dialog/Dialog.tsx b/packages/design-system/src/components/Dialog/Dialog.tsx
index 58d5d2a2..150f4523 100644
--- a/packages/design-system/src/components/Dialog/Dialog.tsx
+++ b/packages/design-system/src/components/Dialog/Dialog.tsx
@@ -22,7 +22,7 @@ export interface DialogBase {
   titleIcon?: React.ReactNode;
   titleVariant?: TypographyProps["variant"];
   children: React.ReactNode;
-  isModal?: boolean; // default true
+  nonModal?: boolean; // default false
   isSmall?: boolean; // default true
   sx?: SxProps;
   style?: React.CSSProperties;
@@ -49,18 +49,18 @@ export interface ActionDialogType extends DialogTypeBase {
 }
 
 export interface PassiveModalProps extends PassiveDialogType {
-  isModal?: true;
+  NonModal?: false;
 }
 export interface ActionModalProps extends ActionDialogType {
-  isModal?: true;
+  NonModal?: false;
 }
 export type ModalProps = PassiveModalProps | ActionModalProps;
 
 export interface PassiveNonModalProps extends PassiveDialogType {
-  isModal?: false;
+  NonModal?: true;
 }
 export interface ActionNonModalProps extends ActionDialogType {
-  isModal?: false;
+  NonModal?: true;
   enableBackdropClose?: false;
 }
 export type NonModalProps = PassiveNonModalProps | ActionNonModalProps;
@@ -68,11 +68,11 @@ export type NonModalProps = PassiveNonModalProps | ActionNonModalProps;
 export type DialogProps = ModalProps | NonModalProps;
 
 function Dialog(props: DialogProps) {
-  const { isOpen, type, isModal = true, onClose } = props;
+  const { isOpen, type, nonModal = false, onClose } = props;
 
-  const isActionModal = type === "action" && isModal;
-  const isPassiveModal = type === "passive" && isModal;
-  const isActionNonModal = type === "action" && !isModal;
+  const isActionModal = type === "action" && !nonModal;
+  const isPassiveModal = type === "passive" && !nonModal;
+  const isActionNonModal = type === "action" && nonModal;
 
   function handleBackdropClose(e: React.MouseEvent<HTMLDivElement>) {
     const isClosable =
@@ -111,7 +111,7 @@ function Dialog(props: DialogProps) {
 
   if (!isOpen) return null;
   return createPortal(
-    !isModal ? (
+    nonModal ? (
       <DialogBase dialogProps={{ ...props }} />
     ) : (
       <StyledBackdrop
@@ -128,7 +128,7 @@ function Dialog(props: DialogProps) {
 
 function DialogBase({ dialogProps }: { dialogProps: DialogTypeBase }) {
   const {
-    isModal = true,
+    nonModal = false,
     onClose,
     title,
     titleIcon,
@@ -147,7 +147,7 @@ function DialogBase({ dialogProps }: { dialogProps: DialogTypeBase }) {
       role="dialog"
       aria-labelledby="dialog-title"
       isSmall={isSmall}
-      isModal={isModal}
+      nonModal={nonModal}
       type={type}
       sx={{
         ...sx,
diff --git a/packages/design-system/src/stories/components/Dialog/Dialog.stories.tsx b/packages/design-system/src/stories/components/Dialog/Dialog.stories.tsx
index 5ea2622c..e6cd5e16 100644
--- a/packages/design-system/src/stories/components/Dialog/Dialog.stories.tsx
+++ b/packages/design-system/src/stories/components/Dialog/Dialog.stories.tsx
@@ -120,7 +120,7 @@ export const NonModal: Story = {
         <Dialog
           className={classNameFromGlobal}
           isOpen={isOpen}
-          isModal={false}
+          nonModal
           type="action"
           isSmall
           onClose={close}