Merge pull request #254 from SCBJ-7/feature/#248-alarm

[#248] 알람 api, 알람여부 api 고치기

src/apis/fetchAlarm.ts

@@ -1,8 +1,8 @@
 import { END_POINTS } from "@constants/api";
-import axios from "axios";
 import { AlarmType } from "@type/alarm";
+import { axiosInstance } from "./axiosInstance";
 
 export const fetchAlarm = async (): Promise<AlarmType[]> => {
-  const { data } = await axios.get(END_POINTS.ALARM);
+  const { data } = await axiosInstance.get(END_POINTS.ALARM);
   return data.data;
 };

src/apis/fetchHasAlarm.ts

@@ -3,15 +3,19 @@ import { ReadType } from "@type/alarm";
 import { isAccessTokenExpired } from "@utils/checkToken";
 import axios from "axios";
 
-export const fetchHasAlarm = async (): Promise<ReadType | []> => {
+export const fetchHasAlarm = async (): Promise<ReadType> => {
   const accessToken = localStorage.getItem("accessToken");
   if (!accessToken) {
-    return [];
+    return {
+      hasNonReadAlarm: false,
+    };
   }
 
   if (isAccessTokenExpired(accessToken)) {
     console.log("expired Token");
-    return [];
+    return {
+      hasNonReadAlarm: false,
+    };
   }
 
   const { data } = await axios.get(BASE_URL + END_POINTS.HASALARM, {

src/pages/alarmPage/AlarmPage.style.ts

@@ -4,7 +4,7 @@ export const Container = styled.section`
   width: 100%;
   height: 100%;
 
-  padding: 56px 1.25rem 80px;
+  padding: 56px 0 80px;
   background-color: white;
 `;
 

src/pages/alarmPage/AlarmPage.tsx

@@ -20,18 +20,16 @@ const AlarmPage = () => {
   });
 
   if (isLoading) {
-    return <Loading></Loading>;
+    return <Loading />;
   }
 
   return (
     <S.Container>
       {alarmData?.map((item) =>
         item.isRead ? (
           <S.OldMessage key={item.id}>
-            <S.OldMessage>
-              <h1>{item.content}</h1>
-              <h3>{format(parseISO(item.date), "yyyy. MM. dd. HH:mm")}</h3>
-            </S.OldMessage>
+            <h1>{item.content}</h1>
+            <h3>{format(parseISO(item.date), "yyyy. MM. dd. HH:mm")}</h3>
           </S.OldMessage>
         ) : (
           <S.NewMessage key={item.id}>
@@ -43,7 +41,7 @@ const AlarmPage = () => {
           </S.NewMessage>
         ),
       )}
-      {!alarmData && (
+      {alarmData && alarmData.length === 0 && (
         <NoResult
           title="알림 내역이 없습니다."
           desc="판매가 이루어지면 알림을 확인하실수 있어요."

src/pages/homePage/mainHeader/MainHeader.tsx

@@ -24,9 +24,7 @@ const MainHeader = () => {
         <MainLogo />
         <section>
           <S.bellIcon onClick={alertHandler} />
-          <S.bellAlertOn
-            $isAlarmOn={typeof hasAlarmData === "object" ? true : false}
-          />
+          <S.bellAlertOn $isAlarmOn={hasAlarmData.hasNonReadAlarm} />
         </section>
       </S.HeaderWrapper>
     </S.HeaderContainer>