MINE - 마이 페이지

이용자의 프로필 페이지이다.

프로필 사진과 닉네임은 이용자가 로그인한 Naver 계정에서 불러온다.

이용자가 마이페이지에서 다음과 같은 정보를 확인할 수 있다.

• 관심 등록한 상품들
• 판매 등록한 상품들
• 입찰한 상품들

DB의 usertable에는 사용자가 스크랩한 상품의 id, 판매 등록한 상품의 id, 입찰한 상품의 id가 저장되어 있다.

useEffect(() => {
      if (sessionStatus === "loading") return; // 세션 로딩 중일 때는 아무것도 하지 않음
      if (!session) {
        signIn("naver", { redirect: true });
      }



      const formData = new FormData();
      formData.append("user", String(session?.user.email));


      axios.post(API 주소, formData, {
        withCredentials: true
      })
      .then((res) => {
        setScrapIds(res.data.scrapids);
        setWriteIds(res.data.writeids);
        setBidIds(res.data.bidids);
      })
      .catch((err) => {
        console.log(err);
      });
    }, []);

사용자가 마이페이지에 접속하면 서버로부터 유저테이블에 저장되어 있는 스크랩 id, 입찰 id, 판매 id들을 받아와 종류에 맞게 각각 배열로 저장한다.

<MyPageProducts ids={scrapIds} />
<MyPageProducts ids={writeIds} />
<MyPageProducts ids={bidIds} />

상품 목록을 불러오는 컴포넌트에 저장되어 있는 id 배열을 prop으로 넘겨준다.

/* MyPageProducts.tsx */
const [products, setProducts] = useState<ProductInfo[]>([]);

useEffect(() => {
        if (Array.isArray(props.ids)) {
            const fetchProducts = async () => {
                let fetchedProducts: ProductInfo[] = [];

                // props.ids의 각 요소에 대해 작업을 수행
                for (const id of props.ids) {
                    const formData = new FormData();
                    formData.append("auctionid", id);

                    try {
                        const res = await axios.post(api 주소, formData, {
                            withCredentials: true
                        });
                        const product = res.data;
                        fetchedProducts.push(product);
                    } catch (error) {
                        console.log(error);
                    }
                }

                setProducts(fetchedProducts);
            };

            fetchProducts();
        }
    }, [props.ids]);

해당 컴포넌트는 prop으로 전달받은 id 배열을 반복문으로 각 id마다 api 주소에 요청을 보내 상품의 정보를 받아와 상품 목록에 저장한다.

{currentProducts.map((product) => (
                    <Link href={`/product/${product.auctionid}`} key={product.auctionid} passHref>
                        <ProductBlock2 product={product} />
                    </Link>
                ))}

이후 저장한 상품 목록을 map 함수를 이용해 표시해준다.