From bf3f70d633936efa926312b0925a731ca088b7d6 Mon Sep 17 00:00:00 2001
From: "misung.dev" <misung.dev@gmail.com>
Date: Wed, 4 Sep 2024 22:17:14 +0900
Subject: [PATCH] =?UTF-8?q?#227=20design:=20canvas=20=EB=9D=BC=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EB=B0=8F=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AttendanceSignPage.style.jsx              | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/pages/AttendancePage/AttendanceSignPage.style.jsx b/src/pages/AttendancePage/AttendanceSignPage.style.jsx
index eac9e75..83d7400 100644
--- a/src/pages/AttendancePage/AttendanceSignPage.style.jsx
+++ b/src/pages/AttendancePage/AttendanceSignPage.style.jsx
@@ -99,10 +99,11 @@ export const CanvasPlaceholder = styled.p`
 `;
 
 export const SignatureCanvasContainer = styled.div`
-  width: 900px;
+  /* width: 100%; */
   /* max-width: 900px; */
   height: auto;
-  aspect-ratio: 900 / 400;
+  aspect-ratio: 900 / 300;
+  flex-grow: 1;
 
   canvas {
     width: 100%;
@@ -118,13 +119,13 @@ export const SignatureCanvasContainer = styled.div`
 
 export const ButtonContainer = styled.div`
   display: flex;
+  justify-content: center;
+  width: 100%;
   gap: 20px;
 
   @media (max-width: ${BREAKPOINTS[0]}px) {
     width: 100%;
     gap: 10px;
-    padding: 10px;
-    margin: 10px 0 20px;
   }
 `;
 
@@ -137,8 +138,12 @@ export const CancelButton = styled.button`
   font-weight: 600;
   color: var(--DG-2, #818181);
 
-  @media (max-width: ${BREAKPOINTS[0]}px) {
+  @media (max-width: ${BREAKPOINTS[1]}px) {
     width: 100%;
+    height: 50px;
+    font-size: 24px;
+  }
+  @media (max-width: ${BREAKPOINTS[0]}px) {
     height: 40px;
     font-size: 20px;
   }
@@ -167,8 +172,12 @@ export const CompletedButton = styled.button`
       cursor: pointer;
     `}
 
-    @media (max-width: ${BREAKPOINTS[0]}px) {
+  @media (max-width: ${BREAKPOINTS[1]}px) {
     width: 100%;
+    height: 50px;
+    font-size: 24px;
+  }
+  @media (max-width: ${BREAKPOINTS[0]}px) {
     height: 40px;
     font-size: 20px;
   }