refactor: 공지사항 리펙토링

Team-return · Apr 2, 2024 · d77e20b · d77e20b
1 parent 71a55cf
commit d77e20b
Show file tree

Hide file tree

Showing 16 changed files with 410 additions and 72 deletions.
diff --git a/src/Apis/Files/index.ts b/src/Apis/Files/index.ts
@@ -1,28 +1,7 @@
-import { useMutation } from "react-query"
-import { PresignedUrlRequest } from "./request"
-import { PresignedUrlResponse } from "./response"
-import { instance } from "../axios"
-import axios from "axios"
-
-// export const usePresignedUrl = () => {
-//     return useMutation(
-//         async (attachments: File[]) => {
-//             const files = attachments.map((item) => ({
-// 				type: 'EXTENSION_FILE',
-// 				file_name: item.name,
-//             }));
-
-//             const data = await instance.post(`${process.env.REACT_APP_BASE_URL}/files/pre-signed`, {files});
-
-//             return data;
-//         }, {
-//             onSuccess: ({data}) => {
-//                 console.log(data);
-//             }
-//         }
-//     )
-// }
-// propsData: PresignedUrlRequest/
+import { useMutation } from "react-query";
+import { PresignedUrlResponse } from "./response";
+import { instance } from "../axios";
+import axios from "axios";
 
 export const usePresignedUrl = () => {
     return useMutation(
@@ -44,16 +23,4 @@ export const usePresignedUrl = () => {
             }
         }
     )
-}
-
-// const readFileAsBinaryString = (file: File): Promise<string> => {
-//     return new Promise((resolve, reject) => {
-//         const reader = new FileReader();
-//         reader.onload = () => {
-//             const result = reader.result as string;
-//             resolve(result);
-//         };
-//         reader.onerror = reject;
-//         reader.readAsBinaryString(file);
-//     });
-// }
+}
diff --git a/src/Apis/Login/index.ts b/src/Apis/Login/index.ts
@@ -30,7 +30,9 @@ export const Login = (loginData: LoginDataType, checkBoxValue: boolean) => {
 					});
 				} else {
 					if (checkBoxValue) {
-						setCookies('account_id', loginData.account_id);
+						setCookies('account_id', loginData.account_id, {
+							path: '/'
+						});
 					} else {
 						removeCookies('account_id');
 					}
@@ -40,9 +42,11 @@ export const Login = (loginData: LoginDataType, checkBoxValue: boolean) => {
 					);
 					setCookies('refresh_token', res.data.refresh_token, {
 						expires: refreshExpired,
+						path: '/'
 					});
 					setCookies('access_token', res.data.access_token, {
 						expires: accessExpired,
+						path: '/'
 					});
 					navigator('/RecruitmentRequest');
 				}

diff --git a/src/Apis/Notices/index.ts b/src/Apis/Notices/index.ts
@@ -1,7 +1,11 @@
 import { NoticeWrite } from "./request";
-import { useMutation } from "react-query";
+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) })
@@ -13,9 +17,74 @@ export const useNoticeWriteData = (noticeData: NoticeWrite) => {
         },
         {
             onError: (error: Error) => {
-                console.error("공지 작성에 실패하였습니다:", error.message);
+                console.error("notice write error:", error.message);
             }
         }
     )
 }
 
+/** 공지사항 상세보기 조회 */
+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;
+
+                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);
+            }
+        };
+        fetchNoticeDetail();
+    }, [noticeId]);
+
+    return { noticeDetail };
+};
+
+/** 공지사항 리스트 조희 */
+export const useNoticeListData = () => {
+    const [notices, setNotices] = useState<NoticeListResponse[]>([]);
+
+    useEffect(() => {
+        const fetchNoticeList = async () => {
+            try {
+                const response = await instance.get(`${process.env.REACT_APP_BASE_URL}/notices`);
+                const data = response.data;
+
+                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);
+            }
+        };
+        fetchNoticeList();
+    }, []);
+
+    return { notices };
+}
+
+/** 공지사항 삭제 */
+export const useDeleteNotice = (noticeId: string, options: MutationOptions) => {
+    return useMutation(
+        async () => instance.delete(`${process.env.REACT_APP_BASE_URL}/notices/${noticeId}`, { data: { "notice-id": noticeId } }),
+        {
+            ...options
+        }
+    )
+}
diff --git a/src/Apis/Notices/request.ts b/src/Apis/Notices/request.ts
@@ -2,4 +2,8 @@ export interface NoticeWrite {
 	title: string;
 	content: string;
 	attachments: string[];
+}
+
+export interface NoticeDelete {
+	noticeId: string;
 }
