Repository: lyra-j/uuno
Pull request #226: [FEAT]/#197 메인페이지 변경
Author: login: woozizi
Labels: name: ♻️ Refactor
description: 코드 리팩토링
name: ❤️ 종욱
description: 담당자 최종욱
Created: 2025-04-21T18:53:36Z | Merged: 2025-04-22T11:38:16Z

## #️⃣ 연관된 이슈

- #197 

<br>

## 📝 작업 내용

- 튜터님한테 받은 피드백 적용했습니다
- 마지막 섹션 45부분은 디자이너님이랑 대화 후 최종적으로  수정할 예정입니다
- 완성도 90퍼


<br>

## 🖼 스크린샷

이미지

https://github.com/user-attachments/assets/2e2793e3-d70a-468a-8c24-dea78fcc97b7


<br>

## 💬 리뷰 요구사항

> 리뷰어에게 남기고 싶은 말) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **신규 기능**
    - 메인 페이지에 새로운 하단 섹션이 추가되어, 이미지 슬라이더, 디지털 명함 만들기 안내, 개발자/디자이너 정보가 포함된 푸터가 제공됩니다.

- **스타일**
    - 메인 페이지 각 섹션의 레이아웃과 스타일이 개선되어, 이미지, 버튼, 텍스트, 아이콘 바 등 시각적 요소가 더욱 세련되게 변경되었습니다.

- **리팩터**
    - 메인 페이지 섹션 컴포넌트들의 이름이 목적에 맞게 더 명확하고 직관적으로 변경되었습니다.
    - 이미지 및 텍스트 내용이 일부 업데이트되어 정보 전달이 명확해졌습니다.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/public/main/3.gif b/public/gif/chart-manual.gif
