Merge branch 'develop' into style/#491-iphone-keyboard

package.json

@@ -26,6 +26,7 @@
     "date-fns": "^3.2.0",
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
+    "heic2any": "^0.0.4",
     "html2canvas": "^1.4.1",
     "lottie-web": "^5.12.2",
     "open-graph": "^0.2.6",

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

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

src/hooks/useHandleImageUpload.tsx

@@ -1,6 +1,7 @@
 import { OpenGraphResponseType } from '../types/etc';
 import useParseFileName from './useParseFileName';
 import Resizer from 'react-image-file-resizer';
+import heic2any from 'heic2any';
 
 interface HandleImageUploadProps {
   openGraph: OpenGraphResponseType | null;
@@ -21,48 +22,52 @@ const useHandleImageUpload = ({
 }: HandleImageUploadProps) => {
   const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const { files } = event.target;
+    if (files && files.length > 0) {
+      const selectedFile = files[0];
+
+      setPreviewImage(URL.createObjectURL(selectedFile));
+
+      try {
+        let convertedFile = selectedFile;
+
+        if (selectedFile.type === 'image/heic' || selectedFile.type === 'image/HEIC') {
+          let blob = selectedFile;
+          const resultBlob = await heic2any({ blob, toType: 'image/webp' });
+          convertedFile = new File(
+            [resultBlob as Blob],
+            selectedFile.name.split('.')[0] + '.webp',
+            { type: 'image/webp', lastModified: new Date().getTime() },
+          );
+        }
 
-    const resizeFile = (file: File) =>
-      new Promise((resolve) => {
         Resizer.imageFileResizer(
-          file,
+          convertedFile,
           384,
           384,
           'WEBP',
           75,
           0,
           (uri) => {
-            setFileName((uri as File).name);
-            setFile(uri as File);
-            console.log('FILE', uri);
-            resolve(uri);
+            if (uri instanceof File) {
+              setFileName((uri as File).name);
+              setFile(uri as File);
+              console.log('FILE', uri);
+              setImageUrl(URL.createObjectURL(uri as File));
+              setIsImageUploaded(true);
+
+              if (openGraph) {
+                openGraph.image = '';
+              }
+
+              const imageName = uri.name.trim();
+              useParseFileName({ setFileName, imageString: imageName });
+            }
           },
           'file',
         );
-      });
-
-    if (files && files.length > 0) {
-      const selectedFiles = files as FileList;
-
-      if (files) {
-        try {
-          resizeFile(selectedFiles[0]);
-        } catch (err) {
-          console.log('이미지 용량 압축 중 에러 발생', err);
-        }
-      }
-
-      setPreviewImage(URL.createObjectURL(selectedFiles[0]));
-
-      setImageUrl(URL.createObjectURL(selectedFiles[0]));
-      setIsImageUploaded(!!selectedFiles?.[0]);
-
-      if (openGraph) {
-        openGraph.image = '';
+      } catch (err) {
+        console.log('Error processing image:', err);
       }
-
-      const imageName = selectedFiles[0].name.trim();
-      useParseFileName({ setFileName, imageString: imageName });
     }
   };
   return { handleImageUpload };

src/pages/Start/Start.style.ts

@@ -1,12 +1,9 @@
 import styled from 'styled-components';
-import {
-  HomeBackground,
-  HomeBgGradientFix,
-  GradientCta,
-  Main02,
-  Main03,
-  Main04,
-} from '../../assets/svg';
+import { HomeBgGradientFix, GradientCta } from '../../assets/svg';
+import HomeBackgroundWebP from '../../assets/img/home_background.webp';
+import Main02WebP from '../../assets/img/main02.webp';
+import Main03WebP from '../../assets/img/main03_no_animation.webp';
+import Main04WebP from '../../assets/img/main04.webp';
 import BtnFill from '../../components/common/Button/Cta/fill/BtnFill';
 
 export const Wrapper = styled.div`
@@ -21,7 +18,6 @@ export const Gradient = styled(HomeBgGradientFix)`
   position: absolute;
   top: 54rem;
   z-index: 2;
-  width: 100%;
 `;
 
 export const BtnGradient = styled(GradientCta)`
@@ -37,21 +33,41 @@ export const BtnFillStyle = styled(BtnFill)`
   margin: 2rem;
 `;
 
-export const Main1 = styled(HomeBackground)`
+export const Main1 = styled.div`
+  background-image: url(${HomeBackgroundWebP});
   position: absolute;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 85vh;
 `;
 
-export const Main2 = styled(Main02)`
+export const Main2 = styled.div`
+  background-image: url(${Main02WebP});
   position: absolute;
+  background-repeat: no-repeat;
+  background-size: cover;
   top: 61rem;
+  width: 100%;
+  height: 120vh;
 `;
 
-export const Main3 = styled(Main03)`
+export const Main3 = styled.div`
+  background-image: url(${Main03WebP});
   position: absolute;
+  background-repeat: no-repeat;
+  background-size: cover;
   top: 140rem;
+  width: 100%;
+  height: 100vh;
 `;
 
-export const Main4 = styled(Main04)`
+export const Main4 = styled.div`
+  background-image: url(${Main04WebP});
   position: absolute;
+  background-repeat: no-repeat;
+  background-size: cover;
   top: 211rem;
+  width: 100%;
+  height: 100vh;
 `;

src/pages/Start/Start.tsx

@@ -5,8 +5,6 @@ import StartGiftAnimation from './StartAnimation/GiftAnimation/StartGiftAnimatio
 import StartFixedButton from './StartButtonWithTokenCheck/StartButtonWithTokenCheck';
 import LogoHeader from './LogoHeader/LogoHeader';
 import StartStepAnimation from './StartAnimation/ScrollAnimation/StepAnimation/StartStepAnimation';
-import LottieAnimation from '../../hooks/lottie-animation/LottieAnimation';
-import TournamentAnimation from '../../../public/motions/start_tournament.json';
 import StartDownIconAnimation from './StartAnimation/DownIconAnimation/StartDownIconAnimation';
 
 const Start = () => {
@@ -23,10 +21,7 @@ const Start = () => {
 
       <StartScrollAnimation />
       <S.Main2 />
-      <LottieAnimation
-        animation={TournamentAnimation}
-        customStyle={{ position: 'absolute', top: '160rem', zIndex: '1' }}
-      />
+
       <S.Main3 />
       <StartStepAnimation />
       <S.Main4 />

yarn.lock

@@ -3510,6 +3510,11 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+heic2any@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/heic2any/-/heic2any-0.0.4.tgz#eddb8e6fec53c8583a6e18b65069bb5e8d19028a"
+  integrity sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA==
+
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -4495,13 +4500,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-
 react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-
 react-loading-skeleton@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz#c71a3a17259d08e4064974aa0b07f150a09dfd57"