Refactor(client): 이미지 최적화 및 코드 스플리팅

apps/client/public/firebase-messaging-sw.js

@@ -26,6 +26,10 @@ self.addEventListener('activate', function () {
   console.log('실행중..');
 });
 
+self.addEventListener('activate', () => {
+  clients.claim();
+});
+
 firebase.initializeApp(firebaseConfig);
 
 const messaging = firebase.messaging();
@@ -35,7 +39,6 @@ messaging.onBackgroundMessage((payload) => {
 
   const url = payload.data?.url || 'https://www.pinback.today';
   const notificationTitle = payload.notification?.title || 'pinback';
-
   const notificationOptions = {
     body: payload.notification?.body || '저장한 북마크를 확인해 보세요!',
     icon: payload.notification?.image || '/FCM-IMG.png',

apps/client/src/constants/alarms.ts

@@ -1,6 +1,6 @@
-import avatar1 from '@assets/onBoarding/icons/chippi_morning.svg';
-import avatar2 from '@assets/onBoarding/icons/chippi_night.svg';
-import avatar3 from '@assets/onBoarding/icons/chippi_bell.svg';
+import avatar1 from '/assets/onBoarding/icons/chippi_morning.webp';
+import avatar2 from '/assets/onBoarding/icons/chippi_night.webp';
+import avatar3 from '/assets/onBoarding/icons/chippi_bell.webp';
 
 export interface AlarmType {
   img: string;

apps/client/src/constants/stories.tsx

@@ -1,6 +1,6 @@
-import story1 from '@assets/onBoarding/story/story1.svg';
-import story2 from '@assets/onBoarding/story/story2.svg';
-import story3 from '@assets/onBoarding/story/story3.svg';
+import story1 from '/assets/onBoarding/story/story1.webp';
+import story2 from '/assets/onBoarding/story/story2.webp';
+import story3 from '/assets/onBoarding/story/story3.webp';
 
 export interface Story {
   img: string;
@@ -40,5 +40,5 @@ export const stories: Story[] = [
       </>
     ),
     progress: 100,
-  }
+  },
 ];

apps/client/src/pages/onBoarding/OnBoarding.tsx

@@ -1,4 +1,4 @@
-import onBoardingBg from '@assets/onBoarding/background/onBoardingBg.svg';
+import onBoardingBg from '/assets/onBoarding/background/onBoardingBg.webp';
 import Header from './components/header/Header';
 import MainCard from './components/funnel/MainCard';
 import { useEffect } from 'react';

apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx

@@ -1,10 +1,11 @@
 import { Progress, Button } from '@pinback/design-system/ui';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, lazy, Suspense } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import StoryStep from './step/StoryStep';
-import AlarmStep from './step/AlarmStep';
-import MacStep from './step/MacStep';
-import FinalStep from './step/FinalStep';
+const StoryStep = lazy(() => import('./step/StoryStep'));
+const AlarmStep = lazy(() => import('./step/AlarmStep'));
+const MacStep = lazy(() => import('./step/MacStep'));
+const FinalStep = lazy(() => import('./step/FinalStep'));
+
 import { cva } from 'class-variance-authority';
 import { usePostSignUp } from '@shared/apis/queries';
 const stepProgress = [{ progress: 30 }, { progress: 60 }, { progress: 100 }];
@@ -197,7 +198,7 @@ const MainCard = () => {
             transition={{ duration: 0.4 }}
             className="flex h-full flex-col items-center"
           >
-            {renderStep()}
+            <Suspense fallback={null}>{renderStep()}</Suspense>
           </motion.div>
         </AnimatePresence>
       </div>

apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx

@@ -1,4 +1,4 @@
-import dotori from '@assets/onBoarding/icons/dotori.svg';
+import dotori from '/assets/onBoarding/icons/dotori.svg';
 import AlarmBox from '../AlarmBox';
 interface AlarmStepProps {
   selected: 1 | 2 | 3;

apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx

@@ -1,11 +1,9 @@
-import dotori from '@assets/onBoarding/icons/dotori.svg';
+import dotori from '/assets/onBoarding/icons/dotori.svg';
 const FinalStep = () => {
   return (
     <div className="flex h-full flex-col items-center">
       <img src={dotori} className="mb-[1.2rem]" alt="dotori" />
-      <p className="head2 text-font-black-1">
-       Pinback에 오신 걸 환영해요
-      </p>
+      <p className="head2 text-font-black-1">Pinback에 오신 걸 환영해요</p>
     </div>
   );
 };

apps/client/src/pages/onBoarding/components/funnel/step/MacStep.tsx

@@ -1,5 +1,5 @@
-import MacNotice from '@assets/onBoarding/story/macNotice.svg';
-import dotori from '@assets/onBoarding/icons/dotori.svg';
+import MacNotice from '/assets/onBoarding/story/macNotice.webp';
+import dotori from '/assets/onBoarding/icons/dotori.svg';
 const MacStep = () => {
   return (
     <div className="flex h-full flex-col items-center">

apps/client/src/pages/onBoarding/components/funnel/step/StoryStep.tsx

@@ -13,6 +13,8 @@ const StoryStep = ({ step }: StoryStepProps) => {
         src={story.img}
         className="mb-[1.6rem] mt-[2.4rem] w-[31.2rem]"
         alt="onboarding"
+        decoding="async"
+        fetchPriority="high"
       />
       <p className="sub4-sb text-center text-black">{story.text}</p>
     </div>

apps/client/src/pages/onBoarding/components/header/Header.tsx

@@ -1,10 +1,12 @@
-import HeaderLogo from '@assets/onBoarding/icons/header_logo.svg';
+import HeaderLogo from '/assets/onBoarding/icons/header_logo.svg';
 const Header = () => {
   return (
-    <header
-      className="z-5 absolute top-0 flex w-full justify-items-start px-[8rem] py-[2.5rem]"
-    >
-      <img src={HeaderLogo} alt="header logo"  onClick={() => window.location.reload()}/>
+    <header className="z-5 absolute top-0 flex w-full justify-items-start px-[8rem] py-[2.5rem]">
+      <img
+        src={HeaderLogo}
+        alt="header logo"
+        onClick={() => window.location.reload()}
+      />
     </header>
   );
 };