[JOJI-780] review 섹션 개편 (#36)

* feat: review 관련 파일 삭제제

* feat: carousel 다운로드

* feat: 파일명을 proposalSection & proposal_list 생성 및 embla-carousel-autoplay로 게속 돌아가도록 설정정

* feat: Carousel Previous, Next 버튼 대칭 수정 및 사이즈 변경경

* feat: navBar에 proposal 추가

* feat: useState, useRef, useEffect, IntersectionObserver 사용하여 생성된 기획안 수에 대한 숫자 애니메이션 구현

* feat: 생성된 기획안 수에 대한 숫자 카드 구현

* feat: 토끼씨가 말한대로 접근성 및 콘텐츠 관리리

* feat: proposal_list 갯수를 7개에서 5개로 변경경

* feat: carousal image event 수정 및 count.toLocaleString 형태 변경

* feat: background 배경을 gray-100에서 white로 변경경

package.json

@@ -23,11 +23,12 @@
     "@radix-ui/react-navigation-menu": "^1.2.3",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^8.5.2",
     "framer-motion": "^12.4.1",
     "lucide-react": "^0.469.0",

src/app/_components/desktopNavBar.js

@@ -24,6 +24,7 @@ const DesktopNavbar = ({
       children: [
         { label: "소개", href: "#hero" },
         { label: "서비스", href: "#service" },
+        { label: "예시", href: "#proposal" },
         { label: "FAQ", href: "#faq" },
         { label: "구독", href: "#subscribe" },
       ],

src/app/_components/mobileNavBar.js

@@ -28,6 +28,7 @@ export default function MobileNavbar({
         { label: "홈", href: "/" },
         { label: "소개", href: "#hero" },
         { label: "서비스", href: "#service" },
+        { label: "예시", href: "#proposal" },
         { label: "FAQ", href: "#faq" },
         { label: "구독", href: "#subscribe" },
       ],

src/app/_components/sections/proposalSection.js

@@ -0,0 +1,98 @@
+import { Card, CardContent } from "../ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "../ui/carousel";
+import { PROPOSAL_LIST } from "@/app/_consts/proposal_list";
+import { useEffect, useRef, useState } from "react";
+import Autoplay from "embla-carousel-autoplay";
+
+export function ProposalSection() {
+  const [count, setCount] = useState(0);
+  const sectionRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (observer && sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isVisible) {
+      const targetNum = 10000;
+      const duration = 2000;
+      const increment = targetNum / (duration / 10);
+      let currentNum = 0;
+      const animateCount = () => {
+        if (currentNum < targetNum) {
+          currentNum += increment;
+          setCount(Math.floor(currentNum));
+          requestAnimationFrame(animateCount);
+        } else {
+          setCount(targetNum);
+        }
+      };
+      animateCount();
+    }
+  }, [isVisible]);
+
+  const plugin = useRef(Autoplay({ delay: 5000, stopOnInteraction: true }));
+
+  return (
+    <div ref={sectionRef}>
+      <h1 className="font-black text-center text-6xl mt-10 font-serif">
+        Heading
+      </h1>
+      <Carousel
+        plugins={[plugin.current]}
+        className="w-full max-w-screen-sm p-5"
+        onMouseEnter={plugin.current.stop}
+        onMouseLeave={plugin.current.play}
+      >
+        <CarouselContent>
+          {PROPOSAL_LIST.map((proposal) => (
+            <CarouselItem key={proposal.id}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center">
+                    <img
+                      src={proposal.image}
+                      alt={`${proposal.id}번 프로토절: ${proposal.title || "제목 없음"}`}
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="w-20 h-20 -ml-5" />
+        <CarouselNext className="w-20 h-20 -mr-5" />
+      </Carousel>
+      <div className="w-full max-w-screen-sm">
+        <h1 className="font-black text-center text-4xl m-10 font-sans">
+          생성한 기획안 수 {count.toLocaleString()}
+        </h1>
+      </div>
+    </div>
+  );
+}