✨ [FEAT/#17] 플랜 초대 기능 업데이트

src/apis/plan.ts

@@ -12,13 +12,8 @@ interface PlanType {
 
 // 플랜 참여 확인
 export const isCollaboratorRequest = async (planId: string) => {
-  try {
-    const response = await axiosInstance(`/proxy/api/plan/is-collaborator/${planId}`)
-    return response.data
-  } catch (e) {
-    console.log(e)
-    return null
-  }
+  const response = await axiosInstance(`/proxy/api/plan/is-collaborator/${planId}`)
+  return response.data
 }
 
 // 플랜 목록 조회

src/app/(afterLogin)/[planId]/page.tsx

@@ -80,7 +80,8 @@ const PlanPage = () => {
       handleNotice(`${data?.userName}님을 초대하였습니다.`, false);
     },
     onError: (e: AxiosError<ErrorResponse>) => {
-      const message = e?.response?.data?.error || "";
+      const message = e?.response?.data?.detail || "";
+      console.log(e)
       handleNotice(message, true);
     },
   })
@@ -99,14 +100,21 @@ const PlanPage = () => {
     }
   })
 
-  const { data: isCollaborator, isPending: isCollabPending } = useQuery({
+  const { data: isCollaborator, isPending: isCollabPending, error: collabError } = useQuery({
     queryKey: ["isCollaborator", planId],
     queryFn: async () => isCollaboratorRequest(planId),
     enabled: !!planId,
+    retry: 1,
   })
 
+  const handleEnter = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && email.trim() !== "") {
+      invitePlan();
+    }
+  }
+
   useEffect(() => {
-    if (!isCollabPending && isCollaborator) {
+    if (collabError) {
       if (!isCollaborator?.isExist) {
         handleNotice("존재하지 않는 플랜입니다.", true)
         pageAnimateRouter.replace('/')
@@ -116,7 +124,7 @@ const PlanPage = () => {
         pageAnimateRouter.replace('/')
       }
     }
-  }, [isCollaborator])
+  }, [isCollaborator, collabError])
 
   return (
     <AnimatePresence>
@@ -152,7 +160,7 @@ const PlanPage = () => {
                           placeholder="초대할 상대방 이메일을 입력해주세요"
                           value={email}
                           onChange={(e) => setEmail(e.target.value)}
-                          onKeyDown={() => { }} />
+                          onKeyDown={handleEnter} />
                         <PlaneIcon
                           className={`${email.trim() !== "" ? `text-point cursor-pointer` : `text-gray-300`}
                           w-4 transition-all-300-out`}
@@ -161,7 +169,6 @@ const PlanPage = () => {
                     </Motion.MotionDiv>
                   }
                 </AnimatePresence>
-
               </div>
               {user?.email === authorEmail ? (
                 <Button text={"삭제"} isActive={true} isDelete={true} onClick={deletePlan} />

src/components/common/NoticeModal.tsx

@@ -37,7 +37,7 @@ const NoticeModal = () => {
             className={`absolute top-0 z-[9999] w-screen h-screen flex items-center justify-center pointer-events-none`}>
               <div 
                 className={`
-                  ${isAlert ? `text-red-400 border-red-400` : `text-gray-400 border-gray-400`}
+                  ${isAlert ? `text-red-400 border-red-400` : `text-point border-point`}
                   lg:text-[16px] text-[14px] z-[9999]  bg-white py-8 px-6 border rounded-[8px] pointer-events-auto select-none`}>
                 {NoticeModalText}
               </div>

src/components/layout/Header.tsx

@@ -10,6 +10,7 @@ import Image from "next/image";
 import { getUserRequest } from "@/apis/user";
 import { AnimatePresence } from "framer-motion";
 import useSidebarStore from "@/stores/useSidebarStore";
+import { useRouter } from "next/navigation";
 
 const Header = () => {
 
@@ -28,6 +29,7 @@ const Header = () => {
     setUser,
   } = useUserStore();
 
+  const router = useRouter();
   const pageAnimateRouter = usePageAnimateRouter();
 
   useEffect(() => {
@@ -81,7 +83,7 @@ const Header = () => {
           ) : (
             <KakaoIcon
               className={`lg:w-10 w-8 cursor-pointer`}
-              onClick={() => pageAnimateRouter.push(`${process.env.NEXT_PUBLIC_DOMAIN}/oauth2/authorization/kakao`)} />
+              onClick={() => router.push(`${process.env.NEXT_PUBLIC_DOMAIN}/oauth2/authorization/kakao`)} />
           ))}
         </Motion.MotionDiv>
       ) : (

src/components/layout/sidebar/SidebarLogButton.tsx

@@ -2,6 +2,7 @@ import { logOutRequest } from "@/apis/user";
 import usePageAnimateRouter from "@/hooks/common/usePageAnimateRouter";
 import useSidebarStore from "@/stores/useSidebarStore";
 import useUserStore from "@/stores/useUserStore";
+import { useRouter } from "next/navigation";
 
 interface SidebarLogButtonProps {
   isLoggedIn: boolean;
@@ -19,6 +20,7 @@ const SidebarLogButton = ({
     setIsSidebarOpen,
   } = useSidebarStore();
 
+  const router = useRouter();
   const pageAnimateRouter = usePageAnimateRouter();
 
   const logOut = async () => {
@@ -36,7 +38,7 @@ const SidebarLogButton = ({
       className={
         `${isLoggedIn ? loginClass : logoutClass}
         rounded-[8px] w-full py-2.5 text-[16px] border text-center transition-all-300-out cursor-pointer`}
-      onClick={isLoggedIn ? logOut : () => pageAnimateRouter.push(`${process.env.NEXT_PUBLIC_DOMAIN}/oauth2/authorization/kakao`)}>
+      onClick={isLoggedIn ? logOut : () => router.push(`${process.env.NEXT_PUBLIC_DOMAIN}/oauth2/authorization/kakao`)}>
       {isLoggedIn ? `로그아웃` : `로그인`}
     </div>
   )

src/components/mypage/PlanList.tsx

@@ -30,7 +30,8 @@ const PlanList: React.FC<PlanListProps> = ({
     queryFn: () => requestQuery.before
       ? getPlansRequest({ before: requestQuery.before })
       : getPlansRequest({ after: requestQuery.after }),
-  })
+    }, 
+  )
 
   return (
     <div

src/hooks/plan/usePlanInfo.ts

@@ -36,7 +36,7 @@ export const usePlanInfo = (planId: string) => {
       const data = docSnapshot.data();
 
       if (data) {
-        setTitle(data?.title)
+        setTitle(data?.title) 
         setAuthorEmail(data?.authorEmail)
         setDays(data?.startDate, data?.endDate)
         setTags(data?.tags)

src/hooks/schedule/useSchedule.ts

@@ -8,8 +8,8 @@ import usePlanStore from "@/stores/usePlanStore";
 export const useSchedule = (planId: string) => {
 
   const {
-    isSchedulePending: isPending,
-    setIsSchedulePending: setIsPending,
+    isSchedulePending,
+    setIsSchedulePending,
   } = usePlanStore();
 
   const [layout, setLayout] = useState<CustomLayout[]>([]);
@@ -20,7 +20,7 @@ export const useSchedule = (planId: string) => {
       const docSnap = await getDoc(targetDoc);
 
       if (!docSnap.exists()) {
-        setIsPending(true);
+        setIsSchedulePending(true);
         return;
       }
     }
@@ -33,13 +33,13 @@ export const useSchedule = (planId: string) => {
       const data = docSnapshot.data();
       if (data) {
         setLayout(data.scheduleList);
-        setIsPending(false);
+        setIsSchedulePending(false);
       }
     });
 
     return () => {
       setLayout([]);
-      setIsPending(true);
+      setIsSchedulePending(true);
       unsubscribe()
     };
   }, [planId]);
@@ -52,7 +52,7 @@ export const useSchedule = (planId: string) => {
   }, [planId]);
 
   const updateSchedule = (updatedLayout: CustomLayout[]) => {
-    if (!isPending) {
+    if (!isSchedulePending) {
       throttledUpdateSchedule(updatedLayout);
     }
   };

src/types/error/type.ts

@@ -1,3 +1,3 @@
 export interface ErrorResponse {
-  error: string;
+  detail: string;
 }