pirogramming · Imggaggu · May 7, 2025 · May 4, 2025 · May 4, 2025 · May 4, 2025
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -23,7 +23,7 @@ jobs:
 
       - name: Send Discord notification
         env:
-          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK }}
         run: |
           curl -H "Content-Type: application/json" \
                -X POST \

diff --git a/.gitignore b/.gitignore
@@ -16,4 +16,3 @@
 .env
 *.pem
 .idea/
-
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.9.0",
     "lucide-react": "^0.507.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

diff --git a/frontend/public/assets/fonts/Akira Expanded Demo.otf b/frontend/public/assets/fonts/Akira Expanded Demo.otf
diff --git a/frontend/src/assets/img/arrowicon.png → frontend/public/assets/img/arrowicon.png b/frontend/src/assets/img/arrowicon.png → frontend/public/assets/img/arrowicon.png
diff --git a/frontend/src/assets/img/arrowicon.svg → frontend/public/assets/img/arrowicon.svg b/frontend/src/assets/img/arrowicon.svg → frontend/public/assets/img/arrowicon.svg
diff --git a/frontend/public/assets/img/boom-filled-green.png b/frontend/public/assets/img/boom-filled-green.png
diff --git a/frontend/public/assets/img/boom-filled-red.png b/frontend/public/assets/img/boom-filled-red.png
diff --git a/frontend/public/assets/img/full_coin_green.png b/frontend/public/assets/img/full_coin_green.png
diff --git a/frontend/public/assets/img/logo.svg b/frontend/public/assets/img/logo.svg
diff --git a/frontend/src/assets/img/moneyicon.png → frontend/public/assets/img/moneyicon.png b/frontend/src/assets/img/moneyicon.png → frontend/public/assets/img/moneyicon.png
diff --git a/frontend/src/assets/img/moneyicon.svg → frontend/public/assets/img/moneyicon.svg b/frontend/src/assets/img/moneyicon.svg → frontend/public/assets/img/moneyicon.svg
diff --git a/frontend/public/assets/img/one_coin_yellow.png b/frontend/public/assets/img/one_coin_yellow.png
diff --git a/frontend/public/assets/img/tabler--boom.png b/frontend/public/assets/img/tabler--boom.png
diff --git a/frontend/public/assets/img/tabler--boom.svg b/frontend/public/assets/img/tabler--boom.svg
diff --git a/frontend/public/assets/img/three_out_red.png b/frontend/public/assets/img/three_out_red.png
diff --git a/frontend/public/assets/img/two_coin_yellow.png b/frontend/public/assets/img/two_coin_yellow.png
diff --git a/frontend/src/Admin.jsx b/frontend/src/Admin.jsx
@@ -0,0 +1,9 @@
+const Admin = () => {
+  return (
+    <div>
+      <h1>Admin Page</h1>
+      <p>This is the admin page.</p>
+    </div>
+  );
+};
+export default Admin;
diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -7,6 +7,7 @@ import Deposit from "./Deposit";
 import Intro from "./Intro";
 import Admin from "./Admin";
 import Attendance from "./Attendance";
+
 function App() {
   return (
     <BrowserRouter>
@@ -23,4 +24,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
diff --git a/frontend/src/Assignment.jsx b/frontend/src/Assignment.jsx
@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+import WeeklyListBlock from "./components/WeeklyListBlock";
+import Header from "./components/Header";
+import AssignmentInfoBlock from "./components/AssignmentInfoBlock";
+import styles from "./Assignment.module.css";
+import { mapStatus } from "./utils/AssignmentStatus.js";
+
+const Assignment = () => {
+  const [weeks, setWeeks] = useState([]);
+  const [highlightCard, setHighlightCard] = useState(null);
+
+  useEffect(() => {
+    const user = JSON.parse(localStorage.getItem("user"));
+    const userId = user?.id;
+
+    if (!userId) return;
+
+    fetchAssignmentsByUser(userId)
+    .then((weekData) => {
+      const formatted = weekData.map((weekItem) => ({
+        label: `${weekItem.week}주차 ${weekItem.title}`,
+        details: weekItem.days.map((dayItem) => ({
+          day: dayItem.day,
+          subject: weekItem.title,
+          tasks: dayItem.details.map((task) => ({
+            label: task.assignmentName,
+            status: mapStatus(task.status),
+          })),
+        })),
+      }));
+
+        setWeeks(formatted);
+
+        // 형광 카드용 하이라이트 카드 추출 (가장 최근 주차 + 첫 요일)=>운영진용 페이지 만든 후 수정필요
+        // 운영진이 가장 최근 공개한 과제로.
+        if (formatted.length > 0 && formatted[0].details.length > 0) {
+          const first = formatted[0];
+          const firstDay = first.details[0];
+
+          setHighlightCard({
+            weekLabel: first.label,
+            day: firstDay.day,
+            tasks: firstDay.tasks,
+          });
+        }
+      })
+      .catch(() => {
+        alert("과제 정보를 불러오지 못했습니다.");
+      });
+  }, []);
+
+  return (
+    <div className={styles.assignment_page}>
+      <Header />
+      {highlightCard && (
+        <div className={styles.info}>
+          <AssignmentInfoBlock {...highlightCard} />
+        </div>
+      )}
+      <WeeklyListBlock weeks={weeks} />
+    </div>
+  );
+};
+
+export default Assignment;
+
diff --git a/frontend/src/Assignment.module.css b/frontend/src/Assignment.module.css
@@ -0,0 +1,13 @@
+.info {
+  margin-top: 28px;
+  margin-bottom: 54px;
+}
+
+.assignment_page {
+  background-color: "black";
+  min-height: "100vh";
+  color: "white";
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/frontend/src/Attendance.jsx b/frontend/src/Attendance.jsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import Header from "./components/Header";
+import InputBlock from "./components/InputBlock";
+import AttendanceWeekInfo from "./components/AttendanceWeekInfo";
+import styles from "./Attendance.module.css";
+
+const Attendance = () => {
+  const [attendanceCode, setAttendanceCode] = useState([""]);
+  const handleChange = (index, value) => {
+    // 숫자만 입력 허용
+    if (/^\d*$/.test(value)) {
+      const userCodes = [...attendanceCode];
+      userCodes[index] = value;
+      setAttendanceCode(userCodes);
+    }
+  };
+  const handleSubmit = () => {
+    console.log("제출된 출석 코드: ", attendanceCode[0]);
+    // 서버 요청 등 추가 작업
+  };
+
+  return (
+    <div className={styles.attendance_page}>
+      <Header />
+      <InputBlock
+        inputs={[
+          {
+            type: "text",
+            placeholder: "출석코드를 입력하세요.",
+          },
+        ]}
+        values={attendanceCode}
+        onChange={handleChange}
+      />
+      {attendanceCode[0].length === 4 && (
+        <button className={styles.submitBtn} onClick={handleSubmit}>
+          Submit
+        </button>
+      )}
+      <div className={styles.attend_img_container}>
+        <div className={styles.boom_icon}>
+          <img src="/assets/img/tabler--boom.png" />
+        </div>
+        <div className={styles.boom_icon}>
+          <img src="/assets/img/tabler--boom.png" />
+        </div>
+        <div className={styles.boom_icon}>
+          <img src="/assets/img/tabler--boom.png" />
+        </div>
+      </div>
+      <div className={styles.attend_week_container}>
+        <AttendanceWeekInfo week={1} />
+        <AttendanceWeekInfo week={2} />
+        <AttendanceWeekInfo week={3} />
+        <AttendanceWeekInfo week={4} />
+        <AttendanceWeekInfo week={5} />
+      </div>
+    </div>
+  );
+};
+
+export default Attendance;
diff --git a/frontend/src/Attendance.module.css b/frontend/src/Attendance.module.css
@@ -0,0 +1,35 @@
+.attendance_page {
+  background-color: "black";
+  height: "100vh";
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.submitBtn {
+  background-color: #ffffff;
+  opacity: 42%;
+  border-radius: 10px;
+  position: absolute;
+  top: 109px;
+  right: 63px;
+  padding: 7px;
+}
+.attend_img_container {
+  display: flex;
+  gap: 22px;
+  width: 100%;
+  padding-block: 40px;
+  justify-content: center;
+}
+.boom_icon {
+  width: 70px;
+  height: 65px;
+}
+.boom_icon > img {
+  width: 100%;
+  height: 100%;
+}
+.attend_week_container {
+  margin-top: 20px;
+}
diff --git a/frontend/src/Deposit.jsx b/frontend/src/Deposit.jsx
@@ -0,0 +1,46 @@
+import Header from "./components/Header";
+import styles from "./Deposit.module.css";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+const Deposit = () => {
+  const [deposit, setDeposit] = useState(null);
+  useEffect(() => {
+    const user = JSON.parse(localStorage.getItem("user"));
+    const userId = user?.id;
+
+    if (!userId) return;
+
+    axios
+      .get(`/api/deposit/${userId}`)
+      .then((res) => setDeposit(res.data))
+      .catch((err) => {
+        alert("보증금 정보를 불러오지 못했습니다.");
+      });
+  }, []);
+
+  if (!deposit) return <div>loagin...</div>;
+
+  return (
+    <div className={styles.deposit_container}>
+      <Header />
+      <div className={styles.deposit}>
+        <span>잔여 보증금</span>
+        <span>{deposit.amount}원</span>
+      </div>
+      <div className={styles.deposit_detail}>
+        <span>과제 차감</span>
+        <span>{deposit.descentAssignment}원</span>
+      </div>
+      <div className={styles.deposit_detail}>
+        <span>출석 차감</span>
+        <span>{deposit.descentAttendance}원</span>
+      </div>
+      <div className={styles.deposit_detail}>
+        <span>보증금 방어권</span>
+        <span>{deposit.ascentDefence}원</span>
+      </div>
+    </div>
+  );
+};
+export default Deposit;
diff --git a/frontend/src/Deposit.module.css b/frontend/src/Deposit.module.css
@@ -0,0 +1,41 @@
+.deposit_container {
+  width: 390px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.deposit {
+  background-color: var(--main-green);
+  width: 309px;
+  padding-top: 26px;
+  padding-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 17px;
+  border-radius: 9px;
+  margin-top: 80px;
+  margin-bottom: 87px;
+}
+.deposit > span:nth-child(1) {
+  font-weight: bold;
+  font-size: 16px;
+}
+.deposit > span:nth-child(2) {
+  font-weight: bold;
+  font-size: 20px;
+}
+.deposit_detail {
+  background-color: #575757;
+  color: white;
+  border: 1px solid rgba(217, 217, 217, 0.4);
+  border-radius: 8px;
+  padding: 12px 20px;
+  font-size: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 309px;
+  height: 47px;
+  margin-bottom: 15px;
+}
diff --git a/frontend/src/Home.jsx b/frontend/src/Home.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import styles from "./Home.module.css";
+
+const Home = () => {
+  const navigate = useNavigate();
+  return (
+    <div className={styles.home_container}>
+      <div className={styles.home}>
+        <h1 className={styles.pirocheck}>PIROCHECK</h1>
+        <button
+          className={styles.button}
+          onClick={() => navigate("/assignment")}
+        >
+          <p>ASSIGNMENT</p>
+          <p>CHECK</p>
+        </button>
+        <button
+          className={styles.button}
+          onClick={() => navigate("/attendance")}
+        >
+          <p>ATTENDANCE</p>
+          <p>CHECK</p>
+        </button>
+        <img src="/assets/img/logo.svg" alt="로고" />
+      </div>
+    </div>
+  );
+};
+
+export default Home;