feat: 이미 공감한 글 alert 처리 추가

Author: Geun-Oh

src/api/index.ts

@@ -6,8 +6,9 @@ import {
   REACTION_TYPE,
   ReactionsResponse,
 } from "./response";
+import { isAxiosError } from "axios";
 
-interface Response<T> {
+export interface Response<T> {
   status: number;
   data: T;
   timestamp: Date;
@@ -46,14 +47,20 @@ export const postReactions = async (
   reactionType: keyof typeof REACTION_TYPE,
   boardId: number
 ) => {
-  const { data } = await client.post<Response<ReactionsResponse>>(
-    `/reactions`,
-    {
-      reactionType,
-      boardId,
+  try {
+    const { data } = await client.post<Response<ReactionsResponse>>(
+      `/reactions`,
+      {
+        reactionType,
+        boardId,
+      }
+    );
+    return data;
+  } catch (err) {
+    if (isAxiosError(err)) {
+      return err.response?.data;
     }
-  );
-  return data;
+  }
 };
 
 export const getRandomDaybooks = async () => {

src/components/DetailCardFooter.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import getFontStyle from "@theme/font/getFontSize";
 import { colors } from "@theme";
-import { postReactions } from "@api";
+import { Response, postReactions } from "@api";
 import { REACTION_TYPE, ReactionObject } from "@api/response";
 import { getReactionCount } from "@utils/getReactionCount";
 
@@ -13,10 +13,12 @@ interface DetailCardFooterProps {
 const DetailCardFooter = ({ boardId, reactions }: DetailCardFooterProps) => {
 
     const post = async (reactionType: keyof typeof REACTION_TYPE, id: number) => {
-        const res = await postReactions(reactionType, id);
+        const res = (await postReactions(reactionType, id)) as Response<unknown>;
         if (res.status === 409) {
-            alert("이미 공감한 글입니다!")
+            window.alert('이미 공감한 글입니다!')
+            return;
         }
+        window.location.reload();     
     }
 
     const { ADMIRE, GREAT, MOVING } = getReactionCount(reactions);