feat: 조회수 페이지 UI

package.json

@@ -14,10 +14,12 @@
   "dependencies": {
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
+    "@gsap/react": "^2.1.2",
     "@tanstack/react-query": "^5.24.1",
     "axios": "^1.6.7",
     "dotenv": "^16.4.5",
     "es-toolkit": "^1.4.0",
+    "gsap": "^3.12.7",
     "jotai": "^2.9.0",
     "jsdoc-builder": "^0.0.6",
     "lodash": "^4.17.21",

src/app/home/index.tsx

@@ -1,5 +1,8 @@
 import Button from "@/components/common/Button";
 import Lottie from "lottie-react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { useGSAP } from "@gsap/react";
 import { BREAK_POINTS, DESIGN_SYSTEM_COLOR } from "@/style/variable";
 import { css } from "@emotion/react";
 import {
@@ -21,13 +24,15 @@ import MAINBOTTOMIMG from "@/assets/main-bottom.gif";
 import NewletterAni from "@/assets/newletter.json";
 import CommunityAni from "@/assets/community.json";
 import { useGetChartDataQuery } from "@/api/chartApi";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useModal } from "@/hooks/useModal.ts";
 import { useAtom } from "jotai";
 import { loginState } from "@/store/user";
 import { SubscriptionModalContent } from "@/components/common/modal/SubscriptionModalContent";
 import FloatingWidget from "@/components/app/home/floating/floatingWidget";
+import { useApiTotalView } from "@/hooks/api/visitor/useApiTotalView";
+import { VisitorCount } from "@/components/app/home/VisitorCount";
 
 type CoinInfoType = {
   [coin in "BTC" | "ETH" | "XRP"]: {
@@ -37,6 +42,8 @@ type CoinInfoType = {
   };
 };
 
+gsap.registerPlugin(ScrollTrigger);
+
 export default function HomePage() {
   // 차트 데이터 가지고 오기
   const getBTCData = useGetChartDataQuery("BTC");
@@ -48,6 +55,77 @@ export default function HomePage() {
   const { open, close } = useModal();
   const navigate = useNavigate();
 
+  const { data: totalView, refetch, sendTotalView } = useApiTotalView();
+  const topNumberRef = useRef<HTMLSpanElement>(null);
+  const bottomNumberRef = useRef<HTMLSpanElement>(null);
+  const topSectionRef = useRef<HTMLDivElement>(null);
+  const bottomSectionRef = useRef<HTMLDivElement>(null);
+  const [currentNum, setCurrentNum] = useState<number|string>(0);
+  const [animationTotal, setAnimationTotal] = useState(0);
+
+  const slotAnimation = async () => {
+    if (!topNumberRef.current || !bottomNumberRef.current) return;
+
+    await refetch();
+
+    setCurrentNum(0);
+
+    let current = 0;
+    const step = Math.ceil(animationTotal / 20000);
+
+    const animate = () => {
+      current += step;
+      if (current >= animationTotal) {
+        setCurrentNum(animationTotal);
+        setCurrentNum(animationTotal.toLocaleString());
+        return;
+      }
+
+      setCurrentNum(current.toLocaleString());
+      requestAnimationFrame(animate);
+    };
+
+    requestAnimationFrame(animate);
+  };
+
+  useGSAP(() => {
+    if (!topSectionRef.current || !bottomSectionRef.current) {
+      return;
+    }
+
+    const ctx = gsap.context(() => {
+      ScrollTrigger.create({
+        trigger: topSectionRef.current,
+        start: "top 5%",
+        end: "top 5%",
+        toggleActions: "restart complete restart reset",
+        onEnter: () => slotAnimation(),
+        onEnterBack: () => slotAnimation(),
+      });
+
+      ScrollTrigger.create({
+        trigger: bottomSectionRef.current,
+        start: "bottom 80%",
+        toggleActions: "restart complete restart reset",
+        onEnter: () => slotAnimation(),
+        onEnterBack: () => slotAnimation(),
+      });
+
+      slotAnimation();
+    });
+
+    return () => ctx.revert();
+  }, { dependencies: [animationTotal] });
+
+  useEffect(() => {
+    sendTotalView();
+  }, []); 
+
+  useEffect(() => {
+    if (!totalView) return;
+    setAnimationTotal(totalView.data);
+  }, [totalView]);
+
   useEffect(() => {
     if (!getBTCData.isSuccess || !getETHData.isSuccess || !getXRPData.isSuccess)
       return;
@@ -161,10 +239,16 @@ export default function HomePage() {
         >
           {/* LEFT SIDE */}
           <div>
+            <VisitorCount 
+              currentNum={currentNum}
+              numberRef={topNumberRef}
+              sectionRef={topSectionRef}
+            />
             <h1
               css={css`
                 font-size: 4.8rem;
                 line-height: 7.2rem;
+                margin-top: 20px;
 
                 ${BREAK_POINTS.TABLET} {
                 }
@@ -529,6 +613,15 @@ export default function HomePage() {
           alt=""
         />
       </section>
+      {/* 하단 배너 */}
+      <section>
+        <VisitorCount 
+          currentNum={currentNum}
+          numberRef={bottomNumberRef}
+          sectionRef={bottomSectionRef}
+          isBottom
+        />
+      </section>
     </article>
   );
 }