[Feat] 부원용 Deposit Check UI 구현

frontend/src/App.js

@@ -9,6 +9,7 @@ import CurriculumPage from './pages/curriculum/CurriculumPage';
 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';
 
 function App() {
   return (
@@ -33,6 +34,7 @@ function App() {
             <Route path="/pirocheck" element={<PiroCheckMain />}/>
             <Route path="/pirocheck/attendance" element={<Attendance />}/>
             <Route path="/pirocheck/assignment" element={<Assignment />}/>
+            <Route path="/pirocheck/deposit" element={<Deposit />}/>
         </Route>
 
       </Routes>

frontend/src/pages/pirocheck/deposit/Deposit.js

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+import styles from './Deposit.module.css';
+
+// 임시 데이터
+const MOCK_DATA = {
+    amount: 100000,
+    descentAssignment: 10000,
+    descentAttendance: 10000,
+    ascentDefence: 10000,
+};
+
+const IS_MOCK = true; // 백엔드 연동 시 false로 변경
+
+function Deposit() {
+    const [deposit, setDeposit] = useState(null);
+
+    useEffect(() => {
+        if (IS_MOCK) {
+            setDeposit(MOCK_DATA);
+            return;
+        }
+        fetch('/api/deposit/me')
+            .then(r => r.json())
+            .then(data => setDeposit(data))
+            .catch(() => setDeposit(MOCK_DATA));
+    }, []);
+
+    if (!deposit) return null;
+
+    return (
+        <div className={styles.container}>
+            {IS_MOCK && (
+                <div className={styles.mockBanner}>
+                    ⚠️ 현재 임시 데이터로 표시 중입니다. 백엔드 연동 후 IS_MOCK을 false로 변경하세요.
+                </div>
+            )}
+
+            <div className={styles.title}>DEPOSIT CHECK</div>
+
+            <div className={styles.amountBox}>
+                <div className={styles.amountLabel}>잔여 보증금</div>
+                <div className={styles.amountValue}>{deposit.amount.toLocaleString()}원</div>
+            </div>
+
+            <div className={styles.itemList}>
+                <div className={styles.item}>
+                    <span className={styles.itemLabel}>과제 차감</span>
+                    <span className={styles.itemValue}>{deposit.descentAssignment.toLocaleString()}원</span>
+                </div>
+                <div className={styles.item}>
+                    <span className={styles.itemLabel}>출석 차감</span>
+                    <span className={styles.itemValue}>{deposit.descentAttendance.toLocaleString()}원</span>
+                </div>
+                <div className={styles.item}>
+                    <span className={styles.itemLabel}>보증금 방어권</span>
+                    <span className={styles.itemValue}>{deposit.ascentDefence.toLocaleString()}원</span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Deposit;

frontend/src/pages/pirocheck/deposit/Deposit.module.css

@@ -0,0 +1,88 @@
+.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;
+    text-align: center;
+    width: 400px;
+    box-sizing: border-box;
+}
+
+.title {
+    font-family: var(--font-title);
+    font-size: 3rem;
+    font-weight: 800;
+    color: var(--main);
+    margin-bottom: 40px;
+    letter-spacing: 0;
+}
+
+/* 잔여 보증금 박스 */
+.amountBox {
+    width: 400px;
+    background: #e8f5e9;
+    border-radius: 16px;
+    padding: 36px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.amountLabel {
+    font-family: var(--font-main);
+    font-size: 1.5rem;
+    font-weight: 650;
+    color: var(--gray600);
+}
+
+.amountValue {
+    font-family: var(--font-title);
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--main);
+}
+
+/* 차감 목록 */
+.itemList {
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.item {
+    background: var(--gray600);
+    border-radius: 12px;
+    padding: 20px 28px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.itemLabel {
+    font-family: var(--font-main);
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--white);
+}
+
+.itemValue {
+    font-family: var(--font-main);
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--white);
+}