From 9b0c069ec32efcb1536f5e7fe1847dcc703c8ef7 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 30 Aug 2023 15:34:18 +0900 Subject: [PATCH 1/7] =?UTF-8?q?[Style]=20[GGFE-206]=20=EB=B3=B4=EC=9C=A0?= =?UTF-8?q?=ED=95=9C=20=EC=95=84=EC=9D=B4=ED=85=9C=EC=9D=B4=20=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/store/Inventory.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss index 0aed67241..29fb4df37 100644 --- a/styles/store/Inventory.module.scss +++ b/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,11 +21,13 @@ .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 { From 94064f03ae8f5ff04071ca772e740d2c4c7a8bd0 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 30 Aug 2023 15:34:56 +0900 Subject: [PATCH 2/7] =?UTF-8?q?[Feat]=20[GGFE-206]=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=ED=85=9C=20=EB=B3=B4=EA=B4=80=ED=95=A8=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InventoryList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index 8fbfdf0a0..b5cbc9c96 100644 --- a/components/store/InventoryList.tsx +++ b/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; }); } From ec14125818d88e8c97717134444324210490d946 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 30 Aug 2023 15:41:13 +0900 Subject: [PATCH 3/7] =?UTF-8?q?[Fix]=20[GGFE-206]=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20uri=EA=B0=80=20null=20=EC=9D=B8=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20fallBack=20img=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InventoryItem.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/store/InventoryItem.tsx b/components/store/InventoryItem.tsx index a93676a22..4fb215976 100644 --- a/components/store/InventoryItem.tsx +++ b/components/store/InventoryItem.tsx @@ -82,7 +82,12 @@ export function InvetoryItem({ item }: inventoryItemProps) {
- {itemName} + {itemName}
{itemName}
From f4098d271df47b9da13cbd3eea2e5d65f423cba1 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Wed, 30 Aug 2023 15:45:06 +0900 Subject: [PATCH 4/7] =?UTF-8?q?[Style]=20[GGFE-206]=20inventoryItem=20heig?= =?UTF-8?q?ht=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/store/Inventory.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss index 29fb4df37..0a5206651 100644 --- a/styles/store/Inventory.module.scss +++ b/styles/store/Inventory.module.scss @@ -32,6 +32,7 @@ .inventoryItem { position: relative; + height: fit-content; padding: 1rem; color: #7a6e7b; background-color: #d4b8f2; From 280cc3ad515dc736df3940e4272629c459cfa735 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Thu, 31 Aug 2023 13:15:01 +0900 Subject: [PATCH 5/7] =?UTF-8?q?[Style]=20[GGFE-206]=20=EB=A7=88=EC=A7=80?= =?UTF-8?q?=EB=A7=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=95=98=EB=8B=A8=20?= =?UTF-8?q?=EA=B0=84=EA=B2=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/store/Inventory.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss index 0a5206651..045846fac 100644 --- a/styles/store/Inventory.module.scss +++ b/styles/store/Inventory.module.scss @@ -2,7 +2,7 @@ .inventoryList { display: grid; - height: 100%; + // height: 100%; grid-template-columns: 1fr 1fr; grid-gap: 0.5rem; font-family: 'NanumSquare_acR', sans-serif; From c76c28c724c9da2e6abb29245d8e4561dc9a9239 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Thu, 31 Aug 2023 13:53:34 +0900 Subject: [PATCH 6/7] =?UTF-8?q?[Feat]=20[GGFE-206]=20=EB=B9=88=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EB=AA=A9=EB=A1=9D=20=EB=9E=9C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EC=A1=B0=EA=B1=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InventoryList.tsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index b5cbc9c96..12c115bd8 100644 --- a/components/store/InventoryList.tsx +++ b/components/store/InventoryList.tsx @@ -23,20 +23,24 @@ export function InventoryList() { if (error) return
{error.message}
; if (!data) return
No data
; + if (data.pages[0].storageItemList.length === 0) { + return ( +
+ 보유한 아이템이 없습니다. +
상점 탭에서 아이템을 구입해 보세요! +
+ ); + } + return (
{data.pages.map((page, pageIndex) => ( - {page.storageItemList.length === 0 ? ( -
- 보유한 아이템이 없습니다. -
상점 탭에서 아이템을 구입해 보세요! -
- ) : ( - page.storageItemList.map((item) => ( - - )) - )} + {page.storageItemList.length === 0 + ? null + : page.storageItemList.map((item) => ( + + ))} ))} Date: Thu, 31 Aug 2023 13:58:16 +0900 Subject: [PATCH 7/7] =?UTF-8?q?[Style]=20[GGFE-206]=20=EB=B9=88=20?= =?UTF-8?q?=EB=B3=B4=EA=B4=80=ED=95=A8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/EmptyImage.tsx | 17 +++++++++++++++++ components/store/InventoryList.tsx | 8 ++++++-- styles/EmptyImage.module.scss | 19 +++++++++++++++++++ styles/store/Inventory.module.scss | 6 +++++- 4 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 components/EmptyImage.tsx create mode 100644 styles/EmptyImage.module.scss diff --git a/components/EmptyImage.tsx b/components/EmptyImage.tsx new file mode 100644 index 000000000..bdcf9133d --- /dev/null +++ b/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 ( +
+
+
+
+
+
+ +
+ ); +} + +export default EmptyImage; diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index 12c115bd8..d94c82a6e 100644 --- a/components/store/InventoryList.tsx +++ b/components/store/InventoryList.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { instance } from 'utils/axios'; import { InfinityScroll } from 'utils/infinityScroll'; +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'; @@ -26,8 +27,11 @@ export function InventoryList() { if (data.pages[0].storageItemList.length === 0) { return (
- 보유한 아이템이 없습니다. -
상점 탭에서 아이템을 구입해 보세요! +

+ 보유한 아이템이 없습니다. +
상점 탭에서 아이템을 구입해 보세요! +

+
); } diff --git a/styles/EmptyImage.module.scss b/styles/EmptyImage.module.scss new file mode 100644 index 000000000..8876e8a9c --- /dev/null +++ b/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%; +} diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss index 045846fac..2405bbefc 100644 --- a/styles/store/Inventory.module.scss +++ b/styles/store/Inventory.module.scss @@ -22,12 +22,16 @@ 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; - text-align: center; + p { + margin: 0 0 3rem; + } } .inventoryItem {