diff --git a/apps/client/public/assets/onBoarding/background/onBoardingBg.webp b/apps/client/public/assets/onBoarding/background/onBoardingBg.webp new file mode 100644 index 00000000..05937349 Binary files /dev/null and b/apps/client/public/assets/onBoarding/background/onBoardingBg.webp differ diff --git a/apps/client/public/assets/onBoarding/icons/chippi_bell.webp b/apps/client/public/assets/onBoarding/icons/chippi_bell.webp new file mode 100644 index 00000000..3403dd18 Binary files /dev/null and b/apps/client/public/assets/onBoarding/icons/chippi_bell.webp differ diff --git a/apps/client/public/assets/onBoarding/icons/chippi_morning.webp b/apps/client/public/assets/onBoarding/icons/chippi_morning.webp new file mode 100644 index 00000000..9663310b Binary files /dev/null and b/apps/client/public/assets/onBoarding/icons/chippi_morning.webp differ diff --git a/apps/client/public/assets/onBoarding/icons/chippi_night.webp b/apps/client/public/assets/onBoarding/icons/chippi_night.webp new file mode 100644 index 00000000..d5e509f6 Binary files /dev/null and b/apps/client/public/assets/onBoarding/icons/chippi_night.webp differ diff --git a/apps/client/src/assets/onBoarding/icons/dotori.svg b/apps/client/public/assets/onBoarding/icons/dotori.svg similarity index 100% rename from apps/client/src/assets/onBoarding/icons/dotori.svg rename to apps/client/public/assets/onBoarding/icons/dotori.svg diff --git a/apps/client/src/assets/onBoarding/icons/header_logo.svg b/apps/client/public/assets/onBoarding/icons/header_logo.svg similarity index 100% rename from apps/client/src/assets/onBoarding/icons/header_logo.svg rename to apps/client/public/assets/onBoarding/icons/header_logo.svg diff --git a/apps/client/public/assets/onBoarding/story/macNotice.webp b/apps/client/public/assets/onBoarding/story/macNotice.webp new file mode 100644 index 00000000..764e754a Binary files /dev/null and b/apps/client/public/assets/onBoarding/story/macNotice.webp differ diff --git a/apps/client/public/assets/onBoarding/story/story1.webp b/apps/client/public/assets/onBoarding/story/story1.webp new file mode 100644 index 00000000..7a51fd97 Binary files /dev/null and b/apps/client/public/assets/onBoarding/story/story1.webp differ diff --git a/apps/client/public/assets/onBoarding/story/story2.webp b/apps/client/public/assets/onBoarding/story/story2.webp new file mode 100644 index 00000000..635314b7 Binary files /dev/null and b/apps/client/public/assets/onBoarding/story/story2.webp differ diff --git a/apps/client/public/assets/onBoarding/story/story3.webp b/apps/client/public/assets/onBoarding/story/story3.webp new file mode 100644 index 00000000..6817de32 Binary files /dev/null and b/apps/client/public/assets/onBoarding/story/story3.webp differ diff --git a/apps/client/public/firebase-config.js b/apps/client/public/firebase-config.js deleted file mode 100644 index a02b42dc..00000000 --- a/apps/client/public/firebase-config.js +++ /dev/null @@ -1,9 +0,0 @@ -const firebaseConfig = { - apiKey: 'AIzaSyD3KM0IQ4Ro3Dd2fyAY8fnhE1bQ_NesrBc', - authDomain: 'pinback-c55de.firebaseapp.com', - projectId: 'pinback-c55de', - storageBucket: 'pinback-c55de.firebasestorage.app', - messagingSenderId: '370851215931', - appId: '1:370851215931:web:08382b5e57808d29dcba1e', - measurementId: 'G-847ZNSCC3J', -}; diff --git a/apps/client/public/firebase-messaging-sw.js b/apps/client/public/firebase-messaging-sw.js index 32299991..1d918c25 100644 --- a/apps/client/public/firebase-messaging-sw.js +++ b/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', diff --git a/apps/client/src/assets/onBoarding/background/onBoardingBg.svg b/apps/client/src/assets/onBoarding/background/onBoardingBg.svg deleted file mode 100644 index a7305cfe..00000000 --- a/apps/client/src/assets/onBoarding/background/onBoardingBg.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/client/src/assets/onBoarding/icons/chippi_bell.svg b/apps/client/src/assets/onBoarding/icons/chippi_bell.svg deleted file mode 100644 index 81297d72..00000000 --- a/apps/client/src/assets/onBoarding/icons/chippi_bell.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/apps/client/src/assets/onBoarding/icons/chippi_morning.svg b/apps/client/src/assets/onBoarding/icons/chippi_morning.svg deleted file mode 100644 index 456dd193..00000000 --- a/apps/client/src/assets/onBoarding/icons/chippi_morning.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/apps/client/src/assets/onBoarding/icons/chippi_night.svg b/apps/client/src/assets/onBoarding/icons/chippi_night.svg deleted file mode 100644 index 87eea464..00000000 --- a/apps/client/src/assets/onBoarding/icons/chippi_night.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/client/src/assets/onBoarding/story/macNotice.svg b/apps/client/src/assets/onBoarding/story/macNotice.svg deleted file mode 100644 index 43bd4ff3..00000000 --- a/apps/client/src/assets/onBoarding/story/macNotice.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/apps/client/src/assets/onBoarding/story/story1.svg b/apps/client/src/assets/onBoarding/story/story1.svg deleted file mode 100644 index f10eb831..00000000 --- a/apps/client/src/assets/onBoarding/story/story1.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/apps/client/src/assets/onBoarding/story/story2.svg b/apps/client/src/assets/onBoarding/story/story2.svg deleted file mode 100644 index 5aac3f2e..00000000 --- a/apps/client/src/assets/onBoarding/story/story2.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/apps/client/src/assets/onBoarding/story/story3.svg b/apps/client/src/assets/onBoarding/story/story3.svg deleted file mode 100644 index e371e0f5..00000000 --- a/apps/client/src/assets/onBoarding/story/story3.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/apps/client/src/constants/alarms.ts b/apps/client/src/constants/alarms.ts index 41fabb5a..375fa426 100644 --- a/apps/client/src/constants/alarms.ts +++ b/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; diff --git a/apps/client/src/constants/stories.tsx b/apps/client/src/constants/stories.tsx index 5cf34001..28f99d1d 100644 --- a/apps/client/src/constants/stories.tsx +++ b/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, - } + }, ]; diff --git a/apps/client/src/pages/onBoarding/OnBoarding.tsx b/apps/client/src/pages/onBoarding/OnBoarding.tsx index 1c07e241..5cc582eb 100644 --- a/apps/client/src/pages/onBoarding/OnBoarding.tsx +++ b/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'; diff --git a/apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx b/apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx index 7dfccf4d..4b3d7b53 100644 --- a/apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx +++ b/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()} + {renderStep()} diff --git a/apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx b/apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx index 7103a341..c10e37fc 100644 --- a/apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx +++ b/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; diff --git a/apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx b/apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx index dac6f3d5..b2753134 100644 --- a/apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx +++ b/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 (
dotori -

- Pinback에 오신 걸 환영해요 -

+

Pinback에 오신 걸 환영해요

); }; diff --git a/apps/client/src/pages/onBoarding/components/funnel/step/MacStep.tsx b/apps/client/src/pages/onBoarding/components/funnel/step/MacStep.tsx index 95841ba7..14151d85 100644 --- a/apps/client/src/pages/onBoarding/components/funnel/step/MacStep.tsx +++ b/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 (
diff --git a/apps/client/src/pages/onBoarding/components/funnel/step/StoryStep.tsx b/apps/client/src/pages/onBoarding/components/funnel/step/StoryStep.tsx index a8c815dd..77c0af5f 100644 --- a/apps/client/src/pages/onBoarding/components/funnel/step/StoryStep.tsx +++ b/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" />

{story.text}

diff --git a/apps/client/src/pages/onBoarding/components/header/Header.tsx b/apps/client/src/pages/onBoarding/components/header/Header.tsx index 52120124..202c74e7 100644 --- a/apps/client/src/pages/onBoarding/components/header/Header.tsx +++ b/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 logo window.location.reload()}/> +
+ header logo window.location.reload()} + />
); };