feat: 공지사항 api 연동

Team-return · May 12, 2024 · 5f91be1 · 5f91be1
1 parent d77e20b
commit 5f91be1
Show file tree

Hide file tree

Showing 14 changed files with 346 additions and 195 deletions.
diff --git a/src/Apis/Files/index.ts b/src/Apis/Files/index.ts
@@ -3,11 +3,15 @@ import { PresignedUrlResponse } from "./response";
 import { instance } from "../axios";
 import axios from "axios";
 
-export const usePresignedUrl = () => {
-    return useMutation(
-        async (attachments: File[]) => {
+export type PresignedUrlType =
+    | "LOGO_IMAGE"
+    | "EXTENSION_FILE";
+
+export const usePresignedUrl = (type: PresignedUrlType) => {
+    const res = useMutation(
+        async (attachments: File[] ) => {
             const files = attachments.map((item) => ({
-                type: 'EXTENSION_FILE',
+                type: "EXTENSION_FILE",
                 file_name: item.name,
             }));
 
@@ -16,11 +20,13 @@ export const usePresignedUrl = () => {
         }, {
             onSuccess: async ({ presignedUrls, attachments }) => {
 
-                const uploadPromises = presignedUrls.urls.map(({pre_signed_url}, idx) => {
+                const uploadPromises = await presignedUrls.urls.map(({pre_signed_url}, idx) => {
                     (async () => await axios.put(pre_signed_url, attachments[idx]))();
                 });
                 await Promise.all(uploadPromises);
+                return;
             }
         }
     )
+    return res
 }
diff --git a/src/Apis/Files/response.ts b/src/Apis/Files/response.ts
@@ -1,8 +1,7 @@
 export interface PresignedUrlResponse {
-    urls: [
-        {
+    urls: {
             file_path: string,
-            pre_signed_url: string
-        }
-    ]
+            pre_signed_url: string,
+            url: string
+    }[]
 }
diff --git a/src/Apis/Notices/index.ts b/src/Apis/Notices/index.ts
@@ -1,18 +1,15 @@
-import { NoticeWrite } from "./request";
+import { NoticeWrite, NoticeEdit } from "./request";
 import { MutationOptions, useMutation } from "react-query";
 import { instance } from "../axios";
 import { NoticeListResponse } from "./response";
 import { useEffect, useState } from "react";
 import { NoticeDetailResponse } from "./response";
 
 /** 공지사항 작성 */
-export const useNoticeWriteData = (noticeData: NoticeWrite) => {
-    const formData = new FormData()
-    noticeData.attachments.forEach((attachment) => { formData.append('file', attachment) })
-
+export const useNoticeWriteData = () => {
     return useMutation(
-        async () => {
-            const { data } = await instance.post(`${process.env.REACT_APP_BASE_URL}/notices`, {...noticeData, attachments: formData});
+        async (noticeData: NoticeWrite) => {
+            const { data } = await instance.post(`/notices`, noticeData);
             return data;
         },
         {
@@ -23,12 +20,29 @@ export const useNoticeWriteData = (noticeData: NoticeWrite) => {
     )
 }
 
+/** 공지사항 수정 */
+export const useNoticeEditData = (noticeId: string) => {
+    return useMutation(
+        async (noticeData: NoticeEdit) => {
+            const { data } = await instance.patch(`/notices/${noticeId}`, noticeData);
+            return data;
+        },
+        {
+            onError: (error: Error) => {
+                console.error("notice edit error: ", error);
+
+            }
+        }
+    )
+}
+
 /** 공지사항 상세보기 조회 */
 export const useNoticeDetailData = (noticeId: string) => {
     const [noticeDetail, setNoticeDetail] = useState<NoticeDetailResponse | null>(null);
 
     useEffect(() => {
         const fetchNoticeDetail = async () => {
+
             try {
                 const response = await instance.get(`${process.env.REACT_APP_BASE_URL}/notices/${noticeId}`);
                 const data = response.data;

diff --git a/src/Apis/Notices/request.ts b/src/Apis/Notices/request.ts
@@ -1,7 +1,20 @@
+import { AttachmentType } from "./response";
+
 export interface NoticeWrite {
 	title: string;
 	content: string;
-	attachments: string[];
+	attachments: AttachmentRequest[];
+}
+
+export interface NoticeEdit {
+	title: string;
+	content: string;
+	attachments: AttachmentRequest[];
+}
+
+export interface AttachmentRequest {
+    url: string;
+    type: AttachmentType;
 }
 
 export interface NoticeDelete {

diff --git a/src/Apis/Notices/response.ts b/src/Apis/Notices/response.ts
@@ -11,7 +11,7 @@ export interface NoticeDetailResponse {
     attachments: AttachmentResponse[];
 }
 
-type AttachmentType =
+export type AttachmentType =
     | "FILE"
     | "URL"
 

diff --git a/src/Apis/axios.ts b/src/Apis/axios.ts
@@ -13,8 +13,6 @@ let flag = false;
 instance.interceptors.request.use(
 	(config) => {
 		const accessToken = cookies.get('access_token');
-		console.log();
-
 		const returnConfig = { ...config };
 		if (accessToken) {
 			returnConfig.headers!['Authorization'] = `Bearer ${accessToken}`;
@@ -30,7 +28,6 @@ instance.interceptors.response.use(
 		if (axios.isAxiosError(error) && error.response) {
 			const { config } = error;
 			const refreshToken = cookies.get('refresh_token');
-			console.log(refreshToken);
 			if (!refreshToken) {
 				cookies.remove('access_token');
 				cookies.remove('refresh_token');

diff --git a/src/Pages/NoticePage/NoticeDetailPage/index.tsx b/src/Pages/NoticePage/NoticeDetailPage/index.tsx
@@ -5,14 +5,15 @@ import { Icon } from '@team-return/design-system';
 import { useDeleteNotice } from '../../../Apis/Notices';
 import * as _ from './style';
 import { AttachedBox } from '../../../Components/Notice/AttachedBox';
+import { Link } from 'react-router-dom';
+import { useEffect } from 'react';
 
 export function NoticeDetailPage() {
-	const { id } = useParams<{ id: any }>();
-	const { noticeDetail } = useNoticeDetailData(id);
-	const items = [noticeDetail];
+	const { id } = useParams<{ id: string }>();
+	const { noticeDetail } = useNoticeDetailData(id || '');
 
 	const navigate = useNavigate();
-	const { mutate: deleteNotice } = useDeleteNotice(id, {
+	const { mutate: deleteNotice } = useDeleteNotice(id || '', {
 		onSuccess: () => {
 			navigate('/Notice');
 		},
@@ -27,6 +28,12 @@ export function NoticeDetailPage() {
 		}
 	};
 
+	const date = noticeDetail?.created_at.substring(0, 10);
+
+	useEffect(() => {
+		console.log(noticeDetail);
+	}, [noticeDetail]);
+
 	return (
 		<>
 			<Header />
@@ -44,22 +51,31 @@ export function NoticeDetailPage() {
 										onClick={handleDeleteClick}
 									></Icon>
 								</_.IconBox>
-								<_.IconBox>
-									<Icon
-										icon="EditPencil"
-										color={'gray90'}
-										size={26}
-									></Icon>
-								</_.IconBox>
+								<Link
+									to={`/Notice/Edit/${id}`}
+									state={{
+										title: `${noticeDetail?.title || ''}`,
+										created_at: `${date || ''}`,
+										content: `${
+											noticeDetail?.content || ''
+										}`,
+										attachments:
+											noticeDetail?.attachments || [],
+									}}
+								>
+									<_.IconBox>
+										<Icon
+											icon="EditPencil"
+											color={'gray90'}
+											size={26}
+										></Icon>
+									</_.IconBox>
+								</Link>
 							</_.IconWrapper>
 						</_.HeaderWrapper>
-						<_.Date>
-							{noticeDetail?.created_at.substring(0, 10)}
-						</_.Date>
+						<_.Date>{date}</_.Date>
 						<_.Contents>{noticeDetail?.content}</_.Contents>
-						{items?.map((item) => (
-							<AttachedBox props={item?.attachments || []} />
-						))}
+						<AttachedBox props={noticeDetail?.attachments || []} />
 					</_.Box>
 				</_.Background>
 			</_.Wrapper>