[Team Project] Bid Panda ep.5

✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지

Issue ▸

마이 페이지에는 3개의 서로 다른 리스트를 조회할 수 있어야 했다. Mypage 컴포넌트에는 관심 목록, 참여 목록, 등록 목록에 해당하는 p태그가 있었고, 이 p태그의 click event를 이용해 하위 컴포넌트로 작성되어 있는 Mylists의 내용이 변경 되어야 했다.

Solve :

1. 우선 Mypage에서 selectedTab 이라는 state를 만들어, 그 내용을 목록 특성에 관계된 문자열로 했다.

 const [selectedTab, setSelectedTab] = useState("interest");

2. p태그 각각을 구분해줄 수 있는 키워드를 입력하는 방식으로 onClick event를 생성했다.

<p className={`m-2 ${selectedTab === "liked" ? "text-black" : ""}`}
     onClick={() => setSelectedTab("liked")}>
   		찜한 상품
</p>
<p className={`m-2 ${selectedTab === "bid" ? "text-black" : ""}`}
     onClick={() => setSelectedTab("bid")}>
        참여 상품
</p>
<p className={`m-2 ${selectedTab === "posted" ? "text-black" : ""}`}
     onClick={() => setSelectedTab("posted")}>
        등록 상품
</p>

3. Mylists 컴포넌트에서 불러올 데이터 Api를 결정하는 조건으로 selectedTab state를 가져와 사용했다. ( Props )

const [itemsData, setItemsData] = useState<Items[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        let data: Items[] | any = [];
        if (selectedTab === "liked") {
          data = await getLikedListApi();
        } else if (selectedTab === "bid") {
          data = await getBidListApi();
        } else if (selectedTab === "posted") {
          data = await getPostedListApi();
        }
        setItemsData(data);
      } catch (error) {
        console.error("Error fetching auction data:", error);
      }
    };
    fetchData();
  }, [selectedTab]);