feat :: 공지사항 코멘트 반영

Team-return · Apr 19, 2024 · 3bedc72 · 3bedc72
1 parent b3061e9
commit 3bedc72
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 49 deletions.
diff --git a/src/apis/notice/index.ts b/src/apis/notice/index.ts
@@ -1,26 +1,29 @@
 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";
 
 /** 공지사항 리스트를 조회하는 api 입니다 */
 export const useGetNoticeListData = () => {
     const [notices, setNotices] = useState<NoticeListResponse[]>([]);
-
+    const { append } = useToastStore();
     useEffect(() => {
         const fetchNoticeList = async () => {
             try {
-                const response = await instance.get(`${process.env.NEXT_PUBLIC_BASE_URL}/notices`);
-                const data = response.data;
-
+                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) {
-                console.error('notice list error: ', error.message);
+                append({
+                    title: "",
+                    message: "공지사항 리스트 조회에 실패하였습니다.",
+                    type: "RED",
+                });
             }
         };
         fetchNoticeList();
@@ -29,32 +32,36 @@ export const useGetNoticeListData = () => {
     return { notices };
 }
 
+
 /** 공지사항 상세보기를 조회하는 api 입니다 */
 export const useGetNoticeDetailData = (noticeId: string) => {
-    const [noticeDetail, setNoticeDetail] = useState<NoticeDetailResponse | null>(null);
-
-    useEffect(() => {
-        const fetchNoticeDetail = async () => {
-            try {
-                const response = await instance.get(`${process.env.NEXT_PUBLIC_BASE_URL}/notices/${noticeId}`);
-                const data = response.data;
+    const { append } = useToastStore();
+    const fetchNoticeDetail = async () => {
+        const {data} = await instance.get(`${process.env.NEXT_PUBLIC_BASE_URL}/notices/${noticeId}`);
 
-                const fetchedNoticeDetail: NoticeDetailResponse = {
-                    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
-                    }))
-                };
-                setNoticeDetail(fetchedNoticeDetail);
-            } catch (error: any) {
-                console.error('notice detail error:', error.message);
-            }
+        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
+            }))
         };
-        fetchNoticeDetail();
-    }, [noticeId]);
+    };
+
+    const { data: noticeDetail } = useQuery(['noticeDetail', noticeId], fetchNoticeDetail, {
+        onSuccess: () => {
+            console.log('공지사항 상세보기 성공');
+        },
+        onError: () => {
+            append({
+              title: "",
+              message: "공지사항 상세보기 조회에 실패하였습니다.",
+              type: "RED",
+            });
+        },
+    });
 
     return { noticeDetail };
 };
diff --git a/src/apis/notice/type.ts b/src/apis/notice/type.ts
@@ -18,4 +18,5 @@ type AttachmentType =
 export interface AttachmentResponse {
     url: string;
     type: AttachmentType;
+    id: string;
 }
diff --git a/src/app/mypage/notice/detail/[id]/page.tsx b/src/app/mypage/notice/detail/[id]/page.tsx
@@ -7,7 +7,7 @@ import AttachedBox from "@/components/notice/AttachedBox";
 export default function NoticeDetailPage(props:any) {
     const noticeId = props.params.id
     const {noticeDetail} = useGetNoticeDetailData(noticeId);
-    const items = [noticeDetail]
+    // const items = [noticeDetail]
 
     return (
         <div className="flex justify-cent4er items-center mt-[100px]">
@@ -18,9 +18,7 @@ export default function NoticeDetailPage(props:any) {
                         <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>
-                        {items?.map((item) => (
-                            <AttachedBox props={item?.attachments || []} />
-                        ))}
+                        <AttachedBox props={noticeDetail?.attachments || []} />
                     </div>
                 </div>
             </div>

diff --git a/src/components/notice/AttachedBox.tsx b/src/components/notice/AttachedBox.tsx
@@ -10,30 +10,32 @@ interface PropsType {
 }
 
 export default function AttachedBox ({props}: PropsType) {
-    console.log(props);
+    const downLoadFile = async (attachment: AttachmentResponse) => {
+        try {
+            const response = await axios.get(`${process.env.NEXT_PUBLIC_IMAGE_URL}/${attachment.url}`, {
+                responseType: 'blob'
+            });
 
-    const downLoadFile = (attachment: AttachmentResponse) => {
-        fetch("https://jobis-store.s3.ap-northeast-2.amazonaws.com/" + attachment.url, { method: "GET"}).then(res => res.blob()).then((blob) => 
-            {
-                const url = window.URL.createObjectURL(blob);
-                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);
-            }
-        )
+            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-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, index) => (
-                        <div key={index} className="flex gap-[7px] items-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>

diff --git a/src/components/notice/NoticeListTable.tsx b/src/components/notice/NoticeListTable.tsx
@@ -9,7 +9,7 @@ export default function NoticeListTable () {
     return (
         <>
             {notices.map((notice, index) => (
-                <Link key={index} href={`detail/${notice.id}`}>
+                <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">{index+1}</td>