code clean up

app/(main)/lottery/page.tsx

@@ -1,103 +1,42 @@
 "use client";
 
-import { useState } from "react";
 import { useLotteryAuth } from "@/store/useLotteryAuth";
 import ProtectedRoute from "@/components/lottery/auth/ProtectedRoute";
-import { Queries } from "@/api/queries";
+import { useLottery } from "@/lib/hooks/useLottery";
-import Loader from "@/components/Loader";
+import { LOTTERY_CONFIG } from "@/constants/lottery";
-import LotteryWinnersSection from "@/components/lottery/LotteryWinnersSection";
+import LotteryHeader from "@/components/lottery/LotteryHeader";
-import RollingCounter from "@/components/lottery/RollingCounter/RollingCounter";
+import LotteryCounter from "@/components/lottery/RollingCounter/RollingCounter";
-import RollingCounterWorking from "@/components/lottery/RollingCounter/RollingCounterWorking";
-import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown";
-import LotteryCountDownAllert from "@/components/lottery/countDown/countDownAllert/LotteryCountDownAllert";
-import LotteryForm from "@/components/lottery/form/LotteryForm";
-import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
 
-const Page = () => {
+import LotteryWinnersSection from "@/components/lottery/LotteryWinnersSection";
+import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection";
+
+const LotteryPage = () => {
   const { lotteryData } = useLotteryAuth();
-  const [lotteryStatus, setLotteryStatus] = useState<
+  const { status, currentNumber } = useLottery(
-    "not-started" | "started" | "ended"
+    LOTTERY_CONFIG.START_DATE,
-  >("not-started");
+    LOTTERY_CONFIG.END_DATE
-  const [currentNumber, setCurrentNumber] = useState("22-22-22-22-22");
+  );
 
   return (
     <ProtectedRoute>
       <div className="flex flex-col md:gap-[128px] gap-[80px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
-        <RollingCounterWorking numberString={currentNumber} />
-
         {lotteryData && (
-          <section className="">
+          <LotteryHeader
-            <div className="container">
+            title={lotteryData.data.title}
-              <div className="flex flex-col md:gap-[32px] gap-[24px]">
+            description={lotteryData.data.description}
-                <div className="flex flex-col gap-[24px] items-center ">
+            image={lotteryData.data.image}
-                  {lotteryData.data.title && (
+            smsCode={lotteryData.data.sms_code}
-                    <h1 className="sm:font-display-1-regular text-[32px] leading-[40px] text-center">
+          />
-                      {lotteryData.data.title}
-                    </h1>
-                  )}
-                  {lotteryData.data.description && (
-                    <p className="max-w-[600px] w-full font-base-regular text-center">
-                      {lotteryData.data.description}
-                    </p>
-                  )}
-                  {lotteryData.data.sms_code && (
-                    <div className="px-4 py-3 font-base-medium flex items-center gap-2 bg-lightInfoAllertContainer text-lightOnInfoAllertContainer">
-                      <svg
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                          d="M4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 13.3132 21.7413 14.6136 21.2388 15.8268C20.7362 17.0401 19.9997 18.1425 19.0711 19.0711C18.1425 19.9997 17.0401 20.7362 15.8268 21.2388C14.6136 21.7413 13.3132 22 12 22C10.6868 22 9.38642 21.7413 8.17317 21.2388C6.95991 20.7362 5.85752 19.9997 4.92893 19.0711C4.00035 18.1425 3.26375 17.0401 2.7612 15.8268C2.25866 14.6136 2 13.3132 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893ZM12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 13.0506 4.20693 14.0909 4.60896 15.0615C5.011 16.0321 5.60028 16.914 6.34315 17.6569C7.08601 18.3997 7.96793 18.989 8.93853 19.391C9.90914 19.7931 10.9494 20 12 20C13.0506 20 14.0909 19.7931 15.0615 19.391C16.0321 18.989 16.914 18.3997 17.6569 17.6569C18.3997 16.914 18.989 16.0321 19.391 15.0615C19.7931 14.0909 20 13.0506 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM11 9C11 8.44772 11.4477 8 12 8H12.01C12.5623 8 13.01 8.44772 13.01 9C13.01 9.55228 12.5623 10 12.01 10H12C11.4477 10 11 9.55228 11 9ZM10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15C13.5523 15 14 15.4477 14 16C14 16.5523 13.5523 17 13 17H12C11.4477 17 11 16.5523 11 16V13C10.4477 13 10 12.5523 10 12Z"
-                          fill="#1E3A5F"
-                        />
-                      </svg>
-                      <span>SMS-kod: {lotteryData.data.sms_code}</span>
-                    </div>
-                  )}
-                </div>
-                {lotteryData.data.image && (
-                  <div className="md:mb-8 sm:mb-[40px] mb-[16px]">
-                    <Image
-                      src={lotteryData.data.image}
-                      width={1416}
-                      height={177}
-                      alt="banner"
-                      className="rounded-[12px] object-cover h-[177px]"
-                    />
-                  </div>
-                )}
-
-                {lotteryStatus === "not-started" && (
-                  <LotteryCountDown
-                    startDate={"2024-12-16 18:09:00"}
-                    endDate={"2024-12-25 16:00:00"}
-                    lotteryStatus={lotteryStatus}
-                    setLotteryStatus={setLotteryStatus}
-                  />
-                )}
-              </div>
-            </div>
-          </section>
         )}
 
         <LotteryRulesSection />
 
-        <section className="flex flex-col gap-[40px]">
+        {(status === "ended" || status === "started") && (
-          {lotteryStatus === "ended" || lotteryStatus === "started" ? (
+          <LotteryWinnersSection />
-            <LotteryWinnersSection />
+        )}
-          ) : null}
-        </section>
       </div>
     </ProtectedRoute>
   );
 };
 
-export default Page;
+export default LotteryPage;

components/lottery/LotteryHeader.tsx

@@ -0,0 +1,46 @@
+import Image from "next/image";
+
+interface LotteryHeaderProps {
+  title: string;
+  description: string;
+  image: string;
+  smsCode: string;
+}
+
+const LotteryHeader = ({
+  title,
+  description,
+  image,
+  smsCode,
+}: LotteryHeaderProps) => {
+  return (
+    <section className="container">
+      <div className="flex flex-col md:gap-[32px] gap-[24px]">
+        <div className="flex flex-col gap-[24px] items-center">
+          <h1 className="sm:font-display-1-regular text-[32px] leading-[40px] text-center">
+            {title}
+          </h1>
+          <p className="text-center text-textLarge leading-textLarge">
+            {description}
+          </p>
+          <div className="flex items-center gap-[8px]">
+            <span>SMS-kod: {smsCode}</span>
+          </div>
+        </div>
+        {image && (
+          <div className="md:mb-8 sm:mb-[40px] mb-[16px]">
+            <Image
+              src={image}
+              width={1416}
+              height={177}
+              alt="banner"
+              className="rounded-[12px] object-cover h-[177px]"
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default LotteryHeader;

components/lottery/winners/LotteryWinnersList.tsx

@@ -1,12 +1,15 @@
-import LotteryWinner from './LotteryWinner';
+import { LotteryWinnerData } from "@/typings/lottery/lottery.types";
+import LotteryWinner from "./LotteryWinner";
 
-const LotteryWinnersList = ({ winners }: { winners: number[] }) => {
+const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerData[] }) => {
   return (
     <div className="w-full md:p-8 p-6">
       <div className="flex flex-col w-full gap-4 md:max-h-[548px] sm:max-h-[276px] max-h-[438px] h-full overflow-y-auto pr-2">
         <div className="flex flex-col gap-2 md:pb-4 pb-3 border-b border-lightOutlineVariant">
           <h4 className="font-heading-3-regular">Results</h4>
-          <p className="font-base-medium">The results after each stage will be shown here.</p>
+          <p className="font-base-medium">
+            The results after each stage will be shown here.
+          </p>
         </div>
 
         <div className="flex flex-col w-full gap-4">

constants/lottery.ts

@@ -0,0 +1,6 @@
+export const LOTTERY_CONFIG = {
+  START_DATE: "2024-12-16 18:09:00",
+  END_DATE: "2024-12-25 16:00:00",
+  INITIAL_NUMBER: "22-22-22-22-22",
+  UPDATE_INTERVAL: 10000, // 10 seconds
+};

lib/hooks/useLottery.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+import { LotteryStatus } from "@/typings/lottery/lottery.types";
+
+export const useLottery = (startDate: string, endDate: string) => {
+  const [status, setStatus] = useState<LotteryStatus>("not-started");
+  const [currentNumber, setCurrentNumber] = useState("22-22-22-22-22");
+
+  useEffect(() => {
+    const calculateStatus = () => {
+      const now = new Date();
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+
+      if (now < start) return "not-started";
+      if (now > end) return "ended";
+      return "started";
+    };
+
+    setStatus(calculateStatus());
+    const interval = setInterval(() => {
+      setStatus(calculateStatus());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [startDate, endDate]);
+
+  useEffect(() => {
+    if (status === "started") {
+      const timer = setTimeout(() => {
+        setCurrentNumber("81-34-52-35-61");
+      }, 10000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [status]);
+
+  return {
+    status,
+    currentNumber,
+  };
+};

typings/lottery/lottery.types.ts

@@ -0,0 +1,25 @@
+export interface LotteryWinnerData {
+  no: number;
+  client: string;
+  dt: string;
+  winner_no: number;
+  ticket: string;
+}
+
+export interface LotteryData {
+  id: number;
+  title: string;
+  description: string;
+  image: string;
+  start_time: string;
+  end_time: string;
+  sms_code: string;
+  winners: LotteryWinnerData[];
+}
+
+export interface LotteryResponse {
+  data: LotteryData;
+  user_lottery_numbers: string[];
+}
+
+export type LotteryStatus = "not-started" | "started" | "ended";