similarity index 100%
rename from public/main/3.gif
rename to public/gif/chart-manual.gif
diff --git a/public/main/2.gif b/public/gif/editor-manual.gif
similarity index 100%
rename from public/main/2.gif
rename to public/gif/editor-manual.gif
diff --git a/public/main/4.gif b/public/gif/share-manual.gif
similarity index 100%
rename from public/main/4.gif
rename to public/gif/share-manual.gif
diff --git a/public/main/1.gif b/public/gif/template-manual.gif
similarity index 100%
rename from public/main/1.gif
rename to public/gif/template-manual.gif
diff --git a/public/logo-white.png b/public/logo-white.png
new file mode 100644
index 00000000..55a65df6
Binary files /dev/null and b/public/logo-white.png differ
diff --git a/public/main/simple2-1.png b/public/main/ex-card-1.png
similarity index 100%
rename from public/main/simple2-1.png
rename to public/main/ex-card-1.png
diff --git a/public/main/simple2-2.png b/public/main/ex-card-2.png
similarity index 100%
rename from public/main/simple2-2.png
rename to public/main/ex-card-2.png
diff --git a/public/main/simple2-3.png b/public/main/ex-card-3.png
similarity index 100%
rename from public/main/simple2-3.png
rename to public/main/ex-card-3.png
diff --git a/public/main/section3-5.png b/public/main/half-bg-img.png
similarity index 100%
rename from public/main/section3-5.png
rename to public/main/half-bg-img.png
diff --git a/public/main/section1-main.png b/public/main/main-card-img.png
similarity index 100%
rename from public/main/section1-main.png
rename to public/main/main-card-img.png
diff --git a/public/main/section3-1.png b/public/main/share-img.png
similarity index 100%
rename from public/main/section3-1.png
rename to public/main/share-img.png
diff --git a/public/main/section3-2.png b/public/main/statistics-img.png
similarity index 100%
rename from public/main/section3-2.png
rename to public/main/statistics-img.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 65d6e0b0..7202ac27 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,20 +1,20 @@
-import Section1 from '@/components/main/section-one';
-import Section2 from '@/components/main/section-two';
-import Section3 from '@/components/main/section-three';
-import Section5 from '@/components/main/section-five';
-import Section4 from '@/components/main/section-four';
-import Section35 from '@/components/main/section-half';
+import MainFeatureSection from '@/components/main/main-feature-section';
+import MainHowItWorksSection from '@/components/main/main-how-it-works-section';
+import MainIntorSection from '@/components/main/main-Intor-section';
+import MainLastSection from '@/components/main/main-last-section';
+import MainPromotionSection from '@/components/main/main-promotion-section';
+import MainTipSection from '@/components/main/main-tip-section';
 import ScrollToTopButton from '@/components/main/ScrollToTopButton';
 
 export default function Homepage() {
   return (
     <div className='flex flex-col'>
-      <Section1 />
-      <Section2 />
-      <Section3 />
-      <Section35 />
-      <Section4 />
-      <Section5 />
+      <MainIntorSection />
+      <MainFeatureSection />
+      <MainTipSection />
+      <MainPromotionSection />
+      <MainHowItWorksSection />
+      <MainLastSection />
 
       <ScrollToTopButton />
     </div>
diff --git a/src/components/main/section-one.tsx b/src/components/main/main-Intor-section.tsx
similarity index 89%
rename from src/components/main/section-one.tsx
rename to src/components/main/main-Intor-section.tsx
index 0d34c38d..5c1f9829 100644
--- a/src/components/main/section-one.tsx
+++ b/src/components/main/main-Intor-section.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 
-const Section1 = () => {
+const MainIntorSection = () => {
   return (
     <section
       className='relative h-screen bg-cover bg-center'
@@ -14,7 +14,7 @@ const Section1 = () => {
           <div className='flex flex-col space-y-[16px]'>
             <Image
               src='/main-logo-black.png'
-              alt='로고'
+              alt='메인 대표 로고'
               width={150}
               height={64}
             />
@@ -38,8 +38,8 @@ const Section1 = () => {
 
           <div className='relative h-[650px] w-[510px]'>
             <Image
-              src='/main/section1-main.png'
-              alt='메인명함'
+              src='/main/main-card-img.png'
+              alt='메인 대표 명함'
               fill
               style={{ objectFit: 'contain' }}
               priority
@@ -51,4 +51,4 @@ const Section1 = () => {
   );
 };
 
-export default Section1;
+export default MainIntorSection;
diff --git a/src/components/main/section-two.tsx b/src/components/main/main-feature-section.tsx
similarity index 89%
rename from src/components/main/section-two.tsx
rename to src/components/main/main-feature-section.tsx
index c28441f3..c1a25378 100644
--- a/src/components/main/section-two.tsx
+++ b/src/components/main/main-feature-section.tsx
@@ -4,12 +4,12 @@ import Link from 'next/link';
 import React from 'react';
 
 const card = [
-  { title: '카드1번', link: '/main/simple2-1.png' },
-  { title: '카드2번', link: '/main/simple2-2.png' },
-  { title: '카드3번', link: '/main/simple2-3.png' },
+  { title: '예시 대표 명함 이미지 1', link: '/main/ex-card-1.png' },
+  { title: '예시 대표 명함 이미지 2', link: '/main/ex-card-2.png' },
+  { title: '예시 대표 명함 이미지 3', link: '/main/ex-card-3.png' },
 ];
 
-const Section2 = () => {
+const MainFeatureSection = () => {
   return (
     <section className='flex w-full flex-col items-center'>
       {/* section1.5 */}
@@ -67,4 +67,4 @@ const Section2 = () => {
   );
 };
 
-export default Section2;
+export default MainFeatureSection;
diff --git a/src/components/main/section-four.tsx b/src/components/main/main-how-it-works-section.tsx
similarity index 54%
rename from src/components/main/section-four.tsx
rename to src/components/main/main-how-it-works-section.tsx
index 16dbfa1e..eaaefb55 100644
--- a/src/components/main/section-four.tsx
+++ b/src/components/main/main-how-it-works-section.tsx
@@ -1,14 +1,15 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import gsap from 'gsap';
 import ScrollTrigger from 'gsap/ScrollTrigger';
 import React from 'react';
 import Image from 'next/image';
+import { Icon } from '@iconify/react/dist/iconify.js';
 
 gsap.registerPlugin(ScrollTrigger);
 
-const sectionsContent = [
+const sectionContent = [
   {
     title: '템플릿 선택',
     subtitle: '쉽고 간편하게 원하는 템플릿 선택하기',
@@ -35,20 +36,28 @@ const sectionsContent = [
   },
 ];
 
-const Section4 = () => {
-  const [currentVideo, setCurrentVideo] = useState<string>('/템플릿.gif');
-  const sectionRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const containerRef = useRef<HTMLDivElement>(null);
+const gifPaths = [
+  '/gif/template-manual.gif',
+  '/gif/editor-manual.gif',
+  '/gif/chart-manual.gif',
+  '/gif/share-manual.gif',
+];
 
-  // 추후 동영상 재생되면 바꿀 예정
-  // const videoPaths = useMemo(
-  //   () => ['/test1.mp4', '/test2.mp4', '/test3.mp4', '/test4.mp4'],
-  //   []
-  // );
-  const gifPaths = useMemo(
-    () => ['/main/1.gif', '/main/2.gif', '/main/3.gif', '/main/4.gif'],
-    []
+const iconList = [
+  'tdesign:module',
+  'tdesign:palette',
+  'oui:stats',
+  'tdesign:share',
+];
+
+const MainHowItWorksSection = () => {
+  const [currentVideo, setCurrentVideo] = useState<string>(
+    '/gif/template-manual.gif'
   );
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [inView, setInView] = useState(false);
+  const sectionRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const switchVideo = useCallback(
     (index: number) => {
@@ -56,6 +65,7 @@ const Section4 = () => {
         opacity: 0,
         duration: 0.5,
         onComplete: () => {
+          setActiveIndex(index);
           setCurrentVideo(gifPaths[index]);
           gsap.to('#videoWrapper', { opacity: 1, duration: 0.5 });
         },
@@ -81,61 +91,88 @@ const Section4 = () => {
     };
   }, [switchVideo]);
 
+  useEffect(() => {
+    const trigger = ScrollTrigger.create({
+      trigger: containerRef.current,
+      start: 'top top',
+      end: 'bottom bottom',
+      onEnter: () => setInView(true),
+      onLeave: () => setInView(false),
+      onEnterBack: () => setInView(true),
+      onLeaveBack: () => setInView(false),
+    });
+
+    return () => trigger.kill();
+  }, []);
+
   return (
     <section
       ref={containerRef}
-      className='relative mx-auto flex w-full max-w-6xl bg-white'
+      className='relative mx-auto flex w-full max-w-5xl gap-[200px] bg-white'
     >
-      {/* 왼쪽: 고정된 동영상 영역 */}
+      {/* 왼쪽: GIF */}
       <div
         id='videoWrapper'
         className='sticky top-0 flex h-screen w-1/2 items-center justify-center overflow-hidden'
       >
-        <div className='relative h-1/2 w-full'>
+        <div className='relative h-[313px] w-[500px]'>
           <Image
             key={currentVideo}
             src={currentVideo}
             fill
             alt='gif'
-            className='transition-opacity duration-500'
+            className='rounded-md transition-opacity duration-500'
             unoptimized
           />
         </div>
-        {/* <video
-          key={currentVideo}
-          src={currentVideo}
-          autoPlay
-          loop
-          muted
-          playsInline
-          className='h-1/2 object-cover transition-opacity duration-500'
-        /> */}
       </div>
 
-      {/* 오른쪽: 스크롤 섹션 */}
+      {/* 오른쪽: 텍스트 */}
       <div className='flex w-1/2 flex-col'>
-        {sectionsContent.map((sec, idx) => (
+        {sectionContent.map((sec, idx) => (
           <div
             key={idx}
             ref={(el) => {
               if (el) sectionRefs.current[idx] = el;
             }}
-            className='flex h-screen items-center px-8'
+            className='flex h-screen items-center'
           >
             <div>
-              <h2 className='mb-4 text-3xl font-bold text-blue-500'>
+              <h2 className='mb-[6px] text-title-bold text-primary-40'>
                 {sec.title}
               </h2>
-              <h2 className='mb-4 text-2xl font-bold'>{sec.subtitle}</h2>
-              <p className='max-w-md whitespace-pre-line text-base leading-relaxed text-gray-700'>
+              <h3 className='mb-[15px] text-body-medium text-primary-80'>
+                {sec.subtitle}
+              </h3>
+              <p className='whitespace-pre-line text-label2-regular text-gray-70'>
                 {sec.content}
               </p>
             </div>
           </div>
         ))}
       </div>
+
+      {/* 아이콘 바  */}
+      {inView && (
+        <div className='fixed bottom-[120px] left-1/2 z-50 -translate-x-1/2'>
+          <div className='flex gap-3 rounded-full bg-[#F5F6F7] px-4 py-2'>
+            {iconList.map((icon, idx) => (
+              <div
+                key={idx}
+                className={`flex h-8 w-8 items-center justify-center rounded-full transition-all duration-300 ${
+                  idx === activeIndex
+                    ? 'scale-110 bg-[#2C64F5] text-white shadow-lg'
+                    : 'text-[#B0B0B0] hover:scale-110 hover:text-[#2C64F5]'
+                }`}
+              >
+                <Icon icon={icon} width={18} height={18} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </section>
   );
 };
 
-export default Section4;
+export default MainHowItWorksSection;
diff --git a/src/components/main/main-last-section.tsx b/src/components/main/main-last-section.tsx
new file mode 100644
index 00000000..1bea04fd
--- /dev/null
+++ b/src/components/main/main-last-section.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { ROUTES } from '@/constants/path.constant';
+import { Icon } from '@iconify/react/dist/iconify.js';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useMemo } from 'react';
+
+const MainLastSection = () => {
+  const mainCard = useMemo(
+    () => Array.from({ length: 9 }, (_, i) => `/maincard/${i + 1}.jpg`),
+    []
+  );
+
+  const extendedCard = useMemo(
+    () => [...mainCard, ...mainCard, ...mainCard],
+    [mainCard]
+  );
+
+  return (
+    <section className='relative flex min-h-[618px] flex-col items-center justify-start bg-[#1A1A1A]'>
+      {/* 슬라이드 */}
+      <div className='relative z-10 mt-[150px] w-full overflow-hidden'>
+        <div className='flex animate-moveLeft whitespace-nowrap'>
+          {extendedCard.map((src, idx) => (
+            <div
+              key={`card-${idx}`}
+              className='mx-2 inline-block w-[280px] flex-shrink-0 overflow-hidden'
+            >
+              <Image
+                src={src}
+                alt={`리뷰 카드 ${(idx % mainCard.length) + 1}`}
+                width={280}
+                height={160}
+                className='rounded object-cover'
+                priority={idx < mainCard.length}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 소개 문구 + 버튼 */}
+      <div className='relative z-20 mt-20 flex flex-col items-center justify-center gap-6 bg-[#1A1A1A] px-4 text-center'>
+        <h2 className='text-[20px] font-bold text-white'>
+          Uuno로 당신만의 <span className='text-primary-40'>디지털 명함</span>을
+          만들어보세요.
+        </h2>
+        <Link href={ROUTES.EDITOR}>
+          <button className='flex h-[36px] w-[156px] items-center justify-center rounded-[46px] bg-primary-40 px-[12px] py-[6px] text-sm text-white'>
+            바로 시작하기
+          </button>
+        </Link>
+
+        <Link href={ROUTES.TEMPLATES.BASE}>
+          <button className='flex items-center gap-[6px] text-label2-medium text-white hover:opacity-80'>
+            템플릿 보러가기
+            <Icon icon='tdesign:arrow-right' width={20} height={20} />
+          </button>
+        </Link>
+      </div>
+
+      {/* 푸터 */}
+      <footer className='mt-48 w-full border-t border-white/10 px-6 py-12 text-white'>
+        <div className='mx-auto flex max-w-6xl flex-col items-center gap-8 sm:flex-row sm:justify-between'>
+          {/* 왼쪽 로고 */}
+          <Image
+            src='/logo-white.png'
+            alt='Uuno 로고'
+            width={80}
+            height={24}
+            className='object-contain'
+          />
+
+          {/* 오른쪽 정보 */}
+          <div className='flex flex-col gap-4 text-[13px]'>
+            {/* Developer 라인 */}
+            <div className='flex flex-wrap items-center gap-4 font-normal'>
+              <span className='font-semibold text-primary-40'>Developer</span>
+              <span className='flex items-center gap-1 text-white/90'>
+                <Icon icon='mdi:github' className='text-white/70' width={16} />
+                장미경
+              </span>
+              <span className='flex items-center gap-1 text-white/90'>
+                <Icon icon='mdi:github' className='text-white/70' width={16} />
+                노수민
+              </span>
+              <span className='flex items-center gap-1 text-white/90'>
+                <Icon icon='mdi:github' className='text-white/70' width={16} />
+                최종욱
+              </span>
+              <span className='flex items-center gap-1 text-white/90'>
+                <Icon icon='mdi:github' className='text-white/70' width={16} />
+                강지수
+              </span>
+            </div>
+
+            {/* Designer 라인 */}
+            <div className='flex flex-wrap items-center gap-4 font-normal text-white/80'>
+              <span className='font-semibold text-primary-40'>Designer</span>
+              <span>최정화</span>
+              <span>bonnibel2024@gmail.com</span>
+              <span>서희령</span>
+              <span>cotta1014@gmail.com</span>
+            </div>
+          </div>
+        </div>
+
+        <p className='mt-10 text-center text-xs text-white/50'>
+          2025 Sparta Coding Club React Project | Team Uuno
+        </p>
+      </footer>
+    </section>
+  );
+};
+
+export default MainLastSection;
diff --git a/src/components/main/section-half.tsx b/src/components/main/main-promotion-section.tsx
similarity index 79%
rename from src/components/main/section-half.tsx
rename to src/components/main/main-promotion-section.tsx
index 9405b92c..173353ae 100644
--- a/src/components/main/section-half.tsx
+++ b/src/components/main/main-promotion-section.tsx
@@ -3,17 +3,22 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 
-const Section35 = () => {
+const MainPromotionSection = () => {
   return (
     <section
       className='flex h-[356px] flex-col items-center justify-center bg-cover bg-center'
       style={{
-        backgroundImage: 'url(/main/section35.png)',
+        backgroundImage: 'url(/main/half-bg-img.png)',
         backgroundBlendMode: 'luminosity',
       }}
     >
       <div className='mb-[34px] flex flex-col items-center justify-center gap-4'>
-        <Image src='/main-logo-black.png' alt='로고' width={92} height={36} />
+        <Image
+          src='/main-logo-black.png'
+          alt='메인 로고'
+          width={92}
+          height={36}
+        />
         <h2 className='text-center text-landing-bold-l'>
           스마트한 선택 디지털 명함
         </h2>
@@ -31,4 +36,4 @@ const Section35 = () => {
   );
 };
 
-export default Section35;
+export default MainPromotionSection;
diff --git a/src/components/main/section-three.tsx b/src/components/main/main-tip-section.tsx
similarity index 91%
rename from src/components/main/section-three.tsx
rename to src/components/main/main-tip-section.tsx
index 7accf711..a6074364 100644
--- a/src/components/main/section-three.tsx
+++ b/src/components/main/main-tip-section.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import React from 'react';
 
-const Section3 = () => {
+const MainTipSection = () => {
   return (
     <section className='flex w-full flex-col items-center justify-center'>
       {/* 공유 블록 */}
@@ -20,7 +20,7 @@ const Section3 = () => {
         {/* 이미지 */}
         <div className='relative h-[280px] w-[332px]'>
           <Image
-            src='/main/section3-1.png'
+            src='/main/share-img.png'
             alt='공유 이미지'
             fill
             className='object-cover'
@@ -33,8 +33,8 @@ const Section3 = () => {
         {/* 이미지 (왼쪽) */}
         <div className='relative h-[280px] w-[332px]'>
           <Image
-            src='/main/section3-2.png'
-            alt='공유 이미지'
+            src='/main/statistics-img.png'
+            alt='통계 이미지'
             fill
             className='object-cover'
           />
@@ -54,4 +54,4 @@ const Section3 = () => {
   );
 };
 
-export default Section3;
+export default MainTipSection;
diff --git a/src/components/main/section-five.tsx b/src/components/main/section-five.tsx
deleted file mode 100644
index 27482024..00000000
--- a/src/components/main/section-five.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-import Image from 'next/image';
-import React, { useMemo } from 'react';
-
-const Section5 = () => {
-  const mainCard = useMemo(
-    () => Array.from({ length: 9 }, (_, i) => `/maincard/${i + 1}.jpg`),
-    []
-  );
-
-  const extendedCard = useMemo(
-    () => [...mainCard, ...mainCard, ...mainCard],
-    [mainCard]
-  );
-  return (
-    <section className='flex h-screen flex-col items-center justify-center space-y-8 bg-[#1A1A1A]'>
-      <div className='w-full overflow-hidden'>
-        <div className='flex animate-moveLeft whitespace-nowrap'>
-          {extendedCard.map((src, idx) => (
-            <div
-              key={`card-${idx}`}
-              className='mx-2 inline-block w-[280px] flex-shrink-0 overflow-hidden'
-            >
-              <Image
-                src={src}
-                alt={`리뷰 카드 ${(idx % mainCard.length) + 1}`}
-                width={280}
-                height={160}
-                className='object-cover'
-                priority={idx < mainCard.length}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <h2 className='mb-4 text-center text-4xl font-bold text-white'>
-        Uuno로 당신만의 <span className='text-blue-500'>디지털 명함</span>을
-        만들어보세요.
-      </h2>
-      <button className='rounded-2xl bg-blue-500 px-8 py-1 text-white'>
-        바로 시작하기
-      </button>
-      <button className='px-8 py-1 text-white'>템플릿 보러가기 -&gt;</button>
-    </section>
-  );
-};
-
-export default Section5;


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>🧹 Nitpick comments (4)</summary><blockquote>

<details>
<summary>src/components/main/section-five.tsx (1)</summary><blockquote>

`63-112`: **푸터 섹션 추가가 효과적으로 이루어졌습니다.**

새로 추가된 푸터 섹션은 디자인적으로 완성도가 높고 정보를 체계적으로 제공하고 있습니다:
- 로고와 팀원 정보가 균형 있게 배치됨
- 개발자 및 디자이너 정보가 명확하게 구분됨
- 반응형 디자인이 적용되어 다양한 화면 크기에 적응 가능
- GitHub 아이콘 등 시각적 요소를 효과적으로 활용

다만, 저작권 표시의 연도가 2025년으로 표기되어 있습니다. 현재 연도(2024년)로 수정하는 것이 적절할 수 있습니다.

```diff
-          2025 Sparta Coding Club React Project | Team Uuno
+          2024 Sparta Coding Club React Project | Team Uuno
```

</blockquote></details>
<details>
<summary>src/components/main/section-four.tsx (3)</summary><blockquote>

`3-8`: **중복‧비표준 import 경로 정리 필요**  
1. `useCallback` 등 훅을 가져오며 동시에 `import React from 'react';` 또 사용하고 있어 중복입니다. 하나로 합치거나 `React` 기본 import를 제거하세요.  
2. `@iconify/react/dist/iconify.js` 대신 공식 가이드의 `@iconify/react`를 사용하면 번들 크기 및 타입 지원 측면에서 안전합니다.
```diff
-import { useCallback, useEffect, useRef, useState } from 'react';
-import React from 'react';
-import { Icon } from '@iconify/react/dist/iconify.js';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Icon } from '@iconify/react';
```

---

`94-106`: **`inView` 감지 트리거 정리 시 메모리 누수 예방**  
훅 내부에서 `ScrollTrigger.create` 결과를 `trigger` 변수로 받으셨으므로, `return () => trigger.kill();` 은 적절합니다. 다만 컴포넌트가 빈번히 마운트‧언마운트될 경우를 대비해 `ScrollTrigger.getById(...)` 또는 별도 id로 관리하면 더 안전합니다. 필요시 알려주시면 예시 코드 제공드리겠습니다.

---

`152-172`: **아이콘 버튼에 접근성 속성 추가 고려**  
`div` 태그에 클릭 이벤트가 없더라도 `role='button'` 및 `aria-label` 을 부여하면 스크린리더 사용자가 현재 단계 아이콘을 인지하기 쉽습니다.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 3c0db97f096d4567748bd00a92c2c45305a78454 and 5a8463bdee6c6ef3f8258977c8e9158f029a5755.

</details>

<details>
<summary>⛔ Files ignored due to path filters (12)</summary>

* `public/gif/chart-manual.gif` is excluded by `!**/*.gif`
* `public/gif/editor-manual.gif` is excluded by `!**/*.gif`
* `public/gif/share-manual.gif` is excluded by `!**/*.gif`
* `public/gif/template-manual.gif` is excluded by `!**/*.gif`
* `public/logo-white.png` is excluded by `!**/*.png`
* `public/main/ex-card-1.png` is excluded by `!**/*.png`
* `public/main/ex-card-2.png` is excluded by `!**/*.png`
* `public/main/ex-card-3.png` is excluded by `!**/*.png`
* `public/main/half-bg-img.png` is excluded by `!**/*.png`
* `public/main/main-card-img.png` is excluded by `!**/*.png`
* `public/main/share-img.png` is excluded by `!**/*.png`
* `public/main/statistics-img.png` is excluded by `!**/*.png`

</details>

<details>
<summary>📒 Files selected for processing (7)</summary>

* `src/app/page.tsx` (1 hunks)
* `src/components/main/section-five.tsx` (3 hunks)
* `src/components/main/section-four.tsx` (4 hunks)
* `src/components/main/section-half.tsx` (2 hunks)
* `src/components/main/section-one.tsx` (4 hunks)
* `src/components/main/section-three.tsx` (4 hunks)
* `src/components/main/section-two.tsx` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/main/section-five.tsx (1)</summary><blockquote>

<details>
<summary>src/constants/path.constant.ts (1)</summary>

* `ROUTES` (1-15)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (12)</summary><blockquote>

<details>
<summary>src/components/main/section-two.tsx (2)</summary>

`7-9`: **카드 이미지 및 텍스트 업데이트가 잘 이루어졌습니다.**

이미지 경로와 제목이 보다 명확하고 일관성 있게 변경되었습니다. 이는 코드의 가독성을 높이고 유지보수를 용이하게 합니다.

---

`12-12`: **컴포넌트 명칭 변경이 적절합니다.**

`Section2`에서 `MainFeatureSection`으로의 이름 변경은 컴포넌트의 목적과 기능을 더 명확하게 표현하고 있습니다. 이러한 의미 있는 이름 지정은 코드베이스의 전반적인 이해도를 높입니다.



Also applies to: 70-70

</details>
<details>
<summary>src/components/main/section-three.tsx (3)</summary>

`4-4`: **컴포넌트 이름 변경이 적절합니다.**

`Section3`에서 `MainTipSection`으로의 이름 변경은 컴포넌트의 내용과 목적을 명확하게 표현하고 있어 좋습니다. 이는 전체 메인 페이지 구성 요소들의 일관된 네이밍 컨벤션을 따르고 있습니다.



Also applies to: 57-57

---

`23-24`: **이미지 경로 업데이트가 잘 이루어졌습니다.**

이미지 경로가 `/main/section3-1.png`에서 `/main/share-img.png`로 변경되었습니다. 새 경로명이 이미지 내용을 더 명확하게 설명하고 있어 코드 가독성이 향상되었습니다.

---

`36-37`: **이미지 경로와 대체 텍스트 업데이트가 적절합니다.**

이미지 경로가 `/main/section3-2.png`에서 `/main/statistics-img.png`로 변경되고, 대체 텍스트도 '공유 이미지'에서 '통계 이미지'로 정확하게 업데이트되었습니다. 이는 접근성과 코드 가독성 모두를 향상시킵니다.

</details>
<details>
<summary>src/components/main/section-half.tsx (3)</summary>

`6-6`: **컴포넌트 이름 변경이 적절합니다.**

`Section35`에서 `MainPromotionSection`으로의 이름 변경은 컴포넌트의 목적을 더 정확하게 표현하고 있습니다. 이러한 의미 있는 네이밍은 코드 이해도와 유지보수성을 향상시킵니다.



Also applies to: 39-39

---

`11-11`: **배경 이미지 경로 업데이트가 적절합니다.**

배경 이미지 URL이 `/main/section35.png`에서 `/main/half-bg-img.png`로 변경되었습니다. 새 이름이 이미지의 특성을 더 잘 나타내고 있어 적절합니다.

---

`16-21`: **이미지 컴포넌트 속성 개선이 잘 이루어졌습니다.**

이미지 컴포넌트의 속성이 여러 줄로 정리되어 가독성이 향상되었고, 대체 텍스트가 '로고'에서 '메인 로고'로 더 명확하게 변경되었습니다. 이는 코드 정리와 접근성 측면에서 좋은 개선입니다.

</details>
<details>
<summary>src/components/main/section-five.tsx (3)</summary>

`3-6`: **컴포넌트 이름 변경 및 필요한 임포트 추가가 잘 이루어졌습니다.**

`Section5`에서 `MainLastSection`으로의 이름 변경은 컴포넌트의 역할을 더 명확하게 표현하고 있으며, 추가된 기능을 위한 임포트(ROUTES, Icon, Link)가 적절하게 추가되었습니다. 코드 구조가 전반적으로 개선되었습니다.



Also applies to: 9-9, 117-117

---

`21-23`: **레이아웃 구조 및 스타일 개선이 잘 이루어졌습니다.**

섹션의 레이아웃이 개선되었고 슬라이드 이미지에 border-radius가 추가되어 시각적으로 더 매력적인 디자인이 되었습니다. z-index를 활용한 레이어링도 적절하게 구현되었습니다.



Also applies to: 35-35

---

`43-61`: **소개 문구 및 버튼 UI 개선이 효과적으로 이루어졌습니다.**

소개 문구와 버튼 섹션의 디자인이 크게 개선되었습니다:
- 텍스트 크기와 스타일이 조정되어 가독성이 향상
- Next.js Link 컴포넌트를 사용하여 네비게이션 기능 강화
- '템플릿 보러가기' 버튼에 화살표 아이콘 추가로 직관성 향상
- 전체적인 레이아웃 및 간격 조정으로 시각적 균형 확보

사용자 경험과 인터페이스 디자인이 모두 개선되었습니다.

</details>
<details>
<summary>src/components/main/section-one.tsx (1)</summary>

`17-20`: **대체 텍스트(alt) 표현이 개선되었습니다 👍**  
의미 전달이 명확해졌으며 접근성 측면에서도 적절합니다.  



Also applies to: 41-44

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-21T18:56:10Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/components/main/main-how-it-works-section.tsx (1)</summary><blockquote>

`77-92`: _🛠️ Refactor suggestion_

**ScrollTrigger 정리 로직이 전역 트리거까지 제거할 위험**

`ScrollTrigger.getAll().forEach(t => t.kill())`는 페이지의 다른 컴포넌트에서 생성한 트리거까지 모두 제거합니다.  
생성된 트리거 인스턴스를 배열에 저장해두고, 클린업 시 해당 배열만 순회하여 kill 하는 방식으로 한정하는 편이 안전합니다.  
또한 `ScrollTrigger.refresh()`를 매 마운트마다 호출하면 퍼포먼스에 부담이 될 수 있으므로 필요 시점에 한정해주세요.

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (7)</summary><blockquote>

<details>
<summary>src/components/main/main-how-it-works-section.tsx (7)</summary><blockquote>

`8-8`: **Iconify import 경로 최적화 필요**

`@iconify/react/dist/iconify.js` 대신 패키지 루트(`@iconify/react`)를 임포트하면 번들 크기를 줄이고 트리 셰이킹 효과를 극대화할 수 있습니다.

```diff
-import { Icon } from '@iconify/react/dist/iconify.js';
+import { Icon } from '@iconify/react';
```

---

`39-44`: **`gifPaths`를 Read‑only 배열로 선언하여 타입 안전성 강화**

`as const`를 붙이면 각 요소가 literal 타입으로 고정되어 IDE 자동완성과 추론 품질이 좋아집니다.

```diff
-const gifPaths = [
+const gifPaths = [
   '/gif/template-manual.gif',
   '/gif/editor-manual.gif',
   '/gif/chart-manual.gif',
   '/gif/share-manual.gif',
-];
+] as const;
```

---

`54-56`: **초기 상태를 상수로부터 직접 가져오기**

중복 문자열을 제거하고 한 곳에서만 경로를 관리할 수 있습니다.

```diff
-  const [currentVideo, setCurrentVideo] = useState<string>(
-    '/gif/template-manual.gif'
-  );
+  const [currentVideo, setCurrentVideo] = useState<string>(gifPaths[0]);
```

---

`63-75`: **`useCallback`의 의존성 배열 최적화**

`gifPaths`는 모듈 범위에서 정의된 불변 배열이므로 의존성에 포함하지 않아도 됩니다. ESLint(react‑hooks/exhaustive‑deps) 경고를 피하려면 빈 배열을 사용하거나 `// eslint-disable-line`을 추가하세요.

```diff
-  ), [gifPaths]
+  ), []
```

---

`108-112`: **`gap-[200px]`의 고정 간격은 작은 뷰포트에서 레이아웃 깨짐 우려**

반응형을 고려하여 `gap-x-20 lg:gap-[200px]`처럼 브레이크포인트별 값을 지정하거나, CSS clamp를 활용해 유동 간격을 설정하는 것을 권장합니다.

---

`118-126`: **`alt` 속성에 의미 있는 설명 추가**

스크린리더 사용자를 위해 현재 보여주는 GIF의 의미를 alt 텍스트에 반영하는 것이 좋습니다.

```diff
-            alt='gif'
+            alt={sectionContent[activeIndex].title + ' 미리보기 GIF'}
```

---

`132-138`: **리스트 key를 index 대신 고유 식별자로**

컴포넌트 순서가 변할 경우 재마운트로 인한 불필요한 렌더링을 방지할 수 있습니다.

```diff
-          <div
-            key={idx}
+          <div
+            key={sec.title}
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 31016586e72405adb1a6b404199b0554dd23ada1 and 4a254f2433bc66213f6851f6a4bb1368f3feb574.

</details>

<details>
<summary>📒 Files selected for processing (7)</summary>

* `src/app/page.tsx` (1 hunks)
* `src/components/main/main-Intor-section.tsx` (4 hunks)
* `src/components/main/main-feature-section.tsx` (2 hunks)
* `src/components/main/main-how-it-works-section.tsx` (3 hunks)
* `src/components/main/main-last-section.tsx` (1 hunks)
* `src/components/main/main-promotion-section.tsx` (2 hunks)
* `src/components/main/main-tip-section.tsx` (4 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (5)</summary>

* src/components/main/main-promotion-section.tsx
* src/components/main/main-Intor-section.tsx
* src/components/main/main-last-section.tsx
* src/components/main/main-tip-section.tsx
* src/components/main/main-feature-section.tsx

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* src/app/page.tsx

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-21T19:06:05Z
user: login: K-jisu
body: 푸터가 생겼네여~
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-22T11:24:47Z
user: login: lyra-j
body: 배포용  확인 완료
state: APPROVED
author_association: OWNER
submitted_at: 2025-04-22T11:26:24Z

Review comments:
diff_hunk: @@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 
-const Section1 = () => {
+const MainIntorSection = () => {
path: src/components/main/section-one.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**컴포넌트 이름에 오타가 있습니다 – `MainIntroSection`로 교정 권장**  
`Intor` → `Intro`로 수정하지 않으면 오타가 그대로 노출되어 가독성‧검색성 모두 떨어집니다. 또한 다른 파일(예: `page.tsx`)에서도 동일한 오타를 그대로 사용하고 있으므로, 일괄 변경이 필요합니다.
```diff
-const MainIntorSection = () => {
+const MainIntroSection = () => {
...
-export default MainIntorSection;
+export default MainIntroSection;
```
수정 후 `import` 경로를 사용하는 모든 파일도 함께 리네임해 주세요.  



Also applies to: 54-54

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-21T18:56:09Z
author_association: NONE
diff_hunk: @@ -1,20 +1,20 @@
-import Section1 from '@/components/main/section-one';
-import Section2 from '@/components/main/section-two';
-import Section3 from '@/components/main/section-three';
-import Section5 from '@/components/main/section-five';
-import Section4 from '@/components/main/section-four';
-import Section35 from '@/components/main/section-half';
 import ScrollToTopButton from '@/components/main/ScrollToTopButton';
+import MainIntorSection from '@/components/main/section-one';
+import MainFeatureSection from '@/components/main/section-two';
+import MainPromotionSection from '@/components/main/section-half';
+import MainHowItWorksSection from '@/components/main/section-four';
+import MainLastSection from '@/components/main/section-five';
+import MainTipSection from '@/components/main/section-three';
path: src/app/page.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**`MainIntorSection` 오타 전파 위험**  
앞서 언급한 오타가 이 파일에도 그대로 사용되고 있습니다. 컴포넌트명을 `MainIntroSection`으로 변경한 뒤 아래 JSX 부분과 `import` 경로도 모두 수정해 주세요. 그렇지 않으면 빌드 단계에서 “cannot find module” 오류가 발생합니다.  



Also applies to: 12-17

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-21T18:56:09Z
author_association: NONE
diff_hunk: @@ -69,7 +79,7 @@ const Section4 = () => {
       if (!section) return;
       ScrollTrigger.create({
         trigger: section,
-        start: 'top center',
+        start: 'top ㅅ',
         end: 'bottom center',
path: src/components/main/section-four.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**ScrollTrigger 시작 지점에 잘못된 문자(`ㅅ`)가 포함되어 있습니다**  
`start: 'top ㅅ'` 는 파싱 오류를 일으켜 스크롤 트리거가 동작하지 않습니다. 의도했던 값으로 교체해 주세요. 예시는 다음과 같습니다.
```diff
-        start: 'top ㅅ',
+        start: 'top center',
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        trigger: section,
        start: 'top center',
        end: 'bottom center',
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit 3101658
created_at: 2025-04-21T18:56:09Z
author_association: NONE
diff_hunk: @@ -81,61 +91,88 @@ const Section4 = () => {
     };
   }, [switchVideo]);
 
+  useEffect(() => {
+    const trigger = ScrollTrigger.create({
+      trigger: containerRef.current,
+      start: 'top top',
+      end: 'bottom bottom',
+      onEnter: () => setInView(true),
+      onLeave: () => setInView(false),
+      onEnterBack: () => setInView(true),
+      onLeaveBack: () => setInView(false),
+    });
+
+    return () => trigger.kill();
+  }, []);
+
   return (
     <section
       ref={containerRef}
-      className='relative mx-auto flex w-full max-w-6xl bg-white'
+      className='relative mx-auto flex w-full max-w-5xl gap-[200px] bg-white'
     >
-      {/* 왼쪽: 고정된 동영상 영역 */}
+      {/* 왼쪽: GIF */}
       <div
         id='videoWrapper'
         className='sticky top-0 flex h-screen w-1/2 items-center justify-center overflow-hidden'
       >
-        <div className='relative h-1/2 w-full'>
+        <div className='relative h-[313px] w-[500px]'>
           <Image
             key={currentVideo}
             src={currentVideo}
             fill
             alt='gif'
-            className='transition-opacity duration-500'
+            className='rounded-md transition-opacity duration-500'
             unoptimized
           />
         </div>
-        {/* <video
-          key={currentVideo}
-          src={currentVideo}
-          autoPlay
-          loop
-          muted
-          playsInline
-          className='h-1/2 object-cover transition-opacity duration-500'
-        /> */}
       </div>
 
-      {/* 오른쪽: 스크롤 섹션 */}
+      {/* 오른쪽: 텍스트 */}
       <div className='flex w-1/2 flex-col'>
-        {sectionsContent.map((sec, idx) => (
+        {sectionContent.map((sec, idx) => (
           <div
             key={idx}
             ref={(el) => {
               if (el) sectionRefs.current[idx] = el;
             }}
-            className='flex h-screen items-center px-8'
+            className='flex h-screen items-center'
           >
             <div>
-              <h2 className='mb-4 text-3xl font-bold text-blue-500'>
+              <h2 className='mb-[6px] text-title-bold text-primary-40'>
                 {sec.title}
               </h2>
-              <h2 className='mb-4 text-2xl font-bold'>{sec.subtitle}</h2>
-              <p className='max-w-md whitespace-pre-line text-base leading-relaxed text-gray-700'>
+              <h3 className='mb-[15px] text-body-medium text-primary-80'>
+                {sec.subtitle}
+              </h3>
+              <p className='whitespace-pre-line text-label2-regular text-gray-70'>
                 {sec.content}
               </p>
             </div>
           </div>
         ))}
       </div>
+
+      {/* 아이콘 바  */}
+      {inView && (
+        <div className='fixed bottom-[120px] left-1/2 z-50 -translate-x-1/2'>
+          <div className='flex gap-3 rounded-full bg-[#F5F6F7] px-4 py-2'>
+            {iconList.map((icon, idx) => (
+              <div
+                key={idx}
+                className={`flex h-8 w-8 items-center justify-center rounded-full transition-all duration-300 ${
+                  idx === activeIndex
+                    ? 'scale-110 bg-[#2C64F5] text-white shadow-lg'
+                    : 'text-[#B0B0B0] hover:scale-110 hover:text-[#2C64F5]'
+                }`}
+              >
+                <Icon icon={icon} width={18} height={18} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
path: src/components/main/main-how-it-works-section.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**아이콘 바 접근성 & 상호작용 개선**

현재 아이콘이 `<div>`로 렌더링되어 키보드 포커스가 불가하고, 클릭 이벤트도 없습니다.  
버튼 요소로 변경하고 aria‑label을 부여한 뒤, 클릭 시 해당 섹션으로 스크롤 이동하는 기능을 연결하면 UX가 크게 향상됩니다.

```diff
-{iconList.map((icon, idx) => (
-  <div
-    key={idx}
+{iconList.map((icon, idx) => (
+  <button
+    key={icon}
+    type='button'
+    aria-label={`${sectionContent[idx].title} 섹션으로 이동`}
+    onClick={() => sectionRefs.current[idx]?.scrollIntoView({ behavior: 'smooth' })}
     className={`flex h-8 w-8 items-center justify-center rounded-full transition-all duration-300 focus:outline-none ${
       idx === activeIndex
         ? 'scale-110 bg-[#2C64F5] text-white shadow-lg'
         : 'text-[#B0B0B0] hover:scale-110 hover:text-[#2C64F5]'
     }`}
   >
     <Icon icon={icon} width={18} height={18} />
-  </div>
+  </button>
 ))}
```

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-21T19:06:04Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-04-21T18:53:40Z
body: [vc]: #BrtOj3U3K6CpRJMevIjABGyWAsLy+1tgdv/qCg+Q+YQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ1dW5vIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6InV1bm8tZ2l0LWZlYXQtMTk3LW1haW4tbHlyYS1qcy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9seXJhLWpzLXByb2plY3RzL3V1bm8vNkJncXAzTTNab2dVdTFleXRqb3lOZ3BnS0dEcyIsInByZXZpZXdVcmwiOiJ1dW5vLWdpdC1mZWF0LTE5Ny1tYWluLWx5cmEtanMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsInJvb3REaXJlY3RvcnkiOm51bGx9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **uuno** | ✅ Ready ([Inspect](https://vercel.com/lyra-js-projects/uuno/6Bgqp3M3ZogUu1eytjoyNgpgKGDs)) | [Visit Preview](https://uuno-git-feat-197-main-lyra-js-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/uuno-git-feat-197-main-lyra-js-projects.vercel.app?via=pr-comment-feedback-link) | Apr 21, 2025 7:05pm |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-04-21T18:53:42Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

이 변경사항은 메인 페이지의 주요 섹션 컴포넌트들의 이름을 기존의 일반적인 명칭에서 각 섹션의 역할을 명확히 드러내는 구체적인 이름으로 일괄 변경하고, 이에 맞추어 JSX 내에서의 컴포넌트 사용도 함께 수정하였습니다. 또한, `MainLastSection` 컴포넌트가 새롭게 도입되어 이미지 슬라이더, 콜 투 액션, 푸터 등으로 구성된 섹션을 제공합니다. 일부 섹션에서는 이미지 경로, alt 속성, 레이아웃 및 스타일링이 개선되었고, `MainHowItWorksSection`에서는 인터랙티브 아이콘 바와 뷰포트 진입 감지 기능이 추가되었습니다.

## Changes

| 파일/경로 요약                                                         | 변경 요약                                                                                                                          |
|------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------|
| src/app/page.tsx                                                       | 메인 섹션 컴포넌트의 import 이름을 의미 있는 이름으로 변경, JSX 내 컴포넌트 사용도 동일하게 변경                                     |
| src/components/main/main-Intor-section.tsx<br>src/components/main/main-feature-section.tsx<br>src/components/main/main-tip-section.tsx<br>src/components/main/main-promotion-section.tsx<br>src/components/main/main-how-it-works-section.tsx | 각 섹션 컴포넌트의 이름을 의미 있는 이름으로 변경, 일부 이미지 경로 및 alt 속성 수정, 스타일 및 레이아웃 일부 개선                   |
| src/components/main/main-last-section.tsx                              | `MainLastSection` 컴포넌트 신규 추가: 이미지 슬라이더, 콜 투 액션, 푸터(개발자/디자이너 정보 및 로고) 포함                          |
| src/components/main/section-five.tsx                                   | 기존 `Section5`를 `MainLastSection`으로 리팩토링 및 레이아웃/내용 전면 수정, 푸터 및 버튼, 이미지 슬라이더 등 추가                  |
| src/components/main/main-how-it-works-section.tsx                      | 인터랙티브 아이콘 바, 뷰포트 진입 감지, GIF 이미지 경로 및 레이아웃 개선, 상태 관리 로직 추가                                      |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant Homepage
    participant MainIntorSection
    participant MainFeatureSection
    participant MainTipSection
    participant MainPromotionSection
    participant MainHowItWorksSection
    participant MainLastSection

    User->>Homepage: 페이지 접속
    Homepage->>MainIntorSection: 소개 섹션 렌더링
    Homepage->>MainFeatureSection: 주요 기능 섹션 렌더링
    Homepage->>MainTipSection: 팁 섹션 렌더링
    Homepage->>MainPromotionSection: 프로모션 섹션 렌더링
    Homepage->>MainHowItWorksSection: 사용법 섹션 렌더링 (아이콘 바, GIF 등)
    Homepage->>MainLastSection: 마지막 섹션(슬라이더, CTA, 푸터) 렌더링
```

## Possibly related PRs

- lyra-j/uuno#169: `Section5`(현재의 `MainLastSection`)의 이미지 슬라이더에 실제 이미지를 적용하는 변경으로, 본 PR과 동일 컴포넌트의 구조 및 레이아웃 변경과 관련이 깊음.

## Suggested labels

`✨Feature`

## Poem

> 🐰  
> 이름이 바뀐 섹션들, 토끼도 깡총깡총  
> 슬라이더 굴러가고, 푸터엔 토끼 발자국  
> 아이콘 바 반짝이며, 안내도 척척!  
> 명확해진 이름만큼, 우리 코드도 반짝  
> 새 단장한 메인에서, 봄바람이 솔솔  
> 🥕  
>  
> - by Rabbit, with code and carrot

<!-- walkthrough_end -->
<!-- This is an auto-generated comment: all tool run failures by coderabbit.ai -->

> [!WARNING]
> There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.
> 
> <details>
> <summary>🔧 ESLint</summary>
> 
> > If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
> 
> <details>
> <summary>src/components/main/main-tip-section.tsx</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 8.57.1
> 
> ESLint couldn't find the plugin "eslint-plugin-prettier".
> 
> (The package "eslint-plugin-prettier" was not found when loaded as a Node module from the directory "".)
> 
> It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
> 
>     npm install eslint-plugin-prettier@latest --save-dev
> 
> The plugin "eslint-plugin-prettier" was referenced from the config file in ".eslintrc.json".
> 
> If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
> 
> 
> </details>
> 
> <details>
> <summary>src/app/page.tsx</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 8.57.1
> 
> ESLint couldn't find the plugin "eslint-plugin-prettier".
> 
> (The package "eslint-plugin-prettier" was not found when loaded as a Node module from the directory "".)
> 
> It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
> 
>     npm install eslint-plugin-prettier@latest --save-dev
> 
> The plugin "eslint-plugin-prettier" was referenced from the config file in ".eslintrc.json".
> 
> If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
> 
> 
> </details>
> 
> <details>
> <summary>src/components/main/main-feature-section.tsx</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 8.57.1
> 
> ESLint couldn't find the plugin "eslint-plugin-prettier".
> 
> (The package "eslint-plugin-prettier" was not found when loaded as a Node module from the directory "".)
> 
> It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
> 
>     npm install eslint-plugin-prettier@latest --save-dev
> 
> The plugin "eslint-plugin-prettier" was referenced from the config file in ".eslintrc.json".
> 
> If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
> 
> 
> </details>
> 
> + 4 others
> 
> </details>

<!-- end of auto-generated comment: all tool run failures by coderabbit.ai -->
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=lyra-j/uuno&utm_content=226):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE