From bf147f5ad22b86488ec93839335fe6385e1a0c4a Mon Sep 17 00:00:00 2001
From: SUPINKIM <qorgkr26@sookmyung.ac.kr>
Date: Sun, 14 Apr 2024 22:22:54 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20modal=20footer(button)=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/src/App.tsx                     |  1 -
 packages/ui/src/components/button/styles.ts | 18 +++++-----
 packages/ui/src/components/button/types.ts  |  1 +
 packages/ui/src/components/modal/index.tsx  | 38 ++++++++++++++++++---
 packages/ui/src/components/modal/styles.ts  | 12 +++++++
 packages/ui/src/components/modal/types.ts   |  4 ++-
 6 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 4ce1ca3..81a2ebc 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -34,7 +34,6 @@ function App() {
                     button3
                 </Button.text>
             </div>
-            {/* <Drawer /> */}
         </>
     );
 }
diff --git a/packages/ui/src/components/button/styles.ts b/packages/ui/src/components/button/styles.ts
index 873ac20..de67f75 100644
--- a/packages/ui/src/components/button/styles.ts
+++ b/packages/ui/src/components/button/styles.ts
@@ -7,19 +7,16 @@ const ButtonSizeMapper = {
     [ButtonSize.SMALL]: css({
         padding: '8px 6px',
         height: '24px',
-        width: '60px',
         fontSize: '12px'
     }),
     [ButtonSize.MEDIUM]: css({
         padding: '10px 12px',
         height: '32px',
-        width: '80px',
         fontSize: '14px'
     }),
     [ButtonSize.LARGE]: css({
         padding: '16px 12px',
-        height: '36px',
-        width: '160px',
+        height: '40px',
         fontSize: '16px'
     })
 };
@@ -46,7 +43,8 @@ export const FilledButton = styled.button<IButtonProps>(
         alignItems: 'center',
         color: ColorPaletteMapper[ColorPalette.WHITE][100],
         backgroundColor: ColorPaletteMapper[props.color][60],
-        cursor: 'pointer'
+        cursor: 'pointer',
+        width: props.width ? `${props.width}px` : '100px'
     }),
     props => ({ ...ButtonSizeMapper[props.size] }),
     props => ({ ...ButtonShapeMapper[props.shape] }),
@@ -67,7 +65,8 @@ export const OutlinedButton = styled.button<IButtonProps>(
         alignItems: 'center',
         cursor: 'pointer',
         backgroundColor: ColorPaletteMapper[ColorPalette.WHITE][100],
-        color: ColorPaletteMapper[props.color][60]
+        color: ColorPaletteMapper[props.color][60],
+        width: props.width ? `${props.width}px` : '100px'
     }),
     props => ({ ...ButtonSizeMapper[props.size] }),
     props => ({ ...ButtonShapeMapper[props.shape] }),
@@ -80,11 +79,12 @@ export const OutlinedButton = styled.button<IButtonProps>(
 );
 
 export const TextButton = styled.button<IButtonProps>(
-    {
+    props => ({
         all: 'unset',
         cursor: 'pointer',
-        fontWeight: 600
-    },
+        fontWeight: 600,
+        width: props.width ? `${props.width}px` : '100px'
+    }),
     props => ButtonSizeMapper[props.size],
     props => ({
         color: ColorPaletteMapper[props.color][60],
diff --git a/packages/ui/src/components/button/types.ts b/packages/ui/src/components/button/types.ts
index e0fcb6f..60979f0 100644
--- a/packages/ui/src/components/button/types.ts
+++ b/packages/ui/src/components/button/types.ts
@@ -21,5 +21,6 @@ export interface IButtonProps {
     color: ColorPalette;
     size: ButtonSize;
     shape: ButtonShape;
+    width?: number;
     onClick?: () => void;
 }
diff --git a/packages/ui/src/components/modal/index.tsx b/packages/ui/src/components/modal/index.tsx
index dbfd9ab..ea69f78 100644
--- a/packages/ui/src/components/modal/index.tsx
+++ b/packages/ui/src/components/modal/index.tsx
@@ -2,16 +2,28 @@ import { MouseEvent } from 'react';
 import { XCircle } from '@emotion-icons/bootstrap';
 import { css } from '@emotion/react';
 import { ColorPalette } from '../color';
-import { ModalBackground, ModalContainer, ModalHeader } from './styles';
+import Button from '../button';
+import { ButtonShape, ButtonSize } from '../button/types';
+import {
+    ModalBackground,
+    ModalContainer,
+    ModalFooter,
+    ModalHeader
+} from './styles';
 import { TModal } from './types';
 
-const Modal: TModal = ({ children, closeHandler }) => {
+const Modal: TModal = ({
+    children,
+    onCloseModal,
+    onClickCancel,
+    onClickConfirm
+}) => {
     const stopPropagation = (event: MouseEvent<HTMLDivElement>) => {
         event.stopPropagation();
     };
 
     return (
-        <ModalBackground onClick={closeHandler}>
+        <ModalBackground onClick={onCloseModal}>
             <ModalContainer onClick={stopPropagation}>
                 <ModalHeader>
                     <XCircle
@@ -21,10 +33,28 @@ const Modal: TModal = ({ children, closeHandler }) => {
                             cursor: pointer;
                             color: ${ColorPalette.GRAY};
                         `}
-                        onClick={closeHandler}
+                        onClick={onCloseModal}
                     />
                 </ModalHeader>
                 {children}
+                <ModalFooter>
+                    <Button.outlined
+                        width={182}
+                        shape={ButtonShape.RECTANGLE}
+                        color={ColorPalette.PINK}
+                        size={ButtonSize.MEDIUM}
+                        onClick={onClickCancel}>
+                        취소
+                    </Button.outlined>
+                    <Button.filled
+                        width={182}
+                        shape={ButtonShape.RECTANGLE}
+                        color={ColorPalette.PINK}
+                        size={ButtonSize.MEDIUM}
+                        onClick={onClickConfirm}>
+                        확인
+                    </Button.filled>
+                </ModalFooter>
             </ModalContainer>
         </ModalBackground>
     );
diff --git a/packages/ui/src/components/modal/styles.ts b/packages/ui/src/components/modal/styles.ts
index 180b95a..972c4d7 100644
--- a/packages/ui/src/components/modal/styles.ts
+++ b/packages/ui/src/components/modal/styles.ts
@@ -13,6 +13,7 @@ export const ModalBackground = styled.div`
 `;
 
 export const ModalContainer = styled.div`
+    position: relative;
     background-color: ${ColorPaletteMapper[ColorPalette.WHITE][100]};
     width: 100%;
     height: 100%;
@@ -32,3 +33,14 @@ export const ModalHeader = styled.div`
     justify-content: flex-end;
     align-items: center;
 `;
+
+export const ModalFooter = styled.div`
+    position: absolute;
+    bottom: 12px;
+    height: 60px;
+    padding: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 12px;
+`;
diff --git a/packages/ui/src/components/modal/types.ts b/packages/ui/src/components/modal/types.ts
index fc1de97..1292e9c 100644
--- a/packages/ui/src/components/modal/types.ts
+++ b/packages/ui/src/components/modal/types.ts
@@ -2,7 +2,9 @@ import { FC, ReactNode } from 'react';
 
 export interface IModalProps {
     children: ReactNode;
-    closeHandler: () => void;
+    onCloseModal: () => void;
+    onClickConfirm: () => void;
+    onClickCancel: () => void;
 }
 
 export type TModal = FC<IModalProps>;