[Feat] [GGFE-199] useUpload 이미지 사이즈 인자로 수정

42organization · Sep 6, 2023 · d9ce845 · d9ce845
1 parent c796da2
commit d9ce845
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 14 deletions.
diff --git a/components/admin/store/ItemList.tsx b/components/admin/store/ItemList.tsx
@@ -94,7 +94,11 @@ function ItemList() {
                       <TableCell className={styles.tableBodyItem} key={index}>
                         {columnName === 'imageUri' ? (
                           <Image
-                            src={item.imageUri ? item[columnName] : ''}
+                            src={
+                              item.imageUri
+                                ? item[columnName]
+                                : '/public/image/fallBackSrc.jpeg'
+                            }
                             alt='Item Iamge'
                             width={30}
                             height={30}

diff --git a/components/admin/store/itemHistory.tsx b/components/admin/store/itemHistory.tsx
@@ -35,8 +35,6 @@ const tableTitle: { [key: string]: string } = {
   visible: '상점 노출',
 };
 
-const MAX_CONTENT_LENGTH = 16;
-
 function ItemHistory() {
   const [itemHistoryData, setItemHistoryData] = useState<IitemHistoryList>({
     itemHistoryList: [],
@@ -111,7 +109,7 @@ function ItemHistory() {
                                 src={
                                   itemHistory.imageUri
                                     ? itemHistory[columnName]
-                                    : ''
+                                    : '/public/image/fallBackSrc.jpeg'
                                 }
                                 width={30}
                                 height={30}

diff --git a/components/modal/admin/AdminEditItem.tsx b/components/modal/admin/AdminEditItem.tsx
@@ -20,7 +20,10 @@ export default function AdminEditItemModal(props: Item) {
   } = props;
   const setModal = useSetRecoilState(modalState);
   const setSnackBar = useSetRecoilState(toastState);
-  const { imgData, imgPreview, uploadImg } = useUploadImg();
+  const { imgData, imgPreview, uploadImg } = useUploadImg({
+    maxSizeMB: 0.03,
+    maxWidthOrHeight: 250,
+  });
 
   const editErrorResponse: { [key: string]: string } = {
     IT200: '아이템 타입이 일치하지 않습니다.',
@@ -111,6 +114,7 @@ export default function AdminEditItemModal(props: Item) {
             />
             <input
               type='file'
+              accept='.svg, .png, .jpg, .jpeg'
               style={{ display: 'none' }}
               onChange={uploadImg}
             />

diff --git a/components/modal/admin/AdminProfileModal.tsx b/components/modal/admin/AdminProfileModal.tsx
@@ -26,7 +26,10 @@ export default function AdminProfileModal(props: { intraId: string }) {
     coin: 0,
   });
 
-  const { imgData, imgPreview, uploadImg } = useUploadImg();
+  const { imgData, imgPreview, uploadImg } = useUploadImg({
+    maxSizeMB: 0.03,
+    maxWidthOrHeight: 150,
+  });
   const setModal = useSetRecoilState(modalState);
   const setSnackBar = useSetRecoilState(toastState);
 

diff --git a/components/modal/store/inventory/ProfileImageModal.tsx b/components/modal/store/inventory/ProfileImageModal.tsx
@@ -3,16 +3,16 @@ import { useRecoilValue, useResetRecoilState } from 'recoil';
 import { FaArrowRight } from 'react-icons/fa';
 import { TbQuestionMark } from 'react-icons/tb';
 import { UseItemRequest } from 'types/inventoryTypes';
-import { modalState } from 'utils/recoil/modal';
-import { userState } from 'utils/recoil/layout';
 import { mockInstance } from 'utils/mockAxios';
-import useUploadImg from 'hooks/useUploadImg';
-import { ItemCautionContainer } from './ItemCautionContainer';
+import { userState } from 'utils/recoil/layout';
+import { modalState } from 'utils/recoil/modal';
 import {
   ModalButtonContainer,
   ModalButton,
 } from 'components/modal/ModalButton';
+import useUploadImg from 'hooks/useUploadImg';
 import styles from 'styles/modal/store/InventoryModal.module.scss';
+import { ItemCautionContainer } from './ItemCautionContainer';
 
 type ProfileImageProps = UseItemRequest;
 
@@ -26,7 +26,10 @@ const cautions = [
 export default function ProfileImageModal({ receiptId }: ProfileImageProps) {
   const user = useRecoilValue(userState);
   const resetModal = useResetRecoilState(modalState);
-  const { imgData, imgPreview, uploadImg } = useUploadImg();
+  const { imgData, imgPreview, uploadImg } = useUploadImg({
+    maxSizeMB: 0.03,
+    maxWidthOrHeight: 150,
+  });
 
   async function handleProfileImageUpload() {
     if (!imgData) {

diff --git a/hooks/useUploadImg.ts b/hooks/useUploadImg.ts
@@ -3,7 +3,15 @@ import { ChangeEvent, useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { toastState } from 'utils/recoil/toast';
 
-export default function useUploadImg() {
+interface ICompressProps {
+  maxSizeMB: number;
+  maxWidthOrHeight: number;
+}
+
+export default function useUploadImg({
+  maxSizeMB,
+  maxWidthOrHeight,
+}: ICompressProps) {
   const [imgData, setImgData] = useState<File | null>(null);
   const [imgPreview, setImgPreview] = useState<string>('');
   const [file, setFile] = useState<File | null>(null);
@@ -15,8 +23,8 @@ export default function useUploadImg() {
 
   const imgCompress = async (fileSrc: File) => {
     const options = {
-      maxSizeMB: 0.03,
-      maxWidthOrHeight: 150,
+      maxSizeMB: maxSizeMB,
+      maxWidthOrHeight: maxWidthOrHeight,
       filetype: 'image/jpeg',
       useWebWorker: true,
     };