[FE] useSelectedFeedbackData 훅 오류 해결(#783)

frontend/src/@types/feedback.ts

@@ -1,5 +1,7 @@
 import { NonEmptyArray } from "@/@types/NonEmptyArray";
 
+export type FeedbackType = "받은 피드백" | "쓴 피드백";
+
 export interface FeedbackCardDataList {
   readonly roomId: number;
   readonly title: string;

frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx

@@ -1,11 +1,10 @@
 import { useNavigate } from "react-router-dom";
-import { FeedbackType } from "@/hooks/feedback/useSelectedFeedbackData";
 import Button from "@/components/common/button/Button";
 import Profile from "@/components/common/profile/Profile";
 import { Textarea } from "@/components/common/textarea/Textarea";
 import EvaluationPointBar from "@/components/feedback/evaluationPointBar/EvaluationPointBar";
 import * as S from "@/components/feedback/feedbackCard/FeedbackCard.style";
-import { FeedbackCardData } from "@/@types/feedback";
+import { FeedbackCardData, FeedbackType } from "@/@types/feedback";
 import { ReviewInfo } from "@/@types/review";
 import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";

frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx

@@ -53,5 +53,6 @@ export const Default: Story = {
     ],
     selectedFeedback: 0,
     handleSelectedFeedback: () => {},
+    handleDeselectedFeedback: () => {},
   },
 };

frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { FeedbackType } from "@/hooks/feedback/useSelectedFeedbackData";
 import Carousel from "@/components/common/carousel/Carousel";
 import Label from "@/components/common/label/Label";
 import FeedbackCard from "@/components/feedback/feedbackCard/FeedbackCard";
 import * as S from "@/components/feedback/feedbackCardList/FeedbackCardList.style";
-import { FeedbackCardDataList } from "@/@types/feedback";
+import { FeedbackCardDataList, FeedbackType } from "@/@types/feedback";
 import { defaultCharacter } from "@/assets";
 import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";
@@ -14,14 +13,20 @@ interface FeedbackCardListProps {
   feedbackData: FeedbackCardDataList[];
   selectedFeedback: number | undefined;
   handleSelectedFeedback: (roomId: number) => void;
+  handleDeselectedFeedback: () => void;
 }
 
 const FeedbackCardList = ({
   selectedFeedbackType,
   feedbackData,
   selectedFeedback,
   handleSelectedFeedback,
+  handleDeselectedFeedback,
 }: FeedbackCardListProps) => {
+  const toggleFeedbackSelection = (roomId: number) => {
+    roomId === selectedFeedback ? handleDeselectedFeedback() : handleSelectedFeedback(roomId);
+  };
+
   if (feedbackData.length === 0) {
     return (
       <S.EmptyContainer>
@@ -42,14 +47,14 @@ const FeedbackCardList = ({
           <React.Fragment key={feedback.roomId}>
             <S.FeedbackMissionWrapper
               $isSelected={selectedFeedback === feedback.roomId}
-              onClick={() => handleSelectedFeedback(feedback.roomId)}
+              onClick={() => toggleFeedbackSelection(feedback.roomId)}
               role="listitem"
               aria-expanded={selectedFeedback === feedback.roomId}
               tabIndex={0}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();
-                  handleSelectedFeedback(feedback.roomId);
+                  toggleFeedbackSelection(feedback.roomId);
                 }
               }}
               aria-label={`${feedbackData.length}개의 미션 중 ${index + 1}번째 미션입니다.`}

frontend/src/hooks/feedback/useSelectedFeedbackData.ts

@@ -3,8 +3,7 @@ import {
   useFetchDeliveredFeedback,
   useFetchReceivedFeedback,
 } from "@/hooks/queries/useFetchFeedback";
-
-export type FeedbackType = "받은 피드백" | "쓴 피드백";
+import { FeedbackType } from "@/@types/feedback";
 
 const useSelectedFeedbackData = (initialFeedbackType: FeedbackType = "받은 피드백") => {
   const [selectedFeedbackType, setSelectedFeedbackType] = useState<FeedbackType>(() => {
@@ -24,15 +23,15 @@ const useSelectedFeedbackData = (initialFeedbackType: FeedbackType = "받은 피
   };
 
   const handleSelectedFeedback = (roomId: number) => {
-    if (selectedFeedback === roomId) {
-      setSelectedFeedback(undefined);
-      sessionStorage.removeItem("selectedFeedback");
-      return;
-    }
     setSelectedFeedback(roomId);
     sessionStorage.setItem("selectedFeedback", roomId.toString());
   };
 
+  const handleDeselectedFeedback = () => {
+    setSelectedFeedback(undefined);
+    sessionStorage.removeItem("selectedFeedback");
+  };
+
   const { data: receivedFeedbacks } = useFetchReceivedFeedback(
     selectedFeedbackType === "받은 피드백",
   );
@@ -48,6 +47,7 @@ const useSelectedFeedbackData = (initialFeedbackType: FeedbackType = "받은 피
     handleSelectedFeedbackType,
     selectedFeedback,
     handleSelectedFeedback,
+    handleDeselectedFeedback,
     selectedFeedbackData,
   };
 };

frontend/src/hooks/queries/useFetchAlarm.ts

@@ -8,7 +8,6 @@ export const useFetchAlarmCount = (enabled: boolean = false) => {
     queryFn: getAlarmCount,
     enabled,
     refetchInterval: 60 * 1000,
-    refetchIntervalInBackground: false,
   });
 };
 
@@ -23,6 +22,5 @@ export const useFetchAlarmList = () => {
       return result;
     },
     refetchInterval: 60 * 1000,
-    refetchIntervalInBackground: false,
   });
 };

frontend/src/mocks/handler/alaramHandler.ts

@@ -1,16 +1,19 @@
 import { HttpResponse, http } from "msw";
 import { API_ENDPOINTS } from "@/apis/endpoints";
 import { serverUrl } from "@/config/serverUrl";
-import alarmcount from "@/mocks/mockResponse/alarmCount.json";
+import alarmCount from "@/mocks/mockResponse/alarmCount.json";
 import alarmInfos from "@/mocks/mockResponse/alarmInfos.json";
 
 const alarmHandler = [
   http.get(serverUrl + API_ENDPOINTS.ALARM_COUNT, () => {
-    return HttpResponse.json(alarmcount, { status: 200 });
+    return HttpResponse.json(alarmCount, { status: 200 });
   }),
   http.get(serverUrl + API_ENDPOINTS.ALARM_LIST, () => {
     return HttpResponse.json(alarmInfos, { status: 200 });
   }),
+  http.post(serverUrl + API_ENDPOINTS.ALARM_CHECKED, () => {
+    return HttpResponse.json({ alarmId: 1, alarmType: "USER" }, { status: 200 });
+  }),
 ];
 
 export default alarmHandler;

frontend/src/pages/feedback/FeedbackPage.tsx

@@ -10,6 +10,7 @@ const FeedbackPage = () => {
     handleSelectedFeedbackType,
     selectedFeedback,
     handleSelectedFeedback,
+    handleDeselectedFeedback,
     selectedFeedbackData,
   } = useSelectedFeedbackData();
 
@@ -27,6 +28,7 @@ const FeedbackPage = () => {
         feedbackData={selectedFeedbackData}
         selectedFeedback={selectedFeedback}
         handleSelectedFeedback={handleSelectedFeedback}
+        handleDeselectedFeedback={handleDeselectedFeedback}
       />
     </>
   );