develop branch에서 main merge / 2차 qa 반영을 위한 pr 입니다 !

src/assets/svg/IcDown.tsx

@@ -2,7 +2,7 @@ import type { SVGProps } from 'react';
 const SvgIcDown = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40' {...props}>
     <path
-      stroke='#FF2176'
+      stroke={props.stroke || '#FF2176'}
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.5}

src/assets/svg/IcEmptyThumbnailFinal.tsx

@@ -0,0 +1,41 @@
+import type { SVGProps } from 'react';
+const SvgIcEmptyThumbnailFinal = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 242 242' {...props}>
+    <g filter='url(#ic_empty_thumbnail_final_svg__a)'>
+      <rect width={240} height={240} x={1} y={1} fill='#F8F8F8' rx={12} />
+      <rect width={241} height={241} x={0.5} y={0.5} stroke='#EBE9EA' rx={12.5} />
+    </g>
+    <path
+      fill='#CAC6C8'
+      d='M103.026 135.059a1.501 1.501 0 0 0 2.122 2.121zm10.191-8.07 1.061-1.061a1.5 1.5 0 0 0-2.121 0zm4.566 4.565-1.061 1.061a1.5 1.5 0 0 0 2.121 0zm10.271-10.271 1.061-1.061a1.5 1.5 0 0 0-2.121 0zm8.07 10.191a1.501 1.501 0 0 0 2.121-2.122zm-30.976 5.706 9.13-9.13-2.121-2.122-9.131 9.131zm7.009-9.13 4.565 4.565 2.121-2.121-4.565-4.566zm6.686 4.565 10.272-10.272-2.121-2.121-10.272 10.272zm8.151-10.272 9.13 9.131 2.121-2.122-9.13-9.13zm-18.342-17.821h22.826v-3h-22.826zm28.174 5.348v22.826h3V109.87zm-5.348 28.173h-22.826v3h22.826zm-28.174-5.347V109.87h-3v22.826zm5.348 5.347a5.35 5.35 0 0 1-5.348-5.347h-3a8.35 8.35 0 0 0 8.348 8.347zm28.174-5.347a5.347 5.347 0 0 1-5.348 5.347v3a8.347 8.347 0 0 0 8.348-8.347zm-5.348-28.174a5.35 5.35 0 0 1 5.348 5.348h3a8.347 8.347 0 0 0-8.348-8.348zm-22.826-3a8.35 8.35 0 0 0-8.348 8.348h3a5.35 5.35 0 0 1 5.348-5.348zM114 113.293a1.923 1.923 0 0 1-1.924 1.924v3a4.923 4.923 0 0 0 4.924-4.924zm-1.924 1.924a1.924 1.924 0 0 1-1.924-1.924h-3a4.924 4.924 0 0 0 4.924 4.924zm-1.924-1.924c0-1.062.862-1.923 1.924-1.923v-3a4.924 4.924 0 0 0-4.924 4.923zm1.924-1.923c1.063 0 1.924.861 1.924 1.923h3a4.923 4.923 0 0 0-4.924-4.923z'
+    />
+    <circle cx={138.652} cy={103.348} r={9.13} fill='#CAC6C8' />
+    <rect width={1.826} height={9.13} x={137.739} y={98.783} fill='#fff' rx={0.913} />
+    <rect
+      width={1.826}
+      height={9.13}
+      x={134.087}
+      y={104.261}
+      fill='#fff'
+      rx={0.913}
+      transform='rotate(-90 134.087 104.261)'
+    />
+    <defs>
+      <filter
+        id='ic_empty_thumbnail_final_svg__a'
+        width={282}
+        height={282}
+        x={-20}
+        y={-20}
+        colorInterpolationFilters='sRGB'
+        filterUnits='userSpaceOnUse'
+      >
+        <feFlood floodOpacity={0} result='BackgroundImageFix' />
+        <feGaussianBlur in='BackgroundImageFix' stdDeviation={10} />
+        <feComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_3247_15133' />
+        <feBlend in='SourceGraphic' in2='effect1_backgroundBlur_3247_15133' result='shape' />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgIcEmptyThumbnailFinal;

src/assets/svg/index.ts

@@ -91,3 +91,4 @@ export { default as Ranking04 } from './Ranking04';
 export { default as Ranking1 } from './Ranking1';
 export { default as Ranking2 } from './Ranking2';
 export { default as Ranking3 } from './Ranking3';
+export { default as IcEmptyThumbnailFinal } from './IcEmptyThumbnailFinal';

src/components/Footer/Footer.tsx

