#227 design: 배경 적용 및 컨텐츠 간격 조정

CheckMate-sookmyung · Sep 3, 2024 · 5db71aa · 5db71aa
1 parent dd003fa
commit 5db71aa
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/public/img/background-attendance.svg b/public/img/background-attendance.svg
diff --git a/src/pages/AttendancePage/AttendanceStudentIdPage.jsx b/src/pages/AttendancePage/AttendanceStudentIdPage.jsx
@@ -151,8 +151,8 @@ const AttendanceStudentIdPage = () => {
       <S.ContentContainer>
         <S.Title>
           {eventTarget === 'INTERNAL'
-            ? '학번을 입력해주세요.'
-            : '휴대폰 번호 뒷자리 4자리를 입력해주세요.'}
+            ? '학번을 입력해 주세요.'
+            : '휴대폰 번호 뒷자리 4자리를 입력해 주세요.'}
         </S.Title>
         <S.StudentIdContainer>
           {(eventTarget === 'INTERNAL' ? studentId : phoneId).map((index) => (

diff --git a/src/pages/AttendancePage/AttendanceStudentIdPage.style.jsx b/src/pages/AttendancePage/AttendanceStudentIdPage.style.jsx
@@ -6,22 +6,25 @@ export const AttendanceStudentIdPage = styled.div`
   flex-direction: column;
   justify-items: center;
   align-items: center;
-  height: 100vh;
   width: 100vw;
+  height: 100vh;
+  background-image: url('/img/background-attendance.svg');
+  background-size: cover;
+  background-position: center;
 `;
 
 export const ContentContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-items: center;
   align-items: center;
-  height: 100%;
   width: 90%;
+  height: 100%;
   border-radius: 20px;
   background: var(--White, #fff);
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.07);
   margin-bottom: 20px;
-  padding: 20px;
+  padding: 30px 20px;
   gap: 20px;
 `;
 
@@ -41,9 +44,11 @@ export const Title = styled.h1`
   color: var(--blue-0, #2f7cef);
   font-size: 28px;
   font-weight: 600;
+  text-align: center;
+  word-break: keep-all;
 
   @media (max-width: ${BREAKPOINTS[0]}px) {
-    font-size: 30px;
+    font-size: 20px;
     margin-top: 10px;
   }
 `;
@@ -72,11 +77,11 @@ export const StudentId = styled.div`
   margin: 0 10px;
 
   @media (max-width: ${BREAKPOINTS[1]}px) {
-    --box-size: 50px;
+    --box-size: 60px;
     font-size: 40px;
   }
   @media (max-width: ${BREAKPOINTS[0]}px) {
-    --box-size: 40px;
+    --box-size: 50px;
     font-size: 36px;
   }
 `;
@@ -148,7 +153,7 @@ export const GoToSignBtn = styled.div`
 
   &:hover {
     background-color: ${({ isSevenDigits }) =>
-      isSevenDigits ? '#1e5bbf' : '#BDDBFF'}; /* 호버 시 색상 변경 */
+      isSevenDigits ? '#1e5bbf' : '#BDDBFF'};
   }
 
   @media (max-width: ${BREAKPOINTS[0]}px) {