diff --git a/src/features/billilge/components/BillilgeItemCard.tsx b/src/features/billilge/components/BillilgeItemCard.tsx index 466e1e73..1867bc20 100644 --- a/src/features/billilge/components/BillilgeItemCard.tsx +++ b/src/features/billilge/components/BillilgeItemCard.tsx @@ -4,9 +4,10 @@ import type { ReactNode } from "react"; import circleMinusFill from "@/assets/icons/circle-minus-fill.svg"; import circlePlusFill from "@/assets/icons/circle-plus-fill.svg"; +import BillilgeItemIcon from "@/features/billilge/components/BillilgeItemIcon"; interface BillilgeItemCardProps { - // 서버 물품 아이콘 주소. 아이콘을 안 올렸거나 지워진 물품은 null이라 같은 크기의 빈 자리만 둔다 + // 서버 물품 아이콘 주소. 아이콘을 안 올렸거나 지워진 물품은 null이라 회색 칸만 둔다 icon: string | null; itemName: string; subtitle: string; @@ -67,11 +68,7 @@ function BillilgeItemCard({ >
- {icon ? ( - - ) : ( -
- )} +
+ {src && ( + + )} +
+ ); +} + +export default BillilgeItemIcon; diff --git a/src/features/billilge/components/BillilgeListSkeleton.tsx b/src/features/billilge/components/BillilgeListSkeleton.tsx index 77708b38..695b29d0 100644 --- a/src/features/billilge/components/BillilgeListSkeleton.tsx +++ b/src/features/billilge/components/BillilgeListSkeleton.tsx @@ -21,7 +21,7 @@ function BillilgeListSkeleton() { diff --git a/src/features/billilge/components/BillilgeRentalHistoryEntry.tsx b/src/features/billilge/components/BillilgeRentalHistoryEntry.tsx index c754cfd5..0e984eef 100644 --- a/src/features/billilge/components/BillilgeRentalHistoryEntry.tsx +++ b/src/features/billilge/components/BillilgeRentalHistoryEntry.tsx @@ -1,10 +1,11 @@ import { Typography } from "@wanteddev/wds"; +import BillilgeItemIcon from "@/features/billilge/components/BillilgeItemIcon"; import BillilgeStatusBadge from "@/features/billilge/components/BillilgeStatusBadge"; import type { BillilgeRentalStatus } from "@/shared/entities/billilge/billilgeTypes"; interface BillilgeRentalHistoryEntryProps { - // 물품이 지워졌거나 아이콘이 없으면 null이라 같은 크기의 빈 자리만 둔다 + // 물품이 지워졌거나 아이콘이 없으면 null이라 회색 칸만 둔다 icon: string | null; itemName: string; rentedAt: string; @@ -25,11 +26,7 @@ function BillilgeRentalHistoryEntry({ return (
- {icon ? ( - - ) : ( -
- )} +
@@ -83,7 +83,7 @@ function BillilgeReturnSkeleton() { diff --git a/src/features/home/components/HomeRentalSkeleton.tsx b/src/features/home/components/HomeRentalSkeleton.tsx index f3594bd2..f611a677 100644 --- a/src/features/home/components/HomeRentalSkeleton.tsx +++ b/src/features/home/components/HomeRentalSkeleton.tsx @@ -24,7 +24,7 @@ function HomeRentalSkeleton() {