[Week7 - Day34] 전체 페이지 연결

1. 오늘의 과업 리스트 📋

 

2. 전체 페이지 연결

 

1) 상품 상세 페이지 구상

상세페이지 디자인 시안

• 상품 정보
  • 상품 사진
  • 브랜드 이름
  • 상품 이름
  • 가격
  • 구매 수량
• 장바구니 담기 버튼
• 관련 상품

2) 마크업 구현

function ProductDetail() {
    return (
        <>
        <Header/>
        <Container className="detail-page">
            <img 
                src="https://100ke.github.io/internINmeta/images/running_shoe_03.jpg" 
                alt="상품 이미지" 
            />
            <div className="datail-area">
                <div className="text">
                    <h1>브랜드A</h1>
                    <p>상품 이름</p>
                    <p>35,000원</p>
                </div>
                <div className="btn-area">
                    <FaCircleMinus className="up-down" />
                    <span>1</span>
                    <FaCirclePlus className="up-down" />
                </div>
            </div>
            <button type="button" className="cartbtn-in-detail">
                장바구니 담기
            </button>
            <h3>관련 상품</h3>
            <p>브랜드A의 다른 신발은 어떠신가요?</p>
            <div className="relatedlist">
                <img 
                    src="https://100ke.github.io/internINmeta/images/running_shoe_03.jpg" 
                    alt="관련 상품 1" 
                />
            </div>
        </Container>
        </>
    );
}

export default ProductDetail;

3) 기능 추가

• 장바구니에 담기

handleAddToCart 함수

onClick 핸들러로 연결

• 수량 선택 기능

수량 선택은 useState로 상태 변수 quantity 를 통해 관리

💻구현 화면

4) 결제 완료 페이지 구현

결제 완료 페이지 디자인 시안

function PayComplete() {
    const cartItems = useRecoilValue(cartItemsState);
    const resetCart = useResetRecoilState(cartItemsState);
    const navigate = useNavigate();

    const totalCount = cartItems.reduce((sum, item)=>sum+item.quantity, 0);
    const totalPrice = cartItems.reduce((sum, item)=>sum + item.price * item.quantity, 0);

    const handleBackToList = () => {
        resetCart();
        navigate('/internINmeta')
    }
    return (
        <>
        <div className="cart-header"></div>
        <div className="complete-page">
            <h1>결제 완료!</h1>
            <p>총 {totalCount}개의 상품을 구매하셨습니다.</p>
            <p>총 결제 금액</p>
            <h2>{totalPrice.toLocaleString()}원</h2>
            <button className="select-card" onClick={handleBackToList}>상품 목록 보기</button>
        </div>
        </>
    )
}

export default PayComplete;

💻구현 화면

---

✒️컨텐츠 피드백 및 진행 소감

이번 실습에서는 React 기반 쇼핑몰 프로젝트에서 제품 상세 페이지와 결제 완료 페이지를 구현했다.

제품 상세 페이지는 useParams로 URL의 상품 ID를 추출하고, Recoil 상태로부터 해당 상품 정보를 찾아 화면에 렌더링하는 구조로 구현했다. 수량 선택 기능은 useState를 통해 상태를 관리하며, 버튼 클릭으로 수량을 증가/감소할 수 있게 구현했다. 또한 장바구니 담기 기능은 useSetRecoilState를 활용해 장바구니 상태 배열을 업데이트하도록 했다. 특히 기존 상품이 있을 경우 수량만 증가시키고, 없을 경우 새로 추가하는 로직을 조건문으로 나누어 작성함으로써 실제 쇼핑몰의 UX 흐름에 가까운 구현이 가능했다.

결제 완료 페이지는 결제 후 사용자에게 구매 완료 사실을 알리는 단순한 UI지만, 결제 데이터와 연동될 수 있도록 구조화했다. 해당 페이지에서는 구매 상품 수, 결제 금액 등을 표시할 수 있도록 구현했다.

실습을 통해 상태 관리(Recoil), 라우팅(React Router), 컴포넌트 분리 및 사용자 인터랙션 처리에 대한 이해를 더 깊이 할 수 있었다. 특히 기능 구현 전의 마크업 구조 설계가 이후의 상태 연동 및 로직 작성에 큰 영향을 준다는 점을 다시 한 번 실감했다.

앞으로는 기능 외에도 예외 처리나 사용자 피드백(UI/UX) 측면도 함께 고려하는 방향으로 구현을 발전시켜 나가고 싶다.

 

https://www.interninmeta.or.kr/

인턴IN메타