From 5ef3b9a6fbed88803413602da023dc151a807eef Mon Sep 17 00:00:00 2001
From: wukddang <43228743+funkyblues@users.noreply.github.com>
Date: Fri, 10 Nov 2023 19:42:58 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20+=20=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20-=20=EB=AA=A8=EB=8B=AC=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=9D=98=20=ED=8F=B0=ED=8A=B8=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Buttons/NormalButton/NormalButton.tsx     |  0
 src/components/common/Modal/index.tsx         | 70 ++++++++++++-------
 2 files changed, 43 insertions(+), 27 deletions(-)
 delete mode 100644 src/components/common/Buttons/NormalButton/NormalButton.tsx

diff --git a/src/components/common/Buttons/NormalButton/NormalButton.tsx b/src/components/common/Buttons/NormalButton/NormalButton.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx
index cb0d9d26..6f7b47c2 100644
--- a/src/components/common/Modal/index.tsx
+++ b/src/components/common/Modal/index.tsx
@@ -66,14 +66,14 @@ const Modal = () => {
   return (
     <AnimatePresence>
       {modalState ? (
-        <StyleModalWrapper
+        <StyledModalWrapper
           variants={wrapperVariants}
           initial={'hidden'}
           animate={'visible'}
           exit={'exit'}
           onClick={handleCloseModal}
         >
-          <StyleModal
+          <StyledModal
             variants={modalVariants}
             initial={'hidden'}
             animate={'visible'}
@@ -82,24 +82,24 @@ const Modal = () => {
             onClick={handleModalClick}
           >
             {type == 'confirm' ? (
-              <StyleIcon src={ExclamationIcon} />
+              <StyledIcon src={ExclamationIcon} />
             ) : (
-              <StyleIcon src={WarningIcon} />
+              <StyledIcon src={WarningIcon} />
             )}
 
-            <StyleMainText
+            <StyledMainText
               font={'Body_20'}
               fontWeight={900}
               letterSpacing={-2}
               subTrue={subText == undefined ? false : true}
             >
               {mainText}
-            </StyleMainText>
-            <StyleSubText font={'Body_12'} fontWeight={900} letterSpacing={-1} type={type}>
+            </StyledMainText>
+            <StyledSubText font={'Body_12'} fontWeight={900} letterSpacing={-1} type={type}>
               {subText}
-            </StyleSubText>
+            </StyledSubText>
             {type === 'confirm' ? (
-              <StyleButtonWrapper>
+              <StyledButtonWrapper>
                 <NormalButton
                   normalButtonType={'modal-accept'}
                   style={{ margin: 10 }}
@@ -114,27 +114,27 @@ const Modal = () => {
                 >
                   {'취소'}
                 </NormalButton>
-              </StyleButtonWrapper>
+              </StyledButtonWrapper>
             ) : (
-              <StyleButtonWrapper>
-                <NormalButton
+              <StyledButtonWrapper>
+                <StyledWarningAcceptButton
                   normalButtonType={'warning-accept'}
                   style={{ margin: 10 }}
                   onClick={OkAndClose}
                 >
                   {acceptText ? acceptText : '예, 나가겠습니다.'}
-                </NormalButton>
-                <NormalButton
+                </StyledWarningAcceptButton>
+                <StyledWarningAcceptButton
                   normalButtonType={'warning-deny'}
                   style={{ margin: 10 }}
                   onClick={handleCloseModal}
                 >
                   {cancelText ? cancelText : '아니오, 돌아가겠습니다.'}
-                </NormalButton>
-              </StyleButtonWrapper>
+                </StyledWarningAcceptButton>
+              </StyledButtonWrapper>
             )}
-          </StyleModal>
-        </StyleModalWrapper>
+          </StyledModal>
+        </StyledModalWrapper>
       ) : (
         ''
       )}
@@ -142,13 +142,13 @@ const Modal = () => {
   )
 }
 
-const StyleModalWrapper = styled(motion.div)`
+const StyledModalWrapper = styled(motion.div)`
   z-index: 999;
   display: flex;
   position: absolute;
   justify-content: center;
   align-items: center;
-  width: 414px;
+  max-width: 414px;
   background-color: rgba(0, 0, 0, 0.4);
   border-radius: 10px;
   top: 0;
@@ -156,8 +156,8 @@ const StyleModalWrapper = styled(motion.div)`
   right: 0;
   bottom: 0;
 `
-const StyleModal = styled(motion.div)<{ type: string }>`
-  width: 344px;
+const StyledModal = styled(motion.div)<{ type: string }>`
+  max-width: 344px;
   height: ${({ type }) => (type == 'warn' ? '195.6px' : '246px')};
   z-index: 1;
   position: absolute;
@@ -165,24 +165,40 @@ const StyleModal = styled(motion.div)<{ type: string }>`
   border-radius: 10px;
   box-shadow: 3px 3px 3px ${palette.GRAY400};
   text-align: center;
+
+  @media (max-width: 280px) {
+    max-width: 260px;
+  }
 `
 
-const StyleButtonWrapper = styled.span`
+const StyledIcon = styled.img`
+  margin: 22px;
+`
+
+const StyledButtonWrapper = styled.span`
   justify-content: center;
   margin: 10px;
   display: flex;
 `
-const StyleMainText = styled(Text)<{ subTrue: boolean }>`
+const StyledMainText = styled(Text)<{ subTrue: boolean }>`
   color: ${palette.BLACK};
   text-align: center;
   margin-top: ${({ subTrue }) => (subTrue ? '' : '10px')};
   margin-bottom: ${({ subTrue }) => (subTrue ? '20px' : '30px')};
 `
-const StyleSubText = styled(Text)<{ type: string }>`
+const StyledSubText = styled(Text)<{ type: string }>`
   color: ${palette.GRAY500};
   text-align: center;
+
+  @media (max-width: 280px) {
+    font-size: 10.5px;
+  }
 `
-const StyleIcon = styled.img`
-  margin: 22px;
+
+const StyledWarningAcceptButton = styled(NormalButton)`
+  @media (max-width: 280px) {
+    font-size: 10px;
+  }
 `
+
 export default Modal