마이페이지 - 포인트 관리 기능 수정
-
더미데이터 tempInfo 와 userInfo 키가 있었는데, 그것을 없애고,
현재 로그인한 CurrentUser 키로 연결하고, CurrentUser의 내정보(이름,이메일,연락처) 가 바뀌면 users 키값도 바뀌도록 수정함 -
조금 헤맸던 부분중에 하나가, SignUpModal 에서 newUser 객체에, points 를 추가하였고, localStorage 에도 분명 points 키가 추가되었는데도, 계속 null에러가 발생했다.
원인을 검색해보면, 렌더링 속도차이가 있는것 같다고해서, useEffect도 추가하고 옵셔널 체이닝 연산자를 추가했더니 에러가 사라졌다.
✔️문제의 원인
기존 코드에서 currentUser.points를 사용했을 때, currentUser가 null 또는 undefined인 경우, JavaScript는 points 속성을 읽으려고 시도하면서 TypeError를 발생시킨다. 이는 null이나 undefined에는 속성을 접근할 수 없기 때문이다.
✔️해결 방법: 옵셔널 체이닝(?.)
옵셔널 체이닝 연산자인 ?.는 객체가 null 또는 undefined인지 확인한 후에 속성에 접근함!!
만약 currentUser가 null 또는 undefined라면, currentUser?.points는 undefined를 반환하고, 에러를 발생시키지 않는다.
반대로, currentUser가 유효한 객체라면, points 속성에 정상적으로 접근한다.
아래 두 에러는, Array 로 바꾸어서 해결함.
- Error: users.map is not a function
<전>
// 충전 완료 처리 로직
const updatedPoints = currentUser.points + chargeAmount;
setCurrentUser({ ...currentUser, points: updatedPoints });
localStorage.setItem(
"users",
JSON.stringify({ ...currentUser, points: updatedPoints })
);
코드를 입력하세요<후>
const updatedUser = { ...currentUser, points: updatedPoints };
// 업데이트 localStorage for currentUser
localStorage.setItem("currentUser", JSON.stringify(updatedUser));
// 업데이트 localStorage for users
const users = JSON.parse(localStorage.getItem("users")) || [];
const updatedUsers = users.map((user) =>
user.id === currentUser.id ? updatedUser : user
);
localStorage.setItem("users", JSON.stringify(updatedUsers));
// Update state
setCurrentUser(updatedUser);
*Error: Cannot read properties of undefined (reading 'some')
코드를 입력하세요<전>
{currentUser &&
currentUser.reservations.some(
(userReservation) =>
userReservation.id === reservation.id
)
<후>
{currentUser &&
Array.isArray(currentUser.reservations) &&
currentUser.reservations.some(
(userReservation) =>
userReservation.id === reservation.id
)
1. 리뷰 없을 때 -> "아직 등록된 리뷰가 없습니다." 문구 출력하기
<div className="space-y-4 mb-5">
{reviews.length === 0 ? (
// 리뷰 없을때 출력
<p className="text-center text-gray-500">
아직 등록된 리뷰가 없습니다
</p>
) : (
// 리뷰 있을때 출력
reviews
.filter((review) => review.status === "published") // "published" 상태의 리뷰만 표시
.map((review) => (
-
reviews.length === 0 조건 추가:
reviews 배열의 길이가 0일 때 '아직 등록된 리뷰가 없습니다.'라는 문구를 출력. -
기존 리뷰 렌더링 유지:
reviews.filter(...).map(...) 부분은 그대로 유지하여 리뷰가 있을 경우 정상적으로 렌더링.
2. 등록한 매장사진 -> 현재 shops[id] 에만 표시되는 문제 -> 디자이너, 스타일, 리뷰 탭에도 동일하게 매장사진 출력될 수 있도록 수정하기.
Unhandled Runtime Error
Error: Cannot read properties of null (reading 'images')
src\app\shops[id]\designers\page.js (72:15) @ ShopDesignersPage
70 | {/* 상단 이미지 섹션 */}
71 | <div className="relative h-[400px] w-full bg-gray-100">
72 | {shop.images && shop.images.length > 0 ? (
| ^
73 | <>
74 | <img
75 | src={shop.images[currentImageIndex]}
Call Stack
2❗page 와 동일하게 수정중, 위와같은 에러메세지가 나왔다. 이 오류는 shop 객체가 null일 때 shop.images를 읽으려고 시도하기 때문에 발생한다고 하는데, images 정보는 localStorage 에 이미 있었기 떄문에 null 문제는 아니었다. 다시 찾아보니, shop이 아직 초기화되지 않았거나 데이터가 로드되기 전에 렌더링이 시도되면 이같은 에러가 날 수 있다고 한다.
{shop && shop.images && shop.images.length > 0 ? (
<>
<img
src={shop.images[currentImageIndex]}
alt={`${shop.name} 이미지 ${currentImageIndex + 1}`}
className="w-full h-full object-cover"
/>
shop이 null인지 확인한 후, shop이 유효한 경우에만 shop.images를 접근하도록 조건부 렌더링을 추가하여 문제를 해결하니 잘 작동한다.
- 슬라이드 매장명 css 가독성 고려하여 수정하기
<h3 className="text-lg font-semibold mb-2 text-primary-black ">{shop.name}</h3>