Merge pull request #150 from Team-JustPay/feature/#126

Feature/#126
Team-JustPay · Jan 12, 2023 · 228defc · 228defc
2 parents 3accc66 + b8994c7
commit 228defc
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 18 deletions.
diff --git a/api/user.ts b/api/user.ts
@@ -22,3 +22,7 @@ export const getMySellInfo = async (isSaled: boolean) => {
 export const getMyInfo = async () => {
   return await userAPI.get(`/my/info?addressSplit=true`);
 };
+
+export const getAlarm = async () => {
+  return await userAPI.get(`my/notifications`);
+};
diff --git a/apiHooks/user.ts b/apiHooks/user.ts
@@ -1,5 +1,5 @@
 import { useQuery, useMutation } from '@tanstack/react-query';
-import { getmyBuy, getmyInfo, putmyInfo, getMySellInfo, getMyInfo } from 'api/user';
+import { getmyBuy, getmyInfo, putmyInfo, getMySellInfo, getMyInfo, getAlarm } from 'api/user';
 import { MyInfoType } from 'types/recoil/myInfo';
 
 export const useGetmyBuy = (isPurchased: boolean) => {
@@ -41,3 +41,11 @@ export const useGetMyInfo = () => {
     },
   });
 };
+
+export const useGetAlarm = () => {
+  return useQuery(['get/my/notifications'], () => getAlarm(), {
+    onError: (error) => {
+      console.log(error);
+    },
+  });
+};
diff --git a/components/common/GNB.tsx b/components/common/GNB.tsx
@@ -21,7 +21,7 @@ export default function GNB({ currentGNB }: GNBProps) {
 
   return (
     <Root>
-      <button type="button" className="alram" onClick={handleClickGNBOption}>
+      <button type="button" className="alarm" onClick={handleClickGNBOption}>
         {currentGNB === 'alram' ? <AlramColor /> : <Alram />}
       </button>
       <button type="button" className="buy" onClick={handleClickGNBOption}>

diff --git a/pages/my/alram.tsx → pages/my/alarm.tsx b/pages/my/alram.tsx → pages/my/alarm.tsx
@@ -4,31 +4,41 @@ import MainLogo from 'public/assets/icons/justpay_symbol_logo.svg';
 import BuyIcon from 'public/assets/icons/notification_buy.svg';
 import SellIcon from 'public/assets/icons/notification_sell.svg';
 import React from 'react';
+import { useGetAlarm } from 'apiHooks/user';
 
 export default function alram() {
-  const data = {
-    notificationType: '판매 알림',
-    message: '이런저런 메시지',
-    create: '2022.12.20 15:40',
-  };
+  const { data: myAlarm } = useGetAlarm();
+
+  console.log(myAlarm);
+  const data = [
+    {
+      notificationType: '판매 알림',
+      message: '이런저런 메시지',
+      create: '2022.12.20 15:40',
+    },
+  ];
+
   return (
     <Root>
       <LogoWrapper>
         <MainLogo />
       </LogoWrapper>
       <TradeAlramText>중요한 거래 알림을 확인하세요!</TradeAlramText>
-      <Notificontent>
-        <NotificationHeader>
-          <NotificationText>
-            {data.notificationType === '구매 알림' ? <BuyIcon /> : <SellIcon />}
-            {data.notificationType}
-          </NotificationText>
-          <NotificationRight>{data.create}</NotificationRight>
-        </NotificationHeader>
-        <NotificationMessage>{data.message}</NotificationMessage>
-      </Notificontent>
 
-      <GNB currentGNB={'alram'} />
+      {myAlarm?.data.data.map((item: { notificationType: string; createdAt: string; message: string }) => (
+        <Notificontent>
+          <NotificationHeader>
+            <NotificationText>
+              {item.notificationType === '구매 알림' ? <BuyIcon /> : <SellIcon />}
+              {item.notificationType}
+            </NotificationText>
+            <NotificationRight>{item.createdAt}</NotificationRight>
+          </NotificationHeader>
+          <NotificationMessage>{item.message}</NotificationMessage>
+        </Notificontent>
+      ))}
+
+      <GNB currentGNB={'alarm'} />
     </Root>
   );
 }