From c32d5969429a04a368caacb76121b1db831171a9 Mon Sep 17 00:00:00 2001 From: sunglitter Date: Mon, 9 Dec 2024 16:44:07 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=94=84?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=ED=95=A8=EC=88=98=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=B0=8F=20=EB=B6=84=EB=A6=AC,=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=A0=81=EC=9A=A9=20(#2?= =?UTF-8?q?8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이미지 프리뷰 처리 로직을 별도 함수로 생성 및 분리 - 분리된 프리뷰 함수 재사용으로 코드 중복 제거 - 이미지 업로드 기능이 있는 페이지들에 분리된 함수 적용 --- src/components/common/PostList.tsx | 3 ++- src/components/pages/admin/PostApprovalPage.tsx | 3 ++- .../pages/community/PaymentAuthorPage.tsx | 3 ++- .../pages/community/PaymentParticipantPage.tsx | 3 ++- src/components/pages/community/PostCreatePage.tsx | 15 ++------------- .../community/PostDetailPage/PostImageSection.tsx | 5 +++-- src/components/pages/community/PostEditPage.tsx | 9 ++------- src/hooks/GetImageSrc.tsx | 12 ++++++++++++ 8 files changed, 27 insertions(+), 26 deletions(-) create mode 100644 src/hooks/GetImageSrc.tsx diff --git a/src/components/common/PostList.tsx b/src/components/common/PostList.tsx index a0e2284..2e670d7 100644 --- a/src/components/common/PostList.tsx +++ b/src/components/common/PostList.tsx @@ -5,6 +5,7 @@ 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'; interface PostListProps { selectedCategory: string; @@ -116,7 +117,7 @@ const PostList: React.FC = ({ onClick={() => handlePostClick(post.communityPostId)} > diff --git a/src/components/pages/admin/PostApprovalPage.tsx b/src/components/pages/admin/PostApprovalPage.tsx index 4db7320..45c7628 100644 --- a/src/components/pages/admin/PostApprovalPage.tsx +++ b/src/components/pages/admin/PostApprovalPage.tsx @@ -5,6 +5,7 @@ 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'; const PostApprovalPage = () => { const location = useLocation(); @@ -109,7 +110,7 @@ const PostApprovalPage = () => { {`이미지 diff --git a/src/components/pages/community/PaymentAuthorPage.tsx b/src/components/pages/community/PaymentAuthorPage.tsx index 281fb9b..c641a99 100644 --- a/src/components/pages/community/PaymentAuthorPage.tsx +++ b/src/components/pages/community/PaymentAuthorPage.tsx @@ -3,6 +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'; const PaymentAuthorPage = () => { const navigate = useNavigate(); @@ -76,7 +77,7 @@ const PaymentAuthorPage = () => { - {'이미지'} + {'이미지'} diff --git a/src/components/pages/community/PaymentParticipantPage.tsx b/src/components/pages/community/PaymentParticipantPage.tsx index ba28a18..f28b26b 100644 --- a/src/components/pages/community/PaymentParticipantPage.tsx +++ b/src/components/pages/community/PaymentParticipantPage.tsx @@ -3,6 +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'; const PaymentParticipantPage = () => { const navigate = useNavigate(); @@ -65,7 +66,7 @@ const PaymentParticipantPage = () => { - {'이미지'} + {'이미지'} diff --git a/src/components/pages/community/PostCreatePage.tsx b/src/components/pages/community/PostCreatePage.tsx index a11b1d5..30ac30d 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 PostImageSection from './PostDetailPage/PostImageSection'; +import { getImageSrc } from '../../../hooks/GetImageSrc'; const PostCreatePage = () => { const navigate = useNavigate(); @@ -219,11 +219,6 @@ const PostCreatePage = () => { {/* 이미지 업로드 섹션 */} - @@ -249,13 +244,7 @@ const PostCreatePage = () => { ) : ( 이미지 미리보기 diff --git a/src/components/pages/community/PostDetailPage/PostImageSection.tsx b/src/components/pages/community/PostDetailPage/PostImageSection.tsx index 3f74178..44c0b03 100644 --- a/src/components/pages/community/PostDetailPage/PostImageSection.tsx +++ b/src/components/pages/community/PostDetailPage/PostImageSection.tsx @@ -1,10 +1,11 @@ import React from 'react'; import styled from 'styled-components'; import { FaAngleLeft, FaAngleRight } from 'react-icons/fa'; +import { getImageSrc } from '../../../../hooks/GetImageSrc'; interface PostImageSectionProps { selectedPost: { - imageUrls: File[]; + imageUrls: (File | string)[]; productUrl: string; } | null; currentIndex: number; @@ -47,7 +48,7 @@ const PostImageSection: React.FC = ({ {`이미지 diff --git a/src/components/pages/community/PostEditPage.tsx b/src/components/pages/community/PostEditPage.tsx index 539924b..7e6f443 100644 --- a/src/components/pages/community/PostEditPage.tsx +++ b/src/components/pages/community/PostEditPage.tsx @@ -15,6 +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'; const PostEditPage = () => { const { communityPostId } = useParams<{ communityPostId: string }>(); @@ -291,13 +292,7 @@ const PostEditPage = () => { ) : ( 이미지 미리보기 diff --git a/src/hooks/GetImageSrc.tsx b/src/hooks/GetImageSrc.tsx new file mode 100644 index 0000000..68cc852 --- /dev/null +++ b/src/hooks/GetImageSrc.tsx @@ -0,0 +1,12 @@ +export const getImageSrc = (image: File | string): string => { + if (typeof image === 'string') { + // 이미지 URL이 문자열일 경우 그대로 반환 + return image; + } else if (image instanceof File) { + // File 객체일 경우 URL.createObjectURL 사용 + return URL.createObjectURL(image); + } else { + console.error('Invalid image format:', image); + return ''; + } +};