From 4c8759ec1ef957944ae9b65967192476a7443622 Mon Sep 17 00:00:00 2001 From: sunglitter Date: Mon, 9 Dec 2024 17:41:54 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=ED=94=84=EB=A6=AC=EB=B7=B0=20=ED=95=A8=EC=88=98=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EB=B0=8F=20=EC=8B=9C=EA=B0=84=20=EC=A1=B0=EC=A0=95?= =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80,=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=EC=9E=90=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95=20(#28)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이미지 프리뷰 관련 함수를 별도 유틸리티 폴더로 이동 - 시간 관련 조정 함수 생성 및 관련 페이지에 반영 - 관리자 승인 대기 목록에서 마감일 정보 숨김 처리 - 게시글 승인 페이지 라우터 경로 수정으로 네비게이션 동작 개선 --- src/components/common/PostList.tsx | 31 +++++++------------ .../pages/admin/PostApprovalPage.tsx | 11 ++++--- .../pages/community/PaymentAuthorPage.tsx | 2 +- .../community/PaymentParticipantPage.tsx | 2 +- .../pages/community/PostCreatePage.tsx | 2 +- .../PostDetailPage/PostCommentsSection.tsx | 3 +- .../PostDetailPage/PostDetailsSection.tsx | 9 ++++-- .../PostDetailPage/PostImageSection.tsx | 2 +- .../pages/community/PostEditPage.tsx | 2 +- src/components/pages/community/api/chatApi.ts | 3 +- src/routes/router.tsx | 2 +- src/{hooks => utils}/GetImageSrc.tsx | 0 src/utils/formatDate.ts | 14 +++++++++ 13 files changed, 47 insertions(+), 36 deletions(-) rename src/{hooks => utils}/GetImageSrc.tsx (100%) create mode 100644 src/utils/formatDate.ts diff --git a/src/components/common/PostList.tsx b/src/components/common/PostList.tsx index 2e670d7..8c33579 100644 --- a/src/components/common/PostList.tsx +++ b/src/components/common/PostList.tsx @@ -5,7 +5,8 @@ import SearchBar from './SearchBar'; import Pagination from './Pagination'; import { useNavigate } from 'react-router-dom'; import { SSEEvent, Post } from '../../types/postTypes'; -import { getImageSrc } from '../../hooks/GetImageSrc'; +import { getImageSrc } from '../../utils/GetImageSrc'; +import { formatDateWithOffset } from '../../utils/formatDate'; interface PostListProps { selectedCategory: string; @@ -126,26 +127,16 @@ const PostList: React.FC = ({ {post.nickname} - {new Date(post.createdAt).toLocaleString('ko-KR', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - hour12: false, - })} + {formatDateWithOffset(post.createdAt)} - {'~'} - - {new Date(post.closeAt).toLocaleString('ko-KR', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - hour12: false, - })} - + {selectedCategory !== 'NOT_APPROVED' && ( + <> + {'~'} + + {formatDateWithOffset(post.closeAt)} + + + )} 참여 현황: {getParticipationCount(post.communityPostId)} /{' '} diff --git a/src/components/pages/admin/PostApprovalPage.tsx b/src/components/pages/admin/PostApprovalPage.tsx index 45c7628..4f7ef62 100644 --- a/src/components/pages/admin/PostApprovalPage.tsx +++ b/src/components/pages/admin/PostApprovalPage.tsx @@ -5,7 +5,8 @@ import { fetchPostById } from '../community/api/postApi'; import { approvePost, rejectPost } from './api/adminApi'; import { FaBackspace, FaAngleLeft, FaAngleRight } from 'react-icons/fa'; import { Post } from '../../../types/postTypes'; -import { getImageSrc } from '../../../hooks/GetImageSrc'; +import { getImageSrc } from '../../../utils/GetImageSrc'; +import { formatDateWithOffset } from '../../../utils/formatDate'; const PostApprovalPage = () => { const location = useLocation(); @@ -17,7 +18,7 @@ const PostApprovalPage = () => { useEffect(() => { const fetchPost = async () => { if (!postId) { - navigate('/admin/posts'); // postId가 없을 경우 관리자 페이지로 리다이렉트 + navigate('/admin/post'); // postId가 없을 경우 관리자 페이지로 리다이렉트 return; } try { @@ -55,7 +56,7 @@ const PostApprovalPage = () => { await approvePost(postId, updatedTitle); // 포스트 상태를 APPROVED로 변경 alert('게시물이 승인되었습니다.'); - navigate('/admin/posts'); // 승인 후 관리자 페이지로 리다이렉트 + navigate('/admin/post'); // 승인 후 관리자 페이지로 리다이렉트 } catch (error) { console.error('Failed to approve post:', error); alert('승인 처리 중 오류가 발생했습니다.'); @@ -72,7 +73,7 @@ const PostApprovalPage = () => { await rejectPost(postId, updatedTitle); // 포스트 상태를 REJECTED로 변경 alert('게시물이 거절 처리되었습니다.'); - navigate('/admin/posts'); // 거절 후 관리자 페이지로 리다이렉트 + navigate('/admin/post'); // 거절 후 관리자 페이지로 리다이렉트 } catch (error) { console.error('Failed to reject post:', error); alert('거절 처리 중 오류가 발생했습니다.'); @@ -162,7 +163,7 @@ const PostApprovalPage = () => { {' '} - {new Date(post.createdAt).toLocaleString()} + {formatDateWithOffset(post.createdAt).toLocaleString()} diff --git a/src/components/pages/community/PaymentAuthorPage.tsx b/src/components/pages/community/PaymentAuthorPage.tsx index c641a99..2fcefdd 100644 --- a/src/components/pages/community/PaymentAuthorPage.tsx +++ b/src/components/pages/community/PaymentAuthorPage.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { useNavigate, useLocation } from 'react-router-dom'; import { VirtualAccountResponse } from './api/paymentApi'; import VirtualAccountModal from './modal/VirtualAccountModal'; -import { getImageSrc } from '../../../hooks/GetImageSrc'; +import { getImageSrc } from '../../../utils/GetImageSrc'; const PaymentAuthorPage = () => { const navigate = useNavigate(); diff --git a/src/components/pages/community/PaymentParticipantPage.tsx b/src/components/pages/community/PaymentParticipantPage.tsx index f28b26b..65b9178 100644 --- a/src/components/pages/community/PaymentParticipantPage.tsx +++ b/src/components/pages/community/PaymentParticipantPage.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { useNavigate, useLocation } from 'react-router-dom'; import { VirtualAccountResponse } from './api/paymentApi'; import VirtualAccountModal from './modal/VirtualAccountModal'; -import { getImageSrc } from '../../../hooks/GetImageSrc'; +import { getImageSrc } from '../../../utils/GetImageSrc'; const PaymentParticipantPage = () => { const navigate = useNavigate(); diff --git a/src/components/pages/community/PostCreatePage.tsx b/src/components/pages/community/PostCreatePage.tsx index 30ac30d..6c4df2d 100644 --- a/src/components/pages/community/PostCreatePage.tsx +++ b/src/components/pages/community/PostCreatePage.tsx @@ -13,7 +13,7 @@ import { createPost } from './api/postApi'; import CategoryWrapper from '../../common/CategoryWrapper'; import { POST_CATEGORIES } from './postCategories'; import { CreatePostData } from '../../../types/postTypes'; -import { getImageSrc } from '../../../hooks/GetImageSrc'; +import { getImageSrc } from '../../../utils/GetImageSrc'; const PostCreatePage = () => { const navigate = useNavigate(); diff --git a/src/components/pages/community/PostDetailPage/PostCommentsSection.tsx b/src/components/pages/community/PostDetailPage/PostCommentsSection.tsx index 6377b0a..90a3a05 100644 --- a/src/components/pages/community/PostDetailPage/PostCommentsSection.tsx +++ b/src/components/pages/community/PostDetailPage/PostCommentsSection.tsx @@ -8,6 +8,7 @@ import { } from '../../community/api/postApi'; import { useAtom } from 'jotai'; import { currentUserAtom } from '../../../../store/userStore'; +import { formatDateWithOffset } from '../../../../utils/formatDate'; interface PostCommentsSectionProps { communityPostId: number; @@ -113,7 +114,7 @@ const PostCommentsSection: React.FC = ({ {comment.userNickname} - {new Date(comment.createdAt).toLocaleString()} + {formatDateWithOffset(comment.createdAt).toLocaleString()} {editCommentId === comment.commentId ? ( diff --git a/src/components/pages/community/PostDetailPage/PostDetailsSection.tsx b/src/components/pages/community/PostDetailPage/PostDetailsSection.tsx index 51b00ea..0e678f7 100644 --- a/src/components/pages/community/PostDetailPage/PostDetailsSection.tsx +++ b/src/components/pages/community/PostDetailPage/PostDetailsSection.tsx @@ -2,6 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { FaPlusCircle, FaMinusCircle } from 'react-icons/fa'; import { POST_STATUS } from '../../../../types/postTypes'; +import { formatDateWithOffset } from '../../../../utils/formatDate'; interface PostDetailsSectionProps { selectedPost: { @@ -59,7 +60,7 @@ const PostDetailsSection: React.FC = ({ - {new Date(selectedPost.createdAt).toLocaleString()} + {formatDateWithOffset(selectedPost.createdAt).toLocaleString()} @@ -74,12 +75,14 @@ const PostDetailsSection: React.FC = ({ - {remainingTime} + {formatDateWithOffset(remainingTime)} {selectedPost.status === 'PAYMENT_STANDBY' && ( - {paymentRemainingTime} + + {formatDateWithOffset(paymentRemainingTime)} + )} diff --git a/src/components/pages/community/PostDetailPage/PostImageSection.tsx b/src/components/pages/community/PostDetailPage/PostImageSection.tsx index 44c0b03..3a67ee9 100644 --- a/src/components/pages/community/PostDetailPage/PostImageSection.tsx +++ b/src/components/pages/community/PostDetailPage/PostImageSection.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { FaAngleLeft, FaAngleRight } from 'react-icons/fa'; -import { getImageSrc } from '../../../../hooks/GetImageSrc'; +import { getImageSrc } from '../../../../utils/GetImageSrc'; interface PostImageSectionProps { selectedPost: { diff --git a/src/components/pages/community/PostEditPage.tsx b/src/components/pages/community/PostEditPage.tsx index 7e6f443..ebf230c 100644 --- a/src/components/pages/community/PostEditPage.tsx +++ b/src/components/pages/community/PostEditPage.tsx @@ -15,7 +15,7 @@ import { fetchPostById, updatePost, deletePostById } from './api/postApi'; import CategoryWrapper from '../../common/CategoryWrapper'; import { POST_CATEGORIES } from './postCategories'; import { Post, PostDetailResponse } from '../../../types/postTypes'; -import { getImageSrc } from '../../../hooks/GetImageSrc'; +import { getImageSrc } from '../../../utils/GetImageSrc'; const PostEditPage = () => { const { communityPostId } = useParams<{ communityPostId: string }>(); diff --git a/src/components/pages/community/api/chatApi.ts b/src/components/pages/community/api/chatApi.ts index 42d86a3..0dd6b60 100644 --- a/src/components/pages/community/api/chatApi.ts +++ b/src/components/pages/community/api/chatApi.ts @@ -1,3 +1,4 @@ +import { formatDateWithOffset } from './../../../../utils/formatDate'; import axiosInstance from '../../../../api/axiosInstance'; import { webSocketService } from '../../../../utils/webSocket'; @@ -84,7 +85,7 @@ export const sendMessage = ( roomId: chatRoomId, userName, message, - time: new Date().toISOString(), + time: formatDateWithOffset(new Date().toISOString()), }; webSocketService.send(`/pub/message/${chatRoomId}`, payload); diff --git a/src/routes/router.tsx b/src/routes/router.tsx index cf96a7c..537006e 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -131,7 +131,7 @@ const router = createBrowserRouter( ), }, { - path: '/admin/post/approve/:communityPostId', + path: '/admin/post/approval/:communityPostId', element: , }, { diff --git a/src/hooks/GetImageSrc.tsx b/src/utils/GetImageSrc.tsx similarity index 100% rename from src/hooks/GetImageSrc.tsx rename to src/utils/GetImageSrc.tsx diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts new file mode 100644 index 0000000..528d313 --- /dev/null +++ b/src/utils/formatDate.ts @@ -0,0 +1,14 @@ +export const formatDateWithOffset = (date: string, offsetHours: number = 9) => { + const originalDate = new Date(date); + const adjustedDate = new Date( + originalDate.getTime() + offsetHours * 60 * 60 * 1000 + ); + return adjustedDate.toLocaleString('ko-KR', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + hour12: false, + }); +};