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

.eslintrc.json

@@ -45,6 +45,7 @@
           ["^@api/(.*)$"],
           ["^@shared/(.*)$"],
           ["^@workbook/(.*)$"],
+          ["^@subscription/(.*)$"],
           ["^@article/(.*)$"],
           ["^@quiz/(.*)$"],
           ["^@main/(.*)$"],

next.config.mjs

@@ -3,6 +3,9 @@ const nextConfig = {
   experimental: {
     instrumentationHook: true,
   },
+  images: {
+    domains: ['github.com'],
+  },
   webpack: (config, context) => {
     config.module.rules.push({
       test: /\.svg$/,

src/app/unsubscribe/layout.tsx

@@ -2,10 +2,10 @@ import React, { ReactNode } from "react";
 
 import TopBar from "@common/components/TopBar";
 
-interface CancelLayoutProps {
+interface UnsubscribeLayoutProps {
   children: ReactNode;
 }
-export default function CancelLayout({ children }: CancelLayoutProps) {
+export default function UnsubscribeLayout({ children }: UnsubscribeLayoutProps) {
   return (
     <section className="mx-[20px] mb-[10px] flex h-auto w-full flex-col justify-between">
       <TopBar />

src/app/unsubscribe/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import UnsubscribeForm from "@workbook/components/UnsubscribeForm";
-import UnsubscribeTitle from "@workbook/components/UnsubscribeTitle";
+import UnsubscribeForm from "@subscription/components/UnsubscribeForm";
+import UnsubscribeTitle from "@subscription/components/UnsubscribeTitle";
 
 export default function UnsubscribePage() {
 

src/app/workbook/[id]/page.tsx

@@ -13,14 +13,14 @@ import TitleSection from "@shared/components/TitleSection";
 
 import CurriculumSection from "@workbook/components/CurriculumSection";
 import OverviewSection from "@workbook/components/OverviewSection";
-import SubscribeForm from "@workbook/components/SubscribeForm";
 import WorkbookSkeleton from "@workbook/components/WorkbookSkeleton";
 import WriterInfo from "@workbook/components/WriterInfo";
 import { getWorkbookQueryOptions } from "@workbook/remotes/getWorkbookQueryOptions";
 import { getWorkbookId } from "@workbook/utils";
 
-import SubscribeBottomBar from "@main/components/SubscribeBottomBar";
-import { SUBSCRIBE_TITLES } from "@main/constants/main";
+import SubscribeBottomBar from "@subscription/components/SubscribeBottomBar";
+import SubscribeForm from "@subscription/components/SubscribeForm";
+import { SUBSCRIBE_TITLES } from "@subscription/constants/subscribe";
 
 const SUBSCRIBE_POPUP_TITLE = (
   <div className="h3-bold text-lg text-black">

src/app/workbook/[id]/unsubscribe/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import UnsubscribeForm from "@workbook/components/UnsubscribeForm";
-import UnsubscribeTitle from "@workbook/components/UnsubscribeTitle";
+import UnsubscribeForm from "@subscription/components/UnsubscribeForm";
+import UnsubscribeTitle from "@subscription/components/UnsubscribeTitle";
 
 export default function SubscriptionCancelPage () {
     return (

src/middleware.ts

@@ -19,7 +19,14 @@ export default function middleware(req: NextRequest) {
   const isWithOutAuth = false;
 
   const nextUrl = req.nextUrl.clone();
-  const email = nextUrl.searchParams.get("user");
+  const { pathname, searchParams } = nextUrl;
+  const email = searchParams.get("user");
+
+  /** /workbook 으로 진입 시 리다이랙션 */
+  if (pathname === "/workbook") {
+    nextUrl.pathname = "/workbook/1";
+    return NextResponse.redirect(nextUrl);
+  }
 
   if (email) {
     nextUrl.searchParams.delete("user");
@@ -39,5 +46,5 @@ export default function middleware(req: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/unsubscribe/:path*"],
+  matcher: ["/unsubscribe/:path*", "/workbook/:path*"],
 };

src/main/components/SubscribeBottomBar/SubscribeBottomBar.test.tsx → src/subscription/components/SubscribeBottomBar/SubscribeBottomBar.test.tsx

@@ -2,16 +2,15 @@ import { Control,useForm } from 'react-hook-form';
 
 import { describe, expect, it, vi } from 'vitest';
 
-// import as module
-import { EMAIL_CONTROL, SUBSCRIBE_ANNOUCE, SUBSCRIBE_TITLES,SUBSCRIBE_USER_ACTIONS } from '@main/constants/main';
+import { EMAIL_CONTROL, SUBSCRIBE_ANNOUCE, SUBSCRIBE_TITLES, SUBSCRIBE_USER_ACTIONS } from '@subscription/constants/subscribe';
 
 import SubscribeBottomBar from '.';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 // Mock the useSubscribeForm hook
 const mockOnSubmit = vi.fn();
 
-vi.mock('@main/hooks/useSubscribeForm', () => ({
+vi.mock('@subscription/hooks/useSubscribeForm', () => ({
   useSubscribeForm: () => {
     const form = useForm({
       resolver: async (data) => {

src/main/components/SubscribeBottomBar/index.tsx → src/subscription/components/SubscribeBottomBar/index.tsx

@@ -10,8 +10,8 @@ import {
 } from "@shared/components/ui/form"
 import { Input } from "@shared/components/ui/input";
 
-import { EMAIL_CONTROL, SUBSCRIBE_ANNOUCE, SUBSCRIBE_TITLES,SUBSCRIBE_USER_ACTIONS } from "@main/constants/main";
-import { useSubscribeForm } from "@main/hooks/useSubscribeForm";
+import { EMAIL_CONTROL, SUBSCRIBE_ANNOUCE, SUBSCRIBE_TITLES,SUBSCRIBE_USER_ACTIONS } from "@subscription/constants/subscribe";
+import { useSubscribeForm } from "@subscription/hooks/useSubscribeForm";
 
 export default function SubscribeBottomBar() {
     const { form, onSubmit } = useSubscribeForm();

src/workbook/components/SubscribeForm/SubscribeForm.test.tsx → src/subscription/components/SubscribeForm/SubscribeForm.test.tsx

@@ -2,7 +2,7 @@ import { useForm } from 'react-hook-form';
 
 import { describe, expect, it, vi } from 'vitest';
 
-import { EMAIL_CONTROL, SUBSCRIBE_ANNOUCE, SUBSCRIBE_USER_ACTIONS } from '@main/constants/main';
+import { EMAIL_CONTROL, SUBSCRIBE_ANNOUCE, SUBSCRIBE_USER_ACTIONS } from '@subscription/constants/subscribe';
 
 import SubscribeForm from '.';
 import { render, screen, waitFor } from '@testing-library/react';
@@ -11,7 +11,7 @@ import userEvent from '@testing-library/user-event';
 const mockSetIsOpen = vi.fn();
 const mockOnSubmit = vi.fn();
 
-vi.mock('@main/hooks/useSubscribeForm', () => ({
+vi.mock('@subscription/hooks/useSubscribeForm', () => ({
   useSubscribeForm: () => ({
     form: useForm(),
     onSubmit: mockOnSubmit,

src/workbook/components/SubscribeForm/index.tsx → src/subscription/components/SubscribeForm/index.tsx

@@ -5,10 +5,8 @@ import { cn } from "@shared/utils/cn";
 
 import { buttonStyle } from "@workbook/constants/buttonStyle";
 
-import {
-  SUBSCRIBE_USER_ACTIONS,
-} from "@main/constants/main";
-import { useSubscribeForm } from "@main/hooks/useSubscribeForm";
+import { SUBSCRIBE_USER_ACTIONS } from "@subscription/constants/subscribe";
+import { useSubscribeForm } from "@subscription/hooks/useSubscribeForm";
 
 import SubscribeFormField from "../SubscribeFormField";
 

src/workbook/components/SubscribeFormField/index.tsx → src/subscription/components/SubscribeFormField/index.tsx

@@ -4,10 +4,7 @@ import { Controller,useFormContext } from "react-hook-form";
 import { FormControl, FormItem, FormMessage } from "@shared/components/ui/form";
 import { Input } from "@shared/components/ui/input";
 
-import {
-  EMAIL_CONTROL,
-  SUBSCRIBE_ANNOUCE,
-} from "@main/constants/main";
+import { EMAIL_CONTROL, SUBSCRIBE_ANNOUCE } from "@subscription/constants/subscribe";
 
 const SubscribeFormField = () => {
   const { control, formState } = useFormContext();

src/workbook/components/UnsubscribeForm/UnsubscribeForm.test.tsx → src/subscription/components/UnsubscribeForm/UnsubscribeForm.test.tsx

@@ -5,9 +5,9 @@ import { describe, expect, it, vi } from "vitest";
 import {
     UNSUBSCRIBE_CONFIRM,
   UNSUBSCRIBE_FORM,
-} from "@workbook/constants/unsubscribe";
-import { unSubscribeSchema } from "@workbook/schemas";
-import { UnsubscribeFormData } from "@workbook/types";
+} from "@subscription/constants/unsubscribe";
+import { unSubscribeSchema } from "@subscription/schemas";
+import { UnsubscribeFormData } from "@subscription/types/subscription";
 
 import UnsubscribeForm from ".";
 import { render, screen, waitFor } from "@testing-library/react";
@@ -28,7 +28,7 @@ const mockOnSubmit = vi.fn(async (values: UnsubscribeFormData) => {
     }
   });
 
-vi.mock("@workbook/hooks/useUnsubscribeForm", () => ({
+vi.mock("@subscription/hooks/useUnsubscribeForm", () => ({
   useUnsubscribeForm: () => ({
     form: useForm(),
     onSubmit: mockOnSubmit,

src/workbook/components/UnsubscribeForm/index.tsx → src/subscription/components/UnsubscribeForm/index.tsx

@@ -4,8 +4,9 @@ import { Button } from "@shared/components/ui/button";
 import { cn } from "@shared/utils/cn";
 
 import { buttonStyle } from "@workbook/constants/buttonStyle";
-import { UNSUBSCRIBE_FORM } from "@workbook/constants/unsubscribe";
-import { useUnsubscribeForm } from "@workbook/hooks/useUnsubscribeForm";
+
+import { UNSUBSCRIBE_FORM } from "@subscription/constants/unsubscribe";
+import { useUnsubscribeForm } from "@subscription/hooks/useUnsubscribeForm";
 
 import UnsubscribeFormField from "../UnsubscribeFormField";
 

src/workbook/components/UnsubscribeFormField/index.tsx → src/subscription/components/UnsubscribeFormField/index.tsx

@@ -4,7 +4,7 @@ import { Controller,useFormContext } from "react-hook-form";
 import { FormControl, FormItem, FormLabel, FormMessage } from "@shared/components/ui/form";
 import { Textarea } from "@shared/components/ui/textarea";
 
-import { UNSUBSCRIBE_FORM } from "@workbook/constants/unsubscribe";
+import { UNSUBSCRIBE_FORM } from "@subscription/constants/unsubscribe";
 
 const UnsubscribeFormField = () => {
   const { control, formState } = useFormContext();

src/workbook/components/UnsubscribeTitle/index.tsx → 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/useSubscribeForm.tsx

@@ -0,0 +1,67 @@
+import { usePathname } from 'next/navigation';
+
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { useMutation } from '@tanstack/react-query';
+
+import { useToast } from '@shared/components/ui/use-toast';
+
+import { getWorkbookId } from '@workbook/utils';
+
+import { SUBSCRIBE_USER_ACTIONS } from '@subscription/constants/subscribe';
+import { subscribeWorkbookOptions } from '@subscription/remotes/postSubscriptionQueryOptions';
+import { emailSubscribeSchema } from '@subscription/schemas';
+import { EmailSubscribeFormData } from '@subscription/types/subscription';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+
+export const useSubscribeForm = () => {
+  const { toast } = useToast();
+  const pathname = usePathname()
+  const [workbookId, setWorkbookId] = useState<string>("")
+
+  useEffect(function getId() {
+    return setWorkbookId(getWorkbookId(pathname));
+  }, [pathname])
+
+  const form = useForm<EmailSubscribeFormData>({
+    resolver: zodResolver(emailSubscribeSchema),
+    defaultValues: {
+      email: '',
+    },
+    mode: "onSubmit"
+  });
+
+  const { mutate: subscribeWorkbook } = useMutation(subscribeWorkbookOptions({
+    workbookId: workbookId, 
+  }));
+
+  const onSubmit = (values: EmailSubscribeFormData) => {
+    try {
+      subscribeWorkbook(values, {
+        onSuccess: () => {
+          form.reset();
+          toast({
+            title: SUBSCRIBE_USER_ACTIONS.SUBSCRIBE_SUCCESS,
+          });
+        },
+        onError: (error) => {
+          console.error(error);
+          toast({
+            title: '구독 신청이 되지 않았습니다.'
+          });
+        },
+      });
+    } catch (error) {
+      toast({
+        title: '구독 신청이 되지 않았습니다.'
+      });
+    }
+  };
+
+  return {
+    form,
+    onSubmit,
+  };
+};