From d0b37afe033aec37af88bc9da74cfc7df2586f10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Tue, 1 Aug 2023 10:52:59 +0900 Subject: [PATCH 01/35] add temp-admin --- components/admin/SideNav.tsx | 27 ++++++++++ .../purchaseHistory.tsx/MegaphoneList.tsx | 50 +++++++++++++++++++ .../admin/purchaseHistory.tsx/MenuTab.tsx | 40 +++++++++++++++ .../admin/purchaseHistory.tsx/ProfileList.tsx | 50 +++++++++++++++++++ .../purchaseHistory.tsx/PurchaseList.tsx | 49 ++++++++++++++++++ components/admin/store/StoreMain.tsx | 45 +++++++++++++++++ pages/admin/purchaseHistory.tsx | 11 ++++ pages/admin/store.tsx | 11 ++++ 8 files changed, 283 insertions(+) create mode 100644 components/admin/purchaseHistory.tsx/MegaphoneList.tsx create mode 100644 components/admin/purchaseHistory.tsx/MenuTab.tsx create mode 100644 components/admin/purchaseHistory.tsx/ProfileList.tsx create mode 100644 components/admin/purchaseHistory.tsx/PurchaseList.tsx create mode 100644 components/admin/store/StoreMain.tsx create mode 100644 pages/admin/purchaseHistory.tsx create mode 100644 pages/admin/store.tsx diff --git a/components/admin/SideNav.tsx b/components/admin/SideNav.tsx index 11413bedf..4eac17be3 100644 --- a/components/admin/SideNav.tsx +++ b/components/admin/SideNav.tsx @@ -10,6 +10,9 @@ import { GrAnnounce, } from 'react-icons/gr'; import { IoGameControllerOutline } from 'react-icons/io5'; +import { IoReceiptOutline } from 'react-icons/io5'; +import { BsShop } from 'react-icons/bs'; +import { TbCoin } from 'react-icons/tb'; import styles from 'styles/admin/SideNav.module.scss'; export default function SideNav() { @@ -80,6 +83,30 @@ export default function SideNav() { > + + + + + + + + + + + + ); } diff --git a/components/admin/purchaseHistory.tsx/MegaphoneList.tsx b/components/admin/purchaseHistory.tsx/MegaphoneList.tsx new file mode 100644 index 000000000..62c585d30 --- /dev/null +++ b/components/admin/purchaseHistory.tsx/MegaphoneList.tsx @@ -0,0 +1,50 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + + +const megaPhoneTableTitle: { [key: string]: string } = { + id: 'ID', + usageTime: '사용 시간', + userIntraId: '사용자 id', + content: '내용', + status: '사용 상태', + delete: '삭제' +} + +function MegaphoneList () { + + const test = [ 'id', + 'usageTime', + 'userIntraId', + 'content', + 'status', + 'delete'] + + return ( + <> + + + + + {test.map((content, idx) => ( + + {megaPhoneTableTitle[content]} + + ))} + + +
+ + + + ) +} + +export default MegaphoneList; diff --git a/components/admin/purchaseHistory.tsx/MenuTab.tsx b/components/admin/purchaseHistory.tsx/MenuTab.tsx new file mode 100644 index 000000000..a0565ef03 --- /dev/null +++ b/components/admin/purchaseHistory.tsx/MenuTab.tsx @@ -0,0 +1,40 @@ +import { useEffect, useState } from "react"; +import PurchaseList from "./PurchaseList"; +import MegaphoneList from "./MegaphoneList"; +import ProfileList from "./ProfileList"; + + +function MenuTab() { + + const tabContents = ['구매내역', '확성기', '프로필']; + + const [tab, setTab] = useState('구매내역'); + + const [child, setChild] = useState(); + + useEffect(() => { + if (tab === '구매내역') + setChild(); + if (tab === '확성기') + setChild(); + if (tab === '프로필') + setChild(); + }, [tab]); + + return ( + <> + {tabContents.map((content, idx) => { + return ( + + ) + })} + {child} + + ) + + +} + +export default MenuTab; \ No newline at end of file diff --git a/components/admin/purchaseHistory.tsx/ProfileList.tsx b/components/admin/purchaseHistory.tsx/ProfileList.tsx new file mode 100644 index 000000000..c5c10c455 --- /dev/null +++ b/components/admin/purchaseHistory.tsx/ProfileList.tsx @@ -0,0 +1,50 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + + +const profileTableTitle: { [key: string]: string } = { + id: 'ID', + usageTime: '사용 시간', + userIntraId: '사용자 id', + content: '현재 이미지', + status: '사용 상태', + delete: '삭제' +} + +function ProfileList () { + + const test = [ 'id', + 'usageTime', + 'userIntraId', + 'content', + 'status', + 'delete'] + + return ( + <> + + + + + {test.map((content, idx) => ( + + {profileTableTitle[content]} + + ))} + + +
+ + + + ) +} + +export default ProfileList; diff --git a/components/admin/purchaseHistory.tsx/PurchaseList.tsx b/components/admin/purchaseHistory.tsx/PurchaseList.tsx new file mode 100644 index 000000000..e2bce79a4 --- /dev/null +++ b/components/admin/purchaseHistory.tsx/PurchaseList.tsx @@ -0,0 +1,49 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + + +const purchaseListTableTitle: { [key: string]: string } = { + id: 'ID', + transactionTime: '구매 시간', + buyerIntraId: '구매자 id', + itemName: '이름', + itemStatus: '사용 상태', + itemSetting: '설정' +} + +function PurchaseList () { + + const test = [ 'id', + 'transactionTime', + 'buyerIntraId', + 'itemName', + 'itemStatus', + 'itemSetting'] + + return ( + <> + + + + + {test.map((content, idx) => ( + + {purchaseListTableTitle[content]} + + ))} + + +
+ + + ) +} + +export default PurchaseList; diff --git a/components/admin/store/StoreMain.tsx b/components/admin/store/StoreMain.tsx new file mode 100644 index 000000000..f2c29fdba --- /dev/null +++ b/components/admin/store/StoreMain.tsx @@ -0,0 +1,45 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + + + +const changeHistoryTableTitle: { [key: string]: string} = { + itemName: '아이템 이름', + modifiedInfo: '수정된 정보', + modifiedBy: '수정한 사람', + modifiedAt: '수정된 날짜' +} + + +function StoreMain () { + + const test = ['itemName', 'modifiedInfo', + 'modifiedBy', 'modifiedAt']; + + return ( + <> + + + + + {test.map((content, idx) => ( + + {changeHistoryTableTitle[content]} + + ))} + + +
+ + + ) +} + +export default StoreMain; \ No newline at end of file diff --git a/pages/admin/purchaseHistory.tsx b/pages/admin/purchaseHistory.tsx new file mode 100644 index 000000000..9717e4c37 --- /dev/null +++ b/pages/admin/purchaseHistory.tsx @@ -0,0 +1,11 @@ +import MenuTab from "components/admin/purchaseHistory.tsx/MenuTab"; + + + +export default function PurchaseHistory() { + return ( + <> + + + ) +} \ No newline at end of file diff --git a/pages/admin/store.tsx b/pages/admin/store.tsx new file mode 100644 index 000000000..fe1067836 --- /dev/null +++ b/pages/admin/store.tsx @@ -0,0 +1,11 @@ +import StoreMain from "components/admin/store/StoreMain"; + + +function Store () { + + return ( + + ) +} + +export default Store; \ No newline at end of file From 15b84f0cc640bef7a389e289b271e8db5d9e3560 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Wed, 2 Aug 2023 10:44:37 +0900 Subject: [PATCH 02/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EC=83=81=EC=A0=90,?= =?UTF-8?q?=20=EC=9E=AC=ED=99=94=EC=A0=95=EC=B1=85=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../purchaseHistory.tsx/MegaphoneList.tsx | 5 ++ .../admin/purchaseHistory.tsx/MenuTab.tsx | 27 ++++++---- .../admin/purchaseHistory.tsx/ProfileList.tsx | 5 ++ .../purchaseHistory.tsx/PurchaseList.tsx | 5 ++ components/admin/store/ChangeHistory.tsx | 50 +++++++++++++++++++ components/admin/store/ItemList.tsx | 39 +++++++++++++++ components/admin/store/StoreMain.tsx | 43 ++++------------ pages/admin/coin.tsx | 7 +++ pages/login.tsx | 5 ++ .../admin/purchaseHistory/MenuTab.module.scss | 11 ++++ 10 files changed, 156 insertions(+), 41 deletions(-) create mode 100644 components/admin/store/ChangeHistory.tsx create mode 100644 components/admin/store/ItemList.tsx create mode 100644 pages/admin/coin.tsx create mode 100644 styles/admin/purchaseHistory/MenuTab.module.scss diff --git a/components/admin/purchaseHistory.tsx/MegaphoneList.tsx b/components/admin/purchaseHistory.tsx/MegaphoneList.tsx index 62c585d30..c55fe8775 100644 --- a/components/admin/purchaseHistory.tsx/MegaphoneList.tsx +++ b/components/admin/purchaseHistory.tsx/MegaphoneList.tsx @@ -40,6 +40,11 @@ function MegaphoneList () { ))} + + + 비어있습니다 + + diff --git a/components/admin/purchaseHistory.tsx/MenuTab.tsx b/components/admin/purchaseHistory.tsx/MenuTab.tsx index a0565ef03..cb07a8240 100644 --- a/components/admin/purchaseHistory.tsx/MenuTab.tsx +++ b/components/admin/purchaseHistory.tsx/MenuTab.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import PurchaseList from "./PurchaseList"; import MegaphoneList from "./MegaphoneList"; import ProfileList from "./ProfileList"; - +import styles from "styles/admin/purchaseHistory/MenuTab.module.scss"; function MenuTab() { @@ -23,14 +23,23 @@ function MenuTab() { return ( <> - {tabContents.map((content, idx) => { - return ( - - ) - })} - {child} +
+

+ 거래내역 관리 +

+
+ {tabContents.map((content, idx) => { + return ( + + ) + })} +
+
+
+ {child} +
) diff --git a/components/admin/purchaseHistory.tsx/ProfileList.tsx b/components/admin/purchaseHistory.tsx/ProfileList.tsx index c5c10c455..b4187a38c 100644 --- a/components/admin/purchaseHistory.tsx/ProfileList.tsx +++ b/components/admin/purchaseHistory.tsx/ProfileList.tsx @@ -40,6 +40,11 @@ function ProfileList () { ))} + + + 비어있습니다 + + diff --git a/components/admin/purchaseHistory.tsx/PurchaseList.tsx b/components/admin/purchaseHistory.tsx/PurchaseList.tsx index e2bce79a4..fde9ada1b 100644 --- a/components/admin/purchaseHistory.tsx/PurchaseList.tsx +++ b/components/admin/purchaseHistory.tsx/PurchaseList.tsx @@ -40,6 +40,11 @@ function PurchaseList () { ))} + + + 비어있습니다 + + diff --git a/components/admin/store/ChangeHistory.tsx b/components/admin/store/ChangeHistory.tsx new file mode 100644 index 000000000..0d5116cae --- /dev/null +++ b/components/admin/store/ChangeHistory.tsx @@ -0,0 +1,50 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + + + +const changeHistoryTableTitle: { [key: string]: string} = { + itemName: '아이템 이름', + modifiedInfo: '수정된 정보', + modifiedBy: '수정한 사람', + modifiedAt: '수정된 날짜' +} + + +function ChangeHistory () { + + const test = ['itemName', 'modifiedInfo', + 'modifiedBy', 'modifiedAt']; + + return ( + <> + + + + + {test.map((content, idx) => ( + + {changeHistoryTableTitle[content]} + + ))} + + + + + 비어있습니다 + + +
+ + + ) +} + +export default ChangeHistory; \ No newline at end of file diff --git a/components/admin/store/ItemList.tsx b/components/admin/store/ItemList.tsx new file mode 100644 index 000000000..e9a00377f --- /dev/null +++ b/components/admin/store/ItemList.tsx @@ -0,0 +1,39 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + + + +function ItemList () { + + return ( + <> + + + {/* + + {test.map((content, idx) => ( + + {changeHistoryTableTitle[content]} + + ))} + + */} + + + 비어있습니다 + + +
+ + + ) +} + +export default ItemList; \ No newline at end of file diff --git a/components/admin/store/StoreMain.tsx b/components/admin/store/StoreMain.tsx index f2c29fdba..4361f7c4d 100644 --- a/components/admin/store/StoreMain.tsx +++ b/components/admin/store/StoreMain.tsx @@ -1,43 +1,22 @@ -import { - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, -} from '@mui/material'; +import ItemList from "./ItemList"; +import ChangeHistory from "./changeHistory"; -const changeHistoryTableTitle: { [key: string]: string} = { - itemName: '아이템 이름', - modifiedInfo: '수정된 정보', - modifiedBy: '수정한 사람', - modifiedAt: '수정된 날짜' -} - - function StoreMain () { - const test = ['itemName', 'modifiedInfo', - 'modifiedBy', 'modifiedAt']; return ( <> - - - - - {test.map((content, idx) => ( - - {changeHistoryTableTitle[content]} - - ))} - - -
- +

상점 관리

+
+

아이템 목록

+ +
+
+

변경 이력

+ +
) } diff --git a/pages/admin/coin.tsx b/pages/admin/coin.tsx new file mode 100644 index 000000000..24645e775 --- /dev/null +++ b/pages/admin/coin.tsx @@ -0,0 +1,7 @@ +export default function Coin() { + return ( + <> + + + ) +} \ No newline at end of file diff --git a/pages/login.tsx b/pages/login.tsx index 5515dbaad..4c02acb38 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -3,6 +3,8 @@ import { useRouter } from 'next/router'; import { useEffect } from 'react'; import StyledButton from 'components/StyledButton'; import styles from 'styles/Login.module.scss'; +import MenuTab from 'components/admin/purchaseHistory.tsx/MenuTab'; +import StoreMain from 'components/admin/store/StoreMain'; function Login() { const router = useRouter(); @@ -27,6 +29,9 @@ function Login() { return ( <> + {/* */} + {/* */} +
diff --git a/styles/admin/purchaseHistory/MenuTab.module.scss b/styles/admin/purchaseHistory/MenuTab.module.scss new file mode 100644 index 000000000..4c23faa92 --- /dev/null +++ b/styles/admin/purchaseHistory/MenuTab.module.scss @@ -0,0 +1,11 @@ +.top { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.tab { + width: 50%; + height: 100%; +} \ No newline at end of file From cc7b11ff5640ac5c3706de847484446f0357e5d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Wed, 2 Aug 2023 15:59:59 +0900 Subject: [PATCH 03/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EC=83=81=EC=A0=90?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=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/admin/store/StoreMain.tsx | 17 +++++++++-------- pages/admin/store.tsx | 4 +--- styles/admin/store/StoreMain.module.scss | 21 +++++++++++++++++++++ 3 files changed, 31 insertions(+), 11 deletions(-) create mode 100644 styles/admin/store/StoreMain.module.scss diff --git a/components/admin/store/StoreMain.tsx b/components/admin/store/StoreMain.tsx index 4361f7c4d..6feb1f655 100644 --- a/components/admin/store/StoreMain.tsx +++ b/components/admin/store/StoreMain.tsx @@ -1,23 +1,24 @@ import ItemList from "./ItemList"; -import ChangeHistory from "./changeHistory"; - - +import ChangeHistory from "./ChangeHistory"; +import styles from "styles/admin/store/StoreMain.module.scss"; function StoreMain () { return ( - <> -

상점 관리

-
+
+
+

상점 관리

+
+

아이템 목록

-
+

변경 이력

- +
) } diff --git a/pages/admin/store.tsx b/pages/admin/store.tsx index fe1067836..8a4850873 100644 --- a/pages/admin/store.tsx +++ b/pages/admin/store.tsx @@ -1,11 +1,9 @@ import StoreMain from "components/admin/store/StoreMain"; -function Store () { +export default function Store () { return ( ) } - -export default Store; \ No newline at end of file diff --git a/styles/admin/store/StoreMain.module.scss b/styles/admin/store/StoreMain.module.scss new file mode 100644 index 000000000..569ef90d1 --- /dev/null +++ b/styles/admin/store/StoreMain.module.scss @@ -0,0 +1,21 @@ +.mainContainer { + display: flex; + flex-direction: column; + position: relative; + left: 10%; + width: 80%; + height: 100%; + + + + // background-color: blue; +} + +.title { + width: 100%; + // background-color: green; + h2 { + width: fit-content; + // background-color: yellow; + } +} \ No newline at end of file From 804748be070043cd764718bd6e8e7f48ecc59fdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Wed, 2 Aug 2023 17:13:20 +0900 Subject: [PATCH 04/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EA=B1=B0=EB=9E=98?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/purchaseHistory.tsx/MenuTab.tsx | 63 +++++++++++-------- .../admin/purchaseHistory/MenuTab.module.scss | 38 +++++++++-- styles/admin/store/StoreMain.module.scss | 6 -- 3 files changed, 70 insertions(+), 37 deletions(-) diff --git a/components/admin/purchaseHistory.tsx/MenuTab.tsx b/components/admin/purchaseHistory.tsx/MenuTab.tsx index cb07a8240..c2e66ee0a 100644 --- a/components/admin/purchaseHistory.tsx/MenuTab.tsx +++ b/components/admin/purchaseHistory.tsx/MenuTab.tsx @@ -6,44 +6,55 @@ import styles from "styles/admin/purchaseHistory/MenuTab.module.scss"; function MenuTab() { - const tabContents = ['구매내역', '확성기', '프로필']; - - const [tab, setTab] = useState('구매내역'); - + const tabContents = [ + { + contentId: 0, + contentName: '구매내역', + }, + { + contentId: 1, + contentName: '확성기', + }, + { + contentId: 2, + contentName: '프로필', + } + ]; + + const [tabIdx, setTabIdx] = useState(0); + const [child, setChild] = useState(); useEffect(() => { - if (tab === '구매내역') + if (tabIdx === 0) setChild(); - if (tab === '확성기') + if (tabIdx === 1) setChild(); - if (tab === '프로필') + if (tabIdx === 2) setChild(); - }, [tab]); + }, [tabIdx]); + return ( - <> -
-

- 거래내역 관리 -

-
- {tabContents.map((content, idx) => { - return ( - - ) - })} -
+
+
+

거래내역 관리

-
+
    + {tabContents.map(content => ( +
  • setTabIdx(content.contentId)} + > + {content.contentName} +
    • + ))} +
+
{child}
- +
) - - } export default MenuTab; \ No newline at end of file diff --git a/styles/admin/purchaseHistory/MenuTab.module.scss b/styles/admin/purchaseHistory/MenuTab.module.scss index 4c23faa92..f8d1c20a9 100644 --- a/styles/admin/purchaseHistory/MenuTab.module.scss +++ b/styles/admin/purchaseHistory/MenuTab.module.scss @@ -1,11 +1,39 @@ -.top { +.mainContainer { + position: relative; + width: 80%; + height: 100%; + left: 10%; + display: flex; + flex-direction: column; +} + +.title { + width: 100%; + h2 { + width: fit-content; + } +} + +.tabMenu { width: 100%; + // background-color: green; + height: 3rem; display: flex; - justify-content: space-between; + flex-direction: row; + justify-content: space-around; align-items: center; } -.tab { - width: 50%; - height: 100%; +.active { + text-decoration: underline; + text-underline-offset: 0.4rem; + cursor: pointer; +} + +.inactive { + cursor: pointer; +} + +.subContainer { + } \ No newline at end of file diff --git a/styles/admin/store/StoreMain.module.scss b/styles/admin/store/StoreMain.module.scss index 569ef90d1..5d7b1fa08 100644 --- a/styles/admin/store/StoreMain.module.scss +++ b/styles/admin/store/StoreMain.module.scss @@ -5,17 +5,11 @@ left: 10%; width: 80%; height: 100%; - - - - // background-color: blue; } .title { width: 100%; - // background-color: green; h2 { width: fit-content; - // background-color: yellow; } } \ No newline at end of file From 49d12ac1bacf2be0e277e8a5f20afb9d0f18203c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Wed, 2 Aug 2023 17:37:13 +0900 Subject: [PATCH 05/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EC=9E=AC=ED=99=94?= =?UTF-8?q?=EC=A0=95=EC=B1=85=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/SideNav.tsx | 2 +- components/admin/coin/CoinMain.tsx | 21 ++++++++ components/admin/coin/CoinPolicy.tsx | 50 +++++++++++++++++ components/admin/coin/CoinPolicyHistory.tsx | 53 +++++++++++++++++++ pages/admin/coin.tsx | 6 ++- pages/admin/store.tsx | 4 +- styles/admin/coin/CoinMain.module.scss | 16 ++++++ styles/admin/coin/CoinPolicy.module.scss | 0 .../admin/coin/CoinPolicyHistory.module.scss | 0 .../admin/purchaseHistory/MenuTab.module.scss | 4 +- 10 files changed, 150 insertions(+), 6 deletions(-) create mode 100644 components/admin/coin/CoinMain.tsx create mode 100644 components/admin/coin/CoinPolicy.tsx create mode 100644 components/admin/coin/CoinPolicyHistory.tsx create mode 100644 styles/admin/coin/CoinMain.module.scss create mode 100644 styles/admin/coin/CoinPolicy.module.scss create mode 100644 styles/admin/coin/CoinPolicyHistory.module.scss diff --git a/components/admin/SideNav.tsx b/components/admin/SideNav.tsx index 4eac17be3..f8726ac33 100644 --- a/components/admin/SideNav.tsx +++ b/components/admin/SideNav.tsx @@ -101,7 +101,7 @@ export default function SideNav() { diff --git a/components/admin/coin/CoinMain.tsx b/components/admin/coin/CoinMain.tsx new file mode 100644 index 000000000..2c6abb147 --- /dev/null +++ b/components/admin/coin/CoinMain.tsx @@ -0,0 +1,21 @@ +import styles from "styles/admin/coin/CoinMain.module.scss"; +import CoinPolicy from "./CoinPolicy"; +import CoinPolicyHistory from "./CoinPolicyHistory"; + +export default function CoinMain () { + return ( +
+
+

재화 정책 관리

+
+
+

재화 정책 변경

+ +
+
+

재화 정책 변경 이력

+ +
+
+ ) +} diff --git a/components/admin/coin/CoinPolicy.tsx b/components/admin/coin/CoinPolicy.tsx new file mode 100644 index 000000000..f98967296 --- /dev/null +++ b/components/admin/coin/CoinPolicy.tsx @@ -0,0 +1,50 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + + +const coinPolicyTableTitle: { [key: string]: string} = { + attendance : '출석 획득 코인', + normal : '일반게임 획득 코인', + rankWin : '랭크게임 승리 획득 코인', + rankLose : '랭크게임 패배 획득 코인' +} + + + +function CoinPolicy () { + + const test = ['attendance', 'normal', + 'rankWin', 'rankLose']; + + return ( + <> + + + + + {test.map((content, idx) => ( + + {coinPolicyTableTitle[content]} + + ))} + + + + + 비어있습니다 + + +
+ + + ) +} + +export default CoinPolicy; \ No newline at end of file diff --git a/components/admin/coin/CoinPolicyHistory.tsx b/components/admin/coin/CoinPolicyHistory.tsx new file mode 100644 index 000000000..a417a0949 --- /dev/null +++ b/components/admin/coin/CoinPolicyHistory.tsx @@ -0,0 +1,53 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + + + +const coinPolicyHistoryTableTitle: { [key: string]: string} = { + coinpollicyId : '정책 id', + createUser : '등록 유저', + attendance : '출석 획득 코인', + nomal : '일반게임 획득 코인', + rank_win : '랭크게임 승리 획득 코인', + rank_lose : '랭크게임 패배 획득 코인', + created_at : '등록 날짜' +} + + +function CoinPolicyHistory () { + + const test = ['attendance', 'normal', + 'rankWin', 'rankLose']; + + return ( + <> + + + + + {test.map((content, idx) => ( + + {coinPolicyHistoryTableTitle[content]} + + ))} + + + + + 비어있습니다 + + +
+ + + ) +} + +export default CoinPolicyHistory; \ No newline at end of file diff --git a/pages/admin/coin.tsx b/pages/admin/coin.tsx index 24645e775..569df2b8f 100644 --- a/pages/admin/coin.tsx +++ b/pages/admin/coin.tsx @@ -1,7 +1,9 @@ +import CoinMain from "components/admin/coin/CoinMain"; + export default function Coin() { return ( <> - + ) -} \ No newline at end of file +} diff --git a/pages/admin/store.tsx b/pages/admin/store.tsx index 8a4850873..5e1fe7eef 100644 --- a/pages/admin/store.tsx +++ b/pages/admin/store.tsx @@ -4,6 +4,8 @@ import StoreMain from "components/admin/store/StoreMain"; export default function Store () { return ( - + <> + + ) } diff --git a/styles/admin/coin/CoinMain.module.scss b/styles/admin/coin/CoinMain.module.scss new file mode 100644 index 000000000..9dc132bdd --- /dev/null +++ b/styles/admin/coin/CoinMain.module.scss @@ -0,0 +1,16 @@ +.mainContainer { + position: relative; + width: 80%; + height: 100%; + left: 10%; + display: flex; + flex-direction: column; +} + +.title { + width: 100%; + + h2 { + width: fit-content; + } +} diff --git a/styles/admin/coin/CoinPolicy.module.scss b/styles/admin/coin/CoinPolicy.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/styles/admin/coin/CoinPolicyHistory.module.scss b/styles/admin/coin/CoinPolicyHistory.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/styles/admin/purchaseHistory/MenuTab.module.scss b/styles/admin/purchaseHistory/MenuTab.module.scss index f8d1c20a9..788fa0aec 100644 --- a/styles/admin/purchaseHistory/MenuTab.module.scss +++ b/styles/admin/purchaseHistory/MenuTab.module.scss @@ -16,12 +16,12 @@ .tabMenu { width: 100%; - // background-color: green; height: 3rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; + font-weight: 500; } .active { @@ -35,5 +35,5 @@ } .subContainer { - + } \ No newline at end of file From c98bd5a32002393f71f9ffce743f04163d5fbb22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Wed, 2 Aug 2023 17:42:32 +0900 Subject: [PATCH 06/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EC=9E=AC=ED=99=94?= =?UTF-8?q?=EC=A0=95=EC=B1=85=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/coin/CoinPolicy.tsx | 8 ++++---- components/admin/coin/CoinPolicyHistory.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/admin/coin/CoinPolicy.tsx b/components/admin/coin/CoinPolicy.tsx index f98967296..66e11a695 100644 --- a/components/admin/coin/CoinPolicy.tsx +++ b/components/admin/coin/CoinPolicy.tsx @@ -10,10 +10,10 @@ import { const coinPolicyTableTitle: { [key: string]: string} = { - attendance : '출석 획득 코인', - normal : '일반게임 획득 코인', - rankWin : '랭크게임 승리 획득 코인', - rankLose : '랭크게임 패배 획득 코인' + attendance : '출석 획득', + normal : '일반게임 획득', + rankWin : '랭크게임 승리 획득', + rankLose : '랭크게임 패배 획득' } diff --git a/components/admin/coin/CoinPolicyHistory.tsx b/components/admin/coin/CoinPolicyHistory.tsx index a417a0949..4a3fc3972 100644 --- a/components/admin/coin/CoinPolicyHistory.tsx +++ b/components/admin/coin/CoinPolicyHistory.tsx @@ -13,10 +13,10 @@ import { const coinPolicyHistoryTableTitle: { [key: string]: string} = { coinpollicyId : '정책 id', createUser : '등록 유저', - attendance : '출석 획득 코인', - nomal : '일반게임 획득 코인', - rank_win : '랭크게임 승리 획득 코인', - rank_lose : '랭크게임 패배 획득 코인', + attendance : '출석 획득', + nomal : '일반게임 획득', + rank_win : '랭크게임 승리 획득', + rank_lose : '랭크게임 패배 획득', created_at : '등록 날짜' } From 4a2cdd0c6cd27e4d41222390f1c1afd966f3adb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Thu, 3 Aug 2023 10:26:57 +0900 Subject: [PATCH 07/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EA=B4=80=EB=A6=AC?= =?UTF-8?q?=EC=9E=90=20=EC=9E=AC=ED=99=94=EC=A0=95=EC=B1=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/coin/CoinPolicyHistory.tsx | 85 +++++++++++---------- 1 file changed, 44 insertions(+), 41 deletions(-) diff --git a/components/admin/coin/CoinPolicyHistory.tsx b/components/admin/coin/CoinPolicyHistory.tsx index 4a3fc3972..f02c36a6d 100644 --- a/components/admin/coin/CoinPolicyHistory.tsx +++ b/components/admin/coin/CoinPolicyHistory.tsx @@ -8,46 +8,49 @@ import { TableRow, } from '@mui/material'; - - -const coinPolicyHistoryTableTitle: { [key: string]: string} = { - coinpollicyId : '정책 id', - createUser : '등록 유저', - attendance : '출석 획득', - nomal : '일반게임 획득', - rank_win : '랭크게임 승리 획득', - rank_lose : '랭크게임 패배 획득', - created_at : '등록 날짜' -} - - -function CoinPolicyHistory () { - - const test = ['attendance', 'normal', - 'rankWin', 'rankLose']; - - return ( - <> - - - - - {test.map((content, idx) => ( - - {coinPolicyHistoryTableTitle[content]} - - ))} - - - - - 비어있습니다 - - -
- - - ) +const coinPolicyHistoryTableTitle: { [key: string]: string } = { + coinPolicyId: '정책 id', + createUser: '등록 유저', + attendance: '출석 획득', + nomal: '일반게임 획득', + rank_win: '랭크게임 승리 획득', + rank_lose: '랭크게임 패배 획득', + created_at: '등록 날짜', +}; + +function CoinPolicyHistory() { + const test = [ + 'coinPolicyId', + 'createUser', + 'attendance', + 'normal', + 'rank_win', + 'rank_lose', + 'created_at', + ]; + + return ( + <> + + + + + {test.map((content, idx) => ( + + {coinPolicyHistoryTableTitle[content]} + + ))} + + + + + 비어있습니다 + + +
+ + + ); } -export default CoinPolicyHistory; \ No newline at end of file +export default CoinPolicyHistory; From f23f211940e9cfc40da4725333101f4e2f7522c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Thu, 3 Aug 2023 16:12:00 +0900 Subject: [PATCH 08/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EA=B4=80=EB=A6=AC?= =?UTF-8?q?=EC=9E=90=20=ED=99=95=EC=84=B1=EA=B8=B0=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?mock=20api=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/SideNav.tsx | 22 +-- .../purchaseHistory.tsx/MegaphoneList.tsx | 55 ------- .../admin/purchaseHistory.tsx/MenuTab.tsx | 60 ------- .../admin/purchaseHistory.tsx/ProfileList.tsx | 55 ------- .../purchaseHistory.tsx/PurchaseList.tsx | 54 ------- components/admin/receipt/MegaphoneList.tsx | 125 +++++++++++++++ components/admin/receipt/MenuTab.tsx | 54 +++++++ components/admin/receipt/ProfileList.tsx | 52 ++++++ components/admin/receipt/ReceiptList.tsx | 121 ++++++++++++++ .../modal/admin/AdminDeleteMegaphoneModal.tsx | 28 ++++ constants/admin/table.ts | 20 +++ pages/admin/purchaseHistory.tsx | 11 -- pages/admin/receipt.tsx | 9 ++ .../admin/megaphones/[megaphoneId].ts | 11 ++ .../admin/megaphones/history/index.ts | 114 ++++++++++++++ pages/api/pingpong/admin/receipt/index.ts | 149 ++++++++++++++++++ pages/login.tsx | 4 +- tsconfig.json | 5 +- types/admin/adminReceiptType.ts | 33 ++++ types/admin/tableTypes.ts | 5 +- types/modalTypes.ts | 2 + 21 files changed, 738 insertions(+), 251 deletions(-) delete mode 100644 components/admin/purchaseHistory.tsx/MegaphoneList.tsx delete mode 100644 components/admin/purchaseHistory.tsx/MenuTab.tsx delete mode 100644 components/admin/purchaseHistory.tsx/ProfileList.tsx delete mode 100644 components/admin/purchaseHistory.tsx/PurchaseList.tsx create mode 100644 components/admin/receipt/MegaphoneList.tsx create mode 100644 components/admin/receipt/MenuTab.tsx create mode 100644 components/admin/receipt/ProfileList.tsx create mode 100644 components/admin/receipt/ReceiptList.tsx create mode 100644 components/modal/admin/AdminDeleteMegaphoneModal.tsx delete mode 100644 pages/admin/purchaseHistory.tsx create mode 100644 pages/admin/receipt.tsx create mode 100644 pages/api/pingpong/admin/megaphones/[megaphoneId].ts create mode 100644 pages/api/pingpong/admin/megaphones/history/index.ts create mode 100644 pages/api/pingpong/admin/receipt/index.ts create mode 100644 types/admin/adminReceiptType.ts diff --git a/components/admin/SideNav.tsx b/components/admin/SideNav.tsx index f8726ac33..8fafa6f6b 100644 --- a/components/admin/SideNav.tsx +++ b/components/admin/SideNav.tsx @@ -85,27 +85,27 @@ export default function SideNav() { - + - +
); diff --git a/components/admin/purchaseHistory.tsx/MegaphoneList.tsx b/components/admin/purchaseHistory.tsx/MegaphoneList.tsx deleted file mode 100644 index c55fe8775..000000000 --- a/components/admin/purchaseHistory.tsx/MegaphoneList.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, -} from '@mui/material'; - - -const megaPhoneTableTitle: { [key: string]: string } = { - id: 'ID', - usageTime: '사용 시간', - userIntraId: '사용자 id', - content: '내용', - status: '사용 상태', - delete: '삭제' -} - -function MegaphoneList () { - - const test = [ 'id', - 'usageTime', - 'userIntraId', - 'content', - 'status', - 'delete'] - - return ( - <> - - - - - {test.map((content, idx) => ( - - {megaPhoneTableTitle[content]} - - ))} - - - - - 비어있습니다 - - -
- - - - ) -} - -export default MegaphoneList; diff --git a/components/admin/purchaseHistory.tsx/MenuTab.tsx b/components/admin/purchaseHistory.tsx/MenuTab.tsx deleted file mode 100644 index c2e66ee0a..000000000 --- a/components/admin/purchaseHistory.tsx/MenuTab.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { useEffect, useState } from "react"; -import PurchaseList from "./PurchaseList"; -import MegaphoneList from "./MegaphoneList"; -import ProfileList from "./ProfileList"; -import styles from "styles/admin/purchaseHistory/MenuTab.module.scss"; - -function MenuTab() { - - const tabContents = [ - { - contentId: 0, - contentName: '구매내역', - }, - { - contentId: 1, - contentName: '확성기', - }, - { - contentId: 2, - contentName: '프로필', - } - ]; - - const [tabIdx, setTabIdx] = useState(0); - - const [child, setChild] = useState(); - - useEffect(() => { - if (tabIdx === 0) - setChild(); - if (tabIdx === 1) - setChild(); - if (tabIdx === 2) - setChild(); - }, [tabIdx]); - - - return ( -
-
-

거래내역 관리

-
-
    - {tabContents.map(content => ( -
  • setTabIdx(content.contentId)} - > - {content.contentName} -
    • - ))} -
-
- {child} -
-
- ) -} - -export default MenuTab; \ No newline at end of file diff --git a/components/admin/purchaseHistory.tsx/ProfileList.tsx b/components/admin/purchaseHistory.tsx/ProfileList.tsx deleted file mode 100644 index b4187a38c..000000000 --- a/components/admin/purchaseHistory.tsx/ProfileList.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, -} from '@mui/material'; - - -const profileTableTitle: { [key: string]: string } = { - id: 'ID', - usageTime: '사용 시간', - userIntraId: '사용자 id', - content: '현재 이미지', - status: '사용 상태', - delete: '삭제' -} - -function ProfileList () { - - const test = [ 'id', - 'usageTime', - 'userIntraId', - 'content', - 'status', - 'delete'] - - return ( - <> - - - - - {test.map((content, idx) => ( - - {profileTableTitle[content]} - - ))} - - - - - 비어있습니다 - - -
- - - - ) -} - -export default ProfileList; diff --git a/components/admin/purchaseHistory.tsx/PurchaseList.tsx b/components/admin/purchaseHistory.tsx/PurchaseList.tsx deleted file mode 100644 index fde9ada1b..000000000 --- a/components/admin/purchaseHistory.tsx/PurchaseList.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, -} from '@mui/material'; - - -const purchaseListTableTitle: { [key: string]: string } = { - id: 'ID', - transactionTime: '구매 시간', - buyerIntraId: '구매자 id', - itemName: '이름', - itemStatus: '사용 상태', - itemSetting: '설정' -} - -function PurchaseList () { - - const test = [ 'id', - 'transactionTime', - 'buyerIntraId', - 'itemName', - 'itemStatus', - 'itemSetting'] - - return ( - <> - - - - - {test.map((content, idx) => ( - - {purchaseListTableTitle[content]} - - ))} - - - - - 비어있습니다 - - -
- - - ) -} - -export default PurchaseList; diff --git a/components/admin/receipt/MegaphoneList.tsx b/components/admin/receipt/MegaphoneList.tsx new file mode 100644 index 000000000..73d7f8f32 --- /dev/null +++ b/components/admin/receipt/MegaphoneList.tsx @@ -0,0 +1,125 @@ +import { useEffect, useState } from 'react'; +import { tableFormat } from 'constants/admin/table'; + +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import PageNation from 'components/Pagination'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { useSetRecoilState } from 'recoil'; +import { Imegaphone, ImegaphoneTable } from 'types/admin/adminReceiptType'; +import { modalState } from 'utils/recoil/modal'; + +const megaPhoneTableTitle: { [key: string]: string } = { + megaphoneId: 'ID', + usedAt: '시간', + intraId: '사용자', + content: '내용', + status: '상태', + delete: '삭제', +}; + +const tableColumnName = [ + 'megaphoneId', + 'usedAt', + 'intraId', + 'content', + 'status', + 'delete', +]; + +function MegaphoneList() { + const [megaphoneInfo, setMegaphoneInfo] = useState({ + megaphoneList: [], + totalPage: 0, + currentPage: 0, + }); + + const [currentPage, setCurrentPage] = useState(1); + + // api 연결 시 useCallback, instanceInManage, try catch로 변경 + const getMegaphoneHandler = useMockAxiosGet({ + url: `/admin/megaphones/history?page=${currentPage}&size=10`, + setState: (data) => { + setMegaphoneInfo({ + megaphoneList: data.megaphoneList.map((megaphone: Imegaphone) => { + const { year, month, date, hour, min } = getFormattedDateToString( + new Date(megaphone.usedAt) + ); + return { + ...megaphone, + usedAt: `${year}-${month}-${date} ${hour}:${min}`, + }; + }), + totalPage: data.totalPage, + currentPage: currentPage, + }); + }, + err: 'HJ03', + type: 'setError', + }); + + const setModal = useSetRecoilState(modalState); + + useEffect(() => { + getMegaphoneHandler(); + }, [currentPage]); + + return ( + <> + + + + + {tableColumnName.map((column, idx) => ( + {megaPhoneTableTitle[column]} + ))} + + + + {megaphoneInfo.megaphoneList.length > 0 ? ( + megaphoneInfo.megaphoneList.map((megaphone: Imegaphone) => ( + + {tableFormat['megaphoneList'].columns.map( + (columnName: string, index: number) => { + return ( + + {megaphone[columnName as keyof Imegaphone].toString()} + + ); + } + )} + + + + + )) + ) : ( + + 비어있습니다 + + )} + +
+ +
+ { + setCurrentPage(pageNumber); + }} + /> +
+ + ); +} + +export default MegaphoneList; diff --git a/components/admin/receipt/MenuTab.tsx b/components/admin/receipt/MenuTab.tsx new file mode 100644 index 000000000..f06d9ddd9 --- /dev/null +++ b/components/admin/receipt/MenuTab.tsx @@ -0,0 +1,54 @@ +import { useEffect, useState } from 'react'; +import ReceiptList from './ReceiptList'; +import MegaphoneList from './MegaphoneList'; +import ProfileList from './ProfileList'; +import styles from 'styles/admin/purchaseHistory/MenuTab.module.scss'; + +function MenuTab() { + const [tabIdx, setTabIdx] = useState(0); + const [child, setChild] = useState(); + const tabContents = [ + { + contentId: 0, + contentName: '구매 내역', + }, + { + contentId: 1, + contentName: '확성기 사용 내역', + }, + { + contentId: 2, + contentName: '프로필 변경권 사용 내역', + }, + ]; + + useEffect(() => { + if (tabIdx === 0) setChild(); + if (tabIdx === 1) setChild(); + if (tabIdx === 2) setChild(); + }, [tabIdx]); + + return ( +
+
+

거래내역 관리

+
+
    + {tabContents.map((content) => ( +
  • setTabIdx(content.contentId)} + > + {content.contentName} +
    • + ))} +
+
{child}
+
+ ); +} + +export default MenuTab; diff --git a/components/admin/receipt/ProfileList.tsx b/components/admin/receipt/ProfileList.tsx new file mode 100644 index 000000000..000d2d182 --- /dev/null +++ b/components/admin/receipt/ProfileList.tsx @@ -0,0 +1,52 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; + +const profileTableTitle: { [key: string]: string } = { + id: 'ID', + usageTime: '사용 시간', + userIntraId: '사용자 id', + content: '현재 이미지', + status: '사용 상태', + delete: '삭제', +}; + +function ProfileList() { + const test = [ + 'id', + 'usageTime', + 'userIntraId', + 'content', + 'status', + 'delete', + ]; + + return ( + <> + + + + + {test.map((content, idx) => ( + {profileTableTitle[content]} + ))} + + + + + 비어있습니다 + + +
+ + + ); +} + +export default ProfileList; diff --git a/components/admin/receipt/ReceiptList.tsx b/components/admin/receipt/ReceiptList.tsx new file mode 100644 index 000000000..756bb8cc6 --- /dev/null +++ b/components/admin/receipt/ReceiptList.tsx @@ -0,0 +1,121 @@ +import { useEffect, useState } from 'react'; + +import { useMockAxiosGet } from 'hooks/useAxiosGet'; + +import { tableFormat } from 'constants/admin/table'; +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; +import PageNation from 'components/Pagination'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { Ireceipt, IreceiptTable } from 'types/admin/adminReceiptType'; + +const receiptListTableTitle: { [key: string]: string } = { + receiptId: 'ID', + createdAt: '시간', + itemName: '아이템명', + itemPrice: '구매가격', + purchaserIntra: '구매자', + ownerIntra: '수령자', + itemStatus: '아이템 상태', +}; + +const tableColumnName = [ + 'receiptId', + 'createdAt', + 'itemName', + 'itemPrice', + 'purchaserIntra', + 'ownerIntra', + 'itemStatus', +]; + +function ReceiptList() { + const [receiptInfo, setReceiptInfo] = useState({ + receiptList: [], + totalPage: 0, + currentPage: 0, + }); + + const [currentPage, setCurrentPage] = useState(1); + + // api 연결 시 useCallback, instanceInManage, try catch로 변경 + const getReceiptList = useMockAxiosGet({ + url: `/admin/receipt/?page=${currentPage}&size=10`, + setState: (data) => { + setReceiptInfo({ + receiptList: data.receiptList.map((receipt: Ireceipt) => { + const { year, month, date, hour, min } = getFormattedDateToString( + new Date(receipt.createdAt) + ); + return { + ...receipt, + createdAt: `${year}-${month}-${date} ${hour}:${min}`, + }; + }), + totalPage: data.totalPage, + currentPage: currentPage, + }); + }, + err: 'HJ02', + type: 'setError', + }); + + useEffect(() => { + getReceiptList(); + }, [currentPage]); + + return ( + <> + + + + + {tableColumnName.map((column, idx) => ( + {receiptListTableTitle[column]} + ))} + + + + {receiptInfo.receiptList.length > 0 ? ( + receiptInfo.receiptList.map((receipt: Ireceipt) => ( + + {tableFormat['receiptList'].columns.map( + (columnName: string, index: number) => { + return ( + + {receipt[columnName as keyof Ireceipt].toString()} + + ); + } + )} + + )) + ) : ( + + 비어있습니다 + + )} + +
+ +
+ { + setCurrentPage(pageNumber); + }} + /> +
+ + ); +} + +export default ReceiptList; diff --git a/components/modal/admin/AdminDeleteMegaphoneModal.tsx b/components/modal/admin/AdminDeleteMegaphoneModal.tsx new file mode 100644 index 000000000..ce456d9ac --- /dev/null +++ b/components/modal/admin/AdminDeleteMegaphoneModal.tsx @@ -0,0 +1,28 @@ +import { useResetRecoilState, useSetRecoilState } from 'recoil'; +import { errorState } from 'utils/recoil/error'; +import { modalState } from 'utils/recoil/modal'; + +export default function AdminDeleteMegaphoneModal(megaphoneId: number) { + const resetModal = useResetRecoilState(modalState); + const setError = useSetRecoilState(errorState); + + const deleteMegaphone = async (megaphoneId: number) => { + try { + await fetch( + `http://localhost:3000/api/pingpong/admin/megaphones/${megaphoneId}`, + { + method: 'DELETE', + } + ); + alert(`${megaphoneId}번 확성기가 삭제되었습니다`); + } catch (e: any) { + if (e.response.status === 400) { + alert(`${megaphoneId}번 확성기는 삭제할 수 없습니다`); + } else { + setError('HJ04'); + } + } + }; + + return
; +} diff --git a/constants/admin/table.ts b/constants/admin/table.ts index 5bc05861b..4fd33d2ec 100644 --- a/constants/admin/table.ts +++ b/constants/admin/table.ts @@ -72,4 +72,24 @@ export const tableFormat: TableFormat = { 'edit', ], }, + receiptList: { + name: '구매 내역', + columns: [ + 'receiptId', + 'createdAt', + 'itemName', + 'itemPrice', + 'purchaserIntra', + 'ownerIntra', + 'itemStatus', + ], + }, + megaphoneList: { + name: '확성기 사용 내역', + columns: ['megaphoneId', 'usedAt', 'intraId', 'content', 'status'], + }, + profileList: { + name: '프로필 변경권 사용 내역', + columns: [], + }, }; diff --git a/pages/admin/purchaseHistory.tsx b/pages/admin/purchaseHistory.tsx deleted file mode 100644 index 9717e4c37..000000000 --- a/pages/admin/purchaseHistory.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import MenuTab from "components/admin/purchaseHistory.tsx/MenuTab"; - - - -export default function PurchaseHistory() { - return ( - <> - - - ) -} \ No newline at end of file diff --git a/pages/admin/receipt.tsx b/pages/admin/receipt.tsx new file mode 100644 index 000000000..10d10094b --- /dev/null +++ b/pages/admin/receipt.tsx @@ -0,0 +1,9 @@ +import MenuTab from 'components/admin/receipt/MenuTab'; + +export default function Receipt() { + return ( + <> + + + ); +} diff --git a/pages/api/pingpong/admin/megaphones/[megaphoneId].ts b/pages/api/pingpong/admin/megaphones/[megaphoneId].ts new file mode 100644 index 000000000..bb1874eae --- /dev/null +++ b/pages/api/pingpong/admin/megaphones/[megaphoneId].ts @@ -0,0 +1,11 @@ +import { NextApiRequest, NextApiResponse } from 'next'; + +export default function handler(req: NextApiRequest, res: NextApiResponse) { + const { method, query } = req; + const { megaphoneId } = query as { megaphoneId: string }; + + if (method === 'DELETE') { + if (parseInt(megaphoneId) > 5) res.status(204); + else res.status(400); + } +} diff --git a/pages/api/pingpong/admin/megaphones/history/index.ts b/pages/api/pingpong/admin/megaphones/history/index.ts new file mode 100644 index 000000000..0732dbeda --- /dev/null +++ b/pages/api/pingpong/admin/megaphones/history/index.ts @@ -0,0 +1,114 @@ +import { NextApiRequest, NextApiResponse } from 'next'; + +const testData1 = { + megaphoneList: [ + { + megaphoneId: 12, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 중', + intraId: 'hyungjpa', + }, + { + megaphoneId: 11, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 중', + intraId: 'hyungjpa', + }, + { + megaphoneId: 10, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 중', + intraId: 'hyungjpa', + }, + { + megaphoneId: 9, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 중', + intraId: 'hyungjpa', + }, + { + megaphoneId: 8, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 대기', + intraId: 'hyungjpa', + }, + { + megaphoneId: 7, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 대기', + intraId: 'hyungjpa', + }, + { + megaphoneId: 6, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 대기', + intraId: 'hyungjpa', + }, + { + megaphoneId: 5, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 완료', + intraId: 'hyungjpa', + }, + { + megaphoneId: 4, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 완료', + intraId: 'hyungjpa', + }, + { + megaphoneId: 3, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 완료', + intraId: 'hyungjpa', + }, + ], + totalPage: 2, +}; + +const testData2 = { + megaphoneList: [ + { + megaphoneId: 2, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 완료', + intraId: 'hyungjpa', + }, + { + megaphoneId: 1, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 완료', + intraId: 'hyungjpa', + }, + { + megaphoneId: 0, + content: '확성기입니다', + usedAt: new Date(), + status: '사용 완료', + intraId: 'hyungjpa', + }, + ], + totalPage: 2, +}; + +export default function handler(req: NextApiRequest, res: NextApiResponse) { + const { method, query } = req; + const { page } = query as { page: string }; + + if (method === 'GET') { + if (page === '1') res.status(200).json(testData1); + else res.status(200).json(testData2); + } +} diff --git a/pages/api/pingpong/admin/receipt/index.ts b/pages/api/pingpong/admin/receipt/index.ts new file mode 100644 index 000000000..fcb905180 --- /dev/null +++ b/pages/api/pingpong/admin/receipt/index.ts @@ -0,0 +1,149 @@ +import { NextApiRequest, NextApiResponse } from 'next'; + +const testData1 = { + receiptList: [ + { + receiptId: 13, + createdAt: new Date(), + itemName: '확성기', + itemPrice: 42, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 전', + }, + { + receiptId: 12, + createdAt: new Date(), + itemName: '프로필 사진 변경권', + itemPrice: 21, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 완료', + }, + { + receiptId: 11, + createdAt: new Date(), + itemName: '프로필 색상 변경권', + itemPrice: 10, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 완료', + }, + { + receiptId: 10, + createdAt: new Date(), + itemName: '확성기', + itemPrice: 42, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 전', + }, + { + receiptId: 9, + createdAt: new Date(), + itemName: '프로필 사진 변경권', + itemPrice: 21, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 완료', + }, + { + receiptId: 8, + createdAt: new Date(), + itemName: '프로필 색상 변경권', + itemPrice: 10, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 완료', + }, + { + receiptId: 7, + createdAt: new Date(), + itemName: '확성기', + itemPrice: 42, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 전', + }, + { + receiptId: 6, + createdAt: new Date(), + itemName: '프로필 사진 변경권', + itemPrice: 21, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 완료', + }, + { + receiptId: 5, + createdAt: new Date(), + itemName: '프로필 색상 변경권', + itemPrice: 10, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 완료', + }, + ], + totalPage: 2, +}; + +const testData2 = { + receiptList: [ + { + receiptId: 4, + createdAt: new Date(), + itemName: '확성기', + itemPrice: 42, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 전', + }, + { + receiptId: 3, + createdAt: new Date(), + itemName: '프로필 사진 변경권', + itemPrice: 21, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 완료', + }, + { + receiptId: 2, + createdAt: new Date(), + itemName: '프로필 색상 변경권', + itemPrice: 10, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 완료', + }, + { + receiptId: 1, + createdAt: new Date(), + itemName: '확성기', + itemPrice: 42, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 전', + }, + { + receiptId: 0, + createdAt: new Date(), + itemName: '확성기', + itemPrice: 42, + purchaserIntra: 'admin', + ownerIntra: 'hyungjpa', + itemStatus: '사용 전', + }, + ], + totalPage: 2, +}; + +export default function handler(req: NextApiRequest, res: NextApiResponse) { + const { method, query } = req; + const { page } = query as { page: string }; + + if (method === 'GET') { + if (page === '1') res.status(200).json(testData1); + else res.status(200).json(testData2); + } +} diff --git a/pages/login.tsx b/pages/login.tsx index 4c02acb38..b2adb1811 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -3,7 +3,7 @@ import { useRouter } from 'next/router'; import { useEffect } from 'react'; import StyledButton from 'components/StyledButton'; import styles from 'styles/Login.module.scss'; -import MenuTab from 'components/admin/purchaseHistory.tsx/MenuTab'; +import MenuTab from 'components/admin/receipt/MenuTab'; import StoreMain from 'components/admin/store/StoreMain'; function Login() { @@ -31,7 +31,7 @@ function Login() { <> {/* */} {/* */} - +
diff --git a/tsconfig.json b/tsconfig.json index 63ebf1dee..472707f8e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,8 +21,9 @@ "**/*.ts", "**/*.tsx", "utils/infinityScroll.js", - "utils/infinityScoll.js" + "utils/infinityScoll.js", + "components/admin/receipt" ], - "typeRoots" : ["./@types", "./node_modules/@types"], + "typeRoots": ["./@types", "./node_modules/@types"], "exclude": ["node_modules"] } diff --git a/types/admin/adminReceiptType.ts b/types/admin/adminReceiptType.ts new file mode 100644 index 000000000..9f8b3ecb1 --- /dev/null +++ b/types/admin/adminReceiptType.ts @@ -0,0 +1,33 @@ +export interface Ireceipt { + receiptId: number; + createdAt: Date; + itemName: string; + itemPrice: number; + purchaserIntra: string; + ownerIntra: string; + itemStatus: string; +} + +export interface IreceiptTable { + receiptList: Array; + totalPage: number; + currentPage: number; +} + +export interface ImegaphoneId { + megaphoneId: number; +} + +export interface Imegaphone { + megaphoneId: number; + content: string; + usedAt: Date; + status: string; + intraId: string; +} + +export interface ImegaphoneTable { + megaphoneList: Array; + totalPage: number; + currentPage: number; +} diff --git a/types/admin/tableTypes.ts b/types/admin/tableTypes.ts index 99f0db1e2..1c888ddbf 100644 --- a/types/admin/tableTypes.ts +++ b/types/admin/tableTypes.ts @@ -5,7 +5,10 @@ export type TableName = | 'games' | 'announcement' | 'season' - | 'penalty'; + | 'penalty' + | 'receiptList' + | 'megaphoneList' + | 'profileList'; export type EtcType = 'button' | 'toggle'; diff --git a/types/modalTypes.ts b/types/modalTypes.ts index 1aef4ac54..45b5baa59 100644 --- a/types/modalTypes.ts +++ b/types/modalTypes.ts @@ -3,6 +3,7 @@ import { ISeason } from './seasonTypes'; import { Value } from 'react-quill'; import { IFeedback } from 'components/admin/feedback/FeedbackTable'; import { ModifyScoreType } from 'types/admin/gameLogTypes'; +import { ImegaphoneId } from './admin/adminReceiptType'; type EventModal = 'WELCOME' | 'ANNOUNCEMENT'; @@ -73,4 +74,5 @@ export interface Modal { penaltyId?: number; ISeason?: ISeason; ModifyScore?: ModifyScoreType; + megaphoneId?: ImegaphoneId; } From 9e8a1fd310e41f2788632b56c748f156e6a28dcf Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Thu, 3 Aug 2023 16:16:49 +0900 Subject: [PATCH 09/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20Inventory=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- types/storeTypes.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/types/storeTypes.ts b/types/storeTypes.ts index 4c8d6555c..b5d22c5d7 100644 --- a/types/storeTypes.ts +++ b/types/storeTypes.ts @@ -1 +1,16 @@ export type StoreMode = 'BUY' | 'INVENTORY'; + +export type InventoryItemStatus = 'BEFORE' | 'USING' | 'USED'; + +export type InventoryItem = { + itemId: number; + name: string; + imageUrl: string; + purchaserIntra: string; + itemStatus: InventoryItemStatus; +}; + +export type InventoryData = { + storageItemList: InventoryItem[]; + totalPage: number; +}; From 1facbab21b3391ca41cd861a509649a3b213c697 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Thu, 3 Aug 2023 16:17:16 +0900 Subject: [PATCH 10/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20Inventory=20Compone?= =?UTF-8?q?nt=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/Inventory.tsx | 7 +++++++ pages/store.tsx | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 components/store/Inventory.tsx diff --git a/components/store/Inventory.tsx b/components/store/Inventory.tsx new file mode 100644 index 000000000..a26f1e9ec --- /dev/null +++ b/components/store/Inventory.tsx @@ -0,0 +1,7 @@ +// import { useState } from 'react'; +import InfScroll from 'utils/infinityScroll'; +// import { InventoryData } from 'types/storeTypes'; + +export function Inventory() { + return
Inventory
; +} diff --git a/pages/store.tsx b/pages/store.tsx index 42a8ea83c..534be2cef 100644 --- a/pages/store.tsx +++ b/pages/store.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { useRouter } from 'next/router'; import { StoreMode } from 'types/storeTypes'; import { StoreModeWrap } from 'components/mode/modeWraps/StoreModeWrap'; +import { Inventory } from 'components/store/Inventory'; import styles from 'styles/store/StoreContainer.module.scss'; export default function Store() { @@ -21,7 +22,7 @@ export default function Store() {
- {mode === 'BUY' ?
BUY
:
INVENTORY
} + {mode === 'BUY' ?
BUY
: }
); From 7b7166f6942d0a780381bd0e0da7d059d3cf57b4 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Thu, 3 Aug 2023 16:19:35 +0900 Subject: [PATCH 11/35] =?UTF-8?q?[Test]=20[GGFE-144]=20items=20mock=20api?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/api/pingpong/items/index.ts | 129 ++++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 pages/api/pingpong/items/index.ts diff --git a/pages/api/pingpong/items/index.ts b/pages/api/pingpong/items/index.ts new file mode 100644 index 000000000..d674d78da --- /dev/null +++ b/pages/api/pingpong/items/index.ts @@ -0,0 +1,129 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import { + InventoryData, + InventoryItem, + InventoryItemStatus, +} from 'types/storeTypes'; + +export default function handler( + req: NextApiRequest, + res: NextApiResponse +) { + const item1: InventoryItem = { + itemId: 1, + name: '테스트1', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyobicho', + itemStatus: 'BEFORE', + }; + + const item2: InventoryItem = { + itemId: 2, + name: '테스트2', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyungjpa', + itemStatus: 'BEFORE', + }; + + const item3: InventoryItem = { + itemId: 3, + name: '테스트3', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'jeyoon', + itemStatus: 'USING', + }; + + const item4: InventoryItem = { + itemId: 4, + name: '테스트4', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'sangmipa', + itemStatus: 'USED', + }; + + const item5: InventoryItem = { + itemId: 5, + name: '테스트5', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyobicho', + itemStatus: 'BEFORE', + }; + + const item6: InventoryItem = { + itemId: 6, + name: '테스트6', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyungjpa', + itemStatus: 'BEFORE', + }; + + const item7: InventoryItem = { + itemId: 7, + name: '테스트7', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'jeyoon', + itemStatus: 'USING', + }; + + const item8: InventoryItem = { + itemId: 8, + name: '테스트8', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'sangmipa', + itemStatus: 'USED', + }; + + const item9: InventoryItem = { + itemId: 9, + name: '테스트9', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyobicho', + itemStatus: 'BEFORE', + }; + + const item10: InventoryItem = { + itemId: 10, + name: '테스트10', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyungjpa', + itemStatus: 'BEFORE', + }; + + const storageItemList: InventoryItem[] = [ + item1, + item2, + item3, + item4, + item5, + item6, + item7, + item8, + item9, + item10, + ]; + + // 빈 인벤토리 + const InventoryDataEmpty: InventoryData = { + storageItemList: [], + totalPage: 0, + }; + + // 페이지 1개 + const InventoryDataSingle: InventoryData = { + storageItemList: storageItemList.slice(0, 4), + totalPage: 1, + }; + + // 페이지 2개 + const InventoryDataDouble: InventoryData = { + storageItemList: storageItemList, + totalPage: 2, + }; + + // NOTE: 테스트 케이스에 맞춰서 다른 데이터를 보내주면 됩니다. + // const InventoryData: InventoryData = InventoryDataEmpty; + // const InventoryData: InventoryData = InventoryDataSingle; + const InventoryData: InventoryData = InventoryDataDouble; + + res.status(200).json(InventoryData); +} From 64a9bd46d6054d06869acbc09e20c65d3a012764 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Fri, 4 Aug 2023 11:56:04 +0900 Subject: [PATCH 12/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=ED=99=95=EC=84=B1?= =?UTF-8?q?=EA=B8=B0=20=EB=82=B4=EC=97=AD=20=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/receipt/MegaphoneList.tsx | 39 ++++++++--- components/admin/receipt/ProfileList.tsx | 64 ++++++++++++++----- components/admin/receipt/ReceiptList.tsx | 18 +++--- components/modal/ModalProvider.tsx | 5 ++ .../modal/admin/AdminDeleteMegaphoneModal.tsx | 33 ++++++---- constants/admin/table.ts | 2 +- types/admin/adminReceiptType.ts | 17 ++++- types/modalTypes.ts | 7 +- 8 files changed, 138 insertions(+), 47 deletions(-) diff --git a/components/admin/receipt/MegaphoneList.tsx b/components/admin/receipt/MegaphoneList.tsx index 73d7f8f32..716b51641 100644 --- a/components/admin/receipt/MegaphoneList.tsx +++ b/components/admin/receipt/MegaphoneList.tsx @@ -14,7 +14,11 @@ import { useMockAxiosGet } from 'hooks/useAxiosGet'; import PageNation from 'components/Pagination'; import { getFormattedDateToString } from 'utils/handleTime'; import { useSetRecoilState } from 'recoil'; -import { Imegaphone, ImegaphoneTable } from 'types/admin/adminReceiptType'; +import { + Imegaphone, + ImegaphoneInfo, + ImegaphoneTable, +} from 'types/admin/adminReceiptType'; import { modalState } from 'utils/recoil/modal'; const megaPhoneTableTitle: { [key: string]: string } = { @@ -36,7 +40,7 @@ const tableColumnName = [ ]; function MegaphoneList() { - const [megaphoneInfo, setMegaphoneInfo] = useState({ + const [megaphoneData, setMegaphoneData] = useState({ megaphoneList: [], totalPage: 0, currentPage: 0, @@ -44,11 +48,13 @@ function MegaphoneList() { const [currentPage, setCurrentPage] = useState(1); + // 특정 유저 확성기 사용내역만 가져오는 api 추가되면 handler 추가 + // api 연결 시 useCallback, instanceInManage, try catch로 변경 const getMegaphoneHandler = useMockAxiosGet({ url: `/admin/megaphones/history?page=${currentPage}&size=10`, setState: (data) => { - setMegaphoneInfo({ + setMegaphoneData({ megaphoneList: data.megaphoneList.map((megaphone: Imegaphone) => { const { year, month, date, hour, min } = getFormattedDateToString( new Date(megaphone.usedAt) @@ -68,6 +74,13 @@ function MegaphoneList() { const setModal = useSetRecoilState(modalState); + const deleteMegaphone = (megaphoneInfo: ImegaphoneInfo) => { + setModal({ + modalName: 'ADMIN-MEGAPHONE_DELETE', + megaphoneInfo: megaphoneInfo, + }); + }; + useEffect(() => { getMegaphoneHandler(); }, [currentPage]); @@ -84,8 +97,8 @@ function MegaphoneList() { - {megaphoneInfo.megaphoneList.length > 0 ? ( - megaphoneInfo.megaphoneList.map((megaphone: Imegaphone) => ( + {megaphoneData.megaphoneList.length > 0 ? ( + megaphoneData.megaphoneList.map((megaphone: Imegaphone) => ( {tableFormat['megaphoneList'].columns.map( (columnName: string, index: number) => { @@ -97,7 +110,17 @@ function MegaphoneList() { } )} - + )) @@ -111,8 +134,8 @@ function MegaphoneList() {
{ setCurrentPage(pageNumber); }} diff --git a/components/admin/receipt/ProfileList.tsx b/components/admin/receipt/ProfileList.tsx index 000d2d182..f5fb54438 100644 --- a/components/admin/receipt/ProfileList.tsx +++ b/components/admin/receipt/ProfileList.tsx @@ -7,25 +7,57 @@ import { TableHead, TableRow, } from '@mui/material'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { useEffect, useState } from 'react'; +import { Iprofile, IprofileTable } from 'types/admin/adminReceiptType'; +import { getFormattedDateToString } from 'utils/handleTime'; const profileTableTitle: { [key: string]: string } = { - id: 'ID', - usageTime: '사용 시간', - userIntraId: '사용자 id', - content: '현재 이미지', - status: '사용 상태', + profileId: 'ID', + date: '시간', + intraId: '사용자', + imageUrl: '현재 이미지', delete: '삭제', }; +const tableColumnName = ['profileId', 'data', 'intraId', 'imageUrl', 'delete']; + function ProfileList() { - const test = [ - 'id', - 'usageTime', - 'userIntraId', - 'content', - 'status', - 'delete', - ]; + const [profileData, setProfileData] = useState({ + profileList: [], + totalPage: 0, + currentPage: 0, + }); + + const [currentPage, setCurrentPage] = useState(1); + + // 특정 유저 확성기 사용내역만 가져오는 api 추가되면 handler 추가 + + // api 연결 시 useCallback, instanceInManage, try catch로 변경 + const getProfileHandler = useMockAxiosGet({ + url: `/admin/images?page=${currentPage}&size=5`, + setState: (data) => { + setProfileData({ + profileList: data.profileList.map((profile: Iprofile) => { + const { year, month, date, hour, min } = getFormattedDateToString( + new Date(profile.date) + ); + return { + ...profile, + date: `${year}-${month}-${date} ${hour}:${min}`, + }; + }), + totalPage: data.totalPage, + currentPage: currentPage, + }); + }, + err: 'HJ04', + type: 'setError', + }); + + useEffect(() => { + getProfileHandler(); + }, [currentPage]); return ( <> @@ -33,12 +65,14 @@ function ProfileList() { - {test.map((content, idx) => ( - {profileTableTitle[content]} + {tableColumnName.map((columnName, idx) => ( + {profileTableTitle[columnName]} ))} + {profileData.profileList.le} + 비어있습니다 diff --git a/components/admin/receipt/ReceiptList.tsx b/components/admin/receipt/ReceiptList.tsx index 756bb8cc6..e0268c04a 100644 --- a/components/admin/receipt/ReceiptList.tsx +++ b/components/admin/receipt/ReceiptList.tsx @@ -37,7 +37,7 @@ const tableColumnName = [ ]; function ReceiptList() { - const [receiptInfo, setReceiptInfo] = useState({ + const [receiptData, setReceiptData] = useState({ receiptList: [], totalPage: 0, currentPage: 0, @@ -45,11 +45,13 @@ function ReceiptList() { const [currentPage, setCurrentPage] = useState(1); + // 특정 유저 거래 내역만 가져오는 api 추가되면 handler 추가 + // api 연결 시 useCallback, instanceInManage, try catch로 변경 - const getReceiptList = useMockAxiosGet({ + const getReceiptHandler = useMockAxiosGet({ url: `/admin/receipt/?page=${currentPage}&size=10`, setState: (data) => { - setReceiptInfo({ + setReceiptData({ receiptList: data.receiptList.map((receipt: Ireceipt) => { const { year, month, date, hour, min } = getFormattedDateToString( new Date(receipt.createdAt) @@ -68,7 +70,7 @@ function ReceiptList() { }); useEffect(() => { - getReceiptList(); + getReceiptHandler(); }, [currentPage]); return ( @@ -83,8 +85,8 @@ function ReceiptList() { - {receiptInfo.receiptList.length > 0 ? ( - receiptInfo.receiptList.map((receipt: Ireceipt) => ( + {receiptData.receiptList.length > 0 ? ( + receiptData.receiptList.map((receipt: Ireceipt) => ( {tableFormat['receiptList'].columns.map( (columnName: string, index: number) => { @@ -107,8 +109,8 @@ function ReceiptList() {
{ setCurrentPage(pageNumber); }} diff --git a/components/modal/ModalProvider.tsx b/components/modal/ModalProvider.tsx index f23960c10..40fba668f 100644 --- a/components/modal/ModalProvider.tsx +++ b/components/modal/ModalProvider.tsx @@ -22,6 +22,7 @@ import FeedbackDetailModal from './admin/FeedbackDetailModal'; import DeletePenaltyModal from './admin/DeletePenaltyModal'; import AdminModifyScoreModal from './admin/AdminModifyScoreModal'; import styles from 'styles/modal/Modal.module.scss'; +import AdminDeleteMegaphoneModal from './admin/AdminDeleteMegaphoneModal'; export default function ModalProvider() { const [ @@ -38,6 +39,7 @@ export default function ModalProvider() { penaltyId, ISeason, ModifyScore, + megaphoneInfo, }, setModal, ] = useRecoilState(modalState); @@ -74,6 +76,9 @@ export default function ModalProvider() { ) : null, 'USER-KAKAO_EDIT': , + 'ADMIN-MEGAPHONE_DELETE': megaphoneInfo ? ( + + ) : null, }; useEffect(() => { diff --git a/components/modal/admin/AdminDeleteMegaphoneModal.tsx b/components/modal/admin/AdminDeleteMegaphoneModal.tsx index ce456d9ac..3b189d26b 100644 --- a/components/modal/admin/AdminDeleteMegaphoneModal.tsx +++ b/components/modal/admin/AdminDeleteMegaphoneModal.tsx @@ -1,28 +1,39 @@ import { useResetRecoilState, useSetRecoilState } from 'recoil'; import { errorState } from 'utils/recoil/error'; import { modalState } from 'utils/recoil/modal'; +import { ImegaphoneInfo } from 'types/admin/adminReceiptType'; -export default function AdminDeleteMegaphoneModal(megaphoneId: number) { +export default function AdminDeleteMegaphoneModal(props: ImegaphoneInfo) { + const { megaphoneId, content, intraId } = props; const resetModal = useResetRecoilState(modalState); const setError = useSetRecoilState(errorState); - const deleteMegaphone = async (megaphoneId: number) => { + const deleteMegaphonehandler = async (id: number) => { try { - await fetch( - `http://localhost:3000/api/pingpong/admin/megaphones/${megaphoneId}`, - { - method: 'DELETE', - } - ); - alert(`${megaphoneId}번 확성기가 삭제되었습니다`); + await fetch(`http://localhost:3000/api/pingpong/admin/megaphones/${id}`, { + method: 'DELETE', + }); + alert(`${id}번 확성기가 삭제되었습니다`); } catch (e: any) { if (e.response.status === 400) { - alert(`${megaphoneId}번 확성기는 삭제할 수 없습니다`); + alert(`${id}번 확성기는 삭제할 수 없습니다`); } else { setError('HJ04'); } } + resetModal(); }; - return
; + return ( +
+
+ 사용자 : {intraId} + 확성기 내용 : {content} +
+
{megaphoneId} 번 확성기를 삭제하시겠습니까?
+ + + +
+ ); } diff --git a/constants/admin/table.ts b/constants/admin/table.ts index 4fd33d2ec..829858d5a 100644 --- a/constants/admin/table.ts +++ b/constants/admin/table.ts @@ -90,6 +90,6 @@ export const tableFormat: TableFormat = { }, profileList: { name: '프로필 변경권 사용 내역', - columns: [], + columns: ['profileId', 'date', 'intraId', 'imageUrl'], }, }; diff --git a/types/admin/adminReceiptType.ts b/types/admin/adminReceiptType.ts index 9f8b3ecb1..568a54927 100644 --- a/types/admin/adminReceiptType.ts +++ b/types/admin/adminReceiptType.ts @@ -14,8 +14,10 @@ export interface IreceiptTable { currentPage: number; } -export interface ImegaphoneId { +export interface ImegaphoneInfo { megaphoneId: number; + content: string; + intraId: string; } export interface Imegaphone { @@ -31,3 +33,16 @@ export interface ImegaphoneTable { totalPage: number; currentPage: number; } + +export interface Iprofile { + profileId: number; + date: Date; + intraId: string; + imageUrl: string; +} + +export interface IprofileTable { + profileList: Array; + totalPage: number; + currentPage: number; +} diff --git a/types/modalTypes.ts b/types/modalTypes.ts index 45b5baa59..91ee249f0 100644 --- a/types/modalTypes.ts +++ b/types/modalTypes.ts @@ -3,7 +3,7 @@ import { ISeason } from './seasonTypes'; import { Value } from 'react-quill'; import { IFeedback } from 'components/admin/feedback/FeedbackTable'; import { ModifyScoreType } from 'types/admin/gameLogTypes'; -import { ImegaphoneId } from './admin/adminReceiptType'; +import { ImegaphoneInfo } from './admin/adminReceiptType'; type EventModal = 'WELCOME' | 'ANNOUNCEMENT'; @@ -23,7 +23,8 @@ type AdminModal = | 'CHECK_FEEDBACK' | 'DETAIL_CONTENT' | 'SEASON_EDIT' - | 'MODIFY_SCORE'; + | 'MODIFY_SCORE' + | 'MEGAPHONE_DELETE'; type ModalName = | null @@ -74,5 +75,5 @@ export interface Modal { penaltyId?: number; ISeason?: ISeason; ModifyScore?: ModifyScoreType; - megaphoneId?: ImegaphoneId; + megaphoneInfo?: ImegaphoneInfo; } From 80f6a3ccc34731a16934db51a2bca6a3dc37f9be Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Fri, 4 Aug 2023 12:16:03 +0900 Subject: [PATCH 13/35] =?UTF-8?q?[FEAT]=20[GGFE-144]=20Inventory=20api?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=9C=20InfinityScroll=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/infinityScroll.ts | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/utils/infinityScroll.ts b/utils/infinityScroll.ts index 56522764a..ef901de2c 100644 --- a/utils/infinityScroll.ts +++ b/utils/infinityScroll.ts @@ -1,9 +1,12 @@ import { useSetRecoilState } from 'recoil'; import { useInfiniteQuery } from 'react-query'; +import axios from 'axios'; import { errorState } from 'utils/recoil/error'; import { instance } from './axios'; import { GameListData } from 'types/gameTypes'; +import { InventoryData } from 'types/storeTypes'; +// GameListDat를 받아오는 InfiniteQuery export default function InfScroll(path: string) { const setError = useSetRecoilState(errorState); @@ -24,3 +27,29 @@ export default function InfScroll(path: string) { keepPreviousData: true, }); } + +// InventoryData를 받아오는 InfiniteQuery +export function InfinityScroll( + queryKey: string, + fetchFunction: (page: number) => Promise, + errorCode: string +) { + const setError = useSetRecoilState(errorState); + return useInfiniteQuery( + [queryKey], + ({ pageParam = 1 }) => fetchFunction(pageParam), + { + getNextPageParam: (lastPage, allPages) => { + const nextPage = allPages.length + 1; + return nextPage > lastPage.totalPage ? null : nextPage; + }, + onError: (e: unknown) => { + if (axios.isAxiosError(e)) { + setError(errorCode); + } else setError('JY02'); // axios에서 발생한 에러가 아닌 경우 + }, + retry: 0, + keepPreviousData: true, + } + ); +} From a9a8c97f337a9b46945567efd40d0f29e05f5e44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Fri, 4 Aug 2023 13:17:54 +0900 Subject: [PATCH 14/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=20=EB=B3=80=EA=B2=BD=20=EB=82=B4=EC=97=AD=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/receipt/ProfileList.tsx | 63 +++++++++++++++++-- components/admin/receipt/ReceiptList.tsx | 1 - components/modal/ModalProvider.tsx | 5 ++ .../modal/admin/AdminDeleteMegaphoneModal.tsx | 1 + components/modal/admin/AdminDeleteProfile.tsx | 40 ++++++++++++ pages/api/pingpong/admin/images/index.ts | 35 +++++++++++ types/admin/adminReceiptType.ts | 6 ++ types/modalTypes.ts | 6 +- 8 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 components/modal/admin/AdminDeleteProfile.tsx create mode 100644 pages/api/pingpong/admin/images/index.ts diff --git a/components/admin/receipt/ProfileList.tsx b/components/admin/receipt/ProfileList.tsx index f5fb54438..730692f32 100644 --- a/components/admin/receipt/ProfileList.tsx +++ b/components/admin/receipt/ProfileList.tsx @@ -7,10 +7,18 @@ import { TableHead, TableRow, } from '@mui/material'; +import PageNation from 'components/Pagination'; +import { tableFormat } from 'constants/admin/table'; import { useMockAxiosGet } from 'hooks/useAxiosGet'; import { useEffect, useState } from 'react'; -import { Iprofile, IprofileTable } from 'types/admin/adminReceiptType'; +import { useSetRecoilState } from 'recoil'; +import { + Iprofile, + IprofileInfo, + IprofileTable, +} from 'types/admin/adminReceiptType'; import { getFormattedDateToString } from 'utils/handleTime'; +import { modalState } from 'utils/recoil/modal'; const profileTableTitle: { [key: string]: string } = { profileId: 'ID', @@ -55,6 +63,15 @@ function ProfileList() { type: 'setError', }); + const setModal = useSetRecoilState(modalState); + + const deleteProfile = (profileInfo: IprofileInfo) => { + setModal({ + modalName: 'ADMIN-PROFILE_DELETE', + profileInfo: profileInfo, + }); + }; + useEffect(() => { getProfileHandler(); }, [currentPage]); @@ -71,14 +88,48 @@ function ProfileList() { - {profileData.profileList.le} - - - 비어있습니다 - + {profileData.profileList.length > 0 ? ( + profileData.profileList.map((profile: Iprofile) => ( + + {tableFormat['profileList'].columns.map( + (columnName: string, index: number) => { + return ( + + {profile[columnName as keyof Iprofile].toString()} + + ); + } + )} + + + )) + ) : ( + + 비어있습니다 + + )}
+
+ { + setCurrentPage(pageNumber); + }} + /> +
); } diff --git a/components/admin/receipt/ReceiptList.tsx b/components/admin/receipt/ReceiptList.tsx index e0268c04a..7cae2dde6 100644 --- a/components/admin/receipt/ReceiptList.tsx +++ b/components/admin/receipt/ReceiptList.tsx @@ -46,7 +46,6 @@ function ReceiptList() { const [currentPage, setCurrentPage] = useState(1); // 특정 유저 거래 내역만 가져오는 api 추가되면 handler 추가 - // api 연결 시 useCallback, instanceInManage, try catch로 변경 const getReceiptHandler = useMockAxiosGet({ url: `/admin/receipt/?page=${currentPage}&size=10`, diff --git a/components/modal/ModalProvider.tsx b/components/modal/ModalProvider.tsx index 40fba668f..9eda0d14b 100644 --- a/components/modal/ModalProvider.tsx +++ b/components/modal/ModalProvider.tsx @@ -23,6 +23,7 @@ import DeletePenaltyModal from './admin/DeletePenaltyModal'; import AdminModifyScoreModal from './admin/AdminModifyScoreModal'; import styles from 'styles/modal/Modal.module.scss'; import AdminDeleteMegaphoneModal from './admin/AdminDeleteMegaphoneModal'; +import AdminDeleteProfileModal from './admin/AdminDeleteProfile'; export default function ModalProvider() { const [ @@ -40,6 +41,7 @@ export default function ModalProvider() { ISeason, ModifyScore, megaphoneInfo, + profileInfo, }, setModal, ] = useRecoilState(modalState); @@ -79,6 +81,9 @@ export default function ModalProvider() { 'ADMIN-MEGAPHONE_DELETE': megaphoneInfo ? ( ) : null, + 'ADMIN-PROFILE_DELETE': profileInfo ? ( + + ) : null, }; useEffect(() => { diff --git a/components/modal/admin/AdminDeleteMegaphoneModal.tsx b/components/modal/admin/AdminDeleteMegaphoneModal.tsx index 3b189d26b..219dce525 100644 --- a/components/modal/admin/AdminDeleteMegaphoneModal.tsx +++ b/components/modal/admin/AdminDeleteMegaphoneModal.tsx @@ -8,6 +8,7 @@ export default function AdminDeleteMegaphoneModal(props: ImegaphoneInfo) { const resetModal = useResetRecoilState(modalState); const setError = useSetRecoilState(errorState); + // 수정 필요 작동안함 const deleteMegaphonehandler = async (id: number) => { try { await fetch(`http://localhost:3000/api/pingpong/admin/megaphones/${id}`, { diff --git a/components/modal/admin/AdminDeleteProfile.tsx b/components/modal/admin/AdminDeleteProfile.tsx new file mode 100644 index 000000000..0ff663c1b --- /dev/null +++ b/components/modal/admin/AdminDeleteProfile.tsx @@ -0,0 +1,40 @@ +import Image from 'next/image'; +import { useResetRecoilState, useSetRecoilState } from 'recoil'; +import { IprofileInfo } from 'types/admin/adminReceiptType'; +import { errorState } from 'utils/recoil/error'; +import { modalState } from 'utils/recoil/modal'; + +export default function AdminDeleteProfileModal(props: IprofileInfo) { + const { profileId, intraId, imageUrl } = props; + const resetModal = useResetRecoilState(modalState); + const setError = useSetRecoilState(errorState); + + // 수정 필요 작동안함 + // 기존 유저 수정 api에서 가져오기 + // const deleteProfilehandler = async () => { + // try { + // await fetch(`http://localhost:3000/api/pingpong/admin/`, { + // method: 'DELETE', + // }); + // } catch (e: any) { + // if (e.response.status === 400) { + // } else { + // setError('HJ05'); + // } + // } + // resetModal(); + // }; + + return ( +
+
사용자 : {intraId}
+ +
{profileId} 번 이미지를 삭제하시겠습니까?
+ + + {/* */} +
+ ); +} diff --git a/pages/api/pingpong/admin/images/index.ts b/pages/api/pingpong/admin/images/index.ts new file mode 100644 index 000000000..8a7cd232a --- /dev/null +++ b/pages/api/pingpong/admin/images/index.ts @@ -0,0 +1,35 @@ +import { NextApiRequest, NextApiResponse } from 'next'; + +const testData1 = { + profileList: [ + { + profileId: '12', + date: new Date(), + intraId: 'hyungjpa', + imageUrl: 'none', + }, + ], + totalPage: 2, +}; + +const testData2 = { + profileList: [ + { + profileId: '1', + date: new Date(), + intraId: 'hyungjpa', + imageUrl: 'none', + }, + ], + totalPage: 2, +}; + +export default function handler(req: NextApiRequest, res: NextApiResponse) { + const { method, query } = req; + const { page } = query as { page: string }; + + if (method === 'GET') { + if (page === '1') res.status(200).json(testData1); + else res.status(200).json(testData2); + } +} diff --git a/types/admin/adminReceiptType.ts b/types/admin/adminReceiptType.ts index 568a54927..3e201ee1f 100644 --- a/types/admin/adminReceiptType.ts +++ b/types/admin/adminReceiptType.ts @@ -34,6 +34,12 @@ export interface ImegaphoneTable { currentPage: number; } +export interface IprofileInfo { + profileId: number; + intraId: string; + imageUrl: string; +} + export interface Iprofile { profileId: number; date: Date; diff --git a/types/modalTypes.ts b/types/modalTypes.ts index 91ee249f0..14c313d75 100644 --- a/types/modalTypes.ts +++ b/types/modalTypes.ts @@ -3,7 +3,7 @@ import { ISeason } from './seasonTypes'; import { Value } from 'react-quill'; import { IFeedback } from 'components/admin/feedback/FeedbackTable'; import { ModifyScoreType } from 'types/admin/gameLogTypes'; -import { ImegaphoneInfo } from './admin/adminReceiptType'; +import { ImegaphoneInfo, IprofileInfo } from './admin/adminReceiptType'; type EventModal = 'WELCOME' | 'ANNOUNCEMENT'; @@ -24,7 +24,8 @@ type AdminModal = | 'DETAIL_CONTENT' | 'SEASON_EDIT' | 'MODIFY_SCORE' - | 'MEGAPHONE_DELETE'; + | 'MEGAPHONE_DELETE' + | 'PROFILE_DELETE'; type ModalName = | null @@ -76,4 +77,5 @@ export interface Modal { ISeason?: ISeason; ModifyScore?: ModifyScoreType; megaphoneInfo?: ImegaphoneInfo; + profileInfo?: IprofileInfo; } From 7376955dbbcd993d3d44d41e2afc668afb77a524 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Fri, 4 Aug 2023 13:56:53 +0900 Subject: [PATCH 15/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20api=20=ED=98=B8?= =?UTF-8?q?=EC=B6=9C=20=EB=A1=9C=EC=A7=81=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/Inventory.tsx | 13 +- components/store/InventoryList.tsx | 22 +++ pages/api/pingpong/items/index.ts | 254 ++++++++++++++++------------- utils/infinityScroll.ts | 2 +- 4 files changed, 169 insertions(+), 122 deletions(-) create mode 100644 components/store/InventoryList.tsx diff --git a/components/store/Inventory.tsx b/components/store/Inventory.tsx index a26f1e9ec..114bf810a 100644 --- a/components/store/Inventory.tsx +++ b/components/store/Inventory.tsx @@ -1,7 +1,12 @@ -// import { useState } from 'react'; -import InfScroll from 'utils/infinityScroll'; -// import { InventoryData } from 'types/storeTypes'; +import { QueryClientProvider, QueryClient } from 'react-query'; +import { InventoryList } from './InventoryList'; export function Inventory() { - return
Inventory
; + const queryClient = new QueryClient(); + + return ( + + {' '} + + ); } diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx new file mode 100644 index 000000000..1414e4dcc --- /dev/null +++ b/components/store/InventoryList.tsx @@ -0,0 +1,22 @@ +import { InfinityScroll } from 'utils/infinityScroll'; +import { mockInstance } from 'utils/mockAxios'; + +function fetchInventoryData(page: number) { + return mockInstance.get(`items?page=${page}&size=${8}`).then((res) => { + return res.data; + }); +} + +export function InventoryList() { + const { data, error, isLoading, hasNextPage, fetchNextPage } = InfinityScroll( + 'inventory', + fetchInventoryData, + 'JY03' + ); + + if (isLoading) return
Loading...
; + if (error) return
{error.message}
; + if (!data) return
No data
; + + return
InventoryList
; +} diff --git a/pages/api/pingpong/items/index.ts b/pages/api/pingpong/items/index.ts index d674d78da..abf938fa8 100644 --- a/pages/api/pingpong/items/index.ts +++ b/pages/api/pingpong/items/index.ts @@ -1,129 +1,149 @@ import type { NextApiRequest, NextApiResponse } from 'next'; -import { - InventoryData, - InventoryItem, - InventoryItemStatus, -} from 'types/storeTypes'; +import { InventoryData, InventoryItem } from 'types/storeTypes'; + +const item1: InventoryItem = { + itemId: 1, + name: '테스트1', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyobicho', + itemStatus: 'BEFORE', +}; + +const item2: InventoryItem = { + itemId: 2, + name: '테스트2', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyungjpa', + itemStatus: 'BEFORE', +}; + +const item3: InventoryItem = { + itemId: 3, + name: '테스트3', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'jeyoon', + itemStatus: 'USING', +}; + +const item4: InventoryItem = { + itemId: 4, + name: '테스트4', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'sangmipa', + itemStatus: 'USED', +}; + +const item5: InventoryItem = { + itemId: 5, + name: '테스트5', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyobicho', + itemStatus: 'BEFORE', +}; + +const item6: InventoryItem = { + itemId: 6, + name: '테스트6', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyungjpa', + itemStatus: 'BEFORE', +}; + +const item7: InventoryItem = { + itemId: 7, + name: '테스트7', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'jeyoon', + itemStatus: 'USING', +}; + +const item8: InventoryItem = { + itemId: 8, + name: '테스트8', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'sangmipa', + itemStatus: 'USED', +}; + +const item9: InventoryItem = { + itemId: 9, + name: '테스트9', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyobicho', + itemStatus: 'BEFORE', +}; + +const item10: InventoryItem = { + itemId: 10, + name: '테스트10', + imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + purchaserIntra: 'hyungjpa', + itemStatus: 'BEFORE', +}; + +const storageItemList: InventoryItem[] = [ + item1, + item2, + item3, + item4, + item5, + item6, + item7, + item8, + item9, + item10, +]; + +// 빈 인벤토리 +const InventoryDataEmpty: InventoryData = { + storageItemList: [], + totalPage: 0, +}; + +// 페이지 1개 +const InventoryDataSingle: InventoryData = { + storageItemList: storageItemList.slice(0, 4), + totalPage: 1, +}; + +// 페이지 2개 +const InventoryDataDouble: InventoryData = { + storageItemList: storageItemList, + totalPage: 2, +}; + +function pagination( + page: number, + size: number, + storageItemList: InventoryItem[] +): InventoryItem[] { + const ret = []; + for (let index = 0; index < storageItemList.length; index += size) { + ret.push(storageItemList.slice(index, index + size)); + } + return ret[page - 1]; +} export default function handler( req: NextApiRequest, res: NextApiResponse ) { - const item1: InventoryItem = { - itemId: 1, - name: '테스트1', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'hyobicho', - itemStatus: 'BEFORE', - }; - - const item2: InventoryItem = { - itemId: 2, - name: '테스트2', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'hyungjpa', - itemStatus: 'BEFORE', - }; - - const item3: InventoryItem = { - itemId: 3, - name: '테스트3', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'jeyoon', - itemStatus: 'USING', - }; - - const item4: InventoryItem = { - itemId: 4, - name: '테스트4', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'sangmipa', - itemStatus: 'USED', - }; - - const item5: InventoryItem = { - itemId: 5, - name: '테스트5', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'hyobicho', - itemStatus: 'BEFORE', - }; - - const item6: InventoryItem = { - itemId: 6, - name: '테스트6', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'hyungjpa', - itemStatus: 'BEFORE', - }; - - const item7: InventoryItem = { - itemId: 7, - name: '테스트7', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'jeyoon', - itemStatus: 'USING', - }; - - const item8: InventoryItem = { - itemId: 8, - name: '테스트8', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'sangmipa', - itemStatus: 'USED', - }; - - const item9: InventoryItem = { - itemId: 9, - name: '테스트9', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'hyobicho', - itemStatus: 'BEFORE', - }; - - const item10: InventoryItem = { - itemId: 10, - name: '테스트10', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', - purchaserIntra: 'hyungjpa', - itemStatus: 'BEFORE', - }; - - const storageItemList: InventoryItem[] = [ - item1, - item2, - item3, - item4, - item5, - item6, - item7, - item8, - item9, - item10, - ]; - - // 빈 인벤토리 - const InventoryDataEmpty: InventoryData = { - storageItemList: [], - totalPage: 0, - }; - - // 페이지 1개 - const InventoryDataSingle: InventoryData = { - storageItemList: storageItemList.slice(0, 4), - totalPage: 1, - }; - - // 페이지 2개 - const InventoryDataDouble: InventoryData = { - storageItemList: storageItemList, - totalPage: 2, - }; - // NOTE: 테스트 케이스에 맞춰서 다른 데이터를 보내주면 됩니다. // const InventoryData: InventoryData = InventoryDataEmpty; // const InventoryData: InventoryData = InventoryDataSingle; const InventoryData: InventoryData = InventoryDataDouble; - res.status(200).json(InventoryData); + const { page, size } = req.query; + + const ret = InventoryData; + if (page && size) { + const storageItemList = pagination( + Number(page as string), + Number(size as string), + InventoryDataDouble.storageItemList + ); + ret.storageItemList = storageItemList; + } + + res.status(200).json(ret); } diff --git a/utils/infinityScroll.ts b/utils/infinityScroll.ts index ef901de2c..d9ffebfab 100644 --- a/utils/infinityScroll.ts +++ b/utils/infinityScroll.ts @@ -36,7 +36,7 @@ export function InfinityScroll( ) { const setError = useSetRecoilState(errorState); return useInfiniteQuery( - [queryKey], + queryKey, ({ pageParam = 1 }) => fetchFunction(pageParam), { getNextPageParam: (lastPage, allPages) => { From e06781ac91438964652a61e1f0917d6716180bcb Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Fri, 4 Aug 2023 14:07:50 +0900 Subject: [PATCH 16/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20InventoryList=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InventoryList.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index 1414e4dcc..089e02216 100644 --- a/components/store/InventoryList.tsx +++ b/components/store/InventoryList.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { InfinityScroll } from 'utils/infinityScroll'; import { mockInstance } from 'utils/mockAxios'; @@ -18,5 +19,17 @@ export function InventoryList() { if (error) return
{error.message}
; if (!data) return
No data
; - return
InventoryList
; + return ( +
+ {data.pages.map((page, pageIndex) => ( + + {page.storageItemList.map((item) => ( +
+
{item.name}
+
+ ))} + + ))} +
+ ); } From a6b5980987e36b26b23ee5a6bd5316b9bce27e0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Fri, 4 Aug 2023 15:55:31 +0900 Subject: [PATCH 17/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EC=83=81=EC=A0=90?= =?UTF-8?q?=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/receipt/MegaphoneList.tsx | 2 +- components/admin/receipt/ProfileList.tsx | 2 +- components/admin/receipt/ReceiptList.tsx | 2 +- components/admin/store/ChangeHistory.tsx | 50 ------ components/admin/store/ItemList.tsx | 162 +++++++++++++++--- components/admin/store/StoreMain.tsx | 42 +++-- components/admin/store/itemHistory.tsx | 127 ++++++++++++++ constants/admin/table.ts | 26 +++ .../api/pingpong/admin/items/history/index.ts | 57 ++++++ pages/login.tsx | 5 - types/admin/adminStoreTypes.ts | 31 ++++ types/admin/tableTypes.ts | 4 +- 12 files changed, 404 insertions(+), 106 deletions(-) delete mode 100644 components/admin/store/ChangeHistory.tsx create mode 100644 components/admin/store/itemHistory.tsx create mode 100644 pages/api/pingpong/admin/items/history/index.ts create mode 100644 types/admin/adminStoreTypes.ts diff --git a/components/admin/receipt/MegaphoneList.tsx b/components/admin/receipt/MegaphoneList.tsx index 716b51641..15995eaeb 100644 --- a/components/admin/receipt/MegaphoneList.tsx +++ b/components/admin/receipt/MegaphoneList.tsx @@ -23,7 +23,7 @@ import { modalState } from 'utils/recoil/modal'; const megaPhoneTableTitle: { [key: string]: string } = { megaphoneId: 'ID', - usedAt: '시간', + usedAt: '사용일자', intraId: '사용자', content: '내용', status: '상태', diff --git a/components/admin/receipt/ProfileList.tsx b/components/admin/receipt/ProfileList.tsx index 730692f32..a466637ca 100644 --- a/components/admin/receipt/ProfileList.tsx +++ b/components/admin/receipt/ProfileList.tsx @@ -22,7 +22,7 @@ import { modalState } from 'utils/recoil/modal'; const profileTableTitle: { [key: string]: string } = { profileId: 'ID', - date: '시간', + date: '사용일자', intraId: '사용자', imageUrl: '현재 이미지', delete: '삭제', diff --git a/components/admin/receipt/ReceiptList.tsx b/components/admin/receipt/ReceiptList.tsx index 7cae2dde6..db8190b41 100644 --- a/components/admin/receipt/ReceiptList.tsx +++ b/components/admin/receipt/ReceiptList.tsx @@ -18,7 +18,7 @@ import { Ireceipt, IreceiptTable } from 'types/admin/adminReceiptType'; const receiptListTableTitle: { [key: string]: string } = { receiptId: 'ID', - createdAt: '시간', + createdAt: '구매일자', itemName: '아이템명', itemPrice: '구매가격', purchaserIntra: '구매자', diff --git a/components/admin/store/ChangeHistory.tsx b/components/admin/store/ChangeHistory.tsx deleted file mode 100644 index 0d5116cae..000000000 --- a/components/admin/store/ChangeHistory.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, -} from '@mui/material'; - - - -const changeHistoryTableTitle: { [key: string]: string} = { - itemName: '아이템 이름', - modifiedInfo: '수정된 정보', - modifiedBy: '수정한 사람', - modifiedAt: '수정된 날짜' -} - - -function ChangeHistory () { - - const test = ['itemName', 'modifiedInfo', - 'modifiedBy', 'modifiedAt']; - - return ( - <> - - - - - {test.map((content, idx) => ( - - {changeHistoryTableTitle[content]} - - ))} - - - - - 비어있습니다 - - -
- - - ) -} - -export default ChangeHistory; \ No newline at end of file diff --git a/components/admin/store/ItemList.tsx b/components/admin/store/ItemList.tsx index e9a00377f..07a990371 100644 --- a/components/admin/store/ItemList.tsx +++ b/components/admin/store/ItemList.tsx @@ -1,3 +1,7 @@ +import { tableFormat } from 'constants/admin/table'; + +import Image from 'next/image'; + import { Paper, Table, @@ -7,33 +11,141 @@ import { TableHead, TableRow, } from '@mui/material'; +import { useEffect, useState } from 'react'; +import { Iitem, IitemList } from 'types/admin/adminStoreTypes'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { useSetRecoilState } from 'recoil'; +import { modalState } from 'utils/recoil/modal'; + +const itemListTableTitle: { [key: string]: string } = { + itemId: 'ID', + itemName: '아이템명', + content: '설명', + imageUrl: '이미지', + originalPrice: '원가', + discount: '할인율', + salePrice: '판매가격', + edit: '수정', + delete: '삭제', +}; + +const tableColumnName = [ + 'itemId', + 'itemName', + 'content', + 'imageUrl', + 'originalPrice', + 'discount', + 'salePrice', + 'edit', + 'delete', +]; + +function ItemList() { + const [itemListData, setItemListData] = useState({ + itemList: [], + }); + + const testData = [ + { + itemId: 3, + itemName: '확성기', + content: '확성기 설명', + // imageUrl: '/image/noti_empty.svg', + imageUrl: 'no', + originalPrice: 42, + discount: 50, + salePrice: 21, + }, + { + itemId: 2, + itemName: '프로필 변경권', + content: '프로필 설명', + imageUrl: 'no', + originalPrice: 50, + discount: 50, + salePrice: 25, + }, + { + itemId: 1, + itemName: '프로필 배경 색상 변경', + content: '배경 색상 설명', + imageUrl: 'no', + originalPrice: 10, + discount: 50, + salePrice: 5, + }, + ]; + + // api handler 추후 수정필요 + // store에서 사용하는 api라 mock api 겹칠까봐 사용안함 + // const getItemListHandler = useMockAxiosGet({ + // url: `items/store`, + // setState: setItemListData, + // err: 'HJ06', + // type: 'setError' + // }); + + const setModal = useSetRecoilState(modalState); + // 아이템 수정, 삭제 기능 추가 + // const editItem + // const deleteItem + useEffect(() => { + // getItemListHandler(); + // test용 + setItemListData({ itemList: testData }); + }, []); -function ItemList () { - - return ( - <> - - - {/* - - {test.map((content, idx) => ( - - {changeHistoryTableTitle[content]} - - ))} - - */} - - - 비어있습니다 - - -
- - - ) + return ( + <> + + + + + {tableColumnName.map((column, idx) => ( + {itemListTableTitle[column]} + ))} + + + + {itemListData.itemList.length > 0 ? ( + itemListData.itemList.map((item: Iitem) => ( + + {tableFormat['itemList'].columns.map( + (columnName: string, index: number) => { + return ( + + {columnName === 'imageUrl' ? ( + // +
no
+ ) : ( + item[columnName as keyof Iitem] + )} + + ); + } + )} + + + + + + + + )) + ) : ( + + 비어있습니다 + + )} + +
+ + + ); } -export default ItemList; \ No newline at end of file +export default ItemList; diff --git a/components/admin/store/StoreMain.tsx b/components/admin/store/StoreMain.tsx index 6feb1f655..84a60998e 100644 --- a/components/admin/store/StoreMain.tsx +++ b/components/admin/store/StoreMain.tsx @@ -1,25 +1,23 @@ -import ItemList from "./ItemList"; -import ChangeHistory from "./ChangeHistory"; -import styles from "styles/admin/store/StoreMain.module.scss"; +import ItemList from './ItemList'; +import ChangeHistory from './itemHistory'; +import styles from 'styles/admin/store/StoreMain.module.scss'; -function StoreMain () { - - - return ( -
-
-

상점 관리

-
-
-

아이템 목록

- -
-
-

변경 이력

- -
-
- ) +function StoreMain() { + return ( +
+
+

상점 관리

+
+
+

아이템 목록

+ +
+
+

변경 이력

+ +
+
+ ); } -export default StoreMain; \ No newline at end of file +export default StoreMain; diff --git a/components/admin/store/itemHistory.tsx b/components/admin/store/itemHistory.tsx new file mode 100644 index 000000000..0c9e1a7c2 --- /dev/null +++ b/components/admin/store/itemHistory.tsx @@ -0,0 +1,127 @@ +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from '@mui/material'; +import PageNation from 'components/Pagination'; +import { tableFormat } from 'constants/admin/table'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { useEffect, useState } from 'react'; +import { IitemHistory, IitemHistoryList } from 'types/admin/adminStoreTypes'; +import { getFormattedDateToString } from 'utils/handleTime'; + +const itemHistoryTableTitle: { [key: string]: string } = { + itemId: 'ID', + createdAt: '변경일', + intraId: '변경한 사람', + itemName: '이름', + content: '설명', + imageUrl: '이미지', + price: '원가', + discount: '할인율', + salePrice: '판매가격', +}; + +const tableColumnName = [ + 'itemId', + 'createdAt', + 'intraId', + 'itemName', + 'content', + 'imageUrl', + 'price', + 'discount', + 'salePrice', +]; + +function ItemHistory() { + const [itemHistoryData, setItemHistoryData] = useState({ + itemHistoryList: [], + totalPage: 0, + currentPage: 0, + }); + const [currentPage, setCurrentPage] = useState(1); + + const getItemHistoryListHandler = useMockAxiosGet({ + url: `admin/items/history?page=${currentPage}&size=5`, + setState: (data) => { + setItemHistoryData({ + itemHistoryList: data.itemHistoryList.map( + (itemHistory: IitemHistory) => { + const { year, month, date, hour, min } = getFormattedDateToString( + new Date(itemHistory.createdAt) + ); + return { + ...itemHistory, + createdAt: `${year}-${month}-${date} ${hour}:${min}`, + }; + } + ), + totalPage: data.totalPage, + currentPage: currentPage, + }); + }, + err: 'HJ07', + type: 'setError', + }); + + useEffect(() => { + getItemHistoryListHandler(); + }, [currentPage]); + + return ( + <> + + + + + {tableColumnName.map((column, idx) => ( + {itemHistoryTableTitle[column]} + ))} + + + + {itemHistoryData.itemHistoryList.length > 0 ? ( + itemHistoryData.itemHistoryList.map( + (itemHistory: IitemHistory) => ( + + {tableFormat['itemHistory'].columns.map( + (columnName: string, index: number) => { + return ( + + {itemHistory[ + columnName as keyof IitemHistory + ].toString()} + + ); + } + )} + + ) + ) + ) : ( + + 비어있습니다 + + )} + +
+ +
+ { + setCurrentPage(pageNumber); + }} + /> +
+ + ); +} + +export default ItemHistory; diff --git a/constants/admin/table.ts b/constants/admin/table.ts index 829858d5a..bbcb9da77 100644 --- a/constants/admin/table.ts +++ b/constants/admin/table.ts @@ -92,4 +92,30 @@ export const tableFormat: TableFormat = { name: '프로필 변경권 사용 내역', columns: ['profileId', 'date', 'intraId', 'imageUrl'], }, + itemList: { + name: '상점 아이템 목록', + columns: [ + 'itemId', + 'itemName', + 'content', + 'imageUrl', + 'originalPrice', + 'discount', + 'salePrice', + ], + }, + itemHistory: { + name: '상점 아이템 변경 이력', + columns: [ + 'itemId', + 'createdAt', + 'intraId', + 'itemName', + 'content', + 'imageUrl', + 'price', + 'discount', + 'salePrice', + ], + }, }; diff --git a/pages/api/pingpong/admin/items/history/index.ts b/pages/api/pingpong/admin/items/history/index.ts new file mode 100644 index 000000000..1420db2c6 --- /dev/null +++ b/pages/api/pingpong/admin/items/history/index.ts @@ -0,0 +1,57 @@ +import { NextApiRequest, NextApiResponse } from 'next'; + +const testData1 = { + itemHistoryList: [ + { + itemId: 2, + createdAt: new Date(), + intraId: 'hyungjpa', + itemName: '확성기', + content: '설명입니다', + imageUrl: 'no', + price: 42, + discount: 50, + salePrice: 21, + }, + { + itemId: 1, + createdAt: new Date(), + intraId: 'hyungjpa', + itemName: '프로필 변경권', + content: '설명입니다', + // imageUrl: '/image/favicon.svg', + imageUrl: 'no', + price: 20, + discount: 50, + salePrice: 10, + }, + ], + totalPage: 2, +}; + +const testData2 = { + itemHistoryList: [ + { + itemId: 0, + createdAt: new Date(), + intraId: 'hyungjpa', + itemName: '확성기', + content: '설명입니다', + imageUrl: 'no', + price: 42, + discount: 50, + salePrice: 21, + }, + ], + totalPage: 2, +}; + +export default function handler(req: NextApiRequest, res: NextApiResponse) { + const { method, query } = req; + const { page } = query as { page: string }; + + if (method === 'GET') { + if (page === '1') res.status(200).json(testData1); + else res.status(200).json(testData2); + } +} diff --git a/pages/login.tsx b/pages/login.tsx index b2adb1811..5515dbaad 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -3,8 +3,6 @@ import { useRouter } from 'next/router'; import { useEffect } from 'react'; import StyledButton from 'components/StyledButton'; import styles from 'styles/Login.module.scss'; -import MenuTab from 'components/admin/receipt/MenuTab'; -import StoreMain from 'components/admin/store/StoreMain'; function Login() { const router = useRouter(); @@ -29,9 +27,6 @@ function Login() { return ( <> - {/* */} - {/* */} -
diff --git a/types/admin/adminStoreTypes.ts b/types/admin/adminStoreTypes.ts new file mode 100644 index 000000000..88061f38e --- /dev/null +++ b/types/admin/adminStoreTypes.ts @@ -0,0 +1,31 @@ +export interface Iitem { + itemId: number; + itemName: string; + content: string; + imageUrl: string; + originalPrice: number; + discount: number; + salePrice: number; +} + +export interface IitemList { + itemList: Array; +} + +export interface IitemHistory { + itemId: number; + createdAt: Date; + intraId: string; + itemName: string; + content: string; + imageUrl: string; + price: number; + discount: number; + salePrice: number; +} + +export interface IitemHistoryList { + itemHistoryList: Array; + totalPage: number; + currentPage: number; +} diff --git a/types/admin/tableTypes.ts b/types/admin/tableTypes.ts index 1c888ddbf..f69a90798 100644 --- a/types/admin/tableTypes.ts +++ b/types/admin/tableTypes.ts @@ -8,7 +8,9 @@ export type TableName = | 'penalty' | 'receiptList' | 'megaphoneList' - | 'profileList'; + | 'profileList' + | 'itemList' + | 'itemHistory'; export type EtcType = 'button' | 'toggle'; From d11e40aa6c84a9da695ac1a44c7ea9bafdfa8a54 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Fri, 4 Aug 2023 16:05:17 +0900 Subject: [PATCH 18/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20InvetoryItem=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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 | 34 ++++++++++++++++++++ components/store/InventoryList.tsx | 8 ++--- styles/store/Inventory.module.scss | 50 ++++++++++++++++++++++++++++++ 3 files changed, 88 insertions(+), 4 deletions(-) create mode 100644 components/store/InventoryItem.tsx create mode 100644 styles/store/Inventory.module.scss diff --git a/components/store/InventoryItem.tsx b/components/store/InventoryItem.tsx new file mode 100644 index 000000000..c0230b5a4 --- /dev/null +++ b/components/store/InventoryItem.tsx @@ -0,0 +1,34 @@ +import Image from 'next/image'; +import { useRecoilValue } from 'recoil'; +import { BsGiftFill, BsCircleFill } from 'react-icons/bs'; +import { InventoryItem } from 'types/storeTypes'; +import { userState } from 'utils/recoil/layout'; +import styles from 'styles/store/Inventory.module.scss'; + +type inventoryItemProps = { + item: InventoryItem; +}; + +export function InvetoryItem({ item }: inventoryItemProps) { + const user = useRecoilValue(userState); + const { itemId, name, imageUrl, purchaserIntra, itemStatus } = item; + return ( +
+
+ {itemStatus === 'USING' ? ( + + ) : ( + + )} +
+ {user.intraId !== purchaserIntra && } + {itemStatus === 'USING' && ( +
+ 사용중 +
+ )} + {name} +
{name}
+
+ ); +} diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index 089e02216..30482d6c8 100644 --- a/components/store/InventoryList.tsx +++ b/components/store/InventoryList.tsx @@ -1,6 +1,8 @@ import React from 'react'; +import { InvetoryItem } from './InventoryItem'; import { InfinityScroll } from 'utils/infinityScroll'; import { mockInstance } from 'utils/mockAxios'; +import styles from 'styles/store/Inventory.module.scss'; function fetchInventoryData(page: number) { return mockInstance.get(`items?page=${page}&size=${8}`).then((res) => { @@ -20,13 +22,11 @@ export function InventoryList() { if (!data) return
No data
; return ( -
+
{data.pages.map((page, pageIndex) => ( {page.storageItemList.map((item) => ( -
-
{item.name}
-
+ ))} ))} diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss new file mode 100644 index 000000000..bbaf65dac --- /dev/null +++ b/styles/store/Inventory.module.scss @@ -0,0 +1,50 @@ +@import 'styles/common.scss'; + +.inventoryList { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 1rem; +} + +.inventoryItem { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + background-color: #d4b8f2; + border-radius: 0.5rem; + padding: 1rem; + color: #7a6e7b; +} + +.overlay { + background: linear-gradient( + 180deg, + rgba(#fe9cca, 0.7) 0%, + rgba(#fe6bb1, 0.7) 100% + ); + display: flex; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + opacity: 0; + &:hover { + opacity: 1; + } + button { + background: none; + border: 2px solid #fff; + color: #fff; + font-size: 1rem; + padding: 1rem 1.5rem; + border-radius: 1.5rem; + cursor: pointer; + } +} From b0ba5f57a8eae288f55f7b780d5260b67730dad7 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Fri, 4 Aug 2023 16:44:40 +0900 Subject: [PATCH 19/35] =?UTF-8?q?[Style]=20[GGFE-144]=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80,=20=EC=83=81=ED=83=9C=20=EB=B1=83=EC=A7=80=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InventoryItem.tsx | 23 ++++++++++++++++------- pages/api/pingpong/items/index.ts | 9 ++++++--- styles/store/Inventory.module.scss | 20 ++++++++++++++++++++ 3 files changed, 42 insertions(+), 10 deletions(-) diff --git a/components/store/InventoryItem.tsx b/components/store/InventoryItem.tsx index c0230b5a4..717cce3ce 100644 --- a/components/store/InventoryItem.tsx +++ b/components/store/InventoryItem.tsx @@ -1,4 +1,5 @@ import Image from 'next/image'; +import { Tooltip } from '@mui/material'; import { useRecoilValue } from 'recoil'; import { BsGiftFill, BsCircleFill } from 'react-icons/bs'; import { InventoryItem } from 'types/storeTypes'; @@ -14,6 +15,18 @@ export function InvetoryItem({ item }: inventoryItemProps) { const { itemId, name, imageUrl, purchaserIntra, itemStatus } = item; return (
+
+ {user.intraId !== purchaserIntra && ( + + + + )} + {itemStatus === 'USING' && ( +
+ 사용중 +
+ )} +
{itemStatus === 'USING' ? ( @@ -21,13 +34,9 @@ export function InvetoryItem({ item }: inventoryItemProps) { )}
- {user.intraId !== purchaserIntra && } - {itemStatus === 'USING' && ( -
- 사용중 -
- )} - {name} +
+ {name} +
{name}
); diff --git a/pages/api/pingpong/items/index.ts b/pages/api/pingpong/items/index.ts index abf938fa8..954eb625c 100644 --- a/pages/api/pingpong/items/index.ts +++ b/pages/api/pingpong/items/index.ts @@ -20,7 +20,8 @@ const item2: InventoryItem = { const item3: InventoryItem = { itemId: 3, name: '테스트3', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + imageUrl: + 'https://dodo.ac/np/images/thumb/1/17/NH_Balloon.jpg/600px-NH_Balloon.jpg', purchaserIntra: 'jeyoon', itemStatus: 'USING', }; @@ -44,7 +45,8 @@ const item5: InventoryItem = { const item6: InventoryItem = { itemId: 6, name: '테스트6', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + imageUrl: + 'https://dodo.ac/np/images/thumb/1/17/NH_Balloon.jpg/600px-NH_Balloon.jpg', purchaserIntra: 'hyungjpa', itemStatus: 'BEFORE', }; @@ -68,7 +70,8 @@ const item8: InventoryItem = { const item9: InventoryItem = { itemId: 9, name: '테스트9', - imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', + imageUrl: + 'https://dodo.ac/np/images/thumb/1/17/NH_Balloon.jpg/600px-NH_Balloon.jpg', purchaserIntra: 'hyobicho', itemStatus: 'BEFORE', }; diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss index bbaf65dac..3f61ae2d7 100644 --- a/styles/store/Inventory.module.scss +++ b/styles/store/Inventory.module.scss @@ -35,6 +35,7 @@ bottom: 0; right: 0; opacity: 0; + z-index: 1; &:hover { opacity: 1; } @@ -48,3 +49,22 @@ cursor: pointer; } } + +.topBadgeContainer { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 0.5rem; + z-index: 2; +} + +.imgContainer { + position: relative; + width: 100%; + height: 100px; + overflow: hidden; +} + +.img { + object-fit: contain; +} From 6e962cd88b568c9ccdd6739ea287e7ea6db70ba5 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Fri, 4 Aug 2023 17:11:40 +0900 Subject: [PATCH 20/35] =?UTF-8?q?[Style]=20[GGFE-144]=20=EC=83=81=EB=8B=A8?= =?UTF-8?q?=20tooltip=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InventoryItem.tsx | 12 ++++++++---- pages/api/pingpong/items/index.ts | 2 +- styles/store/Inventory.module.scss | 23 +++++++++++++++++++++-- 3 files changed, 30 insertions(+), 7 deletions(-) diff --git a/components/store/InventoryItem.tsx b/components/store/InventoryItem.tsx index 717cce3ce..297159997 100644 --- a/components/store/InventoryItem.tsx +++ b/components/store/InventoryItem.tsx @@ -16,13 +16,17 @@ export function InvetoryItem({ item }: inventoryItemProps) { return (
- {user.intraId !== purchaserIntra && ( + {user.intraId !== purchaserIntra ? ( - + + ) : ( +
)} {itemStatus === 'USING' && ( -
+
사용중
)} @@ -37,7 +41,7 @@ export function InvetoryItem({ item }: inventoryItemProps) {
{name}
-
{name}
+
{name}
); } diff --git a/pages/api/pingpong/items/index.ts b/pages/api/pingpong/items/index.ts index 954eb625c..016cfc36c 100644 --- a/pages/api/pingpong/items/index.ts +++ b/pages/api/pingpong/items/index.ts @@ -6,7 +6,7 @@ const item1: InventoryItem = { name: '테스트1', imageUrl: 'https://cdn.nookazon.com/nookazon/icons/leaf.png', purchaserIntra: 'hyobicho', - itemStatus: 'BEFORE', + itemStatus: 'USING', }; const item2: InventoryItem = { diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss index 3f61ae2d7..e52df237b 100644 --- a/styles/store/Inventory.module.scss +++ b/styles/store/Inventory.module.scss @@ -15,6 +15,13 @@ border-radius: 0.5rem; padding: 1rem; color: #7a6e7b; + button { + background: none; + border: none; + padding: 0; + font-size: 1rem; + color: #7a6e7b; + } } .overlay { @@ -40,7 +47,6 @@ opacity: 1; } button { - background: none; border: 2px solid #fff; color: #fff; font-size: 1rem; @@ -58,6 +64,12 @@ z-index: 2; } +.usingBadge { + svg { + fill: #08f458; + } +} + .imgContainer { position: relative; width: 100%; @@ -66,5 +78,12 @@ } .img { - object-fit: contain; + object-fit: cover; + // object-fit: contain; +} + +.itemName { + font-size: 1.3rem; + font-weight: bold; + margin-top: 0.5rem; } From 3a8d0184e80b7086301e9ede0a72ee6f533055c1 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Fri, 4 Aug 2023 17:20:29 +0900 Subject: [PATCH 21/35] =?UTF-8?q?[Style]=20[GGFE-144]=20=EA=B8=80=EC=9E=90?= =?UTF-8?q?=20=EC=A0=95=EB=A0=AC?= 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 e52df237b..8d255c99a 100644 --- a/styles/store/Inventory.module.scss +++ b/styles/store/Inventory.module.scss @@ -65,8 +65,11 @@ } .usingBadge { + display: flex; + align-items: center; svg { fill: #08f458; + margin-right: 0.3rem; } } From 2f9bdd8ea8b070597152f45249e2c6f057503d10 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Fri, 4 Aug 2023 17:24:57 +0900 Subject: [PATCH 22/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20dummy=20button=20ha?= =?UTF-8?q?ndler=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 | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/components/store/InventoryItem.tsx b/components/store/InventoryItem.tsx index 297159997..dd99f46d7 100644 --- a/components/store/InventoryItem.tsx +++ b/components/store/InventoryItem.tsx @@ -12,7 +12,19 @@ type inventoryItemProps = { export function InvetoryItem({ item }: inventoryItemProps) { const user = useRecoilValue(userState); + const { itemId, name, imageUrl, purchaserIntra, itemStatus } = item; + + function handleUseItem(e: React.MouseEvent) { + e.preventDefault(); + console.log(`use item ${itemId}`); + } + + function handleEditItem(e: React.MouseEvent) { + e.preventDefault; + console.log(`edit item ${itemId}`); + } + return (
@@ -33,9 +45,9 @@ export function InvetoryItem({ item }: inventoryItemProps) {
{itemStatus === 'USING' ? ( - + ) : ( - + )}
From f808767e4b4a39b8c2e32b23e91fe9209f8a322e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Sun, 6 Aug 2023 05:03:40 +0900 Subject: [PATCH 23/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EA=B4=80=EB=A6=AC?= =?UTF-8?q?=EC=9E=90=20=EC=9E=AC=ED=99=94=EC=A0=95=EC=B1=85=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/coin/CoinPolicy.tsx | 89 +++++++++------ components/admin/coin/CoinPolicyHistory.tsx | 107 ++++++++++++++++--- components/admin/receipt/MegaphoneList.tsx | 24 ++--- components/admin/receipt/ProfileList.tsx | 63 ++++++----- components/admin/receipt/ReceiptList.tsx | 11 +- components/admin/store/ItemList.tsx | 32 +++--- components/admin/store/itemHistory.tsx | 13 +-- constants/admin/table.ts | 12 +++ pages/api/pingpong/admin/coinpolicy/index.ts | 50 +++++++++ pages/api/pingpong/admin/images/index.ts | 2 +- types/admin/adminCoinTypes.ts | 22 ++++ types/admin/tableTypes.ts | 3 +- 12 files changed, 309 insertions(+), 119 deletions(-) create mode 100644 pages/api/pingpong/admin/coinpolicy/index.ts create mode 100644 types/admin/adminCoinTypes.ts diff --git a/components/admin/coin/CoinPolicy.tsx b/components/admin/coin/CoinPolicy.tsx index 66e11a695..43aeea7a6 100644 --- a/components/admin/coin/CoinPolicy.tsx +++ b/components/admin/coin/CoinPolicy.tsx @@ -1,3 +1,4 @@ +import { useRef } from 'react'; import { Paper, Table, @@ -8,43 +9,63 @@ import { TableRow, } from '@mui/material'; +const coinPolicyTableTitle: { [key: string]: string } = { + attendance: '출석 획득', + normal: '일반게임 획득', + rankWin: '랭크게임 승리 획득', + rankLose: '랭크게임 패배 획득', + register: '정책 등록', +}; -const coinPolicyTableTitle: { [key: string]: string} = { - attendance : '출석 획득', - normal : '일반게임 획득', - rankWin : '랭크게임 승리 획득', - rankLose : '랭크게임 패배 획득' -} - - +const tableColumnName = [ + 'attendance', + 'normal', + 'rankWin', + 'rankLose', + 'register', +]; -function CoinPolicy () { +function CoinPolicy() { + const inputRef = useRef([]); - const test = ['attendance', 'normal', - 'rankWin', 'rankLose']; + // inputRef 받아와서 요청 보내는 handler 추가 필요 + // const putCoinPolicyHandler - return ( - <> - - - - - {test.map((content, idx) => ( - - {coinPolicyTableTitle[content]} - - ))} - - - - - 비어있습니다 - - -
- - - ) + return ( + <> + + + + + {tableColumnName.map((column, idx) => ( + {coinPolicyTableTitle[column]} + ))} + + + + + {tableColumnName + .slice(0, 4) + .map((column: string, index: number) => ( + + { + inputRef.current[index] = el; + }} + > + + ))} + + + + + +
+ + + ); } -export default CoinPolicy; \ No newline at end of file +export default CoinPolicy; diff --git a/components/admin/coin/CoinPolicyHistory.tsx b/components/admin/coin/CoinPolicyHistory.tsx index f02c36a6d..bf5ab60cb 100644 --- a/components/admin/coin/CoinPolicyHistory.tsx +++ b/components/admin/coin/CoinPolicyHistory.tsx @@ -1,3 +1,12 @@ +import { useEffect, useState } from 'react'; +import PageNation from 'components/Pagination'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { tableFormat } from 'constants/admin/table'; +import { + IcoinPolicyHistory, + IcoinPolicyHistoryTable, +} from 'types/admin/adminCoinTypes'; import { Paper, Table, @@ -9,25 +18,62 @@ import { } from '@mui/material'; const coinPolicyHistoryTableTitle: { [key: string]: string } = { - coinPolicyId: '정책 id', + coinPolicyId: 'ID', + created_at: '등록 날짜', createUser: '등록 유저', attendance: '출석 획득', nomal: '일반게임 획득', rank_win: '랭크게임 승리 획득', rank_lose: '랭크게임 패배 획득', - created_at: '등록 날짜', }; +const tableColumnName = [ + 'coinPolicyId', + 'created_at', + 'createUser', + 'attendance', + 'normal', + 'rank_win', + 'rank_lose', +]; + function CoinPolicyHistory() { - const test = [ - 'coinPolicyId', - 'createUser', - 'attendance', - 'normal', - 'rank_win', - 'rank_lose', - 'created_at', - ]; + const [coinPolicyHistoryData, setCoinPolicyHistoryData] = + useState({ + coinPolicyList: [], + totalPage: 0, + currentPage: 0, + }); + const [currentPage, setCurrentPage] = useState(1); + + // api 연결 시 useCallback, instanceInManage, try catch로 변경 + const getCoinPolicyHistoryHandler = useMockAxiosGet({ + url: `/admin/coinpolicy?page=${currentPage}&size=5`, + setState: (data) => { + setCoinPolicyHistoryData({ + coinPolicyList: data.coinPolicyList.map( + (coinPolicyHistory: IcoinPolicyHistory) => { + const { year, month, date, hour, min } = getFormattedDateToString( + new Date(coinPolicyHistory.created_at) + ); + return { + ...coinPolicyHistory, + created_at: `${year}-${month}-${date} ${hour}:${min}`, + }; + } + ), + totalPage: data.totalPage, + currentPage: currentPage, + }); + }, + err: 'HJ08', + type: 'setError', + }); + + useEffect(() => { + getCoinPolicyHistoryHandler(); + console.log(coinPolicyHistoryData); + }, [currentPage]); return ( <> @@ -35,20 +81,49 @@ function CoinPolicyHistory() { - {test.map((content, idx) => ( + {tableColumnName.map((column, idx) => ( - {coinPolicyHistoryTableTitle[content]} + {coinPolicyHistoryTableTitle[column]} ))} - - 비어있습니다 - + {coinPolicyHistoryData.coinPolicyList.length > 0 ? ( + coinPolicyHistoryData.coinPolicyList.map( + (coinPolicyHistory: IcoinPolicyHistory) => ( + + {tableFormat['coinPolicyHistory'].columns.map( + (columnName: string, index: number) => { + return ( + + {coinPolicyHistory[ + columnName as keyof IcoinPolicyHistory + ].toString()} + + ); + } + )} + + ) + ) + ) : ( + + 비어있습니다 + + )}
+
+ { + setCurrentPage(pageNumber); + }} + /> +
); } diff --git a/components/admin/receipt/MegaphoneList.tsx b/components/admin/receipt/MegaphoneList.tsx index 15995eaeb..e218dad5f 100644 --- a/components/admin/receipt/MegaphoneList.tsx +++ b/components/admin/receipt/MegaphoneList.tsx @@ -1,6 +1,15 @@ import { useEffect, useState } from 'react'; +import { useSetRecoilState } from 'recoil'; +import PageNation from 'components/Pagination'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { modalState } from 'utils/recoil/modal'; import { tableFormat } from 'constants/admin/table'; - +import { + Imegaphone, + ImegaphoneInfo, + ImegaphoneTable, +} from 'types/admin/adminReceiptType'; import { Paper, Table, @@ -10,16 +19,6 @@ import { TableHead, TableRow, } from '@mui/material'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; -import PageNation from 'components/Pagination'; -import { getFormattedDateToString } from 'utils/handleTime'; -import { useSetRecoilState } from 'recoil'; -import { - Imegaphone, - ImegaphoneInfo, - ImegaphoneTable, -} from 'types/admin/adminReceiptType'; -import { modalState } from 'utils/recoil/modal'; const megaPhoneTableTitle: { [key: string]: string } = { megaphoneId: 'ID', @@ -45,10 +44,9 @@ function MegaphoneList() { totalPage: 0, currentPage: 0, }); - const [currentPage, setCurrentPage] = useState(1); - // 특정 유저 확성기 사용내역만 가져오는 api 추가되면 handler 추가 + // 특정 유저 확성기 사용내역만 가져오는 api 추가되면 handler 추가 + 유저 검색 컴포넌트 추가 // api 연결 시 useCallback, instanceInManage, try catch로 변경 const getMegaphoneHandler = useMockAxiosGet({ diff --git a/components/admin/receipt/ProfileList.tsx b/components/admin/receipt/ProfileList.tsx index a466637ca..3044a6f82 100644 --- a/components/admin/receipt/ProfileList.tsx +++ b/components/admin/receipt/ProfileList.tsx @@ -1,3 +1,15 @@ +import { useEffect, useState } from 'react'; +import { useSetRecoilState } from 'recoil'; +import PageNation from 'components/Pagination'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { tableFormat } from 'constants/admin/table'; +import { modalState } from 'utils/recoil/modal'; +import { + Iprofile, + IprofileInfo, + IprofileTable, +} from 'types/admin/adminReceiptType'; import { Paper, Table, @@ -7,18 +19,7 @@ import { TableHead, TableRow, } from '@mui/material'; -import PageNation from 'components/Pagination'; -import { tableFormat } from 'constants/admin/table'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; -import { useEffect, useState } from 'react'; -import { useSetRecoilState } from 'recoil'; -import { - Iprofile, - IprofileInfo, - IprofileTable, -} from 'types/admin/adminReceiptType'; -import { getFormattedDateToString } from 'utils/handleTime'; -import { modalState } from 'utils/recoil/modal'; +import Image from 'next/image'; const profileTableTitle: { [key: string]: string } = { profileId: 'ID', @@ -36,10 +37,9 @@ function ProfileList() { totalPage: 0, currentPage: 0, }); - const [currentPage, setCurrentPage] = useState(1); - // 특정 유저 확성기 사용내역만 가져오는 api 추가되면 handler 추가 + // 특정 유저 확성기 사용내역만 가져오는 api 추가되면 handler + 유저 검색 컴포넌트 추가 // api 연결 시 useCallback, instanceInManage, try catch로 변경 const getProfileHandler = useMockAxiosGet({ @@ -95,22 +95,33 @@ function ProfileList() { (columnName: string, index: number) => { return ( - {profile[columnName as keyof Iprofile].toString()} + {columnName === 'imageUrl' ? ( + no + ) : ( + profile[columnName as keyof Iprofile].toString() + )} ); } )} - + + + )) ) : ( diff --git a/components/admin/receipt/ReceiptList.tsx b/components/admin/receipt/ReceiptList.tsx index db8190b41..29ac83568 100644 --- a/components/admin/receipt/ReceiptList.tsx +++ b/components/admin/receipt/ReceiptList.tsx @@ -1,8 +1,9 @@ import { useEffect, useState } from 'react'; - import { useMockAxiosGet } from 'hooks/useAxiosGet'; - +import PageNation from 'components/Pagination'; +import { getFormattedDateToString } from 'utils/handleTime'; import { tableFormat } from 'constants/admin/table'; +import { Ireceipt, IreceiptTable } from 'types/admin/adminReceiptType'; import { Paper, Table, @@ -12,9 +13,6 @@ import { TableHead, TableRow, } from '@mui/material'; -import PageNation from 'components/Pagination'; -import { getFormattedDateToString } from 'utils/handleTime'; -import { Ireceipt, IreceiptTable } from 'types/admin/adminReceiptType'; const receiptListTableTitle: { [key: string]: string } = { receiptId: 'ID', @@ -45,7 +43,8 @@ function ReceiptList() { const [currentPage, setCurrentPage] = useState(1); - // 특정 유저 거래 내역만 가져오는 api 추가되면 handler 추가 + // 특정 유저 거래 내역만 가져오는 api 추가되면 handler 추가 + 유저 검색 컴포넌트 추가 + // api 연결 시 useCallback, instanceInManage, try catch로 변경 const getReceiptHandler = useMockAxiosGet({ url: `/admin/receipt/?page=${currentPage}&size=10`, diff --git a/components/admin/store/ItemList.tsx b/components/admin/store/ItemList.tsx index 07a990371..7dec781be 100644 --- a/components/admin/store/ItemList.tsx +++ b/components/admin/store/ItemList.tsx @@ -1,7 +1,10 @@ -import { tableFormat } from 'constants/admin/table'; - import Image from 'next/image'; - +import { useEffect, useState } from 'react'; +import { useSetRecoilState } from 'recoil'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { tableFormat } from 'constants/admin/table'; +import { modalState } from 'utils/recoil/modal'; +import { Iitem, IitemList } from 'types/admin/adminStoreTypes'; import { Paper, Table, @@ -11,11 +14,6 @@ import { TableHead, TableRow, } from '@mui/material'; -import { useEffect, useState } from 'react'; -import { Iitem, IitemList } from 'types/admin/adminStoreTypes'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; -import { useSetRecoilState } from 'recoil'; -import { modalState } from 'utils/recoil/modal'; const itemListTableTitle: { [key: string]: string } = { itemId: 'ID', @@ -51,8 +49,7 @@ function ItemList() { itemId: 3, itemName: '확성기', content: '확성기 설명', - // imageUrl: '/image/noti_empty.svg', - imageUrl: 'no', + imageUrl: '/image/noti_empty.svg', originalPrice: 42, discount: 50, salePrice: 21, @@ -77,8 +74,8 @@ function ItemList() { }, ]; - // api handler 추후 수정필요 // store에서 사용하는 api라 mock api 겹칠까봐 사용안함 + // api 연결 시 useCallback, instanceInManage, try catch로 변경 // const getItemListHandler = useMockAxiosGet({ // url: `items/store`, // setState: setItemListData, @@ -94,7 +91,7 @@ function ItemList() { useEffect(() => { // getItemListHandler(); - // test용 + // 아래는 setter는 test용 setItemListData({ itemList: testData }); }, []); @@ -118,11 +115,14 @@ function ItemList() { return ( {columnName === 'imageUrl' ? ( - // no -
no
+ no ) : ( - item[columnName as keyof Iitem] + item[columnName as keyof Iitem].toString() )} ); diff --git a/components/admin/store/itemHistory.tsx b/components/admin/store/itemHistory.tsx index 0c9e1a7c2..f80f0afcb 100644 --- a/components/admin/store/itemHistory.tsx +++ b/components/admin/store/itemHistory.tsx @@ -1,3 +1,9 @@ +import { useEffect, useState } from 'react'; +import PageNation from 'components/Pagination'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { tableFormat } from 'constants/admin/table'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { IitemHistory, IitemHistoryList } from 'types/admin/adminStoreTypes'; import { Paper, Table, @@ -7,12 +13,6 @@ import { TableHead, TableRow, } from '@mui/material'; -import PageNation from 'components/Pagination'; -import { tableFormat } from 'constants/admin/table'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; -import { useEffect, useState } from 'react'; -import { IitemHistory, IitemHistoryList } from 'types/admin/adminStoreTypes'; -import { getFormattedDateToString } from 'utils/handleTime'; const itemHistoryTableTitle: { [key: string]: string } = { itemId: 'ID', @@ -46,6 +46,7 @@ function ItemHistory() { }); const [currentPage, setCurrentPage] = useState(1); + // api 연결 시 useCallback, instanceInManage, try catch로 변경 const getItemHistoryListHandler = useMockAxiosGet({ url: `admin/items/history?page=${currentPage}&size=5`, setState: (data) => { diff --git a/constants/admin/table.ts b/constants/admin/table.ts index bbcb9da77..7309be5ea 100644 --- a/constants/admin/table.ts +++ b/constants/admin/table.ts @@ -118,4 +118,16 @@ export const tableFormat: TableFormat = { 'salePrice', ], }, + coinPolicyHistory: { + name: '재화 정책 변경 이력', + columns: [ + 'coinPollicyId', + 'createUser', + 'attendance', + 'normal', + 'rankWin', + 'rankLose', + 'createdAt', + ], + }, }; diff --git a/pages/api/pingpong/admin/coinpolicy/index.ts b/pages/api/pingpong/admin/coinpolicy/index.ts new file mode 100644 index 000000000..6c4553c52 --- /dev/null +++ b/pages/api/pingpong/admin/coinpolicy/index.ts @@ -0,0 +1,50 @@ +import { NextApiRequest, NextApiResponse } from 'next'; + +const testData1 = { + coinPolicyList: [ + { + coinPolicyId: '2', + createUser: 'hyungjpa', + attendance: '3', + nomal: '5', + rank_win: '7', + rank_lose: '4', + created_at: new Date(), + }, + { + coinPolicyId: '1', + createUser: 'hyungjpa', + attendance: '1', + nomal: '2', + rank_win: '3', + rank_lose: '4', + created_at: new Date(), + }, + ], + totalPage: 2, +}; + +const testData2 = { + coinPolicyList: [ + { + coinPolicyId: '0', + createUser: 'hyungjpa', + attendance: '0', + nomal: '1', + rank_win: '0', + rank_lose: '0', + created_at: new Date(), + }, + ], + totalPage: 2, +}; + +export default function handler(req: NextApiRequest, res: NextApiResponse) { + const { method, query } = req; + const { page } = query as { page: string }; + + if (method === 'GET') { + if (page === '1') res.status(200).json(testData1); + else res.status(200).json(testData2); + } +} diff --git a/pages/api/pingpong/admin/images/index.ts b/pages/api/pingpong/admin/images/index.ts index 8a7cd232a..18664b2cd 100644 --- a/pages/api/pingpong/admin/images/index.ts +++ b/pages/api/pingpong/admin/images/index.ts @@ -6,7 +6,7 @@ const testData1 = { profileId: '12', date: new Date(), intraId: 'hyungjpa', - imageUrl: 'none', + imageUrl: '/image/noti_empty.svg', }, ], totalPage: 2, diff --git a/types/admin/adminCoinTypes.ts b/types/admin/adminCoinTypes.ts new file mode 100644 index 000000000..f927338ba --- /dev/null +++ b/types/admin/adminCoinTypes.ts @@ -0,0 +1,22 @@ +export interface IcoinPolicy { + attendance: number; + normal: number; + rankWin: number; + rankLose: number; +} + +export interface IcoinPolicyHistory { + coinPolicyId: number; + createUser: string; + attendance: string; + normal: number; + rank_win: number; + rank_lose: number; + created_at: Date; +} + +export interface IcoinPolicyHistoryTable { + coinPolicyList: Array; + totalPage: number; + currentPage: number; +} diff --git a/types/admin/tableTypes.ts b/types/admin/tableTypes.ts index f69a90798..1b3471418 100644 --- a/types/admin/tableTypes.ts +++ b/types/admin/tableTypes.ts @@ -10,7 +10,8 @@ export type TableName = | 'megaphoneList' | 'profileList' | 'itemList' - | 'itemHistory'; + | 'itemHistory' + | 'coinPolicyHistory'; export type EtcType = 'button' | 'toggle'; From 864802efa449d6460f7f44e2b0aef399ee0f770f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Sun, 6 Aug 2023 05:37:07 +0900 Subject: [PATCH 24/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EA=B4=80=EB=A6=AC?= =?UTF-8?q?=EC=9E=90=20=EC=9E=AC=ED=99=94=EC=A0=95=EC=B1=85=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/coin/CoinPolicyHistory.tsx | 19 +++++----- components/admin/store/itemHistory.tsx | 16 +++++++-- constants/admin/table.ts | 4 +-- pages/api/pingpong/admin/coinpolicy/index.ts | 36 +++++++++---------- pages/api/pingpong/admin/images/index.ts | 4 +-- .../api/pingpong/admin/items/history/index.ts | 9 +++-- .../admin/megaphones/history/index.ts | 26 +++++++------- pages/api/pingpong/admin/receipt/index.ts | 28 +++++++-------- types/admin/adminCoinTypes.ts | 6 ++-- 9 files changed, 78 insertions(+), 70 deletions(-) diff --git a/components/admin/coin/CoinPolicyHistory.tsx b/components/admin/coin/CoinPolicyHistory.tsx index bf5ab60cb..c53cef383 100644 --- a/components/admin/coin/CoinPolicyHistory.tsx +++ b/components/admin/coin/CoinPolicyHistory.tsx @@ -19,22 +19,22 @@ import { const coinPolicyHistoryTableTitle: { [key: string]: string } = { coinPolicyId: 'ID', - created_at: '등록 날짜', + createdAt: '등록 날짜', createUser: '등록 유저', attendance: '출석 획득', - nomal: '일반게임 획득', - rank_win: '랭크게임 승리 획득', - rank_lose: '랭크게임 패배 획득', + normal: '일반게임 획득', + rankWin: '랭크게임 승리 획득', + rankLose: '랭크게임 패배 획득', }; const tableColumnName = [ 'coinPolicyId', - 'created_at', + 'createdAt', 'createUser', 'attendance', 'normal', - 'rank_win', - 'rank_lose', + 'rankWin', + 'rankLose', ]; function CoinPolicyHistory() { @@ -54,11 +54,11 @@ function CoinPolicyHistory() { coinPolicyList: data.coinPolicyList.map( (coinPolicyHistory: IcoinPolicyHistory) => { const { year, month, date, hour, min } = getFormattedDateToString( - new Date(coinPolicyHistory.created_at) + new Date(coinPolicyHistory.createdAt) ); return { ...coinPolicyHistory, - created_at: `${year}-${month}-${date} ${hour}:${min}`, + createdAt: `${year}-${month}-${date} ${hour}:${min}`, }; } ), @@ -72,7 +72,6 @@ function CoinPolicyHistory() { useEffect(() => { getCoinPolicyHistoryHandler(); - console.log(coinPolicyHistoryData); }, [currentPage]); return ( diff --git a/components/admin/store/itemHistory.tsx b/components/admin/store/itemHistory.tsx index f80f0afcb..1e03a5229 100644 --- a/components/admin/store/itemHistory.tsx +++ b/components/admin/store/itemHistory.tsx @@ -1,3 +1,4 @@ +import Image from 'next/image'; import { useEffect, useState } from 'react'; import PageNation from 'components/Pagination'; import { useMockAxiosGet } from 'hooks/useAxiosGet'; @@ -94,9 +95,18 @@ function ItemHistory() { (columnName: string, index: number) => { return ( - {itemHistory[ - columnName as keyof IitemHistory - ].toString()} + {columnName === 'imageUrl' ? ( + no + ) : ( + itemHistory[ + columnName as keyof IitemHistory + ].toString() + )} ); } diff --git a/constants/admin/table.ts b/constants/admin/table.ts index 7309be5ea..7d731dc59 100644 --- a/constants/admin/table.ts +++ b/constants/admin/table.ts @@ -121,13 +121,13 @@ export const tableFormat: TableFormat = { coinPolicyHistory: { name: '재화 정책 변경 이력', columns: [ - 'coinPollicyId', + 'coinPolicyId', + 'createdAt', 'createUser', 'attendance', 'normal', 'rankWin', 'rankLose', - 'createdAt', ], }, }; diff --git a/pages/api/pingpong/admin/coinpolicy/index.ts b/pages/api/pingpong/admin/coinpolicy/index.ts index 6c4553c52..ece4728fc 100644 --- a/pages/api/pingpong/admin/coinpolicy/index.ts +++ b/pages/api/pingpong/admin/coinpolicy/index.ts @@ -3,22 +3,22 @@ import { NextApiRequest, NextApiResponse } from 'next'; const testData1 = { coinPolicyList: [ { - coinPolicyId: '2', + coinPolicyId: 2, createUser: 'hyungjpa', - attendance: '3', - nomal: '5', - rank_win: '7', - rank_lose: '4', - created_at: new Date(), + attendance: 3, + normal: 5, + rankWin: 7, + rankLose: 4, + createdAt: '2023-04-05 00:30:25', }, { - coinPolicyId: '1', + coinPolicyId: 1, createUser: 'hyungjpa', - attendance: '1', - nomal: '2', - rank_win: '3', - rank_lose: '4', - created_at: new Date(), + attendance: 1, + normal: 2, + rankWin: 3, + rankLose: 4, + createdAt: '2023-03-25 06:25:34', }, ], totalPage: 2, @@ -27,13 +27,13 @@ const testData1 = { const testData2 = { coinPolicyList: [ { - coinPolicyId: '0', + coinPolicyId: 0, createUser: 'hyungjpa', - attendance: '0', - nomal: '1', - rank_win: '0', - rank_lose: '0', - created_at: new Date(), + attendance: 0, + normal: 1, + rankWin: 0, + rankLose: 0, + createdAt: '2023-08-05 10:10:10', }, ], totalPage: 2, diff --git a/pages/api/pingpong/admin/images/index.ts b/pages/api/pingpong/admin/images/index.ts index 18664b2cd..431a7a7b4 100644 --- a/pages/api/pingpong/admin/images/index.ts +++ b/pages/api/pingpong/admin/images/index.ts @@ -4,7 +4,7 @@ const testData1 = { profileList: [ { profileId: '12', - date: new Date(), + date: '2023-08-05 10:10:10', intraId: 'hyungjpa', imageUrl: '/image/noti_empty.svg', }, @@ -16,7 +16,7 @@ const testData2 = { profileList: [ { profileId: '1', - date: new Date(), + date: '2023-08-04 10:10:10', intraId: 'hyungjpa', imageUrl: 'none', }, diff --git a/pages/api/pingpong/admin/items/history/index.ts b/pages/api/pingpong/admin/items/history/index.ts index 1420db2c6..83f0d9527 100644 --- a/pages/api/pingpong/admin/items/history/index.ts +++ b/pages/api/pingpong/admin/items/history/index.ts @@ -4,22 +4,21 @@ const testData1 = { itemHistoryList: [ { itemId: 2, - createdAt: new Date(), + createdAt: '2023-08-05 20:10:10', intraId: 'hyungjpa', itemName: '확성기', content: '설명입니다', - imageUrl: 'no', + imageUrl: '/image/menu_manual.svg', price: 42, discount: 50, salePrice: 21, }, { itemId: 1, - createdAt: new Date(), + createdAt: '2023-08-05 10:10:10', intraId: 'hyungjpa', itemName: '프로필 변경권', content: '설명입니다', - // imageUrl: '/image/favicon.svg', imageUrl: 'no', price: 20, discount: 50, @@ -33,7 +32,7 @@ const testData2 = { itemHistoryList: [ { itemId: 0, - createdAt: new Date(), + createdAt: '2023-08-05 20:10:10', intraId: 'hyungjpa', itemName: '확성기', content: '설명입니다', diff --git a/pages/api/pingpong/admin/megaphones/history/index.ts b/pages/api/pingpong/admin/megaphones/history/index.ts index 0732dbeda..4f20696d4 100644 --- a/pages/api/pingpong/admin/megaphones/history/index.ts +++ b/pages/api/pingpong/admin/megaphones/history/index.ts @@ -5,70 +5,70 @@ const testData1 = { { megaphoneId: 12, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-08-05 10:10:10', status: '사용 중', intraId: 'hyungjpa', }, { megaphoneId: 11, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-07-05 10:10:10', status: '사용 중', intraId: 'hyungjpa', }, { megaphoneId: 10, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-07-05 06:10:10', status: '사용 중', intraId: 'hyungjpa', }, { megaphoneId: 9, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-07-03 10:10:10', status: '사용 중', intraId: 'hyungjpa', }, { megaphoneId: 8, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-07-02 10:20:10', status: '사용 대기', intraId: 'hyungjpa', }, { megaphoneId: 7, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-06-05 10:10:10', status: '사용 대기', intraId: 'hyungjpa', }, { megaphoneId: 6, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-06-05 10:00:10', status: '사용 대기', intraId: 'hyungjpa', }, { megaphoneId: 5, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-05-05 10:10:10', status: '사용 완료', intraId: 'hyungjpa', }, { megaphoneId: 4, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-05-04 10:10:10', status: '사용 완료', intraId: 'hyungjpa', }, { megaphoneId: 3, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-05-03 10:10:10', status: '사용 완료', intraId: 'hyungjpa', }, @@ -81,21 +81,21 @@ const testData2 = { { megaphoneId: 2, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-05-02 10:10:10', status: '사용 완료', intraId: 'hyungjpa', }, { megaphoneId: 1, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-05-01 10:10:10', status: '사용 완료', intraId: 'hyungjpa', }, { megaphoneId: 0, content: '확성기입니다', - usedAt: new Date(), + usedAt: '2023-05-01 00:10:10', status: '사용 완료', intraId: 'hyungjpa', }, diff --git a/pages/api/pingpong/admin/receipt/index.ts b/pages/api/pingpong/admin/receipt/index.ts index fcb905180..0748d1381 100644 --- a/pages/api/pingpong/admin/receipt/index.ts +++ b/pages/api/pingpong/admin/receipt/index.ts @@ -4,7 +4,7 @@ const testData1 = { receiptList: [ { receiptId: 13, - createdAt: new Date(), + createdAt: '2023-08-05 20:10:10', itemName: '확성기', itemPrice: 42, purchaserIntra: 'admin', @@ -13,7 +13,7 @@ const testData1 = { }, { receiptId: 12, - createdAt: new Date(), + createdAt: '2023-08-05 19:20:10', itemName: '프로필 사진 변경권', itemPrice: 21, purchaserIntra: 'admin', @@ -22,7 +22,7 @@ const testData1 = { }, { receiptId: 11, - createdAt: new Date(), + createdAt: '2023-08-04 10:10:10', itemName: '프로필 색상 변경권', itemPrice: 10, purchaserIntra: 'admin', @@ -31,7 +31,7 @@ const testData1 = { }, { receiptId: 10, - createdAt: new Date(), + createdAt: '2023-08-04 05:30:10', itemName: '확성기', itemPrice: 42, purchaserIntra: 'admin', @@ -40,7 +40,7 @@ const testData1 = { }, { receiptId: 9, - createdAt: new Date(), + createdAt: '2023-08-01 21:29:10', itemName: '프로필 사진 변경권', itemPrice: 21, purchaserIntra: 'admin', @@ -49,7 +49,7 @@ const testData1 = { }, { receiptId: 8, - createdAt: new Date(), + createdAt: '2023-07-29 18:24:10', itemName: '프로필 색상 변경권', itemPrice: 10, purchaserIntra: 'admin', @@ -58,7 +58,7 @@ const testData1 = { }, { receiptId: 7, - createdAt: new Date(), + createdAt: '2023-07-28 10:10:10', itemName: '확성기', itemPrice: 42, purchaserIntra: 'admin', @@ -67,7 +67,7 @@ const testData1 = { }, { receiptId: 6, - createdAt: new Date(), + createdAt: '2023-06-30 21:10:10', itemName: '프로필 사진 변경권', itemPrice: 21, purchaserIntra: 'admin', @@ -76,7 +76,7 @@ const testData1 = { }, { receiptId: 5, - createdAt: new Date(), + createdAt: '2023-06-21 20:13:10', itemName: '프로필 색상 변경권', itemPrice: 10, purchaserIntra: 'admin', @@ -91,7 +91,7 @@ const testData2 = { receiptList: [ { receiptId: 4, - createdAt: new Date(), + createdAt: '2023-04-05 10:10:10', itemName: '확성기', itemPrice: 42, purchaserIntra: 'admin', @@ -100,7 +100,7 @@ const testData2 = { }, { receiptId: 3, - createdAt: new Date(), + createdAt: '2023-03-05 10:10:10', itemName: '프로필 사진 변경권', itemPrice: 21, purchaserIntra: 'admin', @@ -109,7 +109,7 @@ const testData2 = { }, { receiptId: 2, - createdAt: new Date(), + createdAt: '2023-02-05 10:10:10', itemName: '프로필 색상 변경권', itemPrice: 10, purchaserIntra: 'admin', @@ -118,7 +118,7 @@ const testData2 = { }, { receiptId: 1, - createdAt: new Date(), + createdAt: '2023-01-05 10:10:10', itemName: '확성기', itemPrice: 42, purchaserIntra: 'admin', @@ -127,7 +127,7 @@ const testData2 = { }, { receiptId: 0, - createdAt: new Date(), + createdAt: '2023-01-03 10:10:10', itemName: '확성기', itemPrice: 42, purchaserIntra: 'admin', diff --git a/types/admin/adminCoinTypes.ts b/types/admin/adminCoinTypes.ts index f927338ba..01f5633d5 100644 --- a/types/admin/adminCoinTypes.ts +++ b/types/admin/adminCoinTypes.ts @@ -10,9 +10,9 @@ export interface IcoinPolicyHistory { createUser: string; attendance: string; normal: number; - rank_win: number; - rank_lose: number; - created_at: Date; + rankWin: number; + rankLose: number; + createdAt: Date; } export interface IcoinPolicyHistoryTable { From 1b1072e17acf7c524ee7e9e81087bc9835bce187 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Sun, 6 Aug 2023 06:06:54 +0900 Subject: [PATCH 25/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20scss=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/coin/CoinMain.tsx | 38 +++++++++--------- components/admin/coin/CoinPolicy.tsx | 1 + components/admin/coin/CoinPolicyHistory.tsx | 9 +++-- components/admin/receipt/MegaphoneList.tsx | 11 +++--- components/admin/receipt/MenuTab.tsx | 2 +- components/admin/receipt/ProfileList.tsx | 13 ++++--- components/admin/receipt/ReceiptList.tsx | 7 ++-- components/admin/store/ItemList.tsx | 7 ++-- components/admin/store/itemHistory.tsx | 7 ++-- .../admin/purchaseHistory/MenuTab.module.scss | 39 ------------------- .../admin/receipt/MegaphoneList.module.scss | 0 styles/admin/receipt/MenuTab.module.scss | 38 ++++++++++++++++++ styles/admin/receipt/ProfileList.module.scss | 0 styles/admin/receipt/ReceiptList.module.scss | 0 styles/admin/store/ItemHistory.module.scss | 0 styles/admin/store/ItemList.module.scss | 0 16 files changed, 89 insertions(+), 83 deletions(-) delete mode 100644 styles/admin/purchaseHistory/MenuTab.module.scss create mode 100644 styles/admin/receipt/MegaphoneList.module.scss create mode 100644 styles/admin/receipt/MenuTab.module.scss create mode 100644 styles/admin/receipt/ProfileList.module.scss create mode 100644 styles/admin/receipt/ReceiptList.module.scss create mode 100644 styles/admin/store/ItemHistory.module.scss create mode 100644 styles/admin/store/ItemList.module.scss diff --git a/components/admin/coin/CoinMain.tsx b/components/admin/coin/CoinMain.tsx index 2c6abb147..f3c3d2db3 100644 --- a/components/admin/coin/CoinMain.tsx +++ b/components/admin/coin/CoinMain.tsx @@ -1,21 +1,21 @@ -import styles from "styles/admin/coin/CoinMain.module.scss"; -import CoinPolicy from "./CoinPolicy"; -import CoinPolicyHistory from "./CoinPolicyHistory"; +import CoinPolicy from './CoinPolicy'; +import CoinPolicyHistory from './CoinPolicyHistory'; +import styles from 'styles/admin/coin/CoinMain.module.scss'; -export default function CoinMain () { - return ( -
-
-

재화 정책 관리

-
-
-

재화 정책 변경

- -
-
-

재화 정책 변경 이력

- -
-
- ) +export default function CoinMain() { + return ( +
+
+

재화 정책 관리

+
+
+

재화 정책 변경

+ +
+
+

재화 정책 변경 이력

+ +
+
+ ); } diff --git a/components/admin/coin/CoinPolicy.tsx b/components/admin/coin/CoinPolicy.tsx index 43aeea7a6..4aaeeaa2c 100644 --- a/components/admin/coin/CoinPolicy.tsx +++ b/components/admin/coin/CoinPolicy.tsx @@ -8,6 +8,7 @@ import { TableHead, TableRow, } from '@mui/material'; +import styles from 'styles/admin/coin/CoinPolicy.module.scss'; const coinPolicyTableTitle: { [key: string]: string } = { attendance: '출석 획득', diff --git a/components/admin/coin/CoinPolicyHistory.tsx b/components/admin/coin/CoinPolicyHistory.tsx index c53cef383..d3492b244 100644 --- a/components/admin/coin/CoinPolicyHistory.tsx +++ b/components/admin/coin/CoinPolicyHistory.tsx @@ -1,12 +1,12 @@ import { useEffect, useState } from 'react'; -import PageNation from 'components/Pagination'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; -import { getFormattedDateToString } from 'utils/handleTime'; -import { tableFormat } from 'constants/admin/table'; import { IcoinPolicyHistory, IcoinPolicyHistoryTable, } from 'types/admin/adminCoinTypes'; +import { tableFormat } from 'constants/admin/table'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import PageNation from 'components/Pagination'; import { Paper, Table, @@ -16,6 +16,7 @@ import { TableHead, TableRow, } from '@mui/material'; +import styles from 'styles/admin/coin/CoinPolicyHistory.module.scss'; const coinPolicyHistoryTableTitle: { [key: string]: string } = { coinPolicyId: 'ID', diff --git a/components/admin/receipt/MegaphoneList.tsx b/components/admin/receipt/MegaphoneList.tsx index e218dad5f..3ed45b5ea 100644 --- a/components/admin/receipt/MegaphoneList.tsx +++ b/components/admin/receipt/MegaphoneList.tsx @@ -1,15 +1,15 @@ import { useEffect, useState } from 'react'; import { useSetRecoilState } from 'recoil'; -import PageNation from 'components/Pagination'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; -import { getFormattedDateToString } from 'utils/handleTime'; -import { modalState } from 'utils/recoil/modal'; -import { tableFormat } from 'constants/admin/table'; import { Imegaphone, ImegaphoneInfo, ImegaphoneTable, } from 'types/admin/adminReceiptType'; +import { modalState } from 'utils/recoil/modal'; +import { tableFormat } from 'constants/admin/table'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import PageNation from 'components/Pagination'; import { Paper, Table, @@ -19,6 +19,7 @@ import { TableHead, TableRow, } from '@mui/material'; +import styles from 'styles/admin/receipt/MegaphoneList.module.scss'; const megaPhoneTableTitle: { [key: string]: string } = { megaphoneId: 'ID', diff --git a/components/admin/receipt/MenuTab.tsx b/components/admin/receipt/MenuTab.tsx index f06d9ddd9..7be816f55 100644 --- a/components/admin/receipt/MenuTab.tsx +++ b/components/admin/receipt/MenuTab.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import ReceiptList from './ReceiptList'; import MegaphoneList from './MegaphoneList'; import ProfileList from './ProfileList'; -import styles from 'styles/admin/purchaseHistory/MenuTab.module.scss'; +import styles from 'styles/admin/receipt/MenuTab.module.scss'; function MenuTab() { const [tabIdx, setTabIdx] = useState(0); diff --git a/components/admin/receipt/ProfileList.tsx b/components/admin/receipt/ProfileList.tsx index 3044a6f82..56ed77dc7 100644 --- a/components/admin/receipt/ProfileList.tsx +++ b/components/admin/receipt/ProfileList.tsx @@ -1,15 +1,16 @@ +import Image from 'next/image'; import { useEffect, useState } from 'react'; import { useSetRecoilState } from 'recoil'; -import PageNation from 'components/Pagination'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; -import { getFormattedDateToString } from 'utils/handleTime'; -import { tableFormat } from 'constants/admin/table'; -import { modalState } from 'utils/recoil/modal'; import { Iprofile, IprofileInfo, IprofileTable, } from 'types/admin/adminReceiptType'; +import { modalState } from 'utils/recoil/modal'; +import { tableFormat } from 'constants/admin/table'; +import { getFormattedDateToString } from 'utils/handleTime'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import PageNation from 'components/Pagination'; import { Paper, Table, @@ -19,7 +20,7 @@ import { TableHead, TableRow, } from '@mui/material'; -import Image from 'next/image'; +import styles from 'styles/admin/receipt/ProfileList.module.scss'; const profileTableTitle: { [key: string]: string } = { profileId: 'ID', diff --git a/components/admin/receipt/ReceiptList.tsx b/components/admin/receipt/ReceiptList.tsx index 29ac83568..86fd80c17 100644 --- a/components/admin/receipt/ReceiptList.tsx +++ b/components/admin/receipt/ReceiptList.tsx @@ -1,9 +1,9 @@ import { useEffect, useState } from 'react'; +import { Ireceipt, IreceiptTable } from 'types/admin/adminReceiptType'; +import { tableFormat } from 'constants/admin/table'; +import { getFormattedDateToString } from 'utils/handleTime'; import { useMockAxiosGet } from 'hooks/useAxiosGet'; import PageNation from 'components/Pagination'; -import { getFormattedDateToString } from 'utils/handleTime'; -import { tableFormat } from 'constants/admin/table'; -import { Ireceipt, IreceiptTable } from 'types/admin/adminReceiptType'; import { Paper, Table, @@ -13,6 +13,7 @@ import { TableHead, TableRow, } from '@mui/material'; +import styles from 'styles/admin/receipt/ReceiptList.module.scss'; const receiptListTableTitle: { [key: string]: string } = { receiptId: 'ID', diff --git a/components/admin/store/ItemList.tsx b/components/admin/store/ItemList.tsx index 7dec781be..1cf37ce47 100644 --- a/components/admin/store/ItemList.tsx +++ b/components/admin/store/ItemList.tsx @@ -1,10 +1,10 @@ import Image from 'next/image'; import { useEffect, useState } from 'react'; import { useSetRecoilState } from 'recoil'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; -import { tableFormat } from 'constants/admin/table'; -import { modalState } from 'utils/recoil/modal'; import { Iitem, IitemList } from 'types/admin/adminStoreTypes'; +import { modalState } from 'utils/recoil/modal'; +import { tableFormat } from 'constants/admin/table'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; import { Paper, Table, @@ -14,6 +14,7 @@ import { TableHead, TableRow, } from '@mui/material'; +import styles from 'styles/admin/store/ItemList.module.scss'; const itemListTableTitle: { [key: string]: string } = { itemId: 'ID', diff --git a/components/admin/store/itemHistory.tsx b/components/admin/store/itemHistory.tsx index 1e03a5229..79c70a9c9 100644 --- a/components/admin/store/itemHistory.tsx +++ b/components/admin/store/itemHistory.tsx @@ -1,10 +1,10 @@ import Image from 'next/image'; import { useEffect, useState } from 'react'; -import PageNation from 'components/Pagination'; -import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import { IitemHistory, IitemHistoryList } from 'types/admin/adminStoreTypes'; import { tableFormat } from 'constants/admin/table'; import { getFormattedDateToString } from 'utils/handleTime'; -import { IitemHistory, IitemHistoryList } from 'types/admin/adminStoreTypes'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; +import PageNation from 'components/Pagination'; import { Paper, Table, @@ -14,6 +14,7 @@ import { TableHead, TableRow, } from '@mui/material'; +import styles from 'styles/admin/store/ItemHistory.module.scss'; const itemHistoryTableTitle: { [key: string]: string } = { itemId: 'ID', diff --git a/styles/admin/purchaseHistory/MenuTab.module.scss b/styles/admin/purchaseHistory/MenuTab.module.scss deleted file mode 100644 index 788fa0aec..000000000 --- a/styles/admin/purchaseHistory/MenuTab.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -.mainContainer { - position: relative; - width: 80%; - height: 100%; - left: 10%; - display: flex; - flex-direction: column; -} - -.title { - width: 100%; - h2 { - width: fit-content; - } -} - -.tabMenu { - width: 100%; - height: 3rem; - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - font-weight: 500; -} - -.active { - text-decoration: underline; - text-underline-offset: 0.4rem; - cursor: pointer; -} - -.inactive { - cursor: pointer; -} - -.subContainer { - -} \ No newline at end of file diff --git a/styles/admin/receipt/MegaphoneList.module.scss b/styles/admin/receipt/MegaphoneList.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/styles/admin/receipt/MenuTab.module.scss b/styles/admin/receipt/MenuTab.module.scss new file mode 100644 index 000000000..a6b8c198b --- /dev/null +++ b/styles/admin/receipt/MenuTab.module.scss @@ -0,0 +1,38 @@ +.mainContainer { + position: relative; + width: 80%; + height: 100%; + left: 10%; + display: flex; + flex-direction: column; +} + +.title { + width: 100%; + h2 { + width: fit-content; + } +} + +.tabMenu { + width: 100%; + height: 3rem; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + font-weight: 500; +} + +.active { + text-decoration: underline; + text-underline-offset: 0.4rem; + cursor: pointer; +} + +.inactive { + cursor: pointer; +} + +.subContainer { +} diff --git a/styles/admin/receipt/ProfileList.module.scss b/styles/admin/receipt/ProfileList.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/styles/admin/receipt/ReceiptList.module.scss b/styles/admin/receipt/ReceiptList.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/styles/admin/store/ItemHistory.module.scss b/styles/admin/store/ItemHistory.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/styles/admin/store/ItemList.module.scss b/styles/admin/store/ItemList.module.scss new file mode 100644 index 000000000..e69de29bb From 1b183cadb38d799137c0a0cdde364b710853f53a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Sun, 6 Aug 2023 08:03:26 +0900 Subject: [PATCH 26/35] =?UTF-8?q?[Feat]=20[GGFE-162]=20=EA=B1=B0=EB=9E=98?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20=EC=83=81=EC=A0=90=20=EC=9E=AC=ED=99=94?= =?UTF-8?q?=EC=A0=95=EC=B1=85=20=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/coin/CoinPolicy.tsx | 38 +++++++---- components/admin/store/ItemList.tsx | 58 ++++++++++++++-- components/modal/ModalProvider.tsx | 12 ++++ components/modal/admin/AdminDeleteItem.tsx | 41 ++++++++++++ .../modal/admin/AdminDeleteMegaphoneModal.tsx | 32 ++++----- components/modal/admin/AdminDeleteProfile.tsx | 6 +- .../modal/admin/AdminEditCoinPolicy.tsx | 47 +++++++++++++ components/modal/admin/AdminEditItem.tsx | 66 +++++++++++++++++++ tsconfig.json | 4 +- types/admin/adminStoreTypes.ts | 9 +++ types/modalTypes.ts | 9 ++- 11 files changed, 281 insertions(+), 41 deletions(-) create mode 100644 components/modal/admin/AdminDeleteItem.tsx create mode 100644 components/modal/admin/AdminEditCoinPolicy.tsx create mode 100644 components/modal/admin/AdminEditItem.tsx diff --git a/components/admin/coin/CoinPolicy.tsx b/components/admin/coin/CoinPolicy.tsx index 4aaeeaa2c..6d7fceaa5 100644 --- a/components/admin/coin/CoinPolicy.tsx +++ b/components/admin/coin/CoinPolicy.tsx @@ -9,28 +9,31 @@ import { TableRow, } from '@mui/material'; import styles from 'styles/admin/coin/CoinPolicy.module.scss'; +import { IcoinPolicy } from 'types/admin/adminCoinTypes'; +import { useSetRecoilState } from 'recoil'; +import { modalState } from 'utils/recoil/modal'; const coinPolicyTableTitle: { [key: string]: string } = { attendance: '출석 획득', normal: '일반게임 획득', rankWin: '랭크게임 승리 획득', rankLose: '랭크게임 패배 획득', - register: '정책 등록', + edit: '정책 변경', }; -const tableColumnName = [ - 'attendance', - 'normal', - 'rankWin', - 'rankLose', - 'register', -]; +const tableColumnName = ['attendance', 'normal', 'rankWin', 'rankLose', 'edit']; function CoinPolicy() { - const inputRef = useRef([]); + const inputRef = useRef([]); + const setModal = useSetRecoilState(modalState); - // inputRef 받아와서 요청 보내는 handler 추가 필요 - // const putCoinPolicyHandler + // inputRef 적용 + const editCoinPolicy = (coinPolicy: IcoinPolicy) => { + setModal({ + modalName: 'ADMIN-COINPOLICY_EDIT', + coinPolicy: coinPolicy, + }); + }; return ( <> @@ -59,7 +62,18 @@ function CoinPolicy() { ))} - + diff --git a/components/admin/store/ItemList.tsx b/components/admin/store/ItemList.tsx index 1cf37ce47..f22c9e666 100644 --- a/components/admin/store/ItemList.tsx +++ b/components/admin/store/ItemList.tsx @@ -1,7 +1,7 @@ import Image from 'next/image'; import { useEffect, useState } from 'react'; import { useSetRecoilState } from 'recoil'; -import { Iitem, IitemList } from 'types/admin/adminStoreTypes'; +import { Iitem, IitemInfo, IitemList } from 'types/admin/adminStoreTypes'; import { modalState } from 'utils/recoil/modal'; import { tableFormat } from 'constants/admin/table'; import { useMockAxiosGet } from 'hooks/useAxiosGet'; @@ -86,9 +86,21 @@ function ItemList() { const setModal = useSetRecoilState(modalState); - // 아이템 수정, 삭제 기능 추가 - // const editItem - // const deleteItem + // 아이템 수정, 삭제 기능 수정 + // 아이템 input ref 적용 필요 + const editItem = (itemInfo: IitemInfo) => { + setModal({ + modalName: 'ADMIN-ITEM_EDIT', + itemInfo: itemInfo, + }); + }; + + const deleteItem = (itemInfo: IitemInfo) => { + setModal({ + modalName: 'ADMIN-ITEM_DELETE', + itemInfo: itemInfo, + }); + }; useEffect(() => { // getItemListHandler(); @@ -122,18 +134,50 @@ function ItemList() { height={30} alt='no' /> - ) : ( + ) : columnName === 'itemId' ? ( item[columnName as keyof Iitem].toString() + ) : ( +
+ +
)} ); } )} - + - + )) diff --git a/components/modal/ModalProvider.tsx b/components/modal/ModalProvider.tsx index 9eda0d14b..4bbe95c73 100644 --- a/components/modal/ModalProvider.tsx +++ b/components/modal/ModalProvider.tsx @@ -24,6 +24,9 @@ import AdminModifyScoreModal from './admin/AdminModifyScoreModal'; import styles from 'styles/modal/Modal.module.scss'; import AdminDeleteMegaphoneModal from './admin/AdminDeleteMegaphoneModal'; import AdminDeleteProfileModal from './admin/AdminDeleteProfile'; +import AdminDeleteItemModal from './admin/AdminDeleteItem'; +import AdminEditItemModal from './admin/AdminEditItem'; +import AdminEditCoinPolicyModal from './admin/AdminEditCoinPolicy'; export default function ModalProvider() { const [ @@ -42,6 +45,8 @@ export default function ModalProvider() { ModifyScore, megaphoneInfo, profileInfo, + itemInfo, + coinPolicy, }, setModal, ] = useRecoilState(modalState); @@ -84,6 +89,13 @@ export default function ModalProvider() { 'ADMIN-PROFILE_DELETE': profileInfo ? ( ) : null, + 'ADMIN-ITEM_EDIT': itemInfo ? : null, + 'ADMIN-ITEM_DELETE': itemInfo ? ( + + ) : null, + 'ADMIN-COINPOLICY_EDIT': coinPolicy ? ( + + ) : null, }; useEffect(() => { diff --git a/components/modal/admin/AdminDeleteItem.tsx b/components/modal/admin/AdminDeleteItem.tsx new file mode 100644 index 000000000..b9ade435b --- /dev/null +++ b/components/modal/admin/AdminDeleteItem.tsx @@ -0,0 +1,41 @@ +import Image from 'next/image'; +import { useResetRecoilState, useSetRecoilState } from 'recoil'; +import { IitemInfo } from 'types/admin/adminStoreTypes'; +import { errorState } from 'utils/recoil/error'; +import { modalState } from 'utils/recoil/modal'; + +export default function AdminDeleteItemModal(props: IitemInfo) { + const { itemId, itemName, content, imageUrl } = props; + const resetModal = useResetRecoilState(modalState); + const setError = useSetRecoilState(errorState); + + // 수정 필요 작동안함 + const deleteItemHandler = async (id: number) => { + try { + await fetch(`http://localhost:3000/api/pingpong/admin/items/${id}`, { + method: 'DELETE', + }); + alert(`${id}번 아이템이 삭제되었습니다`); + } catch (e: any) { + if (e.response.status === 400) { + alert(`${id}번 아이템을 삭제할 수 없습니다`); + } else { + setError('HJ11'); + } + } + resetModal(); + }; + + return ( +
+
+ 아이템명 : {itemName} + 설명 : {content} +
+ no +
{itemId} 번 아이템을 삭제하시겠습니까?
+ + {/* */} +
+ ); +} diff --git a/components/modal/admin/AdminDeleteMegaphoneModal.tsx b/components/modal/admin/AdminDeleteMegaphoneModal.tsx index 219dce525..2ca07eb09 100644 --- a/components/modal/admin/AdminDeleteMegaphoneModal.tsx +++ b/components/modal/admin/AdminDeleteMegaphoneModal.tsx @@ -9,21 +9,21 @@ export default function AdminDeleteMegaphoneModal(props: ImegaphoneInfo) { const setError = useSetRecoilState(errorState); // 수정 필요 작동안함 - const deleteMegaphonehandler = async (id: number) => { - try { - await fetch(`http://localhost:3000/api/pingpong/admin/megaphones/${id}`, { - method: 'DELETE', - }); - alert(`${id}번 확성기가 삭제되었습니다`); - } catch (e: any) { - if (e.response.status === 400) { - alert(`${id}번 확성기는 삭제할 수 없습니다`); - } else { - setError('HJ04'); - } - } - resetModal(); - }; + // const deleteMegaphoneHandler = async (id: number) => { + // try { + // await fetch(`http://localhost:3000/api/pingpong/admin/megaphones/${id}`, { + // method: 'DELETE', + // }); + // alert(`${id}번 확성기가 삭제되었습니다`); + // } catch (e: any) { + // if (e.response.status === 400) { + // alert(`${id}번 확성기는 삭제할 수 없습니다`); + // } else { + // setError('HJ04'); + // } + // } + // resetModal(); + // }; return (
@@ -34,7 +34,7 @@ export default function AdminDeleteMegaphoneModal(props: ImegaphoneInfo) {
{megaphoneId} 번 확성기를 삭제하시겠습니까?
- + {/* */}
); } diff --git a/components/modal/admin/AdminDeleteProfile.tsx b/components/modal/admin/AdminDeleteProfile.tsx index 0ff663c1b..7ad733cb1 100644 --- a/components/modal/admin/AdminDeleteProfile.tsx +++ b/components/modal/admin/AdminDeleteProfile.tsx @@ -9,7 +9,7 @@ export default function AdminDeleteProfileModal(props: IprofileInfo) { const resetModal = useResetRecoilState(modalState); const setError = useSetRecoilState(errorState); - // 수정 필요 작동안함 + // 수정 필요 // 기존 유저 수정 api에서 가져오기 // const deleteProfilehandler = async () => { // try { @@ -29,7 +29,9 @@ export default function AdminDeleteProfileModal(props: IprofileInfo) {
사용자 : {intraId}
{profileId} 번 이미지를 삭제하시겠습니까?
diff --git a/components/modal/admin/AdminEditCoinPolicy.tsx b/components/modal/admin/AdminEditCoinPolicy.tsx new file mode 100644 index 000000000..f2b5b10f5 --- /dev/null +++ b/components/modal/admin/AdminEditCoinPolicy.tsx @@ -0,0 +1,47 @@ +import { useResetRecoilState, useSetRecoilState } from 'recoil'; +import { IcoinPolicy } from 'types/admin/adminCoinTypes'; +import { errorState } from 'utils/recoil/error'; +import { modalState } from 'utils/recoil/modal'; + +export default function AdminEditCoinPolicyModal(props: IcoinPolicy) { + const { attendance, normal, rankWin, rankLose } = props; + const resetModal = useResetRecoilState(modalState); + const setError = useSetRecoilState(errorState); + + // 수정 필요 작동안함 + // const editCoinPolicyHandler = async () => { + // try { + // await fetch(`http://localhost:3000/api/pingpong/admin/coinpolicy`, { + // method: 'POST', + // body: { + // attendance: Number, + // normal: Number, + // rankWin: Number, + // rankLose: Number, + // }, + // }); + // alert(`새로운 코인 정책이 등록되었습니다.`); + // } catch (e: any) { + // if (e.response.status === 400) { + // alert(`새로운 코인 정책을 등록할 수 없습니다`); + // } else { + // setError('HJ12'); + // } + // } + // resetModal(); + // }; + + return ( +
+
+ {attendance} + {normal} + {rankWin} + {rankLose} +
+
새로운 코인 정책을 등록하시겠습니까?
+ + {/* */} +
+ ); +} diff --git a/components/modal/admin/AdminEditItem.tsx b/components/modal/admin/AdminEditItem.tsx new file mode 100644 index 000000000..9637603cc --- /dev/null +++ b/components/modal/admin/AdminEditItem.tsx @@ -0,0 +1,66 @@ +import Image from 'next/image'; +import { useResetRecoilState, useSetRecoilState } from 'recoil'; +import { IitemInfo } from 'types/admin/adminStoreTypes'; +import { errorState } from 'utils/recoil/error'; +import { modalState } from 'utils/recoil/modal'; + +export default function AdminEditItemModal(props: IitemInfo) { + const { itemId, itemName, content, imageUrl, originalPrice, discount } = + props; + const resetModal = useResetRecoilState(modalState); + const setError = useSetRecoilState(errorState); + + // 수정 필요 작동안함 + // const editItemHandler = async (id: number) => { + // try { + // await fetch(`http://localhost:3000/api/pingpong/admin/items/${id}`, { + // method: 'PUT', + // body: { + // name : String, + // content : String, + // imageUrl : String. + // price : integer, + // discont : integer, + // editor : String + // }, + // }); + // alert(`${id}번 아이템이 삭제되었습니다`); + // } catch (e: any) { + // if (e.response.status === 400) { + // alert(`${id}번 아이템을 삭제할 수 없습니다`); + // } else { + // setError('HJ10'); + // } + // } + // resetModal(); + // }; + + return ( +
+
+ + +
+
+ + +
+
+ + + no +
+
+ + +
+
+ + +
+
{itemId} 번 아이템을 수정하시겠습니까?
+ + {/* */} +
+ ); +} diff --git a/tsconfig.json b/tsconfig.json index 472707f8e..4f171705c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,9 +21,7 @@ "**/*.ts", "**/*.tsx", "utils/infinityScroll.js", - "utils/infinityScoll.js", - "components/admin/receipt" ], - "typeRoots": ["./@types", "./node_modules/@types"], + "typeRoots" : ["./@types", "./node_modules/@types"], "exclude": ["node_modules"] } diff --git a/types/admin/adminStoreTypes.ts b/types/admin/adminStoreTypes.ts index 88061f38e..24b482322 100644 --- a/types/admin/adminStoreTypes.ts +++ b/types/admin/adminStoreTypes.ts @@ -12,6 +12,15 @@ export interface IitemList { itemList: Array; } +export interface IitemInfo { + itemId: number; + itemName: string; + content: string; + imageUrl: string; + originalPrice?: number; + discount?: number; +} + export interface IitemHistory { itemId: number; createdAt: Date; diff --git a/types/modalTypes.ts b/types/modalTypes.ts index 14c313d75..6ee8cb928 100644 --- a/types/modalTypes.ts +++ b/types/modalTypes.ts @@ -4,6 +4,8 @@ import { Value } from 'react-quill'; import { IFeedback } from 'components/admin/feedback/FeedbackTable'; import { ModifyScoreType } from 'types/admin/gameLogTypes'; import { ImegaphoneInfo, IprofileInfo } from './admin/adminReceiptType'; +import { IitemInfo } from './admin/adminStoreTypes'; +import { IcoinPolicy } from './admin/adminCoinTypes'; type EventModal = 'WELCOME' | 'ANNOUNCEMENT'; @@ -25,7 +27,10 @@ type AdminModal = | 'SEASON_EDIT' | 'MODIFY_SCORE' | 'MEGAPHONE_DELETE' - | 'PROFILE_DELETE'; + | 'PROFILE_DELETE' + | 'ITEM_EDIT' + | 'ITEM_DELETE' + | 'COINPOLICY_EDIT'; type ModalName = | null @@ -78,4 +83,6 @@ export interface Modal { ModifyScore?: ModifyScoreType; megaphoneInfo?: ImegaphoneInfo; profileInfo?: IprofileInfo; + itemInfo?: IitemInfo; + coinPolicy?: IcoinPolicy; } From 4ddd68f5c3c3a95dc05b2d168532e3018d9a846b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Sun, 6 Aug 2023 08:07:15 +0900 Subject: [PATCH 27/35] =?UTF-8?q?[Chore]=20[GGFE-162]=20tsconfig=20main?= =?UTF-8?q?=EA=B3=BC=20=EB=98=91=EA=B0=99=EC=9D=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tsconfig.json b/tsconfig.json index 4f171705c..63ebf1dee 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,7 @@ "**/*.ts", "**/*.tsx", "utils/infinityScroll.js", + "utils/infinityScoll.js" ], "typeRoots" : ["./@types", "./node_modules/@types"], "exclude": ["node_modules"] From 9e09fbab6df893d0b1fb96d0b85501fdfcf0bc1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=ED=98=95=EC=A4=80?= Date: Sun, 6 Aug 2023 08:13:05 +0900 Subject: [PATCH 28/35] =?UTF-8?q?[Chore]=20[GGFE-162]=20todo=20=EC=A3=BC?= =?UTF-8?q?=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/admin/coin/CoinPolicy.tsx | 1 + components/admin/store/ItemList.tsx | 3 ++- components/modal/admin/AdminDeleteItem.tsx | 1 + components/modal/admin/AdminDeleteMegaphoneModal.tsx | 1 + components/modal/admin/AdminDeleteProfile.tsx | 1 + components/modal/admin/AdminEditCoinPolicy.tsx | 1 + components/modal/admin/AdminEditItem.tsx | 1 + 7 files changed, 8 insertions(+), 1 deletion(-) diff --git a/components/admin/coin/CoinPolicy.tsx b/components/admin/coin/CoinPolicy.tsx index 6d7fceaa5..fba32bed1 100644 --- a/components/admin/coin/CoinPolicy.tsx +++ b/components/admin/coin/CoinPolicy.tsx @@ -24,6 +24,7 @@ const coinPolicyTableTitle: { [key: string]: string } = { const tableColumnName = ['attendance', 'normal', 'rankWin', 'rankLose', 'edit']; function CoinPolicy() { + // any 타입말고 다른 방식 있으면 적용 const inputRef = useRef([]); const setModal = useSetRecoilState(modalState); diff --git a/components/admin/store/ItemList.tsx b/components/admin/store/ItemList.tsx index f22c9e666..036ed77bd 100644 --- a/components/admin/store/ItemList.tsx +++ b/components/admin/store/ItemList.tsx @@ -86,8 +86,9 @@ function ItemList() { const setModal = useSetRecoilState(modalState); - // 아이템 수정, 삭제 기능 수정 + // 아이템 수정, 삭제 기능 수정 필요 // 아이템 input ref 적용 필요 + // 이미지 부분 수정 적용 유저 프로필 수정에서 가져와야 const editItem = (itemInfo: IitemInfo) => { setModal({ modalName: 'ADMIN-ITEM_EDIT', diff --git a/components/modal/admin/AdminDeleteItem.tsx b/components/modal/admin/AdminDeleteItem.tsx index b9ade435b..63f28d333 100644 --- a/components/modal/admin/AdminDeleteItem.tsx +++ b/components/modal/admin/AdminDeleteItem.tsx @@ -10,6 +10,7 @@ export default function AdminDeleteItemModal(props: IitemInfo) { const setError = useSetRecoilState(errorState); // 수정 필요 작동안함 + // instanceInManage, try catch로 변경 const deleteItemHandler = async (id: number) => { try { await fetch(`http://localhost:3000/api/pingpong/admin/items/${id}`, { diff --git a/components/modal/admin/AdminDeleteMegaphoneModal.tsx b/components/modal/admin/AdminDeleteMegaphoneModal.tsx index 2ca07eb09..ceebda0d4 100644 --- a/components/modal/admin/AdminDeleteMegaphoneModal.tsx +++ b/components/modal/admin/AdminDeleteMegaphoneModal.tsx @@ -9,6 +9,7 @@ export default function AdminDeleteMegaphoneModal(props: ImegaphoneInfo) { const setError = useSetRecoilState(errorState); // 수정 필요 작동안함 + // instanceInManage, try catch로 변경 // const deleteMegaphoneHandler = async (id: number) => { // try { // await fetch(`http://localhost:3000/api/pingpong/admin/megaphones/${id}`, { diff --git a/components/modal/admin/AdminDeleteProfile.tsx b/components/modal/admin/AdminDeleteProfile.tsx index 7ad733cb1..795010a61 100644 --- a/components/modal/admin/AdminDeleteProfile.tsx +++ b/components/modal/admin/AdminDeleteProfile.tsx @@ -11,6 +11,7 @@ export default function AdminDeleteProfileModal(props: IprofileInfo) { // 수정 필요 // 기존 유저 수정 api에서 가져오기 + // instanceInManage, try catch로 변경 // const deleteProfilehandler = async () => { // try { // await fetch(`http://localhost:3000/api/pingpong/admin/`, { diff --git a/components/modal/admin/AdminEditCoinPolicy.tsx b/components/modal/admin/AdminEditCoinPolicy.tsx index f2b5b10f5..0b43365cb 100644 --- a/components/modal/admin/AdminEditCoinPolicy.tsx +++ b/components/modal/admin/AdminEditCoinPolicy.tsx @@ -9,6 +9,7 @@ export default function AdminEditCoinPolicyModal(props: IcoinPolicy) { const setError = useSetRecoilState(errorState); // 수정 필요 작동안함 + // instanceInManage, try catch로 변경 // const editCoinPolicyHandler = async () => { // try { // await fetch(`http://localhost:3000/api/pingpong/admin/coinpolicy`, { diff --git a/components/modal/admin/AdminEditItem.tsx b/components/modal/admin/AdminEditItem.tsx index 9637603cc..5aefe0f4f 100644 --- a/components/modal/admin/AdminEditItem.tsx +++ b/components/modal/admin/AdminEditItem.tsx @@ -11,6 +11,7 @@ export default function AdminEditItemModal(props: IitemInfo) { const setError = useSetRecoilState(errorState); // 수정 필요 작동안함 + // instanceInManage, try catch로 변경 // const editItemHandler = async (id: number) => { // try { // await fetch(`http://localhost:3000/api/pingpong/admin/items/${id}`, { From 619662f0cc7290121f7ae0617137b52bc9828f5e Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Mon, 7 Aug 2023 00:29:36 +0900 Subject: [PATCH 29/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20=EB=AC=B4=ED=95=9C?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InventoryList.tsx | 21 ++++++++++++++++++++- pages/api/pingpong/items/index.ts | 7 +++++-- styles/store/Inventory.module.scss | 10 ++++++++++ 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index 30482d6c8..56c3cd6b2 100644 --- a/components/store/InventoryList.tsx +++ b/components/store/InventoryList.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; +import { RiPingPongFill } from 'react-icons/ri'; import { InvetoryItem } from './InventoryItem'; import { InfinityScroll } from 'utils/infinityScroll'; import { mockInstance } from 'utils/mockAxios'; @@ -17,6 +18,19 @@ export function InventoryList() { 'JY03' ); + const interactionObserverRef = useRef(null); + + useEffect(() => { + if (!interactionObserverRef.current || !hasNextPage) return; + const observer = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting) { + fetchNextPage(); + } + }); + observer.observe(interactionObserverRef.current); + return () => observer.disconnect(); + }, [fetchNextPage, hasNextPage]); + if (isLoading) return
Loading...
; if (error) return
{error.message}
; if (!data) return
No data
; @@ -30,6 +44,11 @@ export function InventoryList() { ))} ))} + {hasNextPage && ( +
+ +
+ )}
); } diff --git a/pages/api/pingpong/items/index.ts b/pages/api/pingpong/items/index.ts index 016cfc36c..e4afddb77 100644 --- a/pages/api/pingpong/items/index.ts +++ b/pages/api/pingpong/items/index.ts @@ -138,12 +138,15 @@ export default function handler( const { page, size } = req.query; - const ret = InventoryData; + const ret: InventoryData = { + storageItemList: [], + totalPage: InventoryData.totalPage, + }; if (page && size) { const storageItemList = pagination( Number(page as string), Number(size as string), - InventoryDataDouble.storageItemList + InventoryData.storageItemList ); ret.storageItemList = storageItemList; } diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss index 8d255c99a..c450a80c3 100644 --- a/styles/store/Inventory.module.scss +++ b/styles/store/Inventory.module.scss @@ -6,6 +6,16 @@ grid-gap: 1rem; } +.loadIcon { + width: 100%; + grid-column: 1 / 3; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5rem; + color: #d4b8f2; +} + .inventoryItem { position: relative; display: flex; From 4c4337f50217ece034c7c620d3a5b5337fa5feeb Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Mon, 7 Aug 2023 00:37:39 +0900 Subject: [PATCH 30/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20=EB=AC=B4=ED=95=9C?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InfiniteScrollComponent.tsx | 33 ++++++++++++++++++++ components/store/InventoryList.tsx | 27 +++++----------- 2 files changed, 40 insertions(+), 20 deletions(-) create mode 100644 components/store/InfiniteScrollComponent.tsx diff --git a/components/store/InfiniteScrollComponent.tsx b/components/store/InfiniteScrollComponent.tsx new file mode 100644 index 000000000..0b21b8e8a --- /dev/null +++ b/components/store/InfiniteScrollComponent.tsx @@ -0,0 +1,33 @@ +import { useEffect, useRef } from 'react'; +import { RiPingPongFill } from 'react-icons/ri'; +import styles from 'styles/store/Inventory.module.scss'; + +type InfiniteScrollComponentProps = { + fetchNextPage: () => void; + hasNextPage?: boolean; +}; + +export function InfiniteScrollComponent({ + fetchNextPage, + hasNextPage, +}: InfiniteScrollComponentProps) { + const interactionObserverRef = useRef(null); + + useEffect(() => { + if (!interactionObserverRef.current || !hasNextPage) return; + const observer = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting) { + fetchNextPage(); + } + }); + observer.observe(interactionObserverRef.current); + return () => observer.disconnect(); + }, [fetchNextPage, hasNextPage]); + + if (!hasNextPage) return null; + return ( +
+ +
+ ); +} diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index 56c3cd6b2..f5c5aec76 100644 --- a/components/store/InventoryList.tsx +++ b/components/store/InventoryList.tsx @@ -1,6 +1,6 @@ -import React, { useEffect, useRef } from 'react'; -import { RiPingPongFill } from 'react-icons/ri'; +import React from 'react'; import { InvetoryItem } from './InventoryItem'; +import { InfiniteScrollComponent } from './InfiniteScrollComponent'; import { InfinityScroll } from 'utils/infinityScroll'; import { mockInstance } from 'utils/mockAxios'; import styles from 'styles/store/Inventory.module.scss'; @@ -18,19 +18,7 @@ export function InventoryList() { 'JY03' ); - const interactionObserverRef = useRef(null); - - useEffect(() => { - if (!interactionObserverRef.current || !hasNextPage) return; - const observer = new IntersectionObserver((entries) => { - if (entries[0].isIntersecting) { - fetchNextPage(); - } - }); - observer.observe(interactionObserverRef.current); - return () => observer.disconnect(); - }, [fetchNextPage, hasNextPage]); - + // TODO : 에러 컴포넌트 구체화 필요함. if (isLoading) return
Loading...
; if (error) return
{error.message}
; if (!data) return
No data
; @@ -44,11 +32,10 @@ export function InventoryList() { ))} ))} - {hasNextPage && ( -
- -
- )} +
); } From dfa647bc5fab474d828a2ba9b59d8f49fa6f915d Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Mon, 7 Aug 2023 00:53:56 +0900 Subject: [PATCH 31/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20=EB=B9=88=20?= =?UTF-8?q?=EB=B3=B4=EA=B4=80=ED=95=A8=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20?= =?UTF-8?q?=EC=95=88=EB=82=B4=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/store/InventoryList.tsx | 13 ++++++++++--- pages/api/pingpong/items/index.ts | 4 +++- styles/store/Inventory.module.scss | 10 ++++++++++ 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx index f5c5aec76..132cfd570 100644 --- a/components/store/InventoryList.tsx +++ b/components/store/InventoryList.tsx @@ -27,9 +27,16 @@ export function InventoryList() {
{data.pages.map((page, pageIndex) => ( - {page.storageItemList.map((item) => ( - - ))} + {page.storageItemList.length === 0 ? ( +
+ 보유한 아이템이 없습니다. +
상점 탭에서 아이템을 구입해 보세요! +
+ ) : ( + page.storageItemList.map((item) => ( + + )) + )} ))} Date: Mon, 7 Aug 2023 12:45:04 +0900 Subject: [PATCH 32/35] =?UTF-8?q?[Chore]=20[GGFE-144]=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=ED=81=B4=EB=A6=AD=20=ED=95=B8=EB=93=A4?= =?UTF-8?q?=EB=9F=AC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/store.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/pages/store.tsx b/pages/store.tsx index c6185f596..48564eb8f 100644 --- a/pages/store.tsx +++ b/pages/store.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import { useRouter } from 'next/router'; import { StoreMode } from 'types/storeTypes'; import { StoreModeWrap } from 'components/mode/modeWraps/StoreModeWrap'; import { Inventory } from 'components/store/Inventory'; @@ -8,19 +7,10 @@ import ItemsList from 'components/shop/ItemsList'; export default function Store() { const [mode, setMode] = useState('BUY'); - const router = useRouter(); - - const clickTitleHandler = () => { - router.push(`/store`, undefined, { - shallow: true, - }); - }; return (
-

- GG Store -

+

GG Store

{mode === 'BUY' ? ( From 0e6e2387b24c4a9408207f1664e816af95bbd76f Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Mon, 7 Aug 2023 12:46:35 +0900 Subject: [PATCH 33/35] =?UTF-8?q?[Chore]=20[GGFE-144]=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20div=20=ED=83=9C=EA=B7=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/store.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/pages/store.tsx b/pages/store.tsx index 48564eb8f..8b3bfc7a5 100644 --- a/pages/store.tsx +++ b/pages/store.tsx @@ -13,13 +13,7 @@ export default function Store() {

GG Store

- {mode === 'BUY' ? ( -
- -
- ) : ( - - )} + {mode === 'BUY' ? : }
); From a4af30211144d01d2f820c9460817a8ab6248bce Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Mon, 7 Aug 2023 12:49:44 +0900 Subject: [PATCH 34/35] =?UTF-8?q?[Feat]=20[GGFE-144]=20coin=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20props=EB=A1=9C=20=EB=84=98=EA=B8=B8=20=EC=88=98=20?= =?UTF-8?q?=EC=9E=88=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/mode/modeWraps/StoreModeWrap.tsx | 13 ++----------- pages/store.tsx | 19 ++++++++++++++++--- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/components/mode/modeWraps/StoreModeWrap.tsx b/components/mode/modeWraps/StoreModeWrap.tsx index 16b2255e0..dd1489bfa 100644 --- a/components/mode/modeWraps/StoreModeWrap.tsx +++ b/components/mode/modeWraps/StoreModeWrap.tsx @@ -7,25 +7,16 @@ import StoreModeRadioBox from 'components/mode/modeItems/StoreModeRadioBox'; import styles from 'styles/mode/StoreModeWrap.module.scss'; type StoreModeWrapProps = { + coin: ICoin; currentMode: StoreMode; setStoreMode: Dispatch>; }; export function StoreModeWrap({ + coin, currentMode, setStoreMode, }: StoreModeWrapProps) { - const [coin, setCoin] = useState({ coin: 0 }); - useEffect(() => { - getCoin(); - // TODO : 코인이 바뀔 때 마다 다시 불러와야 한다. - }, []); - const getCoin = useMockAxiosGet({ - url: '/users/coin', - setState: setCoin, - err: 'JY01', - type: 'setError', - }); return (
diff --git a/pages/store.tsx b/pages/store.tsx index 8b3bfc7a5..aa8302b1b 100644 --- a/pages/store.tsx +++ b/pages/store.tsx @@ -1,17 +1,30 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import { ICoin } from 'types/userTypes'; import { StoreMode } from 'types/storeTypes'; +import { useMockAxiosGet } from 'hooks/useAxiosGet'; import { StoreModeWrap } from 'components/mode/modeWraps/StoreModeWrap'; +import ItemsList from 'components/shop/ItemsList'; import { Inventory } from 'components/store/Inventory'; import styles from 'styles/store/StoreContainer.module.scss'; -import ItemsList from 'components/shop/ItemsList'; export default function Store() { const [mode, setMode] = useState('BUY'); + const [coin, setCoin] = useState({ coin: 0 }); + useEffect(() => { + getCoin(); + // TODO : 코인이 바뀔 때 마다 다시 불러와야 한다. + }, []); + const getCoin = useMockAxiosGet({ + url: '/users/coin', + setState: setCoin, + err: 'JY01', + type: 'setError', + }); return (

GG Store

- +
{mode === 'BUY' ? : }
From c54bb84dc18900af068dbc83c79956e0ec27fc09 Mon Sep 17 00:00:00 2001 From: yoouyeon Date: Mon, 7 Aug 2023 13:06:32 +0900 Subject: [PATCH 35/35] =?UTF-8?q?[Style]=20[GGFE-144]=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=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20contain=EC=9C=BC=EB=A1=9C=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, 1 insertion(+), 2 deletions(-) diff --git a/styles/store/Inventory.module.scss b/styles/store/Inventory.module.scss index 7826917a5..30c291b66 100644 --- a/styles/store/Inventory.module.scss +++ b/styles/store/Inventory.module.scss @@ -101,8 +101,7 @@ } .img { - object-fit: cover; - // object-fit: contain; + object-fit: contain; } .itemName {