1. shops[id] 매장 정보의 시설 정보 출력될 때 각 시설 구분되도록 표기
<p className="text-gray-600">
{shop.facilities && shop.facilities.length > 0
? shop.facilities.map((facility, index) => (
<span key={index}>
{facility}
{index < shop.facilities.length - 1 && "\u00A0"}
</span>
))
: "Wi-Fi, 화장실"}
</p>
-1. shop.facilities 배열의 각 항목을 순회하며 span 태그로 감싸서 렌더링한다.
-2. 각 항목에 고유한 key를 부여하여 React가 효율적으로 렌더링을 관리할 수 있도록 한다.
-3. 마지막 항목이 아닌 경우, 항목 뒤에 공백(\u00A0)을 추가하여 항목 간에 한 칸씩 띄어쓰기를 한다. 즉, 마지막 항목에는 공백을 추가하지 않는다.
기존에는 {shop.facilities}만 있어서, 띄어쓰기 없이 주루룩 출력되었었다.
이때 JavaScript의 && 연산자를 활용한 조건부 렌더링을 활용해서, index 가 배열의 마지막 항목이 아닌 경우, 그 조건이 참이면 (&&) 공백 문자를 렌더링 하는 것으로 수정하였다. React 에서 많이 쓰는 패턴이라고 한다. (조건이 참일때만 특정 값을 렌더링할 때 쓰인다.)
✔️공백을 \u00A0로 표기하는 이유
HTML 비어 있는 공백 문자(Non-Breaking Space)**를 의미한다.
일반적인 공백 " "와 달리, 줄바꿈이 발생하지 않도록 보장한다.
➕ ShopCard 도 동일하게 facilities 를 map 하고, 공백을 넣어준다.
2. 리뷰사진 등록할때, 사진 썸네일사이즈로 등록되도록 수정
미리보기, 리뷰 두군데 모두 수정
{/* 리뷰 이미지 출력 */}
{review.images && review.images.length > 0 && (
<div className="mt-4 flex flex-wrap gap-1">
{review.images.map((image, index) => (
<img
key={index}
src={image}
alt={`Review Image ${index + 1}`}
className="w-24 h-24 object-cover rounded"
/>
))}
</div>
)}
=> grid를 flex 로 수정함 (한 줄에 나오도록)
=> className="w-24 h-24" 으로 사진 사이즈 규격 맞추기
✔️수정 버튼을 눌렀을 때만 리뷰에서 사진 삭제 기능추가
-1. 수정 상태 확인:
editingReviewId === review.id 조건을 추가하여, 수정 상태일 때만 삭제 버튼이 표시
-2. 이미지 출력 조건 분리:
수정 상태가 아닐 때는 review.images를 그대로 출력
수정 상태일 때는 editingExistingImages를 출력하며, 삭제 버튼을 추가
-3. 중복 출력 방지:
수정 상태와 일반 상태에서 이미지를 각각 한 번씩만 출력하도록 조건을 분리
3. 디자이너 추가 부분 수정하기
RegisterShopModal.js
예를들어 디자이너가 4명이면, 한 디자이너당 그 디자이너 프로필 이미지만 나와야하는데, 각 디자이너의 프로필마다 4명의 디자이너 프로필 이미지가 다출력됨
=>문제는 newShop.designers.map을 중첩해서 사용하고 있기 때문이었음. 이로 인해 각 디자이너의 프로필 이미지 섹션에 모든 디자이너의 프로필 이미지가 반복적으로 출력되고 있었고, newShop.designers.map을 삭제하여, 현재 designer 객체에만 접근하도록 수정함
개별 디자이너의 이미지만 출력:
디자이너의 프로필 이미지 섹션에는 해당 디자이너의 이미지(designer.imageUrl)만 출력되도록 동작함
<div key={designer.id} className="mb-4"> //삭제
<div>
<label className="block text-gray-700 mb-2">
디자이너 프로필 이미지
</label>
<input
type="file"
accept="image/*"
onChange={(e) =>
handleDesignerImageUpload(designer.id, e)
}
className="w-full p-2 border rounded"
/>
{designer.imageUrl && (
<div className="mt-4">
<img
src={designer.imageUrl || ""}
alt="디자이너 프로필 미리보기"
className="w-32 h-32 object-cover rounded-full"
/>
</div>
)}
</div>
</div> //삭제
))} //삭제
