From b90e964c14bcab68845171387913493f3231b045 Mon Sep 17 00:00:00 2001 From: plumbestie Date: Sat, 23 May 2026 17:37:12 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[Feat]=20=EB=B6=80=EC=9B=90=EC=9A=A9=20Depo?= =?UTF-8?q?sit=20Check=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.js | 2 + .../src/pages/pirocheck/deposit/Deposit.js | 63 +++++++++++++ .../pirocheck/deposit/Deposit.module.css | 88 +++++++++++++++++++ 3 files changed, 153 insertions(+) create mode 100644 frontend/src/pages/pirocheck/deposit/Deposit.js create mode 100644 frontend/src/pages/pirocheck/deposit/Deposit.module.css diff --git a/frontend/src/App.js b/frontend/src/App.js index dc6becf..13c568a 100644 --- a/frontend/src/App.js +++ b/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() { }/> }/> }/> + }/> diff --git a/frontend/src/pages/pirocheck/deposit/Deposit.js b/frontend/src/pages/pirocheck/deposit/Deposit.js new file mode 100644 index 0000000..8b7f2f9 --- /dev/null +++ b/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 ( +
+ {IS_MOCK && ( +
+ ⚠️ 현재 임시 데이터로 표시 중입니다. 백엔드 연동 후 IS_MOCK을 false로 변경하세요. +
+ )} + +
DEPOSIT CHECK
+ +
+
잔여 보증금
+
{deposit.amount.toLocaleString()}원
+
+ +
+
+ 과제 차감 + {deposit.descentAssignment.toLocaleString()}원 +
+
+ 출석 차감 + {deposit.descentAttendance.toLocaleString()}원 +
+
+ 보증금 방어권 + {deposit.ascentDefence.toLocaleString()}원 +
+
+
+ ); +} + +export default Deposit; \ No newline at end of file diff --git a/frontend/src/pages/pirocheck/deposit/Deposit.module.css b/frontend/src/pages/pirocheck/deposit/Deposit.module.css new file mode 100644 index 0000000..f600f5a --- /dev/null +++ b/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.1rem; + font-weight: 500; + color: #333; +} + +.amountValue { + font-family: var(--font-title); + font-size: 2.2rem; + font-weight: 800; + color: var(--main); +} + +/* 차감 목록 */ +.itemList { + width: 400px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.item { + background: #3a3a3a; + border-radius: 12px; + padding: 20px 28px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.itemLabel { + font-family: var(--font-main); + font-size: 1rem; + font-weight: 500; + color: var(--white); +} + +.itemValue { + font-family: var(--font-main); + font-size: 1rem; + font-weight: 600; + color: var(--white); +} \ No newline at end of file From c5a6957430352b7830269648a808b327f3f56ec9 Mon Sep 17 00:00:00 2001 From: plumbestie Date: Sat, 23 May 2026 18:00:42 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[Feat]=20=EB=B6=80=EC=9B=90=EC=9A=A9=20Depo?= =?UTF-8?q?site=20Check=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/pirocheck/deposit/Deposit.module.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/pages/pirocheck/deposit/Deposit.module.css b/frontend/src/pages/pirocheck/deposit/Deposit.module.css index f600f5a..298bf8b 100644 --- a/frontend/src/pages/pirocheck/deposit/Deposit.module.css +++ b/frontend/src/pages/pirocheck/deposit/Deposit.module.css @@ -44,14 +44,14 @@ .amountLabel { font-family: var(--font-main); - font-size: 1.1rem; - font-weight: 500; - color: #333; + font-size: 1.5rem; + font-weight: 650; + color: var(--gray600); } .amountValue { font-family: var(--font-title); - font-size: 2.2rem; + font-size: 2rem; font-weight: 800; color: var(--main); } @@ -65,7 +65,7 @@ } .item { - background: #3a3a3a; + background: var(--gray600); border-radius: 12px; padding: 20px 28px; display: flex; @@ -75,14 +75,14 @@ .itemLabel { font-family: var(--font-main); - font-size: 1rem; + font-size: 1.1rem; font-weight: 500; color: var(--white); } .itemValue { font-family: var(--font-main); - font-size: 1rem; + font-size: 1.1rem; font-weight: 600; color: var(--white); } \ No newline at end of file