diff --git a/src/Apis/Notices/response.ts b/src/Apis/Notices/response.ts
@@ -0,0 +1,21 @@
+export interface NoticeListResponse {
+    id: number
+    title: string
+    created_at: string
+}
+
+export interface NoticeDetailResponse {
+    title: string;
+    content: string;
+    created_at: string;
+    attachments: AttachmentResponse[];
+}
+
+type AttachmentType =
+    | "FILE"
+    | "URL"
+
+export interface AttachmentResponse {
+    url: string;
+    type: AttachmentType;
+}
diff --git a/src/Apis/axios.ts b/src/Apis/axios.ts
@@ -13,6 +13,8 @@ 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}`;
@@ -28,10 +30,11 @@ 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');
-				window.location.href = '/login';
+				// window.location.href = '/login';
 				return;
 			}
 			if (

diff --git a/src/Components/Notice/AttachedBox/index.tsx b/src/Components/Notice/AttachedBox/index.tsx
@@ -0,0 +1,58 @@
+import { Icon } from '@team-return/design-system';
+import { AttachmentResponse } from '../../../Apis/Notices/response';
+import * as _ from './style';
+import axios from 'axios';
+
+interface PropsType {
+	props: AttachmentResponse[];
+}
+
+export function AttachedBox({ props }: PropsType) {
+	const file_name_regex = (url: string) => {
+		return url.replace(/(?:.*?-){5}(.*)/, '$1').replaceAll('+', ' ');
+	};
+
+	const downLoadFile = async (attachment: AttachmentResponse) => {
+		try {
+			const response = await axios.get(
+				`${process.env.REACT_APP_FILE_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 (
+		<>
+			<_.AttachedWrapper>
+				<_.AttachmentTitle>첨부자료</_.AttachmentTitle>
+				<_.Attachments>
+					{props.map((attachment, index) => (
+						<_.Attachment key={index}>
+							<div>{file_name_regex(attachment.url)}</div>
+							<Icon
+								icon="Download"
+								size={15}
+								color="liteBlue"
+								cursor="pointer"
+								onClick={() => downLoadFile(attachment)}
+							/>
+						</_.Attachment>
+					))}
+				</_.Attachments>
+			</_.AttachedWrapper>
+		</>
+	);
+}
diff --git a/src/Components/Notice/AttachedBox/style.tsx b/src/Components/Notice/AttachedBox/style.tsx
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const AttachedWrapper = styled.div`
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: auto;
+	margin-top: 32px;
+	border-top: 2px solid #135c9d;
+	border-bottom: 1px solid #135c9d;
+	padding: 16px;
+	gap: 20px;
+`;
+
+export const AttachmentTitle = styled.div`
+	font-weight: 500;
+	font-size: 18px;
+`;
+
+export const Attachments = styled.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	justify-content: center;
+`;
+
+export const Attachment = styled.div`
+	display: flex;
+	gap: 7px;
+	align-items: center;
+`;
diff --git a/src/Pages/NoticePage/NoticeDetailPage/index.tsx b/src/Pages/NoticePage/NoticeDetailPage/index.tsx
@@ -0,0 +1,68 @@
+import { useNoticeDetailData } from '../../../Apis/Notices';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Header } from '../../../Components/Header';
+import { Icon } from '@team-return/design-system';
+import { useDeleteNotice } from '../../../Apis/Notices';
+import * as _ from './style';
+import { AttachedBox } from '../../../Components/Notice/AttachedBox';
+
+export function NoticeDetailPage() {
+	const { id } = useParams<{ id: any }>();
+	const { noticeDetail } = useNoticeDetailData(id);
+	const items = [noticeDetail];
+
+	const navigate = useNavigate();
+	const { mutate: deleteNotice } = useDeleteNotice(id, {
+		onSuccess: () => {
+			navigate('/Notice');
+		},
+		onError: (error) => {
+			console.error('notice delete error:', error);
+		},
+	});
+
+	const handleDeleteClick = () => {
+		if (window.confirm('공지사항을 삭제하시겠습니까?')) {
+			deleteNotice();
+		}
+	};
+
+	return (
+		<>
+			<Header />
+			<_.Wrapper>
+				<_.Background>
+					<_.Box>
+						<_.HeaderWrapper>
+							<_.Title>{noticeDetail?.title}</_.Title>
+							<_.IconWrapper>
+								<_.IconBox>
+									<Icon
+										icon="Trash"
+										color={'gray90'}
+										size={40}
+										onClick={handleDeleteClick}
+									></Icon>
+								</_.IconBox>
+								<_.IconBox>
+									<Icon
+										icon="EditPencil"
+										color={'gray90'}
+										size={26}
+									></Icon>
+								</_.IconBox>
+							</_.IconWrapper>
+						</_.HeaderWrapper>
+						<_.Date>
+							{noticeDetail?.created_at.substring(0, 10)}
+						</_.Date>
+						<_.Contents>{noticeDetail?.content}</_.Contents>
+						{items?.map((item) => (
+							<AttachedBox props={item?.attachments || []} />
+						))}
+					</_.Box>
+				</_.Background>
+			</_.Wrapper>
+		</>
+	);
+}