Feat: 이미지 프리뷰 함수 생성 및 분리, 관련 페이지에 적용 (#28)

- 이미지 프리뷰 처리 로직을 별도 함수로 생성 및 분리 - 분리된 프리뷰 함수 재사용으로 코드 중복 제거 - 이미지 업로드 기능이 있는 페이지들에 분리된 함수 적용
prgrms-web-devcourse-final-project · Dec 9, 2024 · c32d596 · c32d596
1 parent a2e9d87
commit c32d596
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 26 deletions.
diff --git 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<PostListProps & { hideWriteButton?: boolean }> = ({
             onClick={() => handlePostClick(post.communityPostId)}
           >
             <PostImage
-              src={URL.createObjectURL(post.imageUrls[0])}
+              src={getImageSrc(post.imageUrls[0])}
               alt={`post.title`}
             />
             <PostContent>

diff --git 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 = () => {
 
                 <ImagePreview>
                   <img
-                    src={URL.createObjectURL(post.imageUrls[currentIndex])}
+                    src={getImageSrc(post.imageUrls[currentIndex])}
                     alt={`이미지 ${currentIndex + 1}`}
                   />
                 </ImagePreview>

diff --git 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 = () => {
               <ImageContainer>
                 <ImagePreviewWrapper>
                   <ImagePreview>
-                    <img src={post.imageUrls[0]} alt={'이미지'} />
+                    <img src={getImageSrc(post.imageUrls[0])} alt={'이미지'} />
                   </ImagePreview>
                 </ImagePreviewWrapper>
               </ImageContainer>

diff --git 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 = () => {
               <ImageContainer>
                 <ImagePreviewWrapper>
                   <ImagePreview>
-                    <img src={post.imageUrls[0]} alt={'이미지'} />
+                    <img src={getImageSrc(post.imageUrls[0])} alt={'이미지'} />
                   </ImagePreview>
                 </ImagePreviewWrapper>
               </ImageContainer>

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 PostImageSection from './PostDetailPage/PostImageSection';
+import { getImageSrc } from '../../../hooks/GetImageSrc';
 
 const PostCreatePage = () => {
   const navigate = useNavigate();
@@ -219,11 +219,6 @@ const PostCreatePage = () => {
           <FormContainer>
             <ImageAndDetailsContainer>
               {/* 이미지 업로드 섹션 */}
-              <PostImageSection
-                selectedPost={{ imageUrls: imageUrls, productUrl: urlInput }}
-                currentIndex={currentIndex}
-                setCurrentIndex={setCurrentIndex}
-              />
               <ImageUploadContainer>
                 <ImagePreviewWrapper>
                   <PreviousButtonWrapper>
@@ -249,13 +244,7 @@ const PostCreatePage = () => {
                   ) : (
                     <ImagePreview>
                       <img
-                        src={
-                          typeof imageUrls[currentIndex] === 'string'
-                            ? (imageUrls[currentIndex] as string)
-                            : URL.createObjectURL(
-                                imageUrls[currentIndex] as File
-                              )
-                        }
+                        src={getImageSrc(imageUrls[currentIndex])}
                         alt="이미지 미리보기"
                       />
                       <RemoveImageButton onClick={handleRemoveImage}>

diff --git 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<PostImageSectionProps> = ({
 
         <ImagePreview>
           <img
-            src={URL.createObjectURL(selectedPost.imageUrls[currentIndex])}
+            src={getImageSrc(selectedPost.imageUrls[currentIndex])}
             alt={`이미지 ${currentIndex + 1}`}
           />
         </ImagePreview>

diff --git 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 = () => {
                   ) : (
                     <ImagePreview>
                       <img
-                        src={
-                          typeof imageUrls[currentIndex] === 'string'
-                            ? (imageUrls[currentIndex] as string)
-                            : URL.createObjectURL(
-                                imageUrls[currentIndex] as File
-                              )
-                        }
+                        src={getImageSrc(imageUrls[currentIndex])}
                         alt="이미지 미리보기"
                       />
                       <RemoveImageButton onClick={handleRemoveImage}>

diff --git a/src/hooks/GetImageSrc.tsx 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 '';
+  }
+};