리액트 프로젝트 4. 제품 상세 페이지 , 찜 기능 구현

ProductDetails [/goods/:category/:id]

 

 

프로젝트 구현이 어느정도 되기 시작하면서 , 

로그인을 맡은 친구가 로그인에 성공하면 해당 유저의 데이터를 객체형식으로 세션스토리지로 보내줬다.

그 세션스토리지의 여부로 인하여 로그인상태인지 판별할 수 있었고,

또는 세션스토리지 정보를 바탕으로 세션스토리지의 값을 변경하기 위한 첫 연습이였다.

 

url의 category와 id 로 해당 상품을 찾아낼 수 있었다.

const { category, id } = useParams(); // 아이템을 찾기위한 url 소스 
const selectedProduct = GoodsItems.find((item) => item.category === category && item.id === parseInt(id));

 

세션 스토리지에서 해당 유저의 정보를 얻어온다.

    //세션 스토리지의 유저 데이터를 담는 변수.
    const userData = JSON.parse(sessionStorage.getItem('LoginUserInfo'));

 

우리는 해당 유저의 속성중에

isLike: [1, 2, 3],

 

이런식으로 해당하는 상품 id 값을 넣어두었다.

 

그 값이 현재 상품 id 와 일치한다면 , like 상태를 업데이트 해주었다.

    // 컴포넌트가 마운트될 때 세션 스토리지에서 찜하기 상태 초기화
    useEffect(() => {
        const userData = JSON.parse(sessionStorage.getItem('LoginUserInfo'));
        if (userData && userData.mypage.isLike.includes(selectedProduct.id)) {
            setLike(true); // 찜 목록에 있으면 like 상태를 true로 설정
        }
    }, [selectedProduct.id]);

 

 

이미지에 onClick 이벤트를 걸어두고 , 

클릭할때마다 이미지를 바꿔줄건데,

로그인이 되었다면 값을 바꿔줘야하고

로그인이 되지 않았다면 로그인 화면으로 이동되게 구현해야한다.

// 세션 스토리지의 사용자 정보 업데이트
if (userData) {
    const updatedLikes =
        like
            ? userData.mypage.isLike.filter(id => id !== selectedProduct.id) // 이미 찜한 상태라면 제거
            : [...userData.mypage.isLike, selectedProduct.id]; // 찜하지 않은 상태라면 추가

    const updatedUser = {
        ...userData,
        mypage: {
            ...userData.mypage,
            isLike: updatedLikes
        }
    };

    // 업데이트된 사용자 정보를 세션 스토리지에 저장
    sessionStorage.setItem('LoginUserInfo', JSON.stringify(updatedUser));
} else {

    setIsLoginModalOpen(true);
    return;

}//user데이터가 없을경우 찜목록 사용 비활성화

 

로그인에서 찜이 되어 있는 상황

 

한번 더 클릭해서 지우면 세션까지 데이터 지워진것을 확인 가능하다.

 

 

로그인이 되지 않았다면 ,

 

 

 

이후 form에서도 대환장 파티가 시작된다.