중고 물품 사이트 프로젝트(3)

경매 진행 상태 표시

1. 경매 상태 표시를 위한 로직 만들기

• 경매 상태를 "경매 전", "진행중", "종료"로 표시하기 위해 'AuctionList.tsx' 컴포넌트에 관련 로직을 구현

2. 'useAuctionStatus' 훅과 'calculateAuctionStatusAndTime' 함수 사용

• 초기에는 'useAuctionStatus' 커스텀 훅을 사용하여 경매의 상태를 결정하려 했으나, 이 방법이 "Invalid hook call" 오류를 발생시켰다.
• 대신 'calculateAuctionStatusAndTime' 함수(각 경매 아이템의 'auction_start_date' 및 'auction_end_date'를 인자로 받아 현재 시간과 비교하여 경매 상태를 결정)를 사용하여 경매의 시작 및 종료 시간을 바탕으로 현재 상태를 계산하게함

3. 경매 상태 업데이트

• 'useEffect' 훅을 사용하여 'auctions' 배열이 변경될 때마다 경매 상태를 계산하고, 이를 상태 변수 'auctionStatuses'에 저장한다. - 이 변수는 경매 아이템마다의 상태를 저장하는 데 사용됨

4. UI에 경매 상태 표시

• 'AuctionList.tsx' 컴포넌트에서 'auctionStatuses' 상태 변수를 사용하여 각 경매 아이템의 상태를 UI에 표시함
• 'map' 함수를 사용하여 각 경매 아이템을 렌더링할 때 적용

import React, { useEffect, useState } from "react";
import { calculateAuctionStatusAndTime } from "../../common/dayjs";
import { Auction_post, AuctionStatus } from "../../types/databaseRetrunTypes";
// ... 그외 import한 거 

const AuctionList: React.FC<AuctionListProps> = ({ auctions }) => {
  // ... 그외 로직

  // 경매 상태를 관리하기 위한 상태
  const [auctionStatuses, setAuctionStatuses] = useState<Record<string, AuctionStatus>>({});

  useEffect(() => {
    const newStatuses: Record<string, AuctionStatus> = {};
    auctions?.forEach((auction) => {
      const { auctionOver } = calculateAuctionStatusAndTime(
        auction.auction_start_date,
        auction.auction_end_date
      );
      newStatuses[auction.auction_id] = auctionOver;
    });
    setAuctionStatuses(newStatuses);
  }, [auctions]);

  return (
    // ... JSX 렌더링 로직
    {auctions.map((auction) => {
      const auctionStatus = auctionStatuses[auction.auction_id];
      let auctionStatusText;
      switch (auctionStatus) {
        case AuctionStatus.READY:
          auctionStatusText = "경매 전";
          break;
        case AuctionStatus.START:
          auctionStatusText = "진행중";
          break;
        case AuctionStatus.END:
          auctionStatusText = "종료";
          break;
        default:
          auctionStatusText = "경매 상태 알수없음";
      }

      return (
        {auctionStatusText} //상태 표시
      );
    })}
  );
};

export default AuctionList;

메인페이지 정렬과 리스트 반응형

• 모바일에서도 볼수 있도록 반응형으로 스타일링
  

like 다수 발생

[문제] 엄청나게 auction_like가 계속 렌더링 되었다.

[해결]
언제나 범인은 useEffect였다.

// 사용자의 좋아요 상태를 불러오는 쿼리
  // const likeQuery = useQuery({
  //   queryKey: ["likes", userId],
  //   queryFn: () => fetchLikes(userId!),
  //   enabled: !!userId,
  // });

  // // 좋아요 데이터가 로드되었을 때 상태를 업데이트하는 useEffect
  // useEffect(() => {
  //   if (likeQuery.isSuccess && likeQuery.data) {
  //     setLikes(likeQuery.data as { [key: string]: boolean });
  //   }
  // }, [likeQuery.isSuccess, likeQuery.data]);

• 위의 코드를 주석처리하고 진영 튜터님의 도움으로 처음에 불러올 때 추가하는 방법으로 해결했다.

const query = connectSupabase
    .from("auction_post")
    .select(
      "*, category(category_name), user_info(user_email), auction_images(image_id, image_path), auction_like ( like_id, user_id, auction_id, created_at )" // <--여기에 추가해서 처음에 불러오는 식으로 구현
    )
    .order(`${orderBy}`, { ascending: order })
    .range(pageParam!, pageParam! + limit);

PPT 자료 만들기

텍스트를 정리 하고, 내일 발표자료를 만들기 위해 준비했다.

오늘의 한줄평 : 이렇게 모르는게 많은데, 개발자 할 수 있을까 ㅠ.. 열심히 잘 하고 싶은데 매번 내 능력이 부족한거 같다.