From 159d72925cf628faa3598508d254f65b282632f5 Mon Sep 17 00:00:00 2001 From: sewon Date: Sun, 5 Oct 2025 16:23:29 +0900 Subject: [PATCH 1/8] =?UTF-8?q?(#330)=20=EC=95=8C=EB=A6=BC=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C,=20=EC=95=8C=EB=A6=BC=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20api=20=EC=97=B0=EA=B2=B0=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/student/notification/page.module.scss | 74 +++++++++ frontend/app/student/notification/page.tsx | 56 ++++++- .../(profile)/_components/MenuSection.tsx | 3 +- .../notification-setting/page.module.scss | 88 +++++++++++ .../profile/notification-setting/page.tsx | 143 +++++++++++++++++- 5 files changed, 359 insertions(+), 5 deletions(-) diff --git a/frontend/app/student/notification/page.module.scss b/frontend/app/student/notification/page.module.scss index e69de29b..3c8e708d 100644 --- a/frontend/app/student/notification/page.module.scss +++ b/frontend/app/student/notification/page.module.scss @@ -0,0 +1,74 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + background-color: #f8f9fa; + width: 100%; + box-sizing: border-box; +} + +.header { + position: relative; + width: 100%; + max-width: 800px; + text-align: center; + font-size: 18px; + font-weight: bold; + color: #333; + padding: 40px 0; + height: auto; +} + +.divider { + width: 100%; + max-width: 800px; + border: 0; + border-top: 1px dashed #ccc; + margin-bottom: 15px; +} + +.notificationList { + list-style: none; + padding: 0; + margin: 0; + width: 100%; + max-width: 800px; +} + +.notificationItem { + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px 20px; + border-bottom: 1px solid #f0f0f0; + + &:last-child { + border-bottom: none; + } +} + +.title { + display: flex; + justify-content: space-between; + align-items: center; + flex-grow: 1; /* 남은 공간을 모두 차지 */ + font-size: 16px; + color: #555; + padding-right: 20px; /* newIndicator와의 간격 */ +} + +.dateTime { + font-size: 12px; + color: #999; + white-space: nowrap; + margin-left: 10px; +} + +.newIndicator { + width: 5px; + height: 5px; + background-color: #e53e3e; + border-radius: 50%; + flex-shrink: 0; +} \ No newline at end of file diff --git a/frontend/app/student/notification/page.tsx b/frontend/app/student/notification/page.tsx index 76499a1c..b59a60aa 100644 --- a/frontend/app/student/notification/page.tsx +++ b/frontend/app/student/notification/page.tsx @@ -1,3 +1,55 @@ +"use client"; + +import React, { useEffect, useState } from "react"; +import styles from "./page.module.scss"; +import { fetchNotifications , NotificationResponse, getAlarmMessage } from "@/api/notifications/fetchNotification"; + export default function StudentNotificationPage() { - return
알림
; -} + const [notifications, setNotifications] = useState([]); + + useEffect(() => { + const loadNotifications = async () => { + const res = await fetchNotifications(); + if (res.isSuccess && res.result) { + setNotifications(res.result); + } else { + console.error("알림 조회 실패:", res.message); + } + }; + loadNotifications(); + }, []); + + return ( +
+ +
    + {notifications.map((notification) => { + const date = new Date(notification.createdAt); + const formattedDate = date.toLocaleDateString("ko-KR", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }); + const formattedTime = date.toLocaleTimeString("ko-KR", { + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }); + + return ( +
  • +
    + + [{notification.className ?? "알 수 없음"}] {getAlarmMessage(notification.alarmType)} + + + {formattedDate} {formattedTime} + +
    +
  • + ); + })} +
+
+ ); +} \ No newline at end of file diff --git a/frontend/app/student/profile/(profile)/_components/MenuSection.tsx b/frontend/app/student/profile/(profile)/_components/MenuSection.tsx index 72e87946..878aa3b1 100644 --- a/frontend/app/student/profile/(profile)/_components/MenuSection.tsx +++ b/frontend/app/student/profile/(profile)/_components/MenuSection.tsx @@ -35,8 +35,7 @@ export default function MenuSection() {
  • - 알림 설정 - {/* TODO: 추후 실제 알림설정 경로명으로 수정 */} + 알림 설정