Merge pull request #263 from DDD-Community/feat/landing

refactor: 랜딩페이지 web vital 지표 개선 작업

Author: Wonchang0314

next.config.ts

@@ -10,6 +10,7 @@ const nextConfig: NextConfig = {
     ignoreBuildErrors: false,
   },
   images: {
+    formats: ['image/avif', 'image/webp'],
     remotePatterns: [
       {
         protocol: 'https',

public/landing/landing-story-thumbnail.png

@@ -0,0 +1,7 @@
+export default function Head() {
+  return (
+    <>
+      <link rel="preload" as="image" href="/landing/opening-poster.webp" fetchPriority="high" />
+    </>
+  );
+}

public/landing/landing-story-thumbnail.webp

@@ -1,16 +1,28 @@
+import dynamic from 'next/dynamic';
 import { Header } from '@/shared/components/layout';
 import { HeaderActions } from '@/composite/landing/headerAction';
 import { IntroSection } from '@/composite/landing/intro';
-import { QuestioningSection } from '@/composite/landing/questioning';
-import { SuggestionSection } from '@/composite/landing/suggestion';
-import { StoryVideoSection } from '@/composite/landing/storyVideo';
-import { AddGoalFeatureSection } from '@/composite/landing/addGoal';
-import { ManageTodoFeatureSection } from '@/composite/landing/manageTodo';
-import { GoalAdviceFeatureSection } from '@/composite/landing/goalAdvice';
-import { CollectPlanetFeatureSection } from '@/composite/landing/collectPlanet';
-import { FundingDiscountSection } from '@/composite/landing/fundingDiscount';
-import { LaunchSection } from '@/composite/landing/launch';
-import DonationSection from '@/composite/landing/DonationSection';
+
+const QuestioningSection = dynamic(() => import('@/composite/landing/questioning').then(mod => mod.QuestioningSection));
+const SuggestionSection = dynamic(() => import('@/composite/landing/suggestion').then(mod => mod.SuggestionSection));
+const StoryVideoSection = dynamic(() => import('@/composite/landing/storyVideo').then(mod => mod.StoryVideoSection));
+const AddGoalFeatureSection = dynamic(() =>
+  import('@/composite/landing/addGoal').then(mod => mod.AddGoalFeatureSection)
+);
+const ManageTodoFeatureSection = dynamic(() =>
+  import('@/composite/landing/manageTodo').then(mod => mod.ManageTodoFeatureSection)
+);
+const GoalAdviceFeatureSection = dynamic(() =>
+  import('@/composite/landing/goalAdvice').then(mod => mod.GoalAdviceFeatureSection)
+);
+const CollectPlanetFeatureSection = dynamic(() =>
+  import('@/composite/landing/collectPlanet').then(mod => mod.CollectPlanetFeatureSection)
+);
+const FundingDiscountSection = dynamic(() =>
+  import('@/composite/landing/fundingDiscount').then(mod => mod.FundingDiscountSection)
+);
+const LaunchSection = dynamic(() => import('@/composite/landing/launch').then(mod => mod.LaunchSection));
+const DonationSection = dynamic(() => import('@/composite/landing/DonationSection').then(mod => mod.default));
 
 export default function LandingPage() {
   return (

public/landing/opening-poster.webp

@@ -39,6 +39,7 @@ export const DonationImage = () => {
               sizes="(max-width: 768px) 200px, 350px"
               className="w-50 md:w-87.5 h-auto shrink-0"
               alt="donation-section-image"
+              loading="lazy"
             />
             <ToolTip text={renderToolTipText()} position="top-left" tailPosition="top-right" />
           </article>

src/app/head.tsx

@@ -35,6 +35,7 @@ export const AddGoalFeatureSection = () => {
             sizes="(max-width: 768px) 200px, 350px"
             className="w-50 md:w-87.5 h-auto shrink-0"
             alt="fifth-section-image"
+            loading="lazy"
           />
         </MotionWrapper>
       </div>

src/app/page.tsx

@@ -34,6 +34,7 @@ export const CollectPlanetFeatureSection = () => {
             sizes="(max-width: 768px) 200px, 350px"
             className="w-50 md:w-87.5 h-auto shrink-0"
             alt="eighth-section-image"
+            loading="lazy"
           />
         </MotionWrapper>
       </div>

src/composite/landing/DonationSection/DonationImage.tsx

@@ -9,7 +9,7 @@ const LandingPageCommonStyle = {
       transition: { duration: 0.8, ease: 'easeOut' },
     },
     left: {
-      initial: { opcity: 0, x: -40 },
+      initial: { opacity: 0, x: -40 },
       whileInView: { opacity: 1, x: 0 },
       viewport: { once: true, amount: 0.3 },
       transition: { duration: 0.8, ease: 'easeOut' },