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

[hayoung78]

개요

feat player coach page 생성

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• PR 제목 및 커밋 메시지 컨벤션 확인
• 직접 만든 함수가 있다면 이에 대한 설명 추가 (ex. JS DOCS)
• 변경 사항에 대한 테스트 완료 (버그 수정/기능에 대한 테스트)
• Label 확인
• Assignees 설정 확인
• Reviewers 설정 확인

PR details

코칭 스텝 페이지 완성

1. api함수 생성

api > player > apis.ts폴더

const BASE_URL = process.env.NEXT_PUBLIC_API_URL;

export const getCoachList = async (): Promise<CoachInfo[]> => {
  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 에러처리시에는 콘솔에러 대신 throw error 사용하시면 좋을것같습니다.
** + try-catch 는 에러를 핸들러할때 사용합니다. 단순히콘솔 에러로 try-catch가 아니라 status에 대한 에러 처리시 사용되면 좋지않을까 싶습니다. **

3. coachcard 컴포넌트 생성

import { getCoachList } from "@/api/player/apis";
import CoachCard from "./coach-card";

export async function CoachList() {
  const coachList = await getCoachList();
  console.log(coachList, "coachlist");

  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;

[기존 디자인]

[변경된 디자인]

디자인 어때요 ㅋㅋㅋㅋㅋㅋ

4. coach-list 컴포넌트 생성

import { getCoachList } from "@/api/player/apis";
import CoachCard from "./coach-card";

export async function CoachList() {
  const coachList = await getCoachList();
  console.log(coachList, "coachlist");

  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;

컴포넌트 이렇게 생성하고 서버 페이지에서 해당 컴포넌트를 import했는데,저 코치리스트컴포넌트 자체가 비동기화되어있는 컴포넌트라 에러가 뜹니다. 찾아보니까 "next.js13버전 이상부터 타입스크립트가 서버 컴포넌트 타입 지원이 아직 완벽하지 않아서 발생하는 문제입니다." 라고 하는데,, 그전 프로젝트에서는 서버액션 기능이 같이 들어가서 이런에러가 자연스레 없어졌거든요,, 모르겠어서 해당 부분은 주석으로 에러를 임시 막아놓은 상태입니다.

• grid 사용하면서 살짝 반응형도 적용했습니다.

2025-01-06.1.23.46.mov

• 헤더쪽 로고 이미지가 렌더링시에 넓이/높이 배율이 맞지않아 warning 떴던 문제도 수정했습니다.
  🔧 WV-35 fix : image 에러및 warning 수정

When modifying code...

# Request Level
  - [ ] : "🔥 이대로 Merge 하면 안돼요~!"
  - [ ] : "🥹 고치면 분명 나아질 게 분명합니다.."
  - [ ] : "🤷 수정하면 좋지 않을까요?"

# Description

[Jinviz]

디자인이 확실히 개선되었네요! 반응형도 좋습니다. 수고하셨습니다.

[hee2323]

확인했습니다

[naelumcat]

디자인이 위에 이미지의 컬러와 이어지는 느낌이 있어서 좋은거 같아요.