Merge branch 'develop' into feat/#444-logout_modal

src/App.style.ts

@@ -0,0 +1,6 @@
+import { styled } from 'styled-components';
+
+export const Wrapper = styled.div`
+  background-color: white;
+  border: none;
+`;

src/App.tsx

@@ -2,23 +2,19 @@ import { QueryClient, QueryClientProvider, QueryErrorResetBoundary } from '@tans
 import { RouterProvider } from 'react-router-dom';
 import router from './router/Router';
 import GlobalStyle from './style/GlobalStyle';
-import { styled } from 'styled-components';
 import Loading from './pages/Loading/Loading';
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import FallbackUI from './pages/FallbackUI/FallbackUI';
 import 'react-toastify/dist/ReactToastify.css';
 import { StyledToastContainer } from './style/toast.style';
+import * as S from './App.style';
 
 function App() {
-  const Wrapper = styled.div`
-    background-color: white;
-    border: none;
-  `;
   const queryClient = new QueryClient();
 
   return (
-    <Wrapper>
+    <S.Wrapper>
       <QueryClientProvider client={queryClient}>
         <QueryErrorResetBoundary>
           {({ reset }) => (
@@ -43,7 +39,7 @@ function App() {
           )}
         </QueryErrorResetBoundary>
       </QueryClientProvider>
-    </Wrapper>
+    </S.Wrapper>
   );
 }
 

src/assets/svg/IcLeft.tsx

@@ -1,12 +1,12 @@
 import type { SVGProps } from 'react';
 const SvgIcLeft = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 36 36' {...props}>
     <path
-      stroke='#000'
+      stroke='#222'
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.5}
-      d='m14 17-5-5 5-5'
+      d='M21 25.5 13.5 18l7.5-7.5'
     />
   </svg>
 );

src/assets/svg/index.ts

@@ -92,4 +92,4 @@ export { default as Ranking1 } from './Ranking1';
 export { default as Ranking2 } from './Ranking2';
 export { default as Ranking3 } from './Ranking3';
 export { default as IcEmptyThumbnailFinal } from './IcEmptyThumbnailFinal';
-export { default as ImgBg } from './ImgBg';
+export { default as GiftHomeBackground } from './GiftHomeBackground';

src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx

