Merge pull request #53 from KTwizviz/WV-40-main-page-refactor

➕  [WV-40] refactor : main page refactor

api/game/apis.ts

@@ -1,8 +1,6 @@
 export async function getMonthSchedules(params: string) {
   try {
-    const res = await fetch(
-      `/api/game/monthschedule?yearMonth=${params}`
-    );
+    const res = await fetch(`/api/game/monthschedule?yearMonth=${params}`);
 
     if (!res.ok) {
       throw new Error("네트워크 문제 발생");
@@ -18,9 +16,7 @@ export async function getMonthSchedules(params: string) {
 
 export async function getAllSchedules(params: string) {
   try {
-    const res = await fetch(
-      `/api/game/allgameschedule?yearMonth=${params}`
-    );
+    const res = await fetch(`/api/game/allgameschedule?yearMonth=${params}`);
 
     if (!res.ok) {
       throw new Error("네트워크 문제 발생");
@@ -34,11 +30,10 @@ export async function getAllSchedules(params: string) {
   }
 }
 
-export const fetchBoxscore = async (gameDate?: number, gmkey?: string) => {
+export const getBoxscore = async (
+  queryparams: string
+): Promise<GetBoxscore> => {
   try {
-    const queryparams =
-      gameDate && gmkey ? `?gameDate=${gameDate}&gmkey=${gmkey}` : "";
-
     const URL = `/api/game/boxscore${queryparams}`;
 
     const response = await fetch(URL);

api/main/apis.ts

@@ -0,0 +1,15 @@
+export const getKtwizRank = async (): Promise<GetKtwizRank> => {
+  try {
+    const response = await fetch("/api/game/ktwizteamrank");
+
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    const result = await response.json();
+    return result.data.ktWizTeamRank;
+  } catch (error) {
+    console.error("API 요청 에러:", error);
+    throw error;
+  }
+};

assets/images/@index.ts

@@ -16,17 +16,15 @@ export { default as logo_ktwports } from "./logo_ktsports.png";
 export { default as ktwiz_en } from "./logo_ktwiz_en.svg";
 export { default as ktwiz_kr } from "./logo_ktwiz_kr.svg";
 export { default as gallery } from "./main_title_gallery.png";
-export { default as schedule } from "./main_title_schedule.png";
+export { default as bg_schedule } from "./main_title_schedule.png";
 export { default as main_title_video } from "./main_title_video.png";
 export { default as map_img } from "./map_img.png";
-export { default as reservation } from "./parking_reservation.png";
 export { default as player } from "./player_EomSangBaek.jpg";
 export { default as submenu_bg } from "./submenu_bg.png";
 export { default as about_img1 } from "./team_about_img1.png";
 export { default as about_img2 } from "./team_about_img2.png";
 export { default as about_img3 } from "./team_about_img3.png";
 export { default as about_img4 } from "./team_about_img4.png";
-export { default as ranking } from "./team_ranking.png";
 export { default as wiz_park } from "./wiz_park.jpg";
 export { default as store_banner } from "./store_banner.png";
 export { default as player_banner } from "./player_banner.png";
@@ -68,5 +66,6 @@ export { default as iksan_stadium6 } from "./iksan_stadium6.png";
 export { default as iksan_stadium7 } from "./iksan_stadium7.png";
 export { default as iksan_stadium8 } from "./iksan_stadium8.png";
 export { default as iksan_stadium9 } from "./iksan_stadium9.png";
-
+export { default as ranking_score } from "./ranking_score.png";
+export { default as parking_banner } from "./parking_banner.png";
 export { default as wallpaper_img } from "./wallpaper_img.png";

components/game/boxscore/boxscore-container.tsx

@@ -12,8 +12,8 @@ const BoxscoreContainer = () => {
     gameDate?: number;
     gmkey?: string;
   }>({
-    gameDate: undefined,
-    gmkey: "",
+    gameDate: 20241011,
+    gmkey: "33331011KTLG0",
   });
 
   const { data, isLoading } = useBoxscore(apiKey.gameDate, apiKey.gmkey);

components/main/gallery.tsx

@@ -3,8 +3,10 @@ import Image from "next/image";
 import { gallery, store_banner, player_banner } from "@/assets/images/@index";
 import Carousel from "../ui/custom-carousel";
 import { CAROUSE_ITEMS } from "@/constants/main";
+import { useRouter } from "next/navigation";
 
 const Gallery = () => {
+  const router = useRouter();
   return (
     <div className="w-[1200px] justify-self-center relative mb-[100px] justify-items-center">
       <div className="relative h-[620px]">
@@ -22,12 +24,25 @@ const Gallery = () => {
         </div>
       </div>
       <div className="w-[1100px] mt-[40px] flex gap-5 justify-self-center">
-        <Image src={store_banner} alt="Store Banner" width={540} height={190} />
+        <Image
+          src={store_banner}
+          alt="Store Banner"
+          width={540}
+          height={190}
+          className="cursor-pointer"
+          onClick={() => {
+            window.open("https://www.ktwizstore.co.kr", "_blank");
+          }}
+        />
         <Image
           src={player_banner}
           alt="Player of the Month Banner"
           width={540}
           height={190}
+          className="cursor-pointer"
+          onClick={() => {
+            router.push("/player/hitter/infielder/14");
+          }}
         />
       </div>
     </div>

components/main/parking.tsx

@@ -0,0 +1,38 @@
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { parking_banner } from "@/assets/images/@index";
+import { ChevronRight } from "lucide-react";
+
+const Parking = () => {
+  const router = useRouter();
+
+  return (
+    <div className="relative h-[280px] rounded-[20px] overflow-hidden">
+      <Image
+        src={parking_banner}
+        alt="parking reservaion"
+        width={540}
+        height={190}
+        className="cursor-pointer block"
+        onClick={() => {
+          router.push("/wizpark/parking");
+        }}
+      />
+      <div className="absolute w-[540px] h-[190px] inset-0 px-10 pt-4 flex flex-col justify-center mr-10">
+        <p className="text-l text-SYSTEM-main font-medium mb-2">
+          수원 케이터 워즈 파크
+        </p>
+        <h1 className="text-2xl font-medium mb-6">사전 주차 예약제 안내</h1>
+        <button
+          onClick={() => router.push("/parking/reserve")}
+          className="flex items-center gap-2 text-l hover:gap-4 transition-all w-fit"
+        >
+          사전주차 예약하기
+          <ChevronRight size={20} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Parking;

components/main/schedule.tsx

@@ -1,29 +1,48 @@
 "use client";
+
 import { useState } from "react";
 import Image from "next/image";
-import {
-  schedule,
-  logo_KT,
-  logo_LG,
-  ranking,
-  reservation,
-} from "@/assets/images/@index";
+import { bg_schedule } from "@/assets/images/@index";
 import IconButton from "@/components/ui/icon-button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { SCHEDULE_LIST } from "@/constants/main";
-
-type DayKey = keyof typeof SCHEDULE_LIST;
+import { useBoxscore } from "@/hooks/useBoxscore";
+import { teamLogos } from "@/constants/team-logos";
+import { formatGameDate } from "@/utils/date";
+import { useRouter } from "next/navigation";
+import TeamRank from "./team-rank";
+import Parking from "./parking";
+import ScheduleSkeleton from "../skeletons/schedule-skeleton";
 
 const Schedule = () => {
-  const [scheduleData, setScheduleData] = useState<
-    (typeof SCHEDULE_LIST)[DayKey]
-  >(SCHEDULE_LIST.DAY1);
+  const router = useRouter();
+  const [apiKey, setApiKey] = useState<{
+    gameDate?: number;
+    gmkey?: string;
+  }>({
+    gameDate: 20241011,
+    gmkey: "33331011KTLG0",
+  });
+
+  const { data, isLoading } = useBoxscore(apiKey.gameDate, apiKey.gmkey);
+
+  const disabled = (key: "current" | "next" | "prev") => {
+    if (data) return key in data.schedule ? false : true;
+  };
+
+  const handleClick = (key: "prev" | "next") => {
+    const targetSchedule = data && data.schedule[key];
+    if (!targetSchedule) return;
+    setApiKey({
+      gameDate: targetSchedule?.gameDate,
+      gmkey: targetSchedule?.gmkey,
+    });
+  };
 
   return (
     <div className="w-[1200px] justify-self-center relative mb-[100px]">
       <div className="relative h-[300px]">
         <Image
-          src={schedule}
+          src={bg_schedule}
           alt="main schdule"
           width={0}
           height={0}
@@ -33,68 +52,89 @@ const Schedule = () => {
         />
         <div className="w-[1100px] mx-auto pt-[110px]">
           <div className="bg-SYSTEM-white rounded-[20px] shadow-[0_20px_30px_rgba(255,0,0,0.3)]">
-            <div className="flex justify-between gap-5 px-10 py-[50px]">
-              <div className="w-[605px] h-[222px] bg-SYSTEM-white text-SYSTEM-black items-center content-center">
-                {/* 상단 경기 일시 */}
-                <div className="mb-8 mx-5 pb-2 flex gap-11 border-b border-b-ELSE-DE items-center justify-center">
-                  <IconButton
-                    icon={ChevronLeft}
-                    circle
-                    className="text-ELSE-7374"
-                    onClick={() => setScheduleData(SCHEDULE_LIST.DAY2)}
-                  />
-                  <div className="w-96 justify-items-center">
-                    <div className="text-xl font-bold">{scheduleData.date}</div>
-                    <div className="text-ELSE-7374">
-                      {scheduleData.placeTime}
+            <div className="flex mr-3 px-10 py-[50px]">
+              {isLoading ? (
+                <ScheduleSkeleton />
+              ) : (
+                <div className="w-[620px] h-[222px] bg-SYSTEM-white text-SYSTEM-black items-center content-center justify-center">
+                  {/* 상단 경기 일시 */}
+                  <div className="w-[560px] mb-4 mx-5 pb-2 flex gap-11 border-b border-b-ELSE-DE items-center justify-center">
+                    <IconButton
+                      icon={ChevronLeft}
+                      circle
+                      disabled={disabled("prev")}
+                      className="text-ELSE-7374"
+                      onClick={() => handleClick("prev")}
+                    />
+                    <div className="w-96 justify-items-center">
+                      <div className="text-xl font-bold">
+                        {data
+                          ? formatGameDate(data?.schedule.current.gameDate)
+                          : "2024년 10월 11일"}
+                      </div>
+                      <div className="text-ELSE-7374">
+                        {data?.schedule.current.stadium}
+                      </div>
                     </div>
-                  </div>
-                  <IconButton
-                    icon={ChevronRight}
-                    circle
-                    className="text-ELSE-7374"
-                    onClick={() => setScheduleData(SCHEDULE_LIST.DAY1)}
-                  />
-                </div>
-                {/* 하단 해당 일시 스코어 */}
-                <div className="flex justify-center">
-                  <div className="justify-items-center font-bold">
-                    <Image
-                      src={logo_KT}
-                      alt="ktwiz team logo"
-                      width={102}
-                      height={95}
+                    <IconButton
+                      icon={ChevronRight}
+                      circle
+                      disabled={disabled("next")}
+                      className="text-ELSE-7374"
+                      onClick={() => handleClick("next")}
                     />
-                    <p>KT</p>
                   </div>
-                  <div className="w-64 place-self-center justify-items-center space-y-6">
-                    <div className="flex mt-3 gap-7 font-extrabold text-6xl">
-                      {scheduleData.score}
-                      <p className="text-ELSE-B7">:</p>
-                      {scheduleData.targetScore}
+                  <div className="flex justify-center">
+                    <div className="justify-items-center font-bold">
+                      <Image
+                        src={
+                          teamLogos[
+                            (data?.schedule.current.visit as Team) ?? "KT"
+                          ]
+                        }
+                        alt="away team logo"
+                        width={110}
+                        height={95}
+                      />
+                      <p>{data?.schedule.current.visit}</p>
+                    </div>
+                    <div className="w-64 justify-items-center space-y-6">
+                      <div className="flex content-between mt-3 gap-7 font-extrabold text-6xl items-center">
+                        <p className="w-20 text-center">
+                          {data?.schedule.current.vscore}
+                        </p>
+                        <p className="text-ELSE-B7">:</p>
+                        <p className="w-20 text-center">
+                          {data?.schedule.current.hscore}
+                        </p>
+                      </div>
+                      <button
+                        className="flex p-1 pl-2 bg-ELSE-90 text-SYSTEM-white rounded-md text-sm items-center"
+                        onClick={() => {
+                          router.push("/game/league/boxscore");
+                        }}
+                      >
+                        경기정보
+                        <ChevronRight size={18} />
+                      </button>
+                    </div>
+                    <div className="justify-items-center font-bold">
+                      <Image
+                        src={
+                          teamLogos[
+                            (data?.schedule.current.home as Team) ?? "LG"
+                          ]
+                        }
+                        alt="home team logo"
+                        width={110}
+                        height={95}
+                      />
+                      <p>{data?.schedule.current.home}</p>
                     </div>
-                    <button
-                      className="flex p-1 pl-2 bg-ELSE-90 text-SYSTEM-white rounded-md text-sm items-center"
-                      onClick={() => {
-                        console.log("경기정보 페이지 이동");
-                      }}
-                    >
-                      경기정보
-                      <ChevronRight size={18} />
-                    </button>
-                  </div>
-                  <div className="justify-items-center font-bold">
-                    <Image
-                      src={logo_LG}
-                      alt="opponent team logo"
-                      width={110}
-                      height={95}
-                    />
-                    <p>{scheduleData.target}</p>
                   </div>
                 </div>
-              </div>
-              <div className="w-[394px] h-[222px] mr-5 bg-SYSTEM-white text-SYSTEM-black flex items-center justify-center">
+              )}
+              <div className="w-[394px] h-[222px] bg-SYSTEM-white text-SYSTEM-black flex items-center justify-center">
                 <iframe
                   src="https://tv.naver.com/embed/42663688"
                   width="394"
@@ -107,18 +147,8 @@ const Schedule = () => {
         </div>
       </div>
       <div className="w-[1100px] mt-[250px] flex gap-5 justify-self-center">
-        <Image
-          src={ranking}
-          alt="ktwiz team ranking"
-          width={540}
-          height={190}
-        />
-        <Image
-          src={reservation}
-          alt="parking reservaion"
-          width={540}
-          height={190}
-        />
+        <TeamRank />
+        <Parking />
       </div>
     </div>
   );