중고물품 사이트 프로젝트

1. 메인페이지에 경매리스트 띄우기

• 'AuctionList' 컴포넌트는 'auctions' prop을 매핑하여 개별 경매 항목을 표시함
• 각 항목에는 제목, 내용, 그리고 가능한 경우 카테고리가 포함됨
• 경매 생성 날짜와 시계 아이콘도 함께 표시됨

   {auctions.map((auction) => (
     <li key={auction.auction_id} onClick={() => navigate('/detail/${auction.auction_id}')}>
       <h6>
         <img src={clock} />
         {transDate(auction.created_at)}
       </h6>
       <h2>{auction.title}</h2>
       <p>{auction.content}</p>
       {auction.category && <h5>{auction.category.category_name}</h5>}
     </li>
   ))}

2. 헤더 스타일링

• 헤더를 공용컴포넌트 Layout로 만들었음
• 헤더의 사이트 이름 클릭 시 사용자가 메인 페이지로 돌아갈 수 있도록 링크되어 있음

function Header() {
  const navigate = useNavigate();
  const LogoClickHandler = () => {
    navigate("/");
  };
  return (
    <StHeader>
      <p onClick={LogoClickHandler}>엘리트옥션</p>
      <div>
        <img src={search} />
        <button>로그인</button>
      </div>
    </StHeader>
  );
}

3. 카테고리 기반 경매 목록 필터링

• 카테고리 기반 경매 목록 필터링은 'fetchGetAuctions' 함수에서 처리함
• 여러 매개변수를 받아 경매 목록을 검색하고, 필요한 경우 필터링함
  

1) 카테고리 ID 추출:
선택된 카테고리들에서 'category_id'를 추출하여 'categoryIds' 배열을 생성

   const categoryIds = categories.map((category) => {
     return category.category_id;
   });

2) 카테고리 필터 적용:
'categories' 배열의 길이가 0보다 큰 경우, 즉 사용자가 하나 이상의 카테고리를 선택했을 때, 'query.in' 메소드를 사용하여 해당 'category_id'를 가진 경매들만 필터링함

   if (categories.length > 0) {
     query.in("category_id", categoryIds);
   }

☞ 결론

• 주어진 카테고리에 맞는 경매 목록을 반환
• 사용자가 선택한 카테고리에 따라 동적으로 경매 목록이 필터링되고, 이를 통해 사용자는 자신의 관심사에 맞는 경매들만 볼 수 있게 됨
• 'Home' 컴포넌트의 'useEffect' 내에서 'fetchGetAuctions' 함수가 호출되면서 카테고리 변경에 따라 경매 목록이 갱신되는 방식으로 구현됨

// 경매 데이터를 가져오는 useEffect 훅
  useEffect(() => {
    // 경매 데이터를 비동기적으로 가져오는 함수
    const fetchData = async () => {
      const result = await fetchGetAuctions(
        queryOption.searchKeyword,
        queryOption.categories,
        queryOption.limit,
        queryOption.offset,
        queryOption.orderBy,
        queryOption.order
      );
      console.log(result);
      // 가져온 데이터로 State 업데이트
      setAuctionData(result || null);
    };

    // 함수 호출
    fetchData();
  }, [selectedCategories]);

4. 카테고리 선택하면 선택 된 것(활성 상태) 색상 바뀌기

• 'CategorySelector' 컴포넌트를 사용하여 사용자가 카테고리를 선택 해서 볼 수 있음 (다중 선택 가능)
• 카테고리가 선택되면 활성 상태를 나타내는 색상이 변경됨.

   <button
     key={category.category_id}
     onClick={() => onCategorySelect(category)}
     style={{
       backgroundColor: selectedCategories.some(
         (c) => c.category_id === category.category_id
       ) ? "#afcaff" : "transparent",
     }}
   >
     {category.category_name}
   </button>

5. 상세 경매 페이지로의 네비게이션

• 목록의 각 경매 아이템은 클릭 가능하며 상세 경매 페이지로 리디렉션됩니다.
• 'react-router-dom'의 'navigate' 함수를 사용하여 원활한 페이지 이동이 됨

   onClick={() => navigate('/detail/${auction.auction_id}')}

오늘의 한줄평 : 열이 나도 코딩은 쉴수 없지 파이팅!