[1.5차 QA] 선물 등록 완료 버튼 관련 버그 수정(기본 이미지 문제, 로딩 뷰 처리)

src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import usePostGift from '../../../hooks/queries/gift/usePostGift';
 import GiftAddNextBtn from '../AddGiftLink/common/GiftAddNextBtn/GiftAddNextBtn';
 import * as S from './AddGiftFooter.styled';
@@ -17,6 +16,7 @@ interface AddGiftFooterProps {
   setImageUrl: React.Dispatch<React.SetStateAction<string>>;
   updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void;
   fileName: string;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const AddGiftFooter = ({
@@ -31,30 +31,22 @@ const AddGiftFooter = ({
   setImageUrl,
   fileName,
   updateAddGiftInfo,
+  setIsLoading,
 }: AddGiftFooterProps) => {
-  const navigate = useNavigate();
-  const { mutation } = usePostGift(roomId, targetDate, setStep);
+  const { mutation } = usePostGift(roomId, targetDate, setStep, updateAddGiftInfo, setIsLoading);
   const { putImageUrlToS3 } = usePutImageUrlToS3(roomId);
 
   const onClick = async () => {
+    setIsLoading(true);
     const { imageUrlS3 } = await putImageUrlToS3({ fileName, file, roomId, setImageUrl });
     if (isActivated) {
-      updateAddGiftInfo({ name: '', cost: 0, imageUrl: '', url: '' });
-      mutation.mutate(
-        {
-          roomId: roomId,
-          name: name,
-          cost: cost,
-          imageUrl: imageUrlS3,
-          url: link,
-        },
-        {
-          onSuccess: () => {
-            navigate(`/add-gift/${roomId}/${targetDate}`);
-            setStep(0);
-          },
-        },
-      );
+      mutation.mutate({
+        roomId: roomId,
+        name: name,
+        cost: cost,
+        imageUrl: imageUrlS3,
+        url: link,
+      });
     }
   };
 

src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx

@@ -18,7 +18,9 @@ interface AddGiftWithLinkLayoutProps {
   openGraph: OpenGraphResponseType;
   targetDate: string;
   updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void;
+  setModalStatus: React.Dispatch<React.SetStateAction<boolean>>;
   addGiftInfo: AddGiftInfo;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const AddGiftWithLinkLayout = ({
@@ -29,7 +31,9 @@ const AddGiftWithLinkLayout = ({
   openGraph,
   targetDate,
   updateAddGiftInfo,
+  setModalStatus,
   addGiftInfo,
+  setIsLoading,
 }: AddGiftWithLinkLayoutProps) => {
   const [isActivated, setIsActivated] = useState(
     !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.imageUrl,
@@ -52,15 +56,23 @@ const AddGiftWithLinkLayout = ({
 
   useEffect(() => {
     const fetchData = async () => {
+      console.log('OpenGraph imageUrl', openGraph);
       setNameText(openGraph.title);
-      const convertedOgFile = await useConvertURLtoFile(openGraph.image);
-      setFile(convertedOgFile);
-      setFileName(openGraph.image);
-      setImageUrl(openGraph.image);
+      const convertResult = await useConvertURLtoFile({
+        url: openGraph.image,
+        setStep,
+        setModalStatus,
+        updateAddGiftInfo,
+      });
+      if (convertResult && 'convertedOgFile' in convertResult) {
+        setFile(convertResult.convertedOgFile);
+        setFileName(openGraph.image);
+        setImageUrl(openGraph.image);
+      }
     };
 
     fetchData();
-  }, [openGraph]);
+  }, [openGraph, setStep]);
 
   return (
     <S.AddGiftWithLinkLayoutWrapper>
@@ -103,6 +115,7 @@ const AddGiftWithLinkLayout = ({
         updateAddGiftInfo={updateAddGiftInfo}
         file={file}
         setImageUrl={setImageUrl}
+        setIsLoading={setIsLoading}
       />
     </S.AddGiftWithLinkLayoutWrapper>
   );

src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx

@@ -20,6 +20,7 @@ interface AddGiftWithLinkLayoutProps {
   openGraph: OpenGraphResponseType;
   updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void;
   addGiftInfo: AddGiftInfo;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 // 직접 입력 화면
@@ -31,7 +32,9 @@ export const AddGiftWithoutLinkLayout = ({
   setLinkText,
   targetDate,
   updateAddGiftInfo,
+  modalStatus,
   addGiftInfo,
+  setIsLoading,
 }: AddGiftWithLinkLayoutProps) => {
   const [isActivated, setIsActivated] = useState(
     !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.url && !!addGiftInfo.imageUrl,
@@ -43,7 +46,7 @@ export const AddGiftWithoutLinkLayout = ({
   const [file, setFile] = useState<File | null>(null);
   const [, setIsImageUploaded] = useState<boolean>(false);
   const [, setPreviewImage] = useState<string | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(modalStatus);
 
   const checkPriceNull = (price: number | null) => {
     if (price === null) {
@@ -55,7 +58,7 @@ export const AddGiftWithoutLinkLayout = ({
 
   // 모달 확인 클릭 버튼
   const handleClickConfirmClick = () => {
-    setIsModalOpen(!isModalOpen);
+    setIsModalOpen(false);
     setStep(3);
   };
 
@@ -109,6 +112,7 @@ export const AddGiftWithoutLinkLayout = ({
         updateAddGiftInfo={updateAddGiftInfo}
         file={file}
         setImageUrl={setImageUrl}
+        setIsLoading={setIsLoading}
       />
     </S.AddGiftWithLinkLayoutWrapper>
   );

src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.tsx

@@ -37,7 +37,7 @@ const AddGiftImg = ({
           <S.IcEmptyThumbnailWrapper>
             <input
               type='file'
-              accept='image/*'
+              accept='image/jpeg, image/png, image/gif, image/heic '
               style={{ display: 'none' }}
               id='imgInput'
               onChange={handleImageUpload}

src/components/GiftAdd/AddGiftLink/common/GiftAddBtnWrapper/GiftAddBtnWrapper.tsx

@@ -4,7 +4,7 @@ import * as S from './GiftAddBtnWrapper.styled';
 interface GiftAddBtnWrapperProps {
   setStep: React.Dispatch<React.SetStateAction<number>>;
   isActivated: boolean;
-  onClick: () => void;
+  onClick: VoidFunction;
 }
 
 const GiftAddBtnWrapper = ({ setStep, isActivated, onClick }: GiftAddBtnWrapperProps) => {
@@ -16,7 +16,7 @@ const GiftAddBtnWrapper = ({ setStep, isActivated, onClick }: GiftAddBtnWrapperP
 
   return (
     <S.GiftAddBtnWrapper>
-      <S.NoLinkText onClick={handleClickNoLink} >링크 없이 상품을 등록할게요</S.NoLinkText>
+      <S.NoLinkText onClick={handleClickNoLink}>링크 없이 상품을 등록할게요</S.NoLinkText>
       <GiftAddNextBtn children={BtnText} isActivated={isActivated} onClick={onClick} />
     </S.GiftAddBtnWrapper>
   );

src/components/GiftAdd/AddGiftLink/common/InputUrl/InputUrl.tsx

@@ -10,8 +10,8 @@ interface InputUrlProps {
 const InputUrl = ({ setIsActivated, text, setText }: InputUrlProps) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
-    inputValue.length > 0 ? setIsActivated(true) : setIsActivated(false);
     setText(inputValue);
+    inputValue.length > 0 ? setIsActivated(true) : setIsActivated(false);
   };
 
   const handleBtnClick = () => {

src/context/AddGift/AddGiftContext.tsx

@@ -10,7 +10,7 @@ const initialAddGiftInfo: AddGiftInfo = {
   name: '',
   cost: 0,
   imageUrl: '',
-  url: ',',
+  url: '',
 };
 
 const AddGiftContext = createContext<AddGiftInfoContext>({

src/hooks/queries/gift/usePostGift.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { post } from '../../../apis/client';
-import { GiftPostRequestType } from '../../../types/gift';
+import { AddGiftInfo, GiftPostRequestType } from '../../../types/gift';
 import { useNavigate } from 'react-router-dom';
 import { MY_GIFT_QUERY_KEY } from './useGetMyGift';
 
@@ -12,6 +12,8 @@ export const usePostGift = (
   roomId: number,
   targetDate: string,
   setStep: React.Dispatch<React.SetStateAction<number>>,
+  updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
 ) => {
   const navigate = useNavigate();
 
@@ -24,6 +26,8 @@ export const usePostGift = (
       queryClient.invalidateQueries({ queryKey: [MY_GIFT_QUERY_KEY[0], roomId] });
       navigate(`/add-gift/${roomId}/${targetDate}`);
       setStep(0);
+      setIsLoading(false);
+      updateAddGiftInfo({ name: '', cost: 0, imageUrl: '', url: '' });
     },
     onError: (error) => {
       console.log('선물 등록 에러!!', error.message);

src/hooks/useConvertURLtoFile.tsx

@@ -1,10 +1,39 @@
-const useConvertURLtoFile = async (url: string) => {
-  const response = await fetch(url);
-  const data = await response.blob();
-  const ext = url.split('.').pop(); // url 구조에 맞게 수정할 것
-  const filename = url.split('/').pop(); // url 구조에 맞게 수정할 것
-  const metadata = { type: `image/${ext}` };
-  return new File([data], filename!, metadata);
+import { AddGiftInfo } from '../types/gift';
+
+interface convertURLtoFileProps {
+  url: string;
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setModalStatus: React.Dispatch<React.SetStateAction<boolean>>;
+  updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void;
+}
+
+const useConvertURLtoFile = async ({
+  url,
+  setStep,
+  setModalStatus,
+  updateAddGiftInfo,
+}: convertURLtoFileProps) => {
+  console.log('들어오고 있는 url', url);
+  try {
+    const response = await fetch(url);
+
+    if (response.status === 302) {
+      return setStep(3);
+    }
+
+    const data = await response.blob();
+    // const extensions = url.split('.').pop();
+    const filename = url.split('/').pop();
+    const metadata = { type: `image/*` };
+    const convertedOgFile = new File([data], filename!, metadata);
+    return { convertedOgFile };
+  } catch (error) {
+    console.error('error?', error);
+    updateAddGiftInfo({ imageUrl: '' });
+    setModalStatus(true);
+    setStep(3);
+    return { convertedOgFile: null };
+  }
 };
 
 export default useConvertURLtoFile;

src/pages/GiftAdd/GiftAddPage.tsx

@@ -6,9 +6,11 @@ import { OpenGraphResponseType } from '../../types/etc';
 import { useParams } from 'react-router-dom';
 import AddGiftWithLinkLayout from '../../components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout';
 import { useAddGiftContext } from '../../context/AddGift/AddGiftContext';
+import Loading from '../Loading/Loading';
 
 const GiftAddPage = () => {
   const [step, setStep] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
 
   // case 1 링크 입력 페이지 state들
   const [itemNum, setItemNum] = useState(0);
@@ -55,21 +57,27 @@ const GiftAddPage = () => {
       );
 
     case 2:
-      return (
+      return isLoading ? (
+        <Loading />
+      ) : (
         <AddGiftWithLinkLayout
           step={step}
           setStep={setStep}
           roomId={roomIdNumber}
           link={linkText}
           openGraph={openGraph}
           targetDate={targetDate || ''}
+          setModalStatus={setModalStatus}
           addGiftInfo={addGiftInfo}
           updateAddGiftInfo={updateAddGiftInfo}
+          setIsLoading={setIsLoading}
         />
       );
 
     case 3:
-      return (
+      return isLoading ? (
+        <Loading />
+      ) : (
         <AddGiftWithoutLinkLayout
           step={step}
           setStep={setStep}
@@ -81,6 +89,7 @@ const GiftAddPage = () => {
           addGiftInfo={addGiftInfo}
           openGraph={openGraph}
           updateAddGiftInfo={updateAddGiftInfo}
+          setIsLoading={setIsLoading}
         />
       );
   }