Design: weeklyPopularList design

7-7-2 · May 31, 2024 · d9ddc3a · d9ddc3a
1 parent 9e910f8
commit d9ddc3a
Showing 1 changed file with 16 additions and 13 deletions.
diff --git a/src/components/home/WeeklyPopularItem.tsx b/src/components/home/WeeklyPopularItem.tsx
@@ -7,22 +7,24 @@ const WeeklyPopularItem = ({
   data,
   idx
 }: {
-  data: WeeklyPopularTypes;
+  data: WeeklyPopularTypes | null;
   idx: number;
 }) => {
-  const icon = data && `/png/${data?.brand}.png`;
+  const icon = `/png/${data?.brand}.png`;
 
   return (
-    <Container className={Align}>
-      <span>{idx + 1}</span>
-      <BrandInfo className={Align}>
-        <BrandIcon
-          src={icon}
-          alt={data?.brand}
-        />
-        <span>{convertBrandName(data?.brand)}</span>
-      </BrandInfo>
-    </Container>
+    data && (
+      <Container className={Align}>
+        <span>{idx + 1}</span>
+        <BrandInfo className={Align}>
+          <BrandIcon
+            src={data && icon}
+            alt={data?.brand}
+          />
+          <span>{convertBrandName(data?.brand)}</span>
+        </BrandInfo>
+      </Container>
+    )
   );
 };
 
@@ -32,14 +34,15 @@ const Container = styled.div`
   padding: 8px 20px;
   background: #fff;
 `;
+
 const BrandInfo = styled.div`
   margin-left: 20px;
 `;
+
 const BrandIcon = styled.img`
   width: 38px;
   height: 38px;
   border-radius: 50%;
-  background-color: darkkhaki;
   margin-right: 12px;
 `;