[ Feature/subscription 75 ] 구독 & 구독 취소 API 연결

src/subscription/components/UnsubscribeTitle/index.tsx

@@ -1,4 +1,4 @@
-import { UNSUBSCRIBE_TITLES } from "@workbook/constants/unsubscribe";
+import { UNSUBSCRIBE_TITLES } from "@subscription/constants/unsubscribe";
 
 export default function UnsubscribeTitle () {
     return (

src/subscription/hooks/useUnsubscribeForm.tsx

@@ -1,12 +1,16 @@
 import { useForm } from "react-hook-form";
 
+import { useMutation } from "@tanstack/react-query";
+
 import { z } from "zod";
 
 import { useToast } from "@shared/components/ui/use-toast";
 
 import { UNSUBSCRIBE_CONFIRM } from "@subscription/constants/unsubscribe";
+import { unsubscribeWorkbookOptions } from "@subscription/remotes/postUnsubscriptionQueryOptions";
 import { unSubscribeSchema } from "@subscription/schemas";
 import { UnsubscribeFormData } from "@subscription/types/subscription";
+import { getCookie } from "@subscription/utils";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 
@@ -20,16 +24,32 @@ export const useUnsubscribeForm = () => {
     },
   });
 
+  const { mutate: unsubscribeWorkbook } = useMutation(unsubscribeWorkbookOptions());
+
   const onSubmit = (values: UnsubscribeFormData) => {
     try {
       const result = unSubscribeSchema.safeParse(values);
-
+      const email = getCookie('user-email');
+
       // 폼 제출 성공 로직 추가
-      if (result.success) {
-        form.reset();
-        toast({
-          title: UNSUBSCRIBE_CONFIRM,
-        });
+      if (result.success && typeof email === "string") {
+        unsubscribeWorkbook(
+          { email: decodeURIComponent(email), opinion: values.opinion },
+          {
+            onSuccess: () => {
+              form.reset();
+              toast({
+                title: UNSUBSCRIBE_CONFIRM,
+              });
+            },
+            onError: (error) => {
+              console.error(error);
+              toast({
+                title: '구독 취소가 되지 않았습니다.'
+              });
+            },
+          },
+        );
       }
     } catch (error) {
       if (error instanceof z.ZodError) {

src/subscription/remotes/api.ts

@@ -1,6 +1,8 @@
 export const API_ROUTE = {
   SUBSCRIBE: (workbookId: string) => `/api/v1/workbooks/${workbookId}/subs`,
+  UNSUBSCRIBE: () => `/api/v1/subscriptions/unsubs`
 };
 export const QUERY_KEY = {
   SUBSCRIBE_WORKBOOK: "sub-workbook",
+  UNSUBSCRIBE_WORKBOOK: "unsub-workbook"
 };

src/subscription/remotes/postUnsubscriptionQueryOptions.ts

@@ -0,0 +1,27 @@
+import { UseMutationOptions } from "@tanstack/react-query";
+
+import { ApiResponse, axiosRequest } from "@api/api-config";
+
+import {
+  MessageOnlyResponse,
+  UnsubscribeBody,
+} from "@subscription/types/subscription";
+
+import { API_ROUTE, QUERY_KEY } from "./api";
+
+export const unsubscribeWorkbook = (
+  body: UnsubscribeBody,
+): Promise<ApiResponse<MessageOnlyResponse>> => {
+  return axiosRequest("post", API_ROUTE.UNSUBSCRIBE(), body);
+};
+
+export const unsubscribeWorkbookOptions = (): UseMutationOptions<
+  ApiResponse<MessageOnlyResponse>,
+  Error,
+  UnsubscribeBody
+> => {
+  return {
+    mutationKey: [QUERY_KEY.UNSUBSCRIBE_WORKBOOK],
+    mutationFn: (body) => unsubscribeWorkbook(body),
+  };
+};

src/subscription/types/subscription.ts

@@ -17,4 +17,9 @@ export type SubscribeBody = {
     email: string
 }
 
-export interface MessageOnlyResponse extends Pick<ApiResponse<any>, 'message'> {}
+export interface MessageOnlyResponse extends Pick<ApiResponse<any>, 'message'> {}
+
+export type UnsubscribeBody = {
+    email: string
+    opinion: string
+}

src/subscription/utils/index.ts

@@ -0,0 +1,5 @@
+export const getCookie = (name: string) => {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop()?.split(";").shift();
+};