[refactor] 홈페이지 메인 개선

public/index.html

@@ -5,7 +5,6 @@
     <link rel="icon" href="%PUBLIC_URL%/icon3/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
     <meta name="theme-color" content="#000000" />
-    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
     <meta
       name="description"
       content="2025 DASOM"

src/components/sections/HeroSection.tsx

@@ -7,9 +7,9 @@ const HeroSection: React.FC = () => {
     <section className="relative overflow-hidden">
       <div className="relative w-full" style={{ paddingTop: '56%' }}>
         <img
-          src="/dasomMain.png"
+          src="/dasomMain.webp"
           alt="hero background"
-          className="absolute inset-0 w-full h-full object-cover opacity-50 blur-[2px]"
+          className="absolute inset-0 w-full h-full object-cover opacity-50"
         />
         {/* Particles layer (absolute), outside of Reveal to avoid transform effects */}
         <ParticlesBackground />

src/pages/Main.tsx

@@ -1,16 +1,64 @@
-import React from 'react'
+import React, { Suspense, lazy, useEffect, useRef, useState } from 'react'
 import HeroSection from '../components/sections/HeroSection'
 import CoreValuesSection from '../components/sections/CoreValuesSection'
-import ActivitiesSection from '../components/sections/ActivitiesSection'
-import RecruitingSection from '../components/sections/RecruitingSection'
+
+const ActivitiesSection = lazy(() => import('../components/sections/ActivitiesSection'))
+const RecruitingSection = lazy(() => import('../components/sections/RecruitingSection'))
+
+type DeferredSectionProps = {
+  children: React.ReactNode
+  minHeight: number
+}
+
+const DeferredSection: React.FC<DeferredSectionProps> = ({ children, minHeight }) => {
+  const [shouldRender, setShouldRender] = useState(false)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    const node = containerRef.current
+    if (!node || shouldRender) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setShouldRender(true)
+            observer.disconnect()
+          }
+        })
+      },
+      { rootMargin: '200px 0px' }
+    )
+
+    observer.observe(node)
+
+    return () => observer.disconnect()
+  }, [shouldRender])
+
+  return (
+    <div ref={containerRef}>
+      {shouldRender ? (
+        <Suspense fallback={<div style={{ minHeight }} aria-hidden="true" />}>
+          {children}
+        </Suspense>
+      ) : (
+        <div style={{ minHeight }} aria-hidden="true" />
+      )}
+    </div>
+  )
+}
 
 const Main: React.FC = () => {
   return (
     <main className="bg-mainBlack text-white">
       <HeroSection />
       <CoreValuesSection />
-      <ActivitiesSection />
-      <RecruitingSection />
+      <DeferredSection minHeight={520}>
+        <ActivitiesSection />
+      </DeferredSection>
+      <DeferredSection minHeight={720}>
+        <RecruitingSection />
+      </DeferredSection>
     </main>
   )
 }

src/pages/intro/IntroCurriculum.tsx

@@ -47,7 +47,7 @@ const IntroCurriculum: React.FC = () => {
               key={index}
               className="bg-[#26262D] flex items-center px-4 sm:px-6 md:px-[54px] w-full max-w-[562px] mx-auto h-auto min-h-[60px] sm:min-h-[72px] py-3 sm:py-0"
             >
-                <span className="mr-3 sm:mr-5 text-[#00B493] text-center font-bold text-xl sm:text-2xl md:text-[28px] font-['Inconsolata'] whitespace-nowrap">
+                <span className="mr-3 sm:mr-5 text-[#00B493] text-center font-bold text-xl sm:text-2xl md:text-[28px] font-mono whitespace-nowrap">
                     {String(index + 1).padStart(2, '0')}
                 </span>
                 <span className="text-white text-base sm:text-xl md:text-2xl font-pretendardSemiBold leading-normal break-words">