@@ -41,9 +41,9 @@ const Footer = ({ customStyle }: FooterType) => {
         <LongDivider />
         <S.Text>Copyright 2024. Sweet. all rights reserved.</S.Text>
         <S.Icon>
-          <IcInstagram style={{ width: '2.8rem' }} onClick={InstaGram} />
+          <IcInstagram style={{ width: '2.8rem', marginRight: '0.4rem' }} onClick={InstaGram} />
 
-          <IcPalmspring style={{ width: '2.8rem' }} onClick={PamSpring} />
+          <IcPalmspring style={{ width: '2.8rem', marginLeft: '0.5rem' }} onClick={PamSpring} />
         </S.Icon>
       </S.TextWrapper>
     </S.FooterWrapper>

src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx

@@ -3,6 +3,7 @@ import GiftAddNextBtn from '../AddGiftLink/common/GiftAddNextBtn/GiftAddNextBtn'
 import * as S from './AddGiftFooter.styled';
 import { AddGiftInfo } from '../../../types/gift';
 import usePutImageUrlToS3 from '../../../hooks/usePutImageUrlToS3';
+import { useAddGiftContext } from '../../../context/AddGift/AddGiftContext';
 
 interface AddGiftFooterProps {
   targetDate: string;
@@ -18,14 +19,17 @@ interface AddGiftFooterProps {
   fileName: string;
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setNameText: React.Dispatch<React.SetStateAction<string>>;
+  setPriceText: React.Dispatch<React.SetStateAction<number | null>>;
+  setLinkText: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const AddGiftFooter = ({
   targetDate,
   roomId,
   setStep,
   isActivated,
-  name,
+  // name,
   cost,
   link,
   file,
@@ -34,24 +38,33 @@ const AddGiftFooter = ({
   updateAddGiftInfo,
   setIsLoading,
   setIsModalOpen,
+  setNameText,
+  setPriceText,
+  setLinkText,
 }: AddGiftFooterProps) => {
-  const { mutation } = usePostGift(
+  const { mutation } = usePostGift({
     roomId,
     targetDate,
     setStep,
     updateAddGiftInfo,
     setIsLoading,
     setIsModalOpen,
-  );
+    setNameText,
+    setPriceText,
+    setImageUrl,
+    setLinkText,
+  });
   const { putImageUrlToS3 } = usePutImageUrlToS3(roomId);
+  const { addGiftInfo } = useAddGiftContext();
+
   const onClick = async () => {
     setIsLoading(true);
     const { imageUrlS3 } = await putImageUrlToS3({ fileName, file, roomId, setImageUrl });
     if (isActivated) {
       try {
         await mutation.mutateAsync({
           roomId: roomId,
-          name: name,
+          name: addGiftInfo.name,
           cost: cost,
           imageUrl: imageUrlS3,
           url: link,

src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx

@@ -14,6 +14,7 @@ import { useUpdateGifteeNameContext } from '../../../context/GifteeName/GifteeNa
 
 interface AddGiftWithLinkLayoutProps {
   link: string;
+  setLinkText: React.Dispatch<React.SetStateAction<string>>;
   roomId: number;
   step: number;
   setStep: React.Dispatch<React.SetStateAction<number>>;
@@ -25,10 +26,17 @@ interface AddGiftWithLinkLayoutProps {
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
   isModalOpen: boolean;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  nameText: string;
+  setNameText: React.Dispatch<React.SetStateAction<string>>;
+  priceText: number | null;
+  setPriceText: React.Dispatch<React.SetStateAction<number | null>>;
+  imageUrl: string;
+  setImageUrl: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const AddGiftWithLinkLayout = ({
   link,
+  setLinkText,
   roomId,
   step,
   setStep,
@@ -40,13 +48,17 @@ const AddGiftWithLinkLayout = ({
   setIsLoading,
   isModalOpen,
   setIsModalOpen,
+  nameText,
+  setNameText,
+  priceText,
+  setPriceText,
+  imageUrl,
+  setImageUrl,
 }: AddGiftWithLinkLayoutProps) => {
   const [isActivated, setIsActivated] = useState(
     !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.imageUrl,
   );
-  const [nameText, setNameText] = useState<string>(addGiftInfo.name);
-  const [priceText, setPriceText] = useState<number | null>(addGiftInfo.cost);
-  const [imageUrl, setImageUrl] = useState<string>(addGiftInfo.imageUrl);
+
   const [fileName, setFileName] = useState<string>('');
   const [file, setFile] = useState<File | null>(null);
   const [, setIsImageUploaded] = useState<boolean>(false);
@@ -69,6 +81,7 @@ const AddGiftWithLinkLayout = ({
       const convertResult = await useConvertURLtoFile({
         url: openGraph.image,
         setStep,
+        setImageUrl,
         setModalStatus,
         updateAddGiftInfo,
       });
@@ -112,6 +125,7 @@ const AddGiftWithLinkLayout = ({
       />
       <ShowLink link={link} />
       <WriteItemInfo
+        imageUrl={imageUrl}
         setIsActivated={setIsActivated}
         setName={setNameText}
         setCost={setPriceText}
@@ -132,6 +146,9 @@ const AddGiftWithLinkLayout = ({
         setImageUrl={setImageUrl}
         setIsLoading={setIsLoading}
         setIsModalOpen={setIsModalOpen}
+        setNameText={setNameText}
+        setPriceText={setPriceText}
+        setLinkText={setLinkText}
       />
     </S.AddGiftWithLinkLayoutWrapper>
   );

src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx

@@ -25,6 +25,16 @@ interface AddGiftWithLinkLayoutProps {
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
   isDuplicateModalOpen: boolean;
   setIsDuplicateModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  nameText: string;
+  setNameText: React.Dispatch<React.SetStateAction<string>>;
+  priceText: number | null;
+  setPriceText: React.Dispatch<React.SetStateAction<number | null>>;
+  imageUrl: string;
+  setImageUrl: React.Dispatch<React.SetStateAction<string>>;
+  file: File | null;
+  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  fileName: string;
+  setFileName: React.Dispatch<React.SetStateAction<string>>;
 }
 
 // 직접 입력 화면
@@ -41,15 +51,24 @@ export const AddGiftWithoutLinkLayout = ({
   setIsLoading,
   isDuplicateModalOpen,
   setIsDuplicateModalOpen,
+  nameText,
+  setNameText,
+  priceText,
+  setPriceText,
+  imageUrl,
+  setImageUrl,
+  file,
+  setFile,
+  fileName,
+  setFileName,
 }: AddGiftWithLinkLayoutProps) => {
+  console.log('오잉');
   const [isActivated, setIsActivated] = useState(
-    !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.url && !!addGiftInfo.imageUrl,
+    !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.imageUrl,
   );
-  const [nameText, setNameText] = useState<string>(addGiftInfo.name);
-  const [priceText, setPriceText] = useState<number | null>(addGiftInfo.cost);
-  const [imageUrl, setImageUrl] = useState<string>(addGiftInfo.imageUrl);
-  const [fileName, setFileName] = useState<string>('');
-  const [file, setFile] = useState<File | null>(null);
+
+  // const [fileName, setFileName] = useState<string>('');
+  // const [file, setFile] = useState<File | null>(null);
   const [, setIsImageUploaded] = useState<boolean>(false);
   const [, setPreviewImage] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(modalStatus);
@@ -129,6 +148,9 @@ export const AddGiftWithoutLinkLayout = ({
         setImageUrl={setImageUrl}
         setIsLoading={setIsLoading}
         setIsModalOpen={setIsDuplicateModalOpen}
+        setNameText={setNameText}
+        setPriceText={setPriceText}
+        setLinkText={setLinkText}
       />
     </S.AddGiftWithLinkLayoutWrapper>
   );

src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.styled.ts

@@ -18,7 +18,7 @@ export const ImgPreview = styled.img`
   width: 19.2rem;
   height: 19.2rem;
 
-  object-fit: contain;
+  object-fit: cover;
 `;
 
 export const IcEmptyThumbnailWrapper = styled.div`
@@ -28,7 +28,7 @@ export const IcEmptyThumbnailWrapper = styled.div`
   margin-top: 2.8rem;
   cursor: pointer;
   img {
-    object-fit: contain;
+    object-fit: cover;
     width: 100%;
     height: 100%;
   }

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

@@ -2,6 +2,7 @@ import * as S from './AddGiftImg.styled';
 import { IcEmptyThumbnail, IcImgEditBtn } from '../../../../../assets/svg';
 import { OpenGraphResponseType } from '../../../../../types/etc';
 import useHandleImageUpload from '../../../../../hooks/useHandleImageUpload';
+import { useAddGiftContext } from '../../../../../context/AddGift/AddGiftContext';
 
 interface AddGiftImgProps {
   imageUrl: string;
@@ -30,9 +31,12 @@ const AddGiftImg = ({
     setPreviewImage,
     setIsImageUploaded,
   });
+
+  const { addGiftInfo } = useAddGiftContext();
+  console.log('ADDGIFTINFO 이미지', addGiftInfo.imageUrl);
   return (
     <>
-      {openGraph?.image !== '' || imageUrl !== '' ? (
+      {openGraph?.image !== '' || imageUrl !== '' || addGiftInfo.imageUrl !== '' ? (
         <>
           <S.IcEmptyThumbnailWrapper>
             <input
@@ -46,7 +50,13 @@ const AddGiftImg = ({
               {imageUrl ? (
                 <S.ThumbnailWrapper>
                   <S.ImgPreview
-                    src={openGraph?.image ? openGraph.image : imageUrl}
+                    src={
+                      openGraph?.image
+                        ? openGraph.image
+                        : imageUrl
+                          ? imageUrl
+                          : addGiftInfo.imageUrl
+                    }
                     alt='preview'
                     style={{
                       position: 'relative',