Merge pull request #967 from 42organization/GGFE-206-아이템-보관함-조회-api-연결

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

components/EmptyImage.tsx

@@ -0,0 +1,17 @@
+import NotiEmptyEmoji from 'public/image/noti_empty.svg';
+import styles from 'styles/EmptyImage.module.scss';
+
+function EmptyImage() {
+  return (
+    <div className={styles.emptyWrapper}>
+      <div className={styles.threeDots}>
+        <div className={styles.dot}></div>
+        <div className={styles.dot}></div>
+        <div className={styles.dot}></div>
+      </div>
+      <NotiEmptyEmoji />
+    </div>
+  );
+}
+
+export default EmptyImage;

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,13 @@
 import React from 'react';
+import { instance } from 'utils/axios';
 import { InfinityScroll } from 'utils/infinityScroll';
-import { mockInstance } from 'utils/mockAxios';
+import EmptyImage from 'components/EmptyImage';
 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;
   });
 }
@@ -23,20 +24,27 @@ export function InventoryList() {
   if (error) return <div>{error.message}</div>;
   if (!data) return <div>No data</div>;
 
+  if (data.pages[0].storageItemList.length === 0) {
+    return (
+      <div className={styles.emptyMessage}>
+        <p>
+          보유한 아이템이 없습니다.
+          <br /> 상점 탭에서 아이템을 구입해 보세요!
+        </p>
+        <EmptyImage />
+      </div>
+    );
+  }
+
   return (
     <div className={styles.inventoryList}>
       {data.pages.map((page, pageIndex) => (
         <React.Fragment key={pageIndex}>
-          {page.storageItemList.length === 0 ? (
-            <div className={styles.emptyMessage}>
-              보유한 아이템이 없습니다.
-              <br /> 상점 탭에서 아이템을 구입해 보세요!
-            </div>
-          ) : (
-            page.storageItemList.map((item) => (
-              <InvetoryItem key={item.receiptId} item={item} />
-            ))
-          )}
+          {page.storageItemList.length === 0
+            ? null
+            : page.storageItemList.map((item) => (
+                <InvetoryItem key={item.receiptId} item={item} />
+              ))}
         </React.Fragment>
       ))}
       <InfiniteScrollComponent

styles/EmptyImage.module.scss

@@ -0,0 +1,19 @@
+.emptyWrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  align-items: center;
+}
+
+.threeDots {
+  display: flex;
+  gap: 2.5rem;
+  margin-bottom: 2rem;
+}
+
+.dot {
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: rgb(169, 128, 175);
+  border-radius: 50%;
+}

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,22 @@
 .emptyMessage {
   display: flex;
   width: 100%;
+  height: 100%;
+  flex-direction: column;
   font-size: 1.3rem;
   color: #d4b8f2;
+  text-align: center;
   grid-column: 1 / 3;
   justify-content: center;
   align-items: center;
+  p {
+    margin: 0 0 3rem;
+  }
 }
 
 .inventoryItem {
   position: relative;
+  height: fit-content;
   padding: 1rem;
   color: #7a6e7b;
   background-color: #d4b8f2;