1. 기능의 동작 원리와 순서

장바구니 추가:

• 사용자가 제품 상세 페이지에서 수량을 선택하고 '장바구니에 추가' 버튼을 클릭합니다.
• addToCart 함수가 호출되며, 이 함수는 선택된 제품과 수량 정보를 장바구니 상태에 추가합니다.
• 이 때, 사용자 ID를 가져와 장바구니 항목(cart-${userInfo.user_id})을 생성하여 로컬 스토리지에 저장합니다.

장바구니 조회:

• 페이지가 로드될 때 useEffect 훅이 호출되어 로컬 스토리지에서 사용자 ID에 맞는 장바구니 항목(cart-${userInfo.user_id})을 가져옵니다.
• 가져온 장바구니 항목을 상태(cartItems)에 저장하고, 총 가격을 계산하여 로컬 스토리지에 저장합니다(totalPrice-${userInfo.user_id}).

장바구니 항목 관리:

• CartItemList 컴포넌트가 장바구니에 있는 각 항목을 표시하며, 항목의 변경(예: 수량 변경, 제품 제거 등)이 있을 때 handleCartChange 함수를 호출합니다.
• handleCartChange 함수는 변경된 장바구니 항목을 상태에 업데이트하고, 총 가격을 다시 계산해 저장합니다.

장바구니 요약 표시:

• CartSummary 컴포넌트는 장바구니의 총 금액과 같은 요약 정보를 보여줍니다.

결제 및 쇼핑 계속하기:

• "계속 쇼핑하기" 버튼은 handleToShop 함수를 통해 사용자를 상품 목록 페이지(/shop)로 이동시킵니다.
• "제품 결제하기" 버튼은 먼저 장바구니에 항목이 있는지, 사용자가 로그인했는지 검사한 후, handleCheckOrder 함수를 통해 결제 페이지(/checkout)로 이동합니다.

각 사용자의 장바구니 데이터 구분하기

사용자별 데이터 저장:

• 로컬 스토리지에 저장되는 장바구니 데이터는 사용자 ID를 기반으로 구분됩니다. 이는 각 사용자마다 고유한 장바구니를 가질 수 있도록 합니다.
• localStorage.getItem(cart-${userInfo.user_id})은 특정 사용자의 장바구니 데이터를 가져옵니다. 여기서 userInfo.user_id는 현재 로그인한 사용자의 고유 ID입니다.

데이터 구조:

• 저장된 장바구니 데이터는 일반적으로 배열 형태로 저장됩니다.
• 이 배열은 상품의 ID, 이미지 URL, 타이틀, 가격, 수량 등을 포함한 객체들로 구성됩니다.

장바구니에 이미 존재하는 상품 추가 처리

상품 선택 및 데이터 확인:

• 사용자가 상품 상세 페이지에서 '장바구니에 추가' 버튼을 클릭합니다.
• 애플리케이션은 로컬 스토리지에서 현재 로그인한 사용자의 장바구니 데이터를 가져옵니다.

상품 존재 여부 검사:

• 장바구니 데이터 내에서 현재 추가하려는 상품의 ID를 검사합니다.
• 만약 같은 ID의 상품이 이미 존재한다면, 해당 상품의 수량을 업데이트합니다.
• 존재하지 않는 경우, 새로운 상품 객체를 배열에 추가합니다.

데이터 업데이트:

• 변경된 장바구니 데이터를 로컬 스토리지에 다시 저장합니다.

2. 코드 파일의 구성

• ProductDetailPage.tsx:

  제품의 상세 정보를 표시하는 리액트 컴포넌트입니다.
  제품 이미지, 설명, 가격 정보 등을 포함하고, 사용자가 제품 상세 정보를 볼 수 있게 합니다.
  상세 페이지의 레이아웃과 UI 구성을 담당합니다.

• CartPage.tsx:

  장바구니 페이지의 메인 컴포넌트로, 사용자의 장바구니에 있는 아이템들을 표시합니다.
  장바구니 아이템 리스트와 요약 정보를 포함하며, 결제 및 쇼핑 계속하기와 같은 사용자 액션을 처리합니다.

• CartSummary.tsx:

  장바구니의 요약 정보를 표시하는 컴포넌트입니다.
  총 가격과 같은 장바구니의 요약 정보를 사용자에게 보여줍니다.

• CartItem.tsx:

  장바구니에 있는 개별 아이템을 나타내는 컴포넌트입니다.
  각 아이템의 이미지, 제목, 가격 등을 표시하고, 사용자가 아이템을 관리할 수 있게 합니다.

• CartItemList.tsx:

  장바구니에 있는 모든 아이템들을 리스트 형태로 표시하는 컴포넌트입니다.
  CartItem 컴포넌트를 반복적으로 렌더링하여 전체 장바구니 아이템을 보여줍니다.

3. 장바구니 기능의 특징

컴포넌트 구조와 재사용성:

장바구니 기능은 여러 개의 컴포넌트(CartPage, CartSummary, CartItem, CartItemList)로 나뉘어져 있으며, 각각의 컴포넌트는 특정 기능을 담당합니다. 이러한 모듈식 접근 방식은 코드의 재사용성과 관리 용이성을 향상시킵니다.

상태 관리 및 로컬 스토리지 활용:

상태 관리는 useState, useEffect 등의 React 훅을 사용하여 수행됩니다. 이는 사용자의 장바구니 상태를 실시간으로 반영하고 관리하는 데 중요합니다.
로컬 스토리지를 사용하여 사용자별 장바구니 데이터를 저장하고 관리합니다. 이는 사용자의 세션 간 상태 유지에 도움을 줍니다.

4. 취약점과 개선 사항

• 로컬 스토리지 사용에 대한 보안 고려:

장바구니 데이터를 로컬 스토리지에 저장하는 방식은 XSS(크로스 사이트 스크립팅) 공격에 취약할 수 있습니다. 공격자가 로컬 스토리지에 접근하여 사용자 데이터를 탈취할 수 있습니다. 중요 데이터는 서버 측에서 관리하고, 필요한 경우 토큰 기반의 인증 방식을 사용하여 보안을 강화할 수 있습니다.

• 상태 관리의 복잡성:

여러 컴포넌트에 걸쳐 상태를 관리하면서 발생할 수 있는 복잡성과 오류 가능성을 줄이기 위한 개선이 필요합니다.

• 에러 핸들링과 사용자 피드백:

현재 코드에서는 네트워크 요청이 실패했을 때 사용자에게 명확한 피드백을 제공하는 방법이 명시되어 있지 않습니다.
에러 발생 시 사용자에게 친절하고 명확한 에러 메시지를 보여주는 로직을 추가합니다.

• 코드의 성능 최적화:

현재 코드에서는 불필요한 렌더링을 방지하기 위한 최적화가 적용되지 않았습니다.
React.memo, useCallback, useMemo 등을 사용하여 렌더링 성능을 최적화할 수 있습니다.