Refactor: 이미지 프리뷰 함수 이동 및 시간 조정 함수 추가, 관리자 페이지 로직 수정 (#28)

- 이미지 프리뷰 관련 함수를 별도 유틸리티 폴더로 이동 - 시간 관련 조정 함수 생성 및 관련 페이지에 반영 - 관리자 승인 대기 목록에서 마감일 정보 숨김 처리 - 게시글 승인 페이지 라우터 경로 수정으로 네비게이션 동작 개선
prgrms-web-devcourse-final-project · Dec 9, 2024 · 4c8759e · 4c8759e
1 parent c32d596
commit 4c8759e
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 36 deletions.
diff --git 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<PostListProps & { hideWriteButton?: boolean }> = ({
                 <PostAuthor>{post.nickname}</PostAuthor>
                 <PostDate>
                   <PostCreatedAt>
-                    {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)}
                   </PostCreatedAt>
-                  {'~'}
-                  <PostCloseAt>
-                    {new Date(post.closeAt).toLocaleString('ko-KR', {
-                      year: 'numeric',
-                      month: '2-digit',
-                      day: '2-digit',
-                      hour: '2-digit',
-                      minute: '2-digit',
-                      hour12: false,
-                    })}
-                  </PostCloseAt>
+                  {selectedCategory !== 'NOT_APPROVED' && (
+                    <>
+                      {'~'}
+                      <PostCloseAt>
+                        {formatDateWithOffset(post.closeAt)}
+                      </PostCloseAt>
+                    </>
+                  )}
                 </PostDate>
                 <PostJoinStatus>
                   참여 현황: {getParticipationCount(post.communityPostId)} /{' '}

diff --git 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 = () => {
                   </AuthorDetail>
                   <CreatedAtDetail>
                     <Label>작성일</Label>{' '}
-                    {new Date(post.createdAt).toLocaleString()}
+                    {formatDateWithOffset(post.createdAt).toLocaleString()}
                   </CreatedAtDetail>
                 </DoubleWrapper>
                 <DoubleWrapper>

diff --git 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
@@ -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
@@ -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
@@ -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<PostCommentsSectionProps> = ({
             <CommentHeader>
               <CommentAuthor>{comment.userNickname}</CommentAuthor>
               <CommentDate>
-                {new Date(comment.createdAt).toLocaleString()}
+                {formatDateWithOffset(comment.createdAt).toLocaleString()}
               </CommentDate>
             </CommentHeader>
             {editCommentId === comment.commentId ? (

diff --git 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<PostDetailsSectionProps> = ({
           </AuthorDetail>
           <CreatedAtDetail>
             <Label>작성일</Label>
-            {new Date(selectedPost.createdAt).toLocaleString()}
+            {formatDateWithOffset(selectedPost.createdAt).toLocaleString()}
           </CreatedAtDetail>
         </DoubleWrapper>
         <DoubleWrapper>
@@ -74,12 +75,14 @@ const PostDetailsSection: React.FC<PostDetailsSectionProps> = ({
         </DoubleWrapper>
         <DoubleWrapper>
           <Detail>
-            <Label>모집 마감</Label> {remainingTime}
+            <Label>모집 마감</Label> {formatDateWithOffset(remainingTime)}
           </Detail>
           {selectedPost.status === 'PAYMENT_STANDBY' && (
             <Detail>
               <Label>결제 마감</Label>
-              <DetailText>{paymentRemainingTime}</DetailText>
+              <DetailText>
+                {formatDateWithOffset(paymentRemainingTime)}
+              </DetailText>
             </Detail>
           )}
         </DoubleWrapper>

diff --git 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
@@ -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
@@ -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
@@ -131,7 +131,7 @@ const router = createBrowserRouter(
           ),
         },
         {
-          path: '/admin/post/approve/:communityPostId',
+          path: '/admin/post/approval/:communityPostId',
           element: <PostApprovalPage />,
         },
         {

diff --git a/src/hooks/GetImageSrc.tsx → src/utils/GetImageSrc.tsx b/src/hooks/GetImageSrc.tsx → src/utils/GetImageSrc.tsx
diff --git a/src/utils/formatDate.ts 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,
+  });
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -131,7 +131,7 @@ const router = createBrowserRouter( @@
               ),
             },
             {
-              path: '/admin/post/approve/:communityPostId',
+              path: '/admin/post/approval/:communityPostId',
               element: <PostApprovalPage />,
             },
             {
@@ Expand Down @@