Feat: Add HorizontalScroll to ItemList

Author: ntcho

frontend/components/organisms/ItemList/ItemList.js

@@ -1,5 +1,6 @@
 import { Stack } from "@mui/material";
 import React from "react";
+import HorizontalScroll from 'react-scroll-horizontal';
 import TypeIcon from "_atoms/TypeIcon";
 import Item from "_molecules/Item";
 
@@ -12,17 +13,19 @@ export default function ItemList({ items, title, icon, iconType }) {
         ) : null}
         {title && <div className="item-list-title">{title}</div>}
       </div>
-      <Stack direction="row" className="item-list-content" spacing={2}>
-        {items != null ? (
-          items.length > 0 ? (
-            items.map((item) => <Item key={item._id} item={item} />)
+      <HorizontalScroll className="item-list-scroll">
+        <Stack direction="row" className="item-list-content" spacing={2}>
+          {items != null ? (
+            items.length > 0 ? (
+              items.map((item) => <Item key={item._id} item={item} />)
+            ) : (
+              <div>표시할 항목이 없습니다.</div>
+            )
           ) : (
-            <div>표시할 항목이 없습니다.</div>
-          )
-        ) : (
-          <div>Loading...</div>
-        )}
-      </Stack>
+            <div>Loading...</div>
+          )}
+        </Stack>
+      </HorizontalScroll>
     </div>
   );
 }

frontend/styles/item-list-page.scss

@@ -47,10 +47,17 @@
   }
 }
 
-.item-list-content {
-  height: $height;
-  align-items: center;
-  margin: 16px 0;
-  gap: 8px;
-  overflow-x: hidden;
+.item-list-scroll {
+  width: 100% !important;
+  height: $height + 16px * 2 !important;
+
+  .item-list-content {
+    width: 100%;
+    height: $height;
+    display: flex;
+    align-items: center;
+    margin: 16px 16px 16px 0;
+    gap: 8px;
+    overflow-x: hidden;
+  }
 }