Home

실시간 각 리그별 팀 / 득점자 순위 테이블 - Axios를 활용하여 Football API 연동

✔️ Carousel - 매주 축구 사진 업데이트

✔️ 실시간 각 리그별 팀 순위/득점자 순위 테이블

‘로딩중’ 표시
에러 or 데이터 없을 시 메시지 표시

✔️ 남자축구 국가대표 경기 일정

평가전/국제 대회로 나누어서 정보 제공
경기 시간 or 날짜가 지나면 자동으로 종료 표시
국제대회 - D-DAY 설정
- ‘D-00’ / D-DAY! / 종료로 나뉨

💻 Code

Carousle.tsx

// 마우스 우클릭 금지
<CarouselWrapper
      onContextMenu={(e) => {
        e.preventDefault();
      }}
>    

// 슬라이드 이미지 
   <CustomCarousel {...settings}>
     {images.map((image, idx) => (
	 <CarouselItems
	    key={idx}
	    src={`${process.env.PUBLIC_URL}/assets/images/${image}.jpg`}
	    alt={`Carousel - ${image}`}
	 />
     ))}
   </CustomCarousel>
</CarouselWrapper>

각 리그별 팀 순위/득점자 순위 테이블

🔻 LeagueCard.tsx

// LeagueCard를 만들어 각 리그별 팀 순위/득점자 순위 테이블 동일 UI 적용
<LeagueWrapper>
  <LeagueTab>
    {leagueList.map((item, idx) => (
      <TabList
        key={idx}
        onClick={() => LeagueTabHandler(idx, item.leagueNo)}
        isActive={currentTab === idx ? true : false}
      >
        {item.name}
      </TabList>
    ))}
  </LeagueTab>
  {children}
</LeagueWrapper>

🔻 TableTemplate.tsx

return (
    <LeagueCard
      leagueList={leagueList}
      selectTabHandler={selectTabHandler}
      currentTab={currentTab}
    >
			// 로딩 중 표시
      {loading ? (
        <LoadingMessage
          contents={
            category === "STANDINGS" ? "리그별 팀 순위" : "리그별 득점자 순위"
          }
					// 카테코리(리그별 팀 순위/득점자 순위)에 따라 로딩 중 메시지 style 크기 설정 
          size={category === "STANDINGS" ? "medium" : "small"}
        />
      ) : table.length ? (
        <Table>
          <Caption>
            {currentTab === 0 ? kLeagueCaption : europeLeagueCaption}
          </Caption>
          <thead>
            <Tr>
              {tableMenu.map((menu, idx) => (
								// 대표되는 col 확실하게 표시
                <Th scope="col" key={idx}>
                  {menu}
                </Th>
              ))}
            </Tr>
          </thead>
          <tbody>{leagueList[currentTab].contents}</tbody>
        </Table>
      ) : (
				// 에러 or 데이터 없을 시 메시지 표시
        <ErrorMessage category={category} error={error} />
      )}
    </LeagueCard>
  );
};

남자축구 국가대표 경기 일정

🔻 KoreaFixtureList.tsx

// 경기 시간 or 날짜가 지나면 자동으로 종료 표시
const MatchList = styled(Tr)<{ isFinish: boolean }>`
  background-color: #fffad7;
  opacity: ${({ isFinish }) => isFinish && "0.3"};
`;

...

// 국제대회 D-DAY 설정 (진행 중/종료/D-Day/D-00 표시)
{list.status && list.status < 0 && list.isFinish === false ? (
    <Contents>진행 중</Contents>
  ) : list.status && list.status < 0 && list.isFinish === true ? (
    <Contents>종료</Contents>
  ) : list.status === 0 ? (
    <Contents>D-Day!</Contents>
  ) : list.status && list.status > 0 ? (
    <Contents>D-{list.status}</Contents>
  ) : (
    ""
)}