[GGFE-206] 아이템 보관함 조회 api 연결

components/store/InventoryItem.tsx

@@ -82,7 +82,12 @@ export function InvetoryItem({ item }: inventoryItemProps) {
       </div>
       <div onTouchStart={handleTouch}>
         <div className={styles.imgContainer}>
-          <Image className={styles.img} src={imageUri} alt={itemName} fill />
+          <Image
+            className={styles.img}
+            src={imageUri === null ? '/image/fallBackSrc.jpeg' : imageUri}
+            alt={itemName}
+            fill
+          />
         </div>
         <div className={styles.itemName}>{itemName}</div>
       </div>

components/store/InventoryList.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
+import { instance } from 'utils/axios';
 import { InfinityScroll } from 'utils/infinityScroll';
-import { mockInstance } from 'utils/mockAxios';
 import { InfiniteScrollComponent } from 'components/store/InfiniteScrollComponent';
 import { InvetoryItem } from 'components/store/InventoryItem';
 import styles from 'styles/store/Inventory.module.scss';
 
 function fetchInventoryData(page: number) {
-  return mockInstance.get(`items?page=${page}&size=${8}`).then((res) => {
+  return instance.get(`/pingpong/items?page=${page}&size=${8}`).then((res) => {
     return res.data;
   });
 }

styles/store/Inventory.module.scss

@@ -2,6 +2,7 @@
 
 .inventoryList {
   display: grid;
+  height: 100%;
   grid-template-columns: 1fr 1fr;
   grid-gap: 0.5rem;
   font-family: 'NanumSquare_acR', sans-serif;
@@ -20,15 +21,18 @@
 .emptyMessage {
   display: flex;
   width: 100%;
+  height: 100%;
   font-size: 1.3rem;
   color: #d4b8f2;
   grid-column: 1 / 3;
   justify-content: center;
   align-items: center;
+  text-align: center;
 }
 
 .inventoryItem {
   position: relative;
+  height: fit-content;
   padding: 1rem;
   color: #7a6e7b;
   background-color: #d4b8f2;