✨ feat: RSS등록 API 연동

client/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

client/src/api/instance.ts

@@ -4,3 +4,8 @@ export const api = axios.create({
   baseURL: "/api",
   timeout: 10000,
 });
+
+export const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 10000,
+});

client/src/api/queries/rssApi.ts

@@ -0,0 +1,8 @@
+import { axiosInstance } from "@/api/instance";
+import { RegisterRss } from "@/types/rss";
+import { RegisterResponse } from "@/types/rss";
+
+export const registerRss = async (data: RegisterRss): Promise<RegisterResponse> => {
+  const response = await axiosInstance.post<RegisterResponse>("/api/rss", data);
+  return response.data;
+};

client/src/components/RssRegistration/RssRegistrationModal.tsx

@@ -9,8 +9,11 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 
+import { useRegisterRss } from "@/hooks/useRegisterRss";
+
 import { validateRssUrl, validateName, validateEmail, validateBlogger } from "./RssValidation";
 import { useRegisterModalStore } from "@/store/useRegisterModalStrore";
+import { RegisterRss } from "@/types/rss";
 
 export default function RssRegistrationModal({ onClose, rssOpen }: { onClose: () => void; rssOpen: boolean }) {
   const {
@@ -30,7 +33,28 @@ export default function RssRegistrationModal({ onClose, rssOpen }: { onClose: ()
     handleInputChange,
     isFormValid,
   } = useRegisterModalStore();
+  const onSuccess = () => {
+    alert("RSS 등록이 성공적으로 완료되었습니다.");
+    resetInputs();
+    onClose();
+  };
+
+  const onError = (error: any) => {
+    alert(`RSS 등록에 실패했습니다: ${error.message}`);
+  };
+
+  const { mutate } = useRegisterRss(onSuccess, onError);
+
+  const handleRegister = () => {
+    const data: RegisterRss = {
+      rssURL: rssUrl,
+      blog: bloggerName,
+      name: userName,
+      email: email,
+    };
 
+    mutate(data);
+  };
   return (
     <Dialog open={rssOpen} onOpenChange={onClose}>
       <DialogContent className="sm:max-w-[425px]">
@@ -74,9 +98,7 @@ export default function RssRegistrationModal({ onClose, rssOpen }: { onClose: ()
         <DialogFooter>
           <Button
             type="submit"
-            onClick={() => {
-              resetInputs();
-            }}
+            onClick={handleRegister}
             disabled={!isFormValid()}
             className="bg-black hover:bg-gray-800 text-white"
           >

client/src/components/RssRegistration/RssValidation.ts

@@ -1,5 +1,5 @@
 export const validateRssUrl = (url: string) => {
-  const urlRegex = /^(https?:\/\/)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/[\w./?=%&-]*)?$/;
+  const urlRegex = /^(https?:\/\/)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[^\s]*)?$/;
   return urlRegex.test(url) || false;
 };
 

client/src/hooks/useRegisterRss.ts

@@ -0,0 +1,16 @@
+import { AxiosError } from "axios";
+
+import { registerRss } from "@/api/queries/rssApi";
+import { RegisterRss, RegisterResponse } from "@/types/rss";
+import { useMutation, UseMutationResult } from "@tanstack/react-query";
+
+export const useRegisterRss = (
+  onSuccess: (data: RegisterResponse) => void,
+  onError: (error: AxiosError<unknown, any>) => void
+): UseMutationResult<RegisterResponse, AxiosError<unknown, any>, RegisterRss, unknown> => {
+  return useMutation<RegisterResponse, AxiosError<unknown, any>, RegisterRss>({
+    mutationFn: registerRss,
+    onSuccess,
+    onError,
+  });
+};

client/src/types/rss.ts

@@ -12,3 +12,13 @@ export interface RssRequest {
   approvedAt?: string; // 승인 시간
   rejectedAt?: string; // 거부 시간
 }
+export interface RegisterRss {
+  blog: string; // 블로거명
+  name: string; // 신청자 이름
+  email: string; // 신청자 이메일
+  rssURL: string; // 블로그 Rss URL
+}
+
+export interface RegisterResponse {
+  message: string; // 응답 메시지
+}