#227 design: 출석체크 페이지 내 포인트 컬러 지정

CheckMate-sookmyung · Sep 7, 2024 · fbcf8f0 · fbcf8f0
1 parent 8c43626
commit fbcf8f0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/pages/AttendancePage/AttendanceStudentIdPage.jsx b/src/pages/AttendancePage/AttendanceStudentIdPage.jsx
@@ -150,10 +150,17 @@ const AttendanceStudentIdPage = () => {
 
       <S.ContentContainer>
         <S.Title>
-          {eventTarget === 'INTERNAL'
-            ? '학번을 입력해 주세요.'
-            : '휴대폰 번호 뒷자리 4자리를 입력해 주세요.'}
+          {eventTarget === 'INTERNAL' ? (
+            <>
+              <span>학번 7자리</span>를 입력해 주세요.
+            </>
+          ) : (
+            <>
+              <span>휴대폰 번호 뒤 4자리</span>를 입력해 주세요.
+            </>
+          )}
         </S.Title>
+
         <S.StudentIdContainer>
           {(eventTarget === 'INTERNAL' ? studentId : phoneId).map((index) => (
             <S.StudentId key={index}>

diff --git a/src/pages/AttendancePage/AttendanceStudentIdPage.style.jsx b/src/pages/AttendancePage/AttendanceStudentIdPage.style.jsx
@@ -41,12 +41,16 @@ export const OutputContainer = styled.div`
 export const Title = styled.h1`
   display: flex;
   justify-content: center;
-  color: var(--blue-0, #2f7cef);
+  color: #494949;
   font-size: 32px;
   font-weight: 600;
   text-align: center;
   word-break: keep-all;
 
+  & > span {
+    color: #2f7cef;
+  }
+
   @media (max-width: ${BREAKPOINTS[1]}px) {
     font-size: 26px;
   }