@@ -14,6 +14,7 @@ interface AddGiftFooterProps {
   cost: number;
   link: string;
   file: File | null;
+  setFile: React.Dispatch<React.SetStateAction<File | null>>;
   setImageUrl: React.Dispatch<React.SetStateAction<string>>;
   updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void;
   fileName: string;
@@ -33,6 +34,7 @@ const AddGiftFooter = ({
   cost,
   link,
   file,
+  // setFile,
   setImageUrl,
   fileName,
   updateAddGiftInfo,
@@ -54,11 +56,13 @@ const AddGiftFooter = ({
     setImageUrl,
     setLinkText,
   });
+
   const { putImageUrlToS3 } = usePutImageUrlToS3(roomId);
   const { addGiftInfo } = useAddGiftContext();
 
   const onClick = async () => {
     setIsLoading(true);
+    // setStep(0);
     const { imageUrlS3 } = await putImageUrlToS3({ fileName, file, roomId, setImageUrl });
     if (isActivated) {
       try {
@@ -72,7 +76,6 @@ const AddGiftFooter = ({
       } catch (error: any) {
         console.error('Mutation error:', error.message);
         if (error.message === 'Error: 중복된 선물 등록입니다.') {
-          console.log('CHECK');
           setIsModalOpen(true);
         }
       } finally {

src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx

@@ -11,6 +11,7 @@ import { AddGiftInfo } from '../../../types/gift';
 import useConvertURLtoFile from '../../../hooks/useConvertURLtoFile';
 import DuplicateModal from '../../common/Modal/DuplicateModal';
 import { useUpdateGifteeNameContext } from '../../../context/GifteeName/GifteeNameContext';
+import Resizer from 'react-image-file-resizer';
 
 interface AddGiftWithLinkLayoutProps {
   link: string;
@@ -74,6 +75,24 @@ const AddGiftWithLinkLayout = ({
     }
   };
 
+  const resizeFile = (file: File) =>
+    new Promise((resolve) => {
+      Resizer.imageFileResizer(
+        file,
+        384,
+        384,
+        'WEBP',
+        75,
+        0,
+        (uri) => {
+          setFileName((uri as File).name);
+          setFile(uri as File);
+          resolve(uri);
+        },
+        'file',
+      );
+    });
+
   useEffect(() => {
     const fetchData = async () => {
       console.log('OpenGraph imageUrl', openGraph);
@@ -85,9 +104,8 @@ const AddGiftWithLinkLayout = ({
         setModalStatus,
         updateAddGiftInfo,
       });
-      if (convertResult && 'convertedOgFile' in convertResult) {
-        setFile(convertResult.convertedOgFile);
-        setFileName(openGraph.image);
+      if (convertResult && convertResult.convertedOgFile !== null) {
+        resizeFile(convertResult.convertedOgFile);
         setImageUrl(openGraph.image);
       }
     };
@@ -143,6 +161,7 @@ const AddGiftWithLinkLayout = ({
         fileName={fileName}
         updateAddGiftInfo={updateAddGiftInfo}
         file={file}
+        setFile={setFile}
         setImageUrl={setImageUrl}
         setIsLoading={setIsLoading}
         setIsModalOpen={setIsModalOpen}

src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import AddGiftFooter from '../AddGiftFooter/AddGiftFooter';
 import GiftStatusBar from '../AddGiftLink/common/GiftStatusBar/GiftStatusBar';
 import * as S from './common/AddGiftLayout.styled';
@@ -62,7 +62,6 @@ export const AddGiftWithoutLinkLayout = ({
   fileName,
   setFileName,
 }: AddGiftWithLinkLayoutProps) => {
-  console.log('오잉');
   const [isActivated, setIsActivated] = useState(
     !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.imageUrl,
   );
@@ -72,7 +71,6 @@ export const AddGiftWithoutLinkLayout = ({
   const [, setIsImageUploaded] = useState<boolean>(false);
   const [, setPreviewImage] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(modalStatus);
-
   const { gifteeName } = useUpdateGifteeNameContext();
 
   const checkPriceNull = (price: number | null) => {
@@ -89,6 +87,11 @@ export const AddGiftWithoutLinkLayout = ({
     setStep(3);
   };
 
+  // 직접 입력 처음 들어올 시 무조건 이미지는 초기화되도록
+  useEffect(() => {
+    setImageUrl('');
+  }, []);
+
   return (
     <S.AddGiftWithLinkLayoutWrapper>
       {isModalOpen && (
@@ -145,6 +148,7 @@ export const AddGiftWithoutLinkLayout = ({
         fileName={fileName}
         updateAddGiftInfo={updateAddGiftInfo}
         file={file}
+        setFile={setFile}
         setImageUrl={setImageUrl}
         setIsLoading={setIsLoading}
         setIsModalOpen={setIsDuplicateModalOpen}

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

@@ -34,14 +34,16 @@ const AddGiftImg = ({
 
   const { addGiftInfo } = useAddGiftContext();
   console.log('ADDGIFTINFO 이미지', addGiftInfo.imageUrl);
+  console.log('ADDGIFTINFO imageurl', imageUrl);
+  console.log('ADDGIFTINFO opengraph image', openGraph?.image);
   return (
     <>
       {openGraph?.image !== '' || imageUrl !== '' || addGiftInfo.imageUrl !== '' ? (
         <>
           <S.IcEmptyThumbnailWrapper>
             <input
               type='file'
-              accept='image/jpeg, image/png, image/gif, image/heic '
+              accept='image/jpeg, image/png, image/gif, image/heic, image/webp,'
               style={{ display: 'none' }}
               id='imgInput'
               onChange={handleImageUpload}

src/components/GiftAdd/AddGiftLink/common/InputUrl/InputUrl.styled.ts

@@ -10,11 +10,12 @@ export const InputUrlWrapper = styled.div<{ $isInputFocused: boolean }>`
 `;
 
 export const TextField = styled.div`
-  width: 90%;
+  width: calc(100% - 2.4rem);
 `;
 
 export const IconField = styled.div`
-  width: 10%;
+  align-self: center;
+  width: 2.4rem;
 `;
 
 export const Input = styled.input<{ hasContent?: boolean }>`

src/components/GiftAdd/GiftAddButtons/GiftAddButtonsWrapper.styled.ts

@@ -21,7 +21,7 @@ export const GiftsItemImage = styled.img`
 `;
 
 export const GiftsItemTitle = styled.p`
-  width: 12.8rem;
+  width: 15rem;
   margin-top: 1.2rem;
   margin-bottom: 1rem;
 

src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx

@@ -6,8 +6,9 @@ import GiftAddPageLayoutHeader from './GiftAddPageLayoutHeader';
 import useGetMyGift from '../../../hooks/queries/gift/useGetMyGift';
 import EmptyGiftAddButtonsWrapper from '../GiftAddButtons/EmptyGiftAddButtonsWrapper';
 import useDeleteMyGift from '../../../hooks/queries/gift/useDeleteMyGift';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import DeleteModal from '../../common/Modal/DeleteModal';
+import GiftAddPageLayoutSkeleton from './GiftAddPageLayoutSkeleton';
 
 interface GiftAddPageLayoutProps {
   roomId: string;

src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayoutHeader.style.ts

@@ -10,6 +10,6 @@ export const GiftAddPageLayoutHeader = styled.article`
   background-color: ${({ theme }) => theme.colors.white};
 `;
 
-export const HeaderText = styled.article`
+export const HeaderText = styled.p`
   ${({ theme }) => theme.fonts.body_01};
 `;

src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayoutSkeleton.style.ts

@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+// import Skeleton from 'react-loading-skeleton';
+
+export const GiftAddPageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  width: 100%;
+  ${({ theme }) =>
+    theme.mixin.flexBox({ direction: 'column', align: 'center', justify: 'center' })};
+`;
+
+export const GiftAddPageSkeletonHeader = styled.article`
+  ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })};
+
+  width: 100%;
+  height: 5.6rem;
+  padding-left: 0.7rem;
+
+  background-color: ${({ theme }) => theme.colors.white};
+`;
+
+export const HeaderText = styled.p`
+  ${({ theme }) => theme.fonts.body_01};
+`;
+
+export const MiniTimerWrapper = styled.div`
+  width: 10.3rem;
+  height: 2.7rem;
+  padding: 0 1rem;
+
+  border-radius: 1.4rem;
+  background: ${({ theme }) => theme.colors.G_01};
+`;
+
+export const AddButtonsWrapper = styled.div`
+  width: 100%;
+
+  display: flex;
+  ${({ theme }) => theme.mixin.flexBox({ justify: 'center' })};
+  column-gap: 1.2rem;
+`;
+
+export const GiftsItemWrapper = styled.div`
+  position: relative;
+  width: 15.8rem;
+  padding: 0;
+  margin-top: 2.8rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export const GiftsItemImage = styled.div`
+  width: 15.8rem;
+  height: 15.8rem;
+
+  border-radius: 0.4rem;
+  background-color: ${({ theme }) => theme.colors.G_02};
+`;
+
+export const GiftsItemTitle = styled.p`
+  width: 14.6rem;
+  height: 2rem;
+  margin-top: 1.2rem;
+  margin-bottom: 1rem;
+
+  background-color: ${({ theme }) => theme.colors.G_02};
+`;
+
+export const GiftsItemTitle2 = styled.p`
+  width: 9.4rem;
+  height: 2rem;
+  margin-top: 1.2rem;
+  margin-bottom: 1rem;
+
+  background-color: ${({ theme }) => theme.colors.G_02};
+`;