[Fix] 모바일 반응형 수정

frontend/src/components/Header.js

@@ -32,6 +32,7 @@ function Header({ type }) {
             <header className={`${styles.header} ${themeClass}`}>
                 <NavLink to="/" className={styles.logo}>PIROIN</NavLink>
 
+                {/* 기본 화면 헤더 */}
                 <nav className={styles.nav}>
                     <NavLink to="/pirocheck"  className={({ isActive }) => isActive ? styles.active : ''}>PIROCHECK</NavLink>
                     <NavLink to="/sessions"   className={({ isActive }) => isActive ? styles.active : ''}>Q&A</NavLink>
@@ -61,19 +62,14 @@ function Header({ type }) {
                 aria-hidden="true"
             />
 
-            {/* 드로어: themeClass 추가로 CSS 변수 상속 */}
-            <nav
-                className={`${styles.drawer} ${themeClass} ${menuOpen ? styles.drawerOpen : ''}`}
-                aria-hidden={!menuOpen}
-            >
+            {/* 태블릿 / 모바일 화면 헤더 */}
+            <nav className={`${styles.drawer} ${themeClass} ${menuOpen ? styles.drawerOpen : ''}`} aria-hidden={!menuOpen}>
+                <button className={styles.drawerLogoutBtn} onClick={handleLogout}>로그아웃</button>
                 <button className={styles.drawerCloseBtn} onClick={closeMenu} aria-label="메뉴 닫기">✕</button>
+
                 <NavLink to="/pirocheck"  className={({ isActive }) => isActive ? styles.active : ''} onClick={closeMenu}>PIROCHECK</NavLink>
                 <NavLink to="/sessions"   className={({ isActive }) => isActive ? styles.active : ''} onClick={closeMenu}>Q&A</NavLink>
                 <NavLink to="/curriculum" className={({ isActive }) => isActive ? styles.active : ''} onClick={closeMenu}>커리큘럼</NavLink>
-
-                <button className={styles.drawerLogoutBtn} onClick={handleLogout}>
-                    로그아웃
-                </button>
             </nav>
         </>
     );

frontend/src/components/Header.module.css

@@ -161,44 +161,66 @@
     visibility: visible;
 }
 
-.drawer a {
+.drawerCloseBtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: transparent;
+    border: none;
     color: var(--header-color);
-    font-family: var(--font-main);
-    font-size: 1.2rem;
-    font-weight: 500;
-    text-decoration: none;
-    padding: 16px 0;
-    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
-    transition: color 0.2s ease;
-}
-
-.drawer a:last-of-type {
-    border-bottom: none;
+    font-size: 1.8rem;
+    cursor: pointer;
+    opacity: 0.6;
+    line-height: 1;
+    padding: 4px 8px;
+    transition: opacity 0.2s ease;
 }
 
-.drawer a:hover {
-    color: var(--logo-color);
+.drawerCloseBtn:hover {
+    opacity: 1;
 }
 
 .drawerLogoutBtn {
-    margin-top: auto;
+    position: absolute;    
+    top: 22px;             
+    right: 60px;           
     background: transparent;
     border: 1px solid rgba(128, 128, 128, 0.3);
     border-radius: 8px;
-    color: var(--dark);
+    color: var(--header-color);
     font-family: var(--font-main);
     font-size: 1rem;
     font-weight: 500;
     cursor: pointer;
-    opacity: 1;
-    padding: 10px 0;
-    transition: opacity 0.2s ease;
+    padding: 7px 35px;
+    transition: all ease-in-out 0.2s;
+    margin-right: 15%;
 }
 
 .drawerLogoutBtn:hover {
-    background: var(--dark);
+    background: var(--logo-color);
     color: var(--white);
-    transition: all ease-in-out 0.2s;
+    transition: all 0.2 ease-in-out;
+    cursor: pointer;
+}
+
+.drawer a {
+    color: var(--header-color);
+    font-family: var(--font-main);
+    font-size: 1.2rem;
+    font-weight: 500;
+    text-decoration: none;
+    padding: 16px 0;
+    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
+    transition: color 0.2s ease;
+}
+
+.drawer a:last-of-type {
+    border-bottom: none;
+}
+
+.drawer a:hover {
+    color: var(--logo-color);
 }
 
 /* ── 반응형: 1024px 이하에서 햄버거로 전환 ── */
@@ -217,23 +239,3 @@
     }
 }
 
-/* ── 드로어 닫기 버튼 ── */
-.drawerCloseBtn {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: transparent;
-    border: none;
-    color: var(--header-color);
-    font-size: 1.8rem;
-    cursor: pointer;
-    opacity: 0.6;
-    line-height: 1;
-    padding: 4px 8px;
-    transition: opacity 0.2s ease;
-}
-
-.drawerCloseBtn:hover {
-    opacity: 1;
-}
-

frontend/src/pages/pirocheck/attendance/Attendance.module.css

@@ -118,6 +118,7 @@
     font-weight: 500;
     cursor: pointer;
     transition: opacity 0.2s;
+    white-space: nowrap;
 }
 
 .submitBtn:hover { background: var(--main); transition: all ease-in-out 0.2s; }
@@ -206,6 +207,10 @@
     }
 
     /* MEMBER */
+    .inputRow {
+        width: calc(100vw - 56px);
+    }
+
     .cloverSvg {
         width: 63px;
         height: 63px;

frontend/src/pages/pirocheck/students/StudentDetail.js

@@ -14,8 +14,8 @@ const statusOptions = ['PENDING', 'SUCCESS', 'INSUFFICIENT_MINOR', 'INSUFFICIENT
 const statusLabel = {
     PENDING: '채점 중',
     SUCCESS: '성공',
-    INSUFFICIENT_MINOR: '경미한 미달',
-    INSUFFICIENT_MAJOR: '심각한 미달',
+    INSUFFICIENT_MINOR: '미달 (-1)',
+    INSUFFICIENT_MAJOR: '미달 (-2)',
     FAILURE: '실패',
 };
 

frontend/src/pages/qna/QnADetailPage.module.css

@@ -736,11 +736,11 @@
 }
 
 /* ════════════════════════════════════════
-   반응형 — 태블릿 (768px 이하)
+   반응형 — 태블릿 (910px 이하)
 ════════════════════════════════════════ */
-@media (max-width: 768px) {
+@media (max-width: 910px) {
     .page {
-        margin-top: 40px;
+        margin: 40px 50px 0;
         padding: 36px 48px 100px;
         border-radius: 24px 24px 0 0;
     }
@@ -760,9 +760,10 @@
 ════════════════════════════════════════ */
 @media (max-width: 480px) {
     .page {
-        margin-top: 20px;
+        margin: 0px;
         padding: 24px 20px 100px;
-        border-radius: 16px 16px 0 0;
+        border-radius: 0;
+        box-shadow: none;
     }
 
     /* ── 목록으로 가기 ── */