➕ [WV-35] : feat player coach page 생성

api/player/apis.ts

@@ -0,0 +1,15 @@
+import { CoachResponse } from "./types";
+
+// api/player/coachlist
+
+export const getCoachList = async (): Promise<CoachInfo[]> => {
+  const BASE_URL = process.env.NEXT_PUBLIC_API_KEY;
+  const res = await fetch(`${BASE_URL}/player/coachlist`, { method: "GET" });
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch coach list");
+  }
+
+  const response: CoachResponse = await res.json();
+  return response.data.list; // list 반환
+};

api/player/types.ts

@@ -0,0 +1,5 @@
+export type CoachResponse = {
+  data: {
+    list: CoachInfo[];
+  };
+};

app/(menu)/player/coach/[id]/page.tsx

@@ -0,0 +1,7 @@
+export default async function Page() {
+  return (
+    <>
+      <div>코치 디테일 페이지</div>
+    </>
+  );
+}

app/(menu)/player/coach/page.tsx

@@ -1,3 +1,10 @@
-export default function page() {
-  return <div>page입니다</div>;
+import { CoachList } from "@/components/player/coach-list";
+export const dynamic = "force-dynamic";
+export default async function Page() {
+  return (
+    <>
+      {/* @ts-expect-error - Async Server Component need to be supported */}
+      <CoachList />
+    </>
+  );
 }

components/common/CategoryMenu.tsx

@@ -13,7 +13,6 @@ type CategoryMenu = {
 const CategoryMenu = () => {
   // const router = useRouter();
   const pathname = usePathname();
-  console.log(pathname, "나 패스네임");
 
   const findBannerInfoByPath = () => {
     for (const menuKey in SubMenuInfo) {

components/layout/header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import wizLogo from "@/assets/images/logo_ktwiz_en.svg";
+import { ktwiz_en } from "@/assets/images/@index";
 import Image from "next/image";
 import { MainMenuItems } from "@/constants/header-menu";
 import HeaderRightMenu from "./headerRightMenu";
@@ -41,10 +41,10 @@ const Header = () => {
             <div className="flex items-center justify-between h-20">
               {/* 로고 */}
               <Image
-                src={wizLogo}
+                src={ktwiz_en}
                 alt="wiz_logo"
-                width={90}
-                height={90}
+                width={89}
+                height={42}
                 className="cursor-pointer"
                 onClick={() => router.push("/")}
               />

components/layout/headerRightMenu.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import ktSportsLogo from "@/assets/images/logo_ktsports.png";
+import { logo_ktwports } from "@/assets/images/@index";
 
 const HeaderRightMenu = () => {
   return (
@@ -13,7 +13,12 @@ const HeaderRightMenu = () => {
         회원가입
       </Link>
       <Link href="/sports" className="border border-ELSE-D9 p-1">
-        <Image src={ktSportsLogo} alt="kt_sports_logo" width={50} height={50} />
+        <Image
+          src={logo_ktwports}
+          alt="kt_sports_logo"
+          width={64}
+          height={17}
+        />
       </Link>
     </div>
   );

components/player/coach-card.tsx

@@ -0,0 +1,24 @@
+import Image from "next/image";
+
+const CoachCard = ({ image, name, backnum }: CoachCardProps) => {
+  return (
+    <div className="rounded-lg shadow-md overflow-hidden">
+      <div className="relative w-full h-48">
+        <Image
+          src={image}
+          alt={`${name}_image`}
+          fill
+          className="object-cover"
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          priority
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-l font-bold">{name}</h3>
+        <p className="text-SYSTEM-main">No. {backnum}</p>
+      </div>
+    </div>
+  );
+};
+
+export default CoachCard;

components/player/coach-list.tsx

@@ -0,0 +1,21 @@
+import { getCoachList } from "@/api/player/apis";
+import CoachCard from "./coach-card";
+
+export async function CoachList() {
+  const coachList = await getCoachList();
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {coachList.map((coach) => (
+        <CoachCard
+          key={coach.backnum}
+          image={coach.mobilePlayerImg1}
+          name={coach.playerName}
+          backnum={parseInt(coach.backnum)}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default CoachList;

components/player/type.d.ts

@@ -0,0 +1,26 @@
+type CoachCardProps = {
+  image: string;
+  name: string;
+  backnum: number;
+};
+type CoachInfo = {
+  backnum: string;
+  birth: string;
+  career: string;
+  gyear: string;
+  height: string;
+  heightWeight: string;
+  hittype: string;
+  mobilePlayerImg1: string;
+  mobilePlayerImg2: string;
+  orderSeq: string;
+  pcode: string;
+  playerName: string;
+  playerPrvwImg: string;
+  playerPrvwImg2: string;
+  playerPrvwImg3: string;
+  position: string;
+  teamCode: string;
+  teamName: string;
+  weight: string;
+};

css/font.ts

@@ -1,7 +1,8 @@
 export const FONT_SIZE = {
-  s: '12px',
-  m: '14px',
-  l: '17px',
-  xl: '20px',
-  xxl: '48px',
+  s: "12px",
+  m: "14px",
+  l: "17px",
+  xl: "20px",
+  xll: "24px",
+  xxl: "48px",
 };

next.config.mjs

@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "wizzap.ktwiz.co.kr",
+      },
+      {
+        protocol: "http",
+        hostname: "54.180.228.165",
+      },
+    ],
+  },
+};
 
 export default nextConfig;