✨ feat: rss등록 모달 alert추가, 관리자 세션만료 확인버튼 이벤트 추가

client/src/components/RssRegistration/RssRegistrationModal.tsx

@@ -1,4 +1,7 @@
+import { useState } from "react";
+
 import FormInput from "@/components/RssRegistration/FormInput";
+import Alert from "@/components/common/Alert";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import {
@@ -15,6 +18,7 @@ import { useRegisterRss } from "@/hooks/queries/useRegisterRss";
 
 import { validateRssUrl, validateName, validateEmail, validateBlogger } from "./RssValidation";
 import { useRegisterModalStore } from "@/store/useRegisterModalStrore";
+import { AlertType } from "@/types/alert";
 import { RegisterRss } from "@/types/rss";
 
 const Rss = [
@@ -33,6 +37,8 @@ const Rss = [
 ];
 
 export default function RssRegistrationModal({ onClose, rssOpen }: { onClose: () => void; rssOpen: boolean }) {
+  const [alertOpen, setAlertOpen] = useState<AlertType>({ title: "", content: "", isOpen: false });
+
   const {
     rssUrl,
     bloggerName,
@@ -52,17 +58,28 @@ export default function RssRegistrationModal({ onClose, rssOpen }: { onClose: ()
   } = useRegisterModalStore();
 
   const onSuccess = () => {
-    alert("RSS 등록이 성공적으로 완료되었습니다.");
-    resetInputs();
-    onClose();
+    setAlertOpen({
+      title: "RSS 요청 성공!",
+      content: "관리자가 검토후 처리 결과를 입력해주신 메일을 통해 전달드릴 예정이에요!",
+      isOpen: true,
+    });
   };
 
-  const onError = (error: any) => {
-    alert(`RSS 등록에 실패했습니다: ${error.message}`);
+  const onError = () => {
+    setAlertOpen({
+      title: "RSS 요청 실패!",
+      content: "입력한 정보를 확인하거나 다시 시도해주세요. 문제가 계속되면 관리자에게 문의하세요!",
+      isOpen: true,
+    });
   };
 
   const { mutate } = useRegisterRss(onSuccess, onError);
 
+  const handleAlertClose = () => {
+    setAlertOpen({ title: "", content: "", isOpen: false });
+    resetInputs();
+    onClose();
+  };
   const handleRegister = () => {
     const data: RegisterRss = {
       rssUrl: rssUrl,
@@ -133,6 +150,7 @@ export default function RssRegistrationModal({ onClose, rssOpen }: { onClose: ()
           </Button>
         </DialogFooter>
       </DialogContent>
+      <Alert alertOpen={alertOpen} onClose={handleAlertClose} />
     </Dialog>
   );
 }

client/src/components/admin/layout/AdminTabs.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 import { AxiosError } from "axios";
+import { TriangleAlert } from "lucide-react";
 
 import { RejectModal } from "@/components/admin/rss/RejectModal";
 import AcceptedTab from "@/components/admin/taps/AcceptedTap";
@@ -84,10 +85,15 @@ export const AdminTabs = ({ setLogout }: { setLogout: () => void }) => {
   if (pendingError || acceptedError || rejectedError)
     return (
       <div className="w-full h-full fixed top-0 left-0 bg-black bg-opacity-80">
-        <Alert className="w-[300px] h-[100px] fixed top-[50%] left-[50%] transform -translate-y-1/2 -translate-x-1/2">
-          <AlertTitle>세션이 만료되었습니다!</AlertTitle>
-          <AlertDescription>다시 로그인을 시도해 주세요.</AlertDescription>
-          <Button className="absolute right-1" onClick={setLogout}>
+        <Alert className="w-[25vw] h-[20vh] fixed top-[50%] left-[50%] transform -translate-y-1/2 -translate-x-1/2 flex flex-col justify-between">
+          <div className="flex gap-4 items-center pt-5">
+            <TriangleAlert />
+            <div className="flex flex-col gap-3">
+              <AlertTitle className="flex items-center gap-3">세션이 만료되었습니다!</AlertTitle>
+              <AlertDescription>서비스를 계속 사용하려면 로그인하세요.</AlertDescription>
+            </div>
+          </div>
+          <Button className="" onClick={setLogout}>
             확인
           </Button>
         </Alert>

client/src/components/common/Alert.tsx

@@ -0,0 +1,27 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+import { AlertType } from "@/types/alert";
+
+export default function Alert({ alertOpen, onClose }: { alertOpen: AlertType; onClose: () => void }) {
+  return (
+    <AlertDialog open={alertOpen.isOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{alertOpen.title}</AlertDialogTitle>
+          <AlertDialogDescription>{alertOpen.content}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={onClose}>확인</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

client/src/pages/Admin.tsx

@@ -24,7 +24,7 @@ export default function Admin() {
       return (
         <>
           <RssRequestSearchBar />
-          <AdminTabs setLogout={() => setIsLogin(true)} />
+          <AdminTabs setLogout={() => setIsLogin(false)} />
         </>
       );
     }

client/src/types/alert.ts

@@ -0,0 +1,5 @@
+export type AlertType = {
+  title: string;
+  content: string;
+  isOpen: boolean;
+};