From 3bedc7241da94404860f2d771f7cebc4bd1ca0f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9D=98=EC=A7=84?= Date: Fri, 19 Apr 2024 18:59:45 +0900 Subject: [PATCH] =?UTF-8?q?feat=20::=20=EA=B3=B5=EC=A7=80=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EC=BD=94=EB=A9=98=ED=8A=B8=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/notice/index.ts | 63 ++++++++++++---------- src/apis/notice/type.ts | 1 + src/app/mypage/notice/detail/[id]/page.tsx | 6 +-- src/components/notice/AttachedBox.tsx | 34 ++++++------ src/components/notice/NoticeListTable.tsx | 2 +- 5 files changed, 57 insertions(+), 49 deletions(-) diff --git a/src/apis/notice/index.ts b/src/apis/notice/index.ts index 79861a3..e718897 100644 --- a/src/apis/notice/index.ts +++ b/src/apis/notice/index.ts @@ -1,18 +1,17 @@ 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([]); - + 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, @@ -20,7 +19,11 @@ export const useGetNoticeListData = () => { })); 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(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 index 435d397..24733ad 100644 --- 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; } \ No newline at end of file diff --git a/src/app/mypage/notice/detail/[id]/page.tsx b/src/app/mypage/notice/detail/[id]/page.tsx index e233771..19930d3 100644 --- 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 (
@@ -18,9 +18,7 @@ export default function NoticeDetailPage(props:any) {

{noticeDetail?.title}

{noticeDetail?.created_at.substring(0, 10)}

{noticeDetail?.content}

- {items?.map((item) => ( - - ))} +
diff --git a/src/components/notice/AttachedBox.tsx b/src/components/notice/AttachedBox.tsx index fab3e55..6741c59 100644 --- a/src/components/notice/AttachedBox.tsx +++ b/src/components/notice/AttachedBox.tsx @@ -10,21 +10,23 @@ 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 ( @@ -32,8 +34,8 @@ export default function AttachedBox ({props}: PropsType) {
첨부자료
- {props.map((attachment, index) => ( -
+ {props.map((attachment) => ( +
{file_name_regex(attachment.url)}
downLoadFile(attachment)} />
diff --git a/src/components/notice/NoticeListTable.tsx b/src/components/notice/NoticeListTable.tsx index b8ba080..e01de46 100644 --- 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) => ( - + {index+1}