From 787a19b6e7644b985d404fda9b5bb77848e2d3f6 Mon Sep 17 00:00:00 2001
From: plumbestie <jangmj1121@naver.com>
Date: Sun, 24 May 2026 00:18:53 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[Feat]=20=EC=88=98=EA=B0=95=EC=83=9D=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20UI=20=EB=BC=88=EB=8C=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.js                           |   4 +
 .../pages/pirocheck/students/StudentDetail.js | 254 ++++++++++++++++
 .../students/StudentDetail.module.css         | 275 ++++++++++++++++++
 .../pages/pirocheck/students/StudentList.js   |  78 +++++
 .../pirocheck/students/StudentList.module.css | 100 +++++++
 5 files changed, 711 insertions(+)
 create mode 100644 frontend/src/pages/pirocheck/students/StudentDetail.js
 create mode 100644 frontend/src/pages/pirocheck/students/StudentDetail.module.css
 create mode 100644 frontend/src/pages/pirocheck/students/StudentList.js
 create mode 100644 frontend/src/pages/pirocheck/students/StudentList.module.css

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 13c568a..0e5c892 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -10,6 +10,8 @@ import PiroCheckMain from './pages/pirocheck/PIroCheckMain';
 import Attendance from './pages/pirocheck/attendance/Attendance'
 import Assignment from './pages/pirocheck/assignment/Assignment';
 import Deposit from './pages/pirocheck/deposit/Deposit';
+import StudentList from './pages/pirocheck/students/StudentList';
+import StudentDetail from './pages/pirocheck/students/StudentDetail';
 
 function App() {
   return (
@@ -35,6 +37,8 @@ function App() {
             <Route path="/pirocheck/attendance" element={<Attendance />}/>
             <Route path="/pirocheck/assignment" element={<Assignment />}/>
             <Route path="/pirocheck/deposit" element={<Deposit />}/>
+            <Route path="/pirocheck/students" element={<StudentList />}/>
+            <Route path="/pirocheck/students/:userId" element={<StudentDetail />}/>
         </Route>
 
       </Routes>
diff --git a/frontend/src/pages/pirocheck/students/StudentDetail.js b/frontend/src/pages/pirocheck/students/StudentDetail.js
new file mode 100644
index 0000000..65c666d
--- /dev/null
+++ b/frontend/src/pages/pirocheck/students/StudentDetail.js
@@ -0,0 +1,254 @@
+import { useState, useEffect } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
+import styles from './StudentDetail.module.css';
+
+const IS_MOCK = true;
+
+const MOCK_DETAIL = {
+    deposit: { amount: 100000, ascentDefence: 10000 },
+    weeks: [
+        {
+            week: 1,
+            days: [
+                {
+                    day: 'TUESDAY',
+                    sessionDate: '2026-06-24',
+                    attendances: [
+                        { attendanceId: 1, attendanceOrder: '1차', attended: true },
+                        { attendanceId: 2, attendanceOrder: '2차', attended: true },
+                        { attendanceId: 3, attendanceOrder: '3차', attended: true },
+                    ],
+                    assignments: [
+                        { assignmentItemId: 1, title: '코딩앵무 클론 코딩', submitted: 'SUBMITTED' },
+                        { assignmentItemId: 2, title: '피로그래밍 페이지 클론 코딩', submitted: 'SUBMITTED' },
+                    ],
+                },
+                {
+                    day: 'THURSDAY',
+                    sessionDate: '2026-06-26',
+                    attendances: [
+                        { attendanceId: 4, attendanceOrder: '1차', attended: false },
+                        { attendanceId: 5, attendanceOrder: '2차', attended: false },
+                        { attendanceId: 6, attendanceOrder: '3차', attended: false },
+                    ],
+                    assignments: [
+                        { assignmentItemId: 3, title: '코딩앵무 클론 코딩', submitted: 'NOT_SUBMITTED' },
+                    ],
+                },
+                {
+                    day: 'SATURDAY',
+                    sessionDate: '2026-06-28',
+                    attendances: [
+                        { attendanceId: 7, attendanceOrder: '1차', attended: false },
+                        { attendanceId: 8, attendanceOrder: '2차', attended: false },
+                        { attendanceId: 9, attendanceOrder: '3차', attended: false },
+                    ],
+                    assignments: [],
+                },
+            ],
+        },
+        { week: 2, days: [] },
+        { week: 3, days: [] },
+        { week: 4, days: [] },
+        { week: 5, days: [] },
+    ],
+};
+
+const dayLabel = { TUESDAY: 'TUE', THURSDAY: 'THU', SATURDAY: 'SAT' };
+const statusOptions = ['SUBMITTED', 'LATE', 'NOT_SUBMITTED'];
+const statusLabel = { SUBMITTED: '성공', LATE: '지각', NOT_SUBMITTED: '미제출' };
+
+function WeekBlock({ weekData, onChange }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [openDays, setOpenDays] = useState({});
+
+    const toggleDay = (day) => {
+        setOpenDays(prev => ({ ...prev, [day]: !prev[day] }));
+    };
+
+    return (
+        <div className={styles.weekBlock}>
+            <div className={styles.weekHeader} onClick={() => setIsOpen(p => !p)}>
+                <div className={styles.weekLeft}>
+                    {/* 주차 로고는 SVG로 교체 예정 */}
+                    <span className={styles.weekLogoPlaceholder}>●</span>
+                    <span className={styles.weekLabel}>WEEK {weekData.week}</span>
+                </div>
+                <span>{isOpen ? '▲' : '▼'}</span>
+            </div>
+
+            {isOpen && (
+                <div className={styles.weekBody}>
+                    {weekData.days.length === 0 && (
+                        <div className={styles.empty}>데이터가 없습니다.</div>
+                    )}
+                    {weekData.days.map((day, i) => (
+                        <div key={i} className={styles.dayBlock}>
+                            <div className={styles.dayHeader} onClick={() => toggleDay(day.day)}>
+                                <div className={styles.dayLeft}>
+                                    <span className={styles.dayLabel}>{dayLabel[day.day]}</span>
+                                    <span className={styles.sessionDate}>{day.sessionDate}</span>
+                                </div>
+                                <span>{openDays[day.day] ? '∧' : '∨'}</span>
+                            </div>
+
+                            {openDays[day.day] && (
+                                <div className={styles.dayBody}>
+                                    {/* 출석 */}
+                                    <div className={styles.sectionLabel}>출석</div>
+                                    {day.attendances.map((att, j) => (
+                                        <div key={j} className={styles.statusRow}>
+                                            <span className={styles.itemLabel}>{att.attendanceOrder}</span>
+                                            <select
+                                                className={styles.select}
+                                                value={att.attended ? 'true' : 'false'}
+                                                onChange={e => onChange('attendance', weekData.week, day.day, att.attendanceId, e.target.value === 'true')}
+                                            >
+                                                <option value="true">성공</option>
+                                                <option value="false">실패</option>
+                                            </select>
+                                        </div>
+                                    ))}
+
+                                    {/* 과제 */}
+                                    {day.assignments.length > 0 && (
+                                        <>
+                                            <div className={styles.sectionLabel}>과제</div>
+                                            {day.assignments.map((asg, j) => (
+                                                <div key={j} className={styles.statusRow}>
+                                                    <span className={styles.itemLabel}>{asg.title}</span>
+                                                    <select
+                                                        className={styles.select}
+                                                        value={asg.submitted}
+                                                        onChange={e => onChange('assignment', weekData.week, day.day, asg.assignmentItemId, e.target.value)}
+                                                    >
+                                                        {statusOptions.map(s => (
+                                                            <option key={s} value={s}>{statusLabel[s]}</option>
+                                                        ))}
+                                                    </select>
+                                                </div>
+                                            ))}
+                                        </>
+                                    )}
+
+                                    <button className={styles.saveWeekBtn}>저장하기</button>
+                                </div>
+                            )}
+
+                            {i < weekData.days.length - 1 && <hr className={styles.divider} />}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+function StudentDetail() {
+    const { userId } = useParams();
+    const location = useLocation();
+    const studentName = location.state?.name || '수강생';
+
+    const [data, setData] = useState(null);
+    const [defence, setDefence] = useState('');
+
+    useEffect(() => {
+        if (IS_MOCK) {
+            setData(MOCK_DETAIL);
+            setDefence(MOCK_DETAIL.deposit.ascentDefence.toString());
+            return;
+        }
+        // TODO: GET /api/admin/{userId}/deposit/view
+        // TODO: GET /api/admin/admin/student/{userId}/status/{week} (1~5주차)
+    }, [userId]);
+
+    const handleSaveDefence = async () => {
+        if (IS_MOCK) { alert('저장됨 (임시)'); return; }
+        // TODO: PUT /api/admin/{userId}/deposit-defend
+    };
+
+    const handleStatusChange = (type, week, day, id, value) => {
+        setData(prev => {
+            const newWeeks = prev.weeks.map(w => {
+                if (w.week !== week) return w;
+                return {
+                    ...w,
+                    days: w.days.map(d => {
+                        if (d.day !== day) return d;
+                        if (type === 'attendance') {
+                            return {
+                                ...d,
+                                attendances: d.attendances.map(a =>
+                                    a.attendanceId === id ? { ...a, attended: value } : a
+                                ),
+                            };
+                        } else {
+                            return {
+                                ...d,
+                                assignments: d.assignments.map(a =>
+                                    a.assignmentItemId === id ? { ...a, submitted: value } : a
+                                ),
+                            };
+                        }
+                    }),
+                };
+            });
+            return { ...prev, weeks: newWeeks };
+        });
+    };
+
+    const handleSaveAll = async () => {
+        if (IS_MOCK) { alert('전체 저장됨 (임시)'); return; }
+        // TODO: PATCH /api/admin/users/{userId}/weeks/{week} 주차별로 호출
+    };
+
+    if (!data) return null;
+
+    return (
+        <div className={styles.container}>
+            {IS_MOCK && (
+                <div className={styles.mockBanner}>
+                    ⚠️ 현재 임시 데이터로 표시 중입니다.
+                </div>
+            )}
+
+            <div className={styles.card}>
+                {/* 프로필 */}
+                <div className={styles.profileArea}>
+                    {/* 프로필 이미지는 SVG로 교체 예정 */}
+                    <div className={styles.profileImgPlaceholder}>👤</div>
+                    <div className={styles.profileName}>{studentName}</div>
+                </div>
+
+                {/* 보증금 */}
+                <div className={styles.depositRow}>
+                    <div className={styles.depositBox}>
+                        <div className={styles.depositLabel}>잔여 보증금</div>
+                        <div className={styles.depositValue}>{data.deposit.amount.toLocaleString()}원</div>
+                    </div>
+                    <div className={styles.depositBox}>
+                        <div className={styles.depositLabel}>보증금 방어권</div>
+                        <div className={styles.depositEditRow}>
+                            <input
+                                className={styles.defenceInput}
+                                value={defence}
+                                onChange={e => setDefence(e.target.value)}
+                            />
+                            <span className={styles.won}>원</span>
+                            <button className={styles.saveBtn} onClick={handleSaveDefence}>SAVE</button>
+                        </div>
+                    </div>
+                </div>
+
+                {/* 주차별 현황 */}
+                {data.weeks.map((w, i) => (
+                    <WeekBlock key={i} weekData={w} onChange={handleStatusChange} />
+                ))}
+
+                <button className={styles.saveAllBtn} onClick={handleSaveAll}>전체 저장하기</button>
+            </div>
+        </div>
+    );
+}
+
+export default StudentDetail;
diff --git a/frontend/src/pages/pirocheck/students/StudentDetail.module.css b/frontend/src/pages/pirocheck/students/StudentDetail.module.css
new file mode 100644
index 0000000..42c608b
--- /dev/null
+++ b/frontend/src/pages/pirocheck/students/StudentDetail.module.css
@@ -0,0 +1,275 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 60px 20px;
+    min-height: calc(100vh - 100px);
+    background: var(--black);
+}
+
+.mockBanner {
+    background: #5a3e00;
+    color: #ffd166;
+    font-family: var(--font-main);
+    font-size: 0.85rem;
+    padding: 10px 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    width: 480px;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.card {
+    width: 480px;
+    background: #3a3a3a;
+    border-radius: 20px;
+    padding: 40px 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+/* 프로필 */
+.profileArea {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.profileImgPlaceholder {
+    font-size: 4rem;
+    width: 90px;
+    height: 90px;
+    background: #555;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.profileName {
+    font-family: var(--font-main);
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--white);
+}
+
+/* 보증금 */
+.depositRow {
+    display: flex;
+    gap: 12px;
+}
+
+.depositBox {
+    flex: 1;
+    background: #e8f5e9;
+    border-radius: 12px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.depositLabel {
+    font-family: var(--font-main);
+    font-size: 0.85rem;
+    color: #555;
+}
+
+.depositValue {
+    font-family: var(--font-main);
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #333;
+}
+
+.depositEditRow {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.defenceInput {
+    width: 80px;
+    border: none;
+    background: transparent;
+    font-family: var(--font-main);
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #333;
+    outline: none;
+}
+
+.won {
+    font-family: var(--font-main);
+    font-size: 1rem;
+    color: #333;
+}
+
+.saveBtn {
+    padding: 4px 10px;
+    background: #555;
+    border: none;
+    border-radius: 6px;
+    color: var(--white);
+    font-family: var(--font-main);
+    font-size: 0.75rem;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.saveBtn:hover { background: #666; }
+
+/* 주차 블록 */
+.weekBlock {
+    background: #2a2a2a;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.weekHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    cursor: pointer;
+    color: var(--white);
+}
+
+.weekLeft {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.weekLogoPlaceholder {
+    color: var(--main);
+    font-size: 1.2rem;
+}
+
+.weekLabel {
+    font-family: var(--font-main);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--white);
+}
+
+.weekBody {
+    padding: 0 20px 16px;
+}
+
+.empty {
+    color: #aaa;
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+    text-align: center;
+    padding: 12px 0;
+}
+
+/* 요일 블록 */
+.dayBlock { margin-top: 10px; }
+
+.dayHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 6px 0;
+}
+
+.dayLeft {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.dayLabel {
+    color: var(--main);
+    font-family: var(--font-title);
+    font-size: 0.95rem;
+    font-weight: 700;
+}
+
+.sessionDate {
+    color: #aaa;
+    font-family: var(--font-main);
+    font-size: 0.85rem;
+}
+
+.dayBody {
+    padding: 8px 0 0 8px;
+}
+
+.sectionLabel {
+    color: #aaa;
+    font-family: var(--font-main);
+    font-size: 0.8rem;
+    margin: 8px 0 4px;
+}
+
+.statusRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 0;
+}
+
+.itemLabel {
+    color: var(--white);
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+}
+
+.select {
+    padding: 4px 10px;
+    background: #444;
+    border: none;
+    border-radius: 6px;
+    color: var(--white);
+    font-family: var(--font-main);
+    font-size: 0.85rem;
+    cursor: pointer;
+}
+
+.saveWeekBtn {
+    margin-top: 12px;
+    padding: 8px 24px;
+    background: transparent;
+    border: 1.5px solid var(--main);
+    border-radius: 50px;
+    color: var(--main);
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.saveWeekBtn:hover { background: var(--main); color: var(--black); }
+
+.divider {
+    border: none;
+    border-top: 1px solid #444;
+    margin: 10px 0;
+}
+
+/* 전체 저장 */
+.saveAllBtn {
+    padding: 14px 0;
+    background: var(--main);
+    border: none;
+    border-radius: 50px;
+    color: var(--black);
+    font-family: var(--font-main);
+    font-size: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+    width: 100%;
+    transition: opacity 0.2s;
+}
+
+.saveAllBtn:hover { opacity: 0.85; }
\ No newline at end of file
diff --git a/frontend/src/pages/pirocheck/students/StudentList.js b/frontend/src/pages/pirocheck/students/StudentList.js
new file mode 100644
index 0000000..2ce0ae1
--- /dev/null
+++ b/frontend/src/pages/pirocheck/students/StudentList.js
@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './StudentList.module.css';
+
+const MOCK_STUDENTS = [
+    { userId: 1, name: '김피로' },
+    { userId: 2, name: '이피로' },
+    { userId: 3, name: '박피로' },
+    { userId: 4, name: '최피로' },
+    { userId: 5, name: '정피로' },
+];
+
+const IS_MOCK = true;
+
+function StudentList() {
+    const navigate = useNavigate();
+    const [students, setStudents] = useState([]);
+    const [search, setSearch] = useState('');
+
+    const fetchStudents = async (keyword = '') => {
+        if (IS_MOCK) {
+            if (keyword) {
+                setStudents(MOCK_STUDENTS.filter(s => s.name.includes(keyword)));
+            } else {
+                setStudents(MOCK_STUDENTS);
+            }
+            return;
+        }
+        const url = keyword
+            ? `/api/admin/studentlist/search?name=${keyword}`
+            : '/api/admin/studentlist';
+        const res = await fetch(url);
+        const data = await res.json();
+        setStudents(data);
+    };
+
+    useEffect(() => { fetchStudents(); }, []);
+
+    const handleSearch = () => fetchStudents(search);
+
+    return (
+        <div className={styles.container}>
+            {IS_MOCK && (
+                <div className={styles.mockBanner}>
+                    ⚠️ 현재 임시 데이터로 표시 중입니다.
+                </div>
+            )}
+
+            <div className={styles.title}>PIROGRAMMER</div>
+
+            <div className={styles.searchRow}>
+                <input
+                    className={styles.searchInput}
+                    placeholder="수강생을 검색하세요."
+                    value={search}
+                    onChange={e => setSearch(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && handleSearch()}
+                />
+                <button className={styles.searchBtn} onClick={handleSearch}>검색</button>
+            </div>
+
+            <div className={styles.list}>
+                {students.map((s, i) => (
+                    <button
+                        key={i}
+                        className={styles.studentItem}
+                        onClick={() => navigate(`/pirocheck/students/${s.userId}`, { state: { name: s.name } })}
+                    >
+                        <span className={styles.studentName}>{s.name}</span>
+                        <span className={styles.arrow}>›</span>
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default StudentList;
\ No newline at end of file
diff --git a/frontend/src/pages/pirocheck/students/StudentList.module.css b/frontend/src/pages/pirocheck/students/StudentList.module.css
new file mode 100644
index 0000000..0289648
--- /dev/null
+++ b/frontend/src/pages/pirocheck/students/StudentList.module.css
@@ -0,0 +1,100 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 60px 20px;
+    min-height: calc(100vh - 100px);
+    background: var(--black);
+}
+
+.mockBanner {
+    background: #5a3e00;
+    color: #ffd166;
+    font-family: var(--font-main);
+    font-size: 0.85rem;
+    padding: 10px 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    width: 480px;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.title {
+    font-family: var(--font-title);
+    font-size: 3rem;
+    font-weight: 800;
+    color: var(--main);
+    margin-bottom: 36px;
+    letter-spacing: 0;
+}
+
+.searchRow {
+    display: flex;
+    align-items: center;
+    background: #f5f5f5;
+    border-radius: 50px;
+    overflow: hidden;
+    width: 480px;
+    margin-bottom: 30px;
+    padding: 4px 4px 4px 20px;
+}
+
+.searchInput {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-family: var(--font-main);
+    font-size: 1rem;
+    color: #333;
+}
+
+.searchInput::placeholder { color: #aaa; }
+
+.searchBtn {
+    padding: 10px 24px;
+    background: var(--main);
+    border: none;
+    border-radius: 50px;
+    color: var(--black);
+    font-family: var(--font-main);
+    font-size: 0.95rem;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.list {
+    width: 480px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.studentItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #3a3a3a;
+    border: none;
+    border-radius: 12px;
+    padding: 20px 24px;
+    cursor: pointer;
+    transition: background 0.2s;
+    width: 100%;
+}
+
+.studentItem:hover { background: #4a4a4a; }
+
+.studentName {
+    font-family: var(--font-main);
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--white);
+}
+
+.arrow {
+    color: var(--white);
+    font-size: 1.4rem;
+    opacity: 0.6;
+}
\ No newline at end of file

From 46d55573f3c2b9d0d5ebd0331dbfff753fe6b928 Mon Sep 17 00:00:00 2001
From: plumbestie <jangmj1121@naver.com>
Date: Sun, 24 May 2026 10:29:52 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[Feat]=20Studentlist=20css=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/images/icon_arrow_right.svg    |  3 ++
 frontend/src/assets/images/icon_togle1.svg    |  3 ++
 frontend/src/assets/images/icon_togle2.svg    |  3 ++
 frontend/src/assets/images/logo2.svg          |  6 ++++
 frontend/src/assets/images/profile.svg        |  9 +++++
 .../pirocheck/students/StudentList.module.css | 35 ++++++++++---------
 6 files changed, 42 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/assets/images/icon_arrow_right.svg
 create mode 100644 frontend/src/assets/images/icon_togle1.svg
 create mode 100644 frontend/src/assets/images/icon_togle2.svg
 create mode 100644 frontend/src/assets/images/logo2.svg
 create mode 100644 frontend/src/assets/images/profile.svg

diff --git a/frontend/src/assets/images/icon_arrow_right.svg b/frontend/src/assets/images/icon_arrow_right.svg
new file mode 100644
index 0000000..c5aa6f6
--- /dev/null
+++ b/frontend/src/assets/images/icon_arrow_right.svg
@@ -0,0 +1,3 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5771 9.78534C13.4419 9.92025 13.3347 10.0805 13.2615 10.2569C13.1883 10.4333 13.1506 10.6225 13.1506 10.8135C13.1506 11.0045 13.1883 11.1936 13.2615 11.37C13.3347 11.5464 13.4419 11.7067 13.5771 11.8416L19.2354 17.4999L13.5771 23.1583C13.3044 23.4309 13.1513 23.8008 13.1513 24.1864C13.1513 24.572 13.3044 24.9418 13.5771 25.2145C13.8498 25.4872 14.2196 25.6404 14.6052 25.6404C14.9909 25.6404 15.3607 25.4872 15.6334 25.2145L22.3271 18.5208C22.4623 18.3858 22.5696 18.2256 22.6427 18.0492C22.7159 17.8727 22.7536 17.6836 22.7536 17.4926C22.7536 17.3016 22.7159 17.1125 22.6427 16.9361C22.5696 16.7597 22.4623 16.5994 22.3271 16.4645L15.6334 9.77075C15.0792 9.21659 14.1459 9.21659 13.5771 9.78534Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/icon_togle1.svg b/frontend/src/assets/images/icon_togle1.svg
new file mode 100644
index 0000000..3d85458
--- /dev/null
+++ b/frontend/src/assets/images/icon_togle1.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.92969 0.5C8.31459 -0.166667 9.27684 -0.166667 9.66174 0.5L17.456 14C17.8409 14.6667 17.3597 15.5 16.5899 15.5H1.00149C0.231686 15.5 -0.249439 14.6667 0.135461 14L7.92969 0.5Z" fill="#F9F9F9"/>
+</svg>
diff --git a/frontend/src/assets/images/icon_togle2.svg b/frontend/src/assets/images/icon_togle2.svg
new file mode 100644
index 0000000..9aa266f
--- /dev/null
+++ b/frontend/src/assets/images/icon_togle2.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.9896 15.3021C7.08596 15.3986 7.20043 15.4752 7.32645 15.5275C7.45246 15.5798 7.58755 15.6067 7.72397 15.6067C7.8604 15.6067 7.99548 15.5798 8.1215 15.5275C8.24751 15.4752 8.36198 15.3986 8.45835 15.3021L12.5 11.2604L16.5417 15.3021C16.7364 15.4968 17.0006 15.6062 17.2761 15.6062C17.5515 15.6062 17.8157 15.4968 18.0104 15.3021C18.2052 15.1073 18.3146 14.8431 18.3146 14.5677C18.3146 14.2922 18.2052 14.0281 18.0104 13.8333L13.2292 9.05206C13.1328 8.95549 13.0183 8.87888 12.8923 8.82661C12.7663 8.77434 12.6312 8.74743 12.4948 8.74743C12.3584 8.74743 12.2233 8.77434 12.0973 8.82661C11.9713 8.87888 11.8568 8.95549 11.7604 9.05206L6.97918 13.8333C6.58335 14.2291 6.58335 14.8958 6.9896 15.3021Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/images/logo2.svg b/frontend/src/assets/images/logo2.svg
new file mode 100644
index 0000000..d667deb
--- /dev/null
+++ b/frontend/src/assets/images/logo2.svg
@@ -0,0 +1,6 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.6" cx="10.5" cy="24.5" r="10.5" fill="#D6FCE0"/>
+<circle opacity="0.6" cx="24.5" cy="10.5" r="10.5" fill="#D6FCE0"/>
+<circle opacity="0.4" cx="10.5" cy="10.5" r="10.5" fill="#D6FCE0"/>
+<circle opacity="0.4" cx="24.5" cy="24.5" r="10.5" fill="#D6FCE0"/>
+</svg>
diff --git a/frontend/src/assets/images/profile.svg b/frontend/src/assets/images/profile.svg
new file mode 100644
index 0000000..84191cb
--- /dev/null
+++ b/frontend/src/assets/images/profile.svg
@@ -0,0 +1,9 @@
+<svg width="156" height="156" viewBox="0 0 156 156" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect opacity="0.7" width="156" height="156" fill="url(#pattern0_363_1413)"/>
+<defs>
+<pattern id="pattern0_363_1413" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_363_1413" transform="scale(0.00854701)"/>
+</pattern>
+<image id="image0_363_1413" width="117" height="117" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/frontend/src/pages/pirocheck/students/StudentList.module.css b/frontend/src/pages/pirocheck/students/StudentList.module.css
index 0289648..abba372 100644
--- a/frontend/src/pages/pirocheck/students/StudentList.module.css
+++ b/frontend/src/pages/pirocheck/students/StudentList.module.css
@@ -32,12 +32,12 @@
 .searchRow {
     display: flex;
     align-items: center;
-    background: #f5f5f5;
-    border-radius: 50px;
+    background: var(--gray600);
+    border-radius: 10px;
     overflow: hidden;
     width: 480px;
     margin-bottom: 30px;
-    padding: 4px 4px 4px 20px;
+    padding: 6px 6px 6px 20px;
 }
 
 .searchInput {
@@ -47,25 +47,25 @@
     outline: none;
     font-family: var(--font-main);
     font-size: 1rem;
-    color: #333;
+    color: var(--white);
 }
 
-.searchInput::placeholder { color: #aaa; }
+.searchInput::placeholder { color: var(--gray200); }
 
 .searchBtn {
-    padding: 10px 24px;
-    background: var(--main);
+    padding: 7px 15px;
+    background: var(--dark);
     border: none;
-    border-radius: 50px;
-    color: var(--black);
+    border-radius: 10px;
+    color: var(--white);
     font-family: var(--font-main);
     font-size: 0.95rem;
-    font-weight: 700;
+    font-weight: 600;
     cursor: pointer;
 }
 
 .list {
-    width: 480px;
+    width: 450px;
     display: flex;
     flex-direction: column;
     gap: 12px;
@@ -75,10 +75,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: #3a3a3a;
-    border: none;
-    border-radius: 12px;
-    padding: 20px 24px;
+    background: var(--gray600);
+    border: 1px solid var(--gray50);
+    border-radius: 10px;
+    padding: 7px 15px 7px 20px;
     cursor: pointer;
     transition: background 0.2s;
     width: 100%;
@@ -95,6 +95,7 @@
 
 .arrow {
     color: var(--white);
-    font-size: 1.4rem;
-    opacity: 0.6;
+    font-size: 1.6rem;
+    opacity: 0.7;
+    margin-bottom: 1px;
 }
\ No newline at end of file

From eb927018a67c99377900c89aee5400ce70fb4c9f Mon Sep 17 00:00:00 2001
From: plumbestie <jangmj1121@naver.com>
Date: Sun, 24 May 2026 11:35:03 +0900
Subject: [PATCH 3/3] [Feat] StudentDetail UI

---
 .../pages/pirocheck/students/StudentDetail.js | 128 +++++++----
 .../students/StudentDetail.module.css         | 200 ++++++++++++------
 .../pages/pirocheck/students/StudentList.js   |   3 +-
 .../pirocheck/students/StudentList.module.css |  10 +-
 4 files changed, 226 insertions(+), 115 deletions(-)

diff --git a/frontend/src/pages/pirocheck/students/StudentDetail.js b/frontend/src/pages/pirocheck/students/StudentDetail.js
index 65c666d..6c31628 100644
--- a/frontend/src/pages/pirocheck/students/StudentDetail.js
+++ b/frontend/src/pages/pirocheck/students/StudentDetail.js
@@ -1,6 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import styles from './StudentDetail.module.css';
+import ProfileImg from '../../../assets/images/profile.svg';
+import Logo2 from '../../../assets/images/logo2.svg';
+import Toggle1 from '../../../assets/images/icon_togle1.svg';
+import Toggle2 from '../../../assets/images/icon_togle2.svg';
 
 const IS_MOCK = true;
 
@@ -13,6 +17,7 @@ const MOCK_DETAIL = {
                 {
                     day: 'TUESDAY',
                     sessionDate: '2026-06-24',
+                    sessionTitles: 'HTML/CSS 기초, Git 기초',
                     attendances: [
                         { attendanceId: 1, attendanceOrder: '1차', attended: true },
                         { attendanceId: 2, attendanceOrder: '2차', attended: true },
@@ -26,6 +31,7 @@ const MOCK_DETAIL = {
                 {
                     day: 'THURSDAY',
                     sessionDate: '2026-06-26',
+                    sessionTitles: 'JS 기초, JS 심화',
                     attendances: [
                         { attendanceId: 4, attendanceOrder: '1차', attended: false },
                         { attendanceId: 5, attendanceOrder: '2차', attended: false },
@@ -38,6 +44,7 @@ const MOCK_DETAIL = {
                 {
                     day: 'SATURDAY',
                     sessionDate: '2026-06-28',
+                    sessionTitles: 'DB 개론',
                     attendances: [
                         { attendanceId: 7, attendanceOrder: '1차', attended: false },
                         { attendanceId: 8, attendanceOrder: '2차', attended: false },
@@ -56,7 +63,14 @@ const MOCK_DETAIL = {
 
 const dayLabel = { TUESDAY: 'TUE', THURSDAY: 'THU', SATURDAY: 'SAT' };
 const statusOptions = ['SUBMITTED', 'LATE', 'NOT_SUBMITTED'];
-const statusLabel = { SUBMITTED: '성공', LATE: '지각', NOT_SUBMITTED: '미제출' };
+const statusLabel = { SUBMITTED: '성공', LATE: '미달', NOT_SUBMITTED: '실패' };
+
+// 커리큘럼 데이터에서 날짜별 세션 제목 추출
+function extractSessionTitles(curriculums, sessionDate) {
+    const day = curriculums.find(c => c.sessionDate === sessionDate);
+    if (!day || !day.sessions) return '';
+    return day.sessions.map(s => s.title).join(', ');
+}
 
 function WeekBlock({ weekData, onChange }) {
     const [isOpen, setIsOpen] = useState(false);
@@ -70,11 +84,14 @@ function WeekBlock({ weekData, onChange }) {
         <div className={styles.weekBlock}>
             <div className={styles.weekHeader} onClick={() => setIsOpen(p => !p)}>
                 <div className={styles.weekLeft}>
-                    {/* 주차 로고는 SVG로 교체 예정 */}
-                    <span className={styles.weekLogoPlaceholder}>●</span>
+                    <img src={Logo2} className={styles.weekLogo} alt="logo" />
                     <span className={styles.weekLabel}>WEEK {weekData.week}</span>
                 </div>
-                <span>{isOpen ? '▲' : '▼'}</span>
+                <img
+                    src={Toggle1}
+                    className={`${styles.toggleIcon} ${isOpen ? styles.toggleOpen : ''}`}
+                    alt="toggle"
+                />
             </div>
 
             {isOpen && (
@@ -87,48 +104,58 @@ function WeekBlock({ weekData, onChange }) {
                             <div className={styles.dayHeader} onClick={() => toggleDay(day.day)}>
                                 <div className={styles.dayLeft}>
                                     <span className={styles.dayLabel}>{dayLabel[day.day]}</span>
-                                    <span className={styles.sessionDate}>{day.sessionDate}</span>
+                                    <span className={styles.sessionDate}>{day.sessionTitles || day.sessionDate}</span>
                                 </div>
-                                <span>{openDays[day.day] ? '∧' : '∨'}</span>
+                                <img
+                                    src={Toggle2}
+                                    className={`${styles.toggleIcon2} ${openDays[day.day] ? styles.toggleOpen : ''}`}
+                                    alt="toggle"
+                                />
                             </div>
 
                             {openDays[day.day] && (
                                 <div className={styles.dayBody}>
                                     {/* 출석 */}
-                                    <div className={styles.sectionLabel}>출석</div>
-                                    {day.attendances.map((att, j) => (
-                                        <div key={j} className={styles.statusRow}>
-                                            <span className={styles.itemLabel}>{att.attendanceOrder}</span>
-                                            <select
-                                                className={styles.select}
-                                                value={att.attended ? 'true' : 'false'}
-                                                onChange={e => onChange('attendance', weekData.week, day.day, att.attendanceId, e.target.value === 'true')}
-                                            >
-                                                <option value="true">성공</option>
-                                                <option value="false">실패</option>
-                                            </select>
-                                        </div>
-                                    ))}
-
-                                    {/* 과제 */}
-                                    {day.assignments.length > 0 && (
-                                        <>
-                                            <div className={styles.sectionLabel}>과제</div>
-                                            {day.assignments.map((asg, j) => (
-                                                <div key={j} className={styles.statusRow}>
-                                                    <span className={styles.itemLabel}>{asg.title}</span>
+                                    <div className={styles.statusGroup}>
+                                        <span className={styles.sectionLabel}>출석</span>
+                                        <div className={styles.statusItems}>
+                                            {day.attendances.map((att, j) => (
+                                                <div key={j} className={styles.statusItem}>
+                                                    <span className={styles.itemLabel}>{att.attendanceOrder}</span>
                                                     <select
                                                         className={styles.select}
-                                                        value={asg.submitted}
-                                                        onChange={e => onChange('assignment', weekData.week, day.day, asg.assignmentItemId, e.target.value)}
+                                                        value={att.attended ? 'true' : 'false'}
+                                                        onChange={e => onChange('attendance', weekData.week, day.day, att.attendanceId, e.target.value === 'true')}
                                                     >
-                                                        {statusOptions.map(s => (
-                                                            <option key={s} value={s}>{statusLabel[s]}</option>
-                                                        ))}
+                                                        <option value="true">성공</option>
+                                                        <option value="false">실패</option>
                                                     </select>
                                                 </div>
                                             ))}
-                                        </>
+                                        </div>
+                                    </div>
+
+                                    {/* 과제 */}
+                                    {day.assignments.length > 0 && (
+                                        <div className={styles.statusGroup}>
+                                            <span className={styles.sectionLabel}>과제</span>
+                                            <div className={styles.statusItems}>
+                                                {day.assignments.map((asg, j) => (
+                                                    <div key={j} className={styles.statusItem}>
+                                                        <span className={styles.itemLabel}>{asg.title}</span>
+                                                        <select
+                                                            className={styles.select}
+                                                            value={asg.submitted}
+                                                            onChange={e => onChange('assignment', weekData.week, day.day, asg.assignmentItemId, e.target.value)}
+                                                        >
+                                                            {statusOptions.map(s => (
+                                                                <option key={s} value={s}>{statusLabel[s]}</option>
+                                                            ))}
+                                                        </select>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </div>
                                     )}
 
                                     <button className={styles.saveWeekBtn}>저장하기</button>
@@ -158,8 +185,25 @@ function StudentDetail() {
             setDefence(MOCK_DETAIL.deposit.ascentDefence.toString());
             return;
         }
-        // TODO: GET /api/admin/{userId}/deposit/view
-        // TODO: GET /api/admin/admin/student/{userId}/status/{week} (1~5주차)
+
+        const fetchData = async () => {
+            // TODO: GET /api/admin/{userId}/deposit/view
+            // TODO: GET /api/admin/admin/student/{userId}/status/{week} (1~5주차)
+
+            // 커리큘럼에서 세션 제목 가져오기
+            const curriculumRes = await fetch('/api/curriculums');
+            const curriculums = await curriculumRes.json();
+
+            // weeks 데이터에 sessionTitles 추가
+            // const mergedWeeks = weeks.map(w => ({
+            //     ...w,
+            //     days: w.days.map(d => ({
+            //         ...d,
+            //         sessionTitles: extractSessionTitles(curriculums, d.sessionDate),
+            //     }))
+            // }));
+        };
+        fetchData();
     }, [userId]);
 
     const handleSaveDefence = async () => {
@@ -213,20 +257,17 @@ function StudentDetail() {
             )}
 
             <div className={styles.card}>
-                {/* 프로필 */}
                 <div className={styles.profileArea}>
-                    {/* 프로필 이미지는 SVG로 교체 예정 */}
-                    <div className={styles.profileImgPlaceholder}>👤</div>
+                    <img src={ProfileImg} className={styles.profileImg} alt="profile" />
                     <div className={styles.profileName}>{studentName}</div>
                 </div>
 
-                {/* 보증금 */}
                 <div className={styles.depositRow}>
-                    <div className={styles.depositBox}>
+                    <div className={styles.depositBoxGreen}>
                         <div className={styles.depositLabel}>잔여 보증금</div>
                         <div className={styles.depositValue}>{data.deposit.amount.toLocaleString()}원</div>
                     </div>
-                    <div className={styles.depositBox}>
+                    <div className={styles.depositBoxGray}>
                         <div className={styles.depositLabel}>보증금 방어권</div>
                         <div className={styles.depositEditRow}>
                             <input
@@ -240,7 +281,6 @@ function StudentDetail() {
                     </div>
                 </div>
 
-                {/* 주차별 현황 */}
                 {data.weeks.map((w, i) => (
                     <WeekBlock key={i} weekData={w} onChange={handleStatusChange} />
                 ))}
@@ -251,4 +291,4 @@ function StudentDetail() {
     );
 }
 
-export default StudentDetail;
+export default StudentDetail;
\ No newline at end of file
diff --git a/frontend/src/pages/pirocheck/students/StudentDetail.module.css b/frontend/src/pages/pirocheck/students/StudentDetail.module.css
index 42c608b..e073df1 100644
--- a/frontend/src/pages/pirocheck/students/StudentDetail.module.css
+++ b/frontend/src/pages/pirocheck/students/StudentDetail.module.css
@@ -22,9 +22,9 @@
 
 .card {
     width: 480px;
-    background: #3a3a3a;
+    background: var(--gray600);
     border-radius: 20px;
-    padding: 40px 32px;
+    padding: 40px 40px;
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -38,22 +38,18 @@
     gap: 12px;
 }
 
-.profileImgPlaceholder {
-    font-size: 4rem;
-    width: 90px;
-    height: 90px;
-    background: #555;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.profileImg {
+    width: 100px;
+    height: 100px;
+    margin-left: 2px;
+    object-fit: cover;
 }
 
 .profileName {
     font-family: var(--font-main);
-    font-size: 1.4rem;
+    font-size: 1.8rem;
     font-weight: 700;
-    color: var(--white);
+    color: var(--dark);
 }
 
 /* 보증금 */
@@ -62,11 +58,21 @@
     gap: 12px;
 }
 
-.depositBox {
+.depositBoxGreen {
     flex: 1;
-    background: #e8f5e9;
-    border-radius: 12px;
-    padding: 16px;
+    background: var(--light);
+    border-radius: 10px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.depositBoxGray {
+    flex: 1;
+    background: var(--pale);
+    border-radius: 10px;
+    padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -74,15 +80,16 @@
 
 .depositLabel {
     font-family: var(--font-main);
-    font-size: 0.85rem;
-    color: #555;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--gray600);
 }
 
 .depositValue {
     font-family: var(--font-main);
-    font-size: 1.1rem;
+    font-size: 1.2rem;
     font-weight: 700;
-    color: #333;
+    color: var(--black);
 }
 
 .depositEditRow {
@@ -96,35 +103,37 @@
     border: none;
     background: transparent;
     font-family: var(--font-main);
-    font-size: 1.1rem;
+    font-size: 1.2rem;
     font-weight: 700;
-    color: #333;
+    color: var(--black);
     outline: none;
 }
 
 .won {
     font-family: var(--font-main);
-    font-size: 1rem;
-    color: #333;
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--black);
 }
 
 .saveBtn {
     padding: 4px 10px;
-    background: #555;
+    background: var(--gray200);
     border: none;
     border-radius: 6px;
-    color: var(--white);
+    color: var(--gray600);
     font-family: var(--font-main);
     font-size: 0.75rem;
-    font-weight: 700;
+    font-weight: 550;
     cursor: pointer;
+    margin-left: 30px;
 }
 
-.saveBtn:hover { background: #666; }
+.saveBtn:hover { background: var(--gray600); color: var(--white); transition: all ease-in-out 0.2s; }
 
 /* 주차 블록 */
 .weekBlock {
-    background: #2a2a2a;
+    background: var(--gray600);
     border-radius: 12px;
     overflow: hidden;
 }
@@ -144,32 +153,53 @@
     gap: 10px;
 }
 
-.weekLogoPlaceholder {
-    color: var(--main);
-    font-size: 1.2rem;
+.weekLogo {
+    width: 30px;
+    height: 30px;
+    object-fit: contain;
 }
 
 .weekLabel {
     font-family: var(--font-main);
-    font-size: 1rem;
+    font-size: 1.3rem;
     font-weight: 600;
     color: var(--white);
+    margin-left: 5px;
+}
+
+/* 토글 애니메이션 */
+.toggleIcon {
+    width: 15px;
+    height: 15px;
+    transition: transform 0.3s ease;
+}
+
+.toggleIcon2 {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.3s ease;
+    vertical-align: middle;
+}
+
+.toggleOpen {
+    transform: rotate(180deg);
 }
 
 .weekBody {
-    padding: 0 20px 16px;
+    padding: 0 0 16px;
+    margin-left: 45px;
+    margin-right: 20px;
 }
 
 .empty {
     color: #aaa;
     font-family: var(--font-main);
-    font-size: 0.9rem;
+    font-size: 1rem;
     text-align: center;
     padding: 12px 0;
 }
 
 /* 요일 블록 */
-.dayBlock { margin-top: 10px; }
 
 .dayHeader {
     display: flex;
@@ -186,62 +216,99 @@
 }
 
 .dayLabel {
-    color: var(--main);
-    font-family: var(--font-title);
-    font-size: 0.95rem;
-    font-weight: 700;
+    color: var(--dark);
+    font-family: var(--font-main);
+    font-size: 1.2rem;
+    font-weight: 650;
 }
 
 .sessionDate {
-    color: #aaa;
+    color: var(--light);
     font-family: var(--font-main);
-    font-size: 0.85rem;
+    font-size: 1rem;
+    font-weight: 500;
 }
 
 .dayBody {
-    padding: 8px 0 0 8px;
+    padding: 5px 16px 0 5px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* 출석/과제 그룹 - 레이블 옆에 아이템들 */
+.statusGroup {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
 }
 
 .sectionLabel {
-    color: #aaa;
+    color: var(--white);
     font-family: var(--font-main);
-    font-size: 0.8rem;
-    margin: 8px 0 4px;
+    font-size: 1.1rem;
+    font-weight: 500;
+    min-width: 30px;
+    padding-top: 4px;
+}
+
+.statusItems {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
-.statusRow {
+.statusItem {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 4px 0;
 }
 
 .itemLabel {
     color: var(--white);
     font-family: var(--font-main);
-    font-size: 0.9rem;
+    font-size: 1rem;
+    font-weight: 450;
+    padding-top: 3px;
 }
 
 .select {
-    padding: 4px 10px;
-    background: #444;
-    border: none;
+    padding: 3px 28px 3px 12px; 
+    width: 80px; 
+    box-sizing: border-box;
+
+    background: var(--gray600);
+    border: 1px solid var(--white);
     border-radius: 6px;
     color: var(--white);
     font-family: var(--font-main);
     font-size: 0.85rem;
-    cursor: pointer;
+    cursor: pointer;    
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
+    background-repeat: no-repeat;
+    
+    background-position: right 10px center; 
+}
+
+.select::-ms-expand {
+    display: none;
 }
 
 .saveWeekBtn {
-    margin-top: 12px;
-    padding: 8px 24px;
+    margin: 20px 0;
+    padding: 5px 30px;
     background: transparent;
     border: 1.5px solid var(--main);
-    border-radius: 50px;
+    border-radius: 10px;
     color: var(--main);
     font-family: var(--font-main);
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     display: block;
@@ -249,7 +316,7 @@
     margin-right: auto;
 }
 
-.saveWeekBtn:hover { background: var(--main); color: var(--black); }
+.saveWeekBtn:hover { background: var(--main); color: var(--white); transition: all ease-in-out 0.2s; }
 
 .divider {
     border: none;
@@ -259,17 +326,18 @@
 
 /* 전체 저장 */
 .saveAllBtn {
-    padding: 14px 0;
-    background: var(--main);
+    width: 60%;
+    margin: 0 auto;
+    padding: 10px 0;
+    background: var(--dark);
     border: none;
-    border-radius: 50px;
-    color: var(--black);
+    border-radius: 10px;
+    color: var(--white);
     font-family: var(--font-main);
     font-size: 1rem;
-    font-weight: 700;
+    font-weight: 600;
     cursor: pointer;
-    width: 100%;
     transition: opacity 0.2s;
 }
 
-.saveAllBtn:hover { opacity: 0.85; }
\ No newline at end of file
+.saveAllBtn:hover { background: var(--main); transition: all ease-in-out 0.2s; }
\ No newline at end of file
diff --git a/frontend/src/pages/pirocheck/students/StudentList.js b/frontend/src/pages/pirocheck/students/StudentList.js
index 2ce0ae1..98790c8 100644
--- a/frontend/src/pages/pirocheck/students/StudentList.js
+++ b/frontend/src/pages/pirocheck/students/StudentList.js
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styles from './StudentList.module.css';
+import ArrowRight from '../../../assets/images/icon_arrow_right.svg';
 
 const MOCK_STUDENTS = [
     { userId: 1, name: '김피로' },
@@ -67,7 +68,7 @@ function StudentList() {
                         onClick={() => navigate(`/pirocheck/students/${s.userId}`, { state: { name: s.name } })}
                     >
                         <span className={styles.studentName}>{s.name}</span>
-                        <span className={styles.arrow}>›</span>
+                        <img src={ArrowRight} className={styles.arrow} alt="arrow" />
                     </button>
                 ))}
             </div>
diff --git a/frontend/src/pages/pirocheck/students/StudentList.module.css b/frontend/src/pages/pirocheck/students/StudentList.module.css
index abba372..4eea6e6 100644
--- a/frontend/src/pages/pirocheck/students/StudentList.module.css
+++ b/frontend/src/pages/pirocheck/students/StudentList.module.css
@@ -64,6 +64,11 @@
     cursor: pointer;
 }
 
+.searchBtn:hover {
+    background: var(--main);
+    transition: all ease-in-out 0.2s;
+}
+
 .list {
     width: 450px;
     display: flex;
@@ -94,8 +99,5 @@
 }
 
 .arrow {
-    color: var(--white);
-    font-size: 1.6rem;
-    opacity: 0.7;
-    margin-bottom: 1px;
+    width: 25px; height: 25px;
 }
\ No newline at end of file