merge :: 공지사항 api 연동

package.json

@@ -12,6 +12,7 @@
     "@next/font": "^13.5.2",
     "@tanstack/react-query": "4.33.0",
     "@team-return/design-system": "^1.1.15",
+    "aws-sdk": "^2.1582.0",
     "axios": "^1.6.2",
     "debug": "^4.3.4",
     "next": "13.4.7",

src/apis/notice/index.ts

@@ -1,10 +1,67 @@
 import { NoticeListResponse } from "./type";
-import { NoticeDetailResponse } from "./type";
+import { useState, useEffect } from "react";
+import { instance } from "../axios";
+import { useQuery } from "@tanstack/react-query";
+import { useToastStore } from "@team-return/design-system";
 
-export const useGetNoticeList = () => {
+/** 공지사항 리스트를 조회하는 api 입니다 */
+export const useGetNoticeListData = () => {
+    const [notices, setNotices] = useState<NoticeListResponse[]>([]);
+    const { append } = useToastStore();
+    useEffect(() => {
+        const fetchNoticeList = async () => {
+            try {
+                const { data } = await instance.get(`${process.env.NEXT_PUBLIC_BASE_URL}/notices`);
+                const fetchedNotices: NoticeListResponse[] = data.notices.map((notice: any) => ({
+                    id: notice.id,
+                    title: notice.title,
+                    created_at: new Date(notice.created_at).toISOString()
+                }));
+                setNotices(fetchedNotices);
+            } catch (error: any) {
+                append({
+                    title: "",
+                    message: "공지사항 리스트 조회에 실패하였습니다.",
+                    type: "RED",
+                });
+            }
+        };
+        fetchNoticeList();
+    }, []);
 
-};
+    return { notices };
+}
+
+
+/** 공지사항 상세보기를 조회하는 api 입니다 */
+export const useGetNoticeDetailData = (noticeId: string) => {
+    const { append } = useToastStore();
+    const fetchNoticeDetail = async () => {
+        const {data} = await instance.get(`${process.env.NEXT_PUBLIC_BASE_URL}/notices/${noticeId}`);
 
-export const useGetNoticeDetail = () => {
-
-};
+        return {
+            title: data.title,
+            content: data.content,
+            created_at: new Date(data.created_at).toISOString(),
+            attachments: data.attachments.map((attachment: any) => ({
+                url: attachment.url,
+                type: attachment.type
+            }))
+        };
+    };
+
+    const { data: noticeDetail } = useQuery(['noticeDetail', noticeId], fetchNoticeDetail, {
+        onSuccess: () => {
+            console.log('공지사항 상세보기 성공');
+        },
+        onError: () => {
+            append({
+              title: "",
+              message: "공지사항 상세보기 조회에 실패하였습니다.",
+              type: "RED",
+            });
+        },
+    });
+
+    return { noticeDetail };
+};

src/apis/notice/type.ts

@@ -1,14 +1,22 @@
 export interface NoticeListResponse {
-    notices: {
-        notice_id: number;
-        title: string;
-        createAt: string;
-    }[];
-};
+    id: number
+    title: string
+    created_at: string
+}
 
 export interface NoticeDetailResponse {
     title: string;
     content: string;
-    createAt: string;
-    attachments: string[];
+    created_at: string;
+    attachments: AttachmentResponse[];
+}
+
+type AttachmentType =
+  | "FILE"
+  | "URL"
+
+export interface AttachmentResponse {
+    url: string;
+    type: AttachmentType;
+    id: string;
 }

src/app/mypage/notice/detail/[id]/page.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { useGetNoticeDetailData, useGetNoticeListData } from "@/apis/notice";
+import { useEffect, useState } from "react";
+import AttachedBox from "@/components/notice/AttachedBox";
+
+export default function NoticeDetailPage(props:any) {
+    const noticeId = props.params.id
+    const {noticeDetail} = useGetNoticeDetailData(noticeId);
+    // const items = [noticeDetail]
+
+    return (
+        <div className="flex justify-cent4er items-center mt-[100px]">
+            <div className="flex flex-col gap-[40px]">
+                <h1 className="text-[28px] font-[500] text-left">공지사항</h1>
+                <div className="w-[1151px] h-[494px] overflow-y-auto">
+                    <div className="bg-white border-[1px] border-gray rounded-[12px] p-[40px]">
+                        <h1 className="font-[700] text-[28px]">{noticeDetail?.title}</h1>
+                        <h2 className="font-[500] text-[20px] mt-[20px]">{noticeDetail?.created_at.substring(0, 10)}</h2>
+                        <p className="font-[400] text-[16px] mt-[28px] whitespace-pre-line">{noticeDetail?.content}</p>
+                        <AttachedBox props={noticeDetail?.attachments || []} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+

src/app/mypage/notice/page.tsx

@@ -1,4 +1,3 @@
-import Logo from "@/components/common/Logo"
 import NoticeLists from "@/components/notice/NoticeLists"
 
 export default function Notice () {

src/components/notice/AttachedBox.tsx

@@ -1,12 +1,47 @@
-export default function AttachedBox () {
+'use client'
+
+import { Icon } from "@team-return/design-system"
+import { AttachmentResponse } from "@/apis/notice/type"
+import { file_name_regex } from "@/util/regex";
+import axios from "axios";
+
+interface PropsType {
+    props: AttachmentResponse[]
+}
+
+export default function AttachedBox ({props}: PropsType) {
+    const downLoadFile = async (attachment: AttachmentResponse) => {
+        try {
+            const response = await axios.get(`${process.env.NEXT_PUBLIC_IMAGE_URL}/${attachment.url}`, {
+                responseType: 'blob'
+            });
+
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = file_name_regex(attachment.url);
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+        } catch (error) {
+            console.error('파일 다운로드 에러: ', error);
+        }
+    }
+
     return (
-        <div className="flex flex-row w-full h-[108px] mt-[32px] border-t-[2px] border-b-[1px] border-[#135C9D] p-[16px] gap-[20px]">
-            <div className="font-[500] text-[18px] ">첨부자료</div>
-            <div className="flex flex-col gap-[4px] justify-center">
-                <div>2024학년도 신입생 과제.hwp</div>
-                <div>2024학년도 신입생 과제.hwp</div>
-                <div>2024학년도 신입생 과제.hwp</div>
+        <>
+            <div className="flex flex-row w-full h-auto mt-[32px] border-t-[2px] border-b-[1px] border-[#135C9D] p-[16px] gap-[20px]">
+                <div className="font-[500] text-[18px] ">첨부자료</div>
+                <div className="flex flex-col gap-[4px] justify-center ">
+                    {props.map((attachment) => (
+                        <div key={attachment.id} className="flex gap-[7px] items-center">
+                            <div>{file_name_regex(attachment.url)}</div> 
+                            <Icon icon="Download" size={15} color="liteBlue" cursor="pointer" onClick={() => downLoadFile(attachment)} />
+                        </div>
+                    ))}
+                </div>
             </div>
-        </div>
+        </>
     )
 }

src/components/notice/NoticeListTable.tsx

@@ -1,17 +1,24 @@
+'use client'
+
 import Link from "next/link"
+import { useGetNoticeListData } from "@/apis/notice";
 
 export default function NoticeListTable () {
+    const {notices} = useGetNoticeListData();
+
     return (
         <>
-            <Link href={"/mypage/notice/detail"}>
-                <tbody className="flex justify-center items-center border-collapse">
+            {notices.map((notice, index) => (
+                <Link key={notice.id} href={`detail/${notice.id}`}>
+                    <tbody className="flex justify-center items-center border-collapse">
                         <tr className="h-[60px] border-b-[0.5px] border-[#7F7F7F]">
-                        <td className="border-none w-[192px] text-[16px] text-[#135C9D] flex justify-center">12</td>
-                        <td className="border-none w-[735px] text-[16px] flex justify-center">[중요] 오리엔테이션날 일정 안내</td>
-                        <td className="border-none w-[192px] text-[16px] flex justify-center">2024-01-16</td>
-                    </tr>
-                </tbody>
-            </Link>
+                            <td className="border-none w-[192px] text-[16px] text-[#135C9D] flex justify-center">{index+1}</td>
+                            <td className="border-none w-[735px] text-[16px] flex justify-center">{notice.title}</td>
+                            <td className="border-none w-[192px] text-[16px] flex justify-center">{notice.created_at.substring(0, 10)}</td>
+                        </tr>
+                    </tbody>
+                </Link>
+            ))}
         </>
     )
 }

src/components/notice/NoticeLists.tsx

@@ -1,7 +1,8 @@
+'use client'
+
 import Pagination from "../common/Pagination"
 import Link from "next/link";
 import NoticeListTable from "./NoticeListTable";
-import { useGetNoticeList } from "@/apis/notice";
 
 export default function NoticeLists() {
     return (
@@ -16,9 +17,6 @@ export default function NoticeLists() {
                 </thead>
                 <NoticeListTable />
             </table>
-            <div className="mb-[98px]">
-                <Pagination />
-            </div>
         </div>
     )
 }