[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(2)

 

🔥 핫딜 페이지(2)

여기서는 제품 상세 페이지와 결제 페이지 장바구니 기능등을 소개 할 예정이다.

모든 모달 뒷 배경은 흐리게 만들어 사용자가 모달 창에 집중할 수 있게 만들었다.

1️⃣제품 상세 모달

제품 상세 모달

 

제품 상세를 모달로 띄우는데는 어려움이 없었다. 핫딜 페이지에서 상품을 클릭하면 props로 상품의 id값을 넘겨줘서 그 상품에 대한 정보를 axios 호출을 해주면 되었기 때문이다. 

또한 UI상으로 제품 상세 모달이 나왔는데 뒷 배경에 스크롤이 있으면 이상하다고 생각하여 스크롤을 막고 없애버렸다. 

 

// shoppingDetail 모달 생기면 뒷 배경 스크롤 막는 함수
useEffect(() => {
    if (isOpenModal === true) {
        document.body.style.cssText = `
        position: fixed; 
        top: -${window.scrollY}px;
        overflow-y: auto;
        width: 100%;`;
        return () => {
            const scrollY = document.body.style.top;
            document.body.style.cssText = '';
            window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
        };
    }
}, [isOpenModal]);

 

모달이 생기면 스크롤을 고정시키고 모달이 없어지면(unMount) 모달이 생기기 전 스크롤 위치로 이동시켜주는 useEffect다. 

 

2️⃣ 장바구니 넣기

로그인 유무 상태

로그인 상태에 따라 각각의 모달을 사용했다. 우리팀은 로그인 인증으로 JWT 토근을 발급 받기 때문에 JWT 토근이 없으면 실패 모달을 띄우고 있다면 성공 모달을 띄웠다. 

 

모달은 Sweetalert2 라이브러리를 사용해서 만들었다. 사용하기 굉장히 간편했고 커스텀도 쉽게 되서 시간이 없거나 간단하게 모달창을 만들고 싶다면 사용하는 걸 추천한다.

SweetAlert2

 

3️⃣ 구매하기

구매하기 모달

 

구매하기 모달은 다른 모달들 보다는 더 중요하다고 생각해 뒷배경을 blur 처리를 해줬다. 

React-hook-form을 사용해서 조건을 만족해야지만 버튼이 클릭되도록 만들었다. 조건이 모두 충족되지 않으면 버튼 색도 흐려지고 마우스를 호버하면 not-allowed가 되도록 했다. 

 

<_payButtonBox
    className="payButtonBox"
    valid={
        watch('name') &&
        !errors.name &&
        watch('restAddress') &&
        !errors.restAddress
    }
    onClick={onClickBuy}
>
    <_payButton
        valid={
            watch('name') &&
            !errors.name &&
            watch('restAddress') &&
            !errors.restAddress
        }
    >
        결제하기
    </_payButton>
</_payButtonBox>

// styled-component
const _payButtonBox = styled.div<ValidProps>`
    border: ${(props) => (props.valid ? '1px solid black' : '1px solid grey')};
    cursor: ${(props) => (props.valid ? 'pointer' : 'not-allowed')};
`;
const _payButton = styled.button<ValidProps>`
    color: ${(props) => (props.valid ? 'black' : 'grey')};
    cursor: ${(props) => (props.valid ? 'pointer' : 'not-allowed')};
`;

 

구매하기 모달도 장바구니와 마찬가지로 로그인 상태 유무로 결제가 된다. 

 

 

 

다음 주소 검색도 처음 써보는 기능이었다. 특이한 점은 api키가 필요가 없었다. 그래서 간편하게 사용할 수 있었다.

하지만 생각보다 커스텀이 어려웠고 넓이나 absolute 위치정도만 바꿔봤다. 

 

 

🥲 핫딜 페이지 후기

모달로 만드는 것을 생각만 했을 때는 사용자가 한 화면에서 구매까지 할 수 있어서 편리할 수 도 있겠다고 생각했다.

하지만 개발을 시작하니 3개의 모달 뿐 아니라 장바구니나 결제에 성공, 실패시 확인을 알려주는 모달창, 결제에서 주소를 입력하는 주소창 등 추가적인 모달 창이 늘어남에 따라 이건 아니다 싶었다. 팀 프로젝트다 보니 z-index가 복잡하게 엃히고 있었다. (그래서 어디서는 보이고 안보이고 난리였다) 

이번 프로젝트에서 나는 애니메이션을 적극 사용해봤다. 재밌었고 계속 써보고 싶다는 생각이 들었다.

 

모달로 써야할 때와 페이지를 만들때를 구분을 잘하자