[Fix/#219] 빌릴게 물품 아이콘을 회색 칸 가운데에 맞춰 표시

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({
     >
       <div className="flex h-[42px] w-full items-center justify-between">
         <div className="flex items-center gap-3">
-          {icon ? (
-            <img alt="" className="size-[42px]" src={icon} />
-          ) : (
-            <div className="size-[42px]" />
-          )}
+          <BillilgeItemIcon src={icon} />
           <div className="flex flex-col gap-0.5">
             <Typography
               as="p"

src/features/billilge/components/BillilgeItemIcon.tsx

@@ -0,0 +1,16 @@
+interface BillilgeItemIconProps {
+  // 아이콘이 없는 물품은 null이라 빈 회색 칸만 둔다
+  src: string | null;
+}
+
+function BillilgeItemIcon({ src }: BillilgeItemIconProps) {
+  return (
+    <div className="flex size-[42px] shrink-0 items-center justify-center rounded-[10px] bg-background-alternative">
+      {src && (
+        <img alt="" className="max-h-8 max-w-8 object-contain" src={src} />
+      )}
+    </div>
+  );
+}
+
+export default BillilgeItemIcon;

src/features/billilge/components/BillilgeListSkeleton.tsx

@@ -21,7 +21,7 @@ function BillilgeListSkeleton() {
           <Skeleton
             animation={animation}
             height="42px"
-            radius="8px"
+            radius="10px"
             variant="rectangle"
             width="42px"
           />

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 (
     <div className="flex w-full items-center justify-between">
       <div className="flex flex-1 items-center gap-3">
-        {icon ? (
-          <img alt="" className="size-[42px]" src={icon} />
-        ) : (
-          <div className="size-[42px]" />
-        )}
+        <BillilgeItemIcon src={icon} />
         <div className="flex flex-col gap-1">
           <Typography
             as="p"

src/features/billilge/components/BillilgeReturnSkeleton.tsx

@@ -32,7 +32,7 @@ function BillilgeReturnSkeleton() {
               <Skeleton
                 animation={animation}
                 height="42px"
-                radius="8px"
+                radius="10px"
                 variant="rectangle"
                 width="42px"
               />
@@ -83,7 +83,7 @@ function BillilgeReturnSkeleton() {
                 <Skeleton
                   animation={animation}
                   height="42px"
-                  radius="8px"
+                  radius="10px"
                   variant="rectangle"
                   width="42px"
                 />

src/features/home/components/HomeRentalSkeleton.tsx

@@ -24,7 +24,7 @@ function HomeRentalSkeleton() {
             <Skeleton
               animation={animation}
               height="42px"
-              radius="8px"
+              radius="10px"
               variant="rectangle"
               width="42px"
             />