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

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

@@ -18,10 +18,9 @@ import WriterInfo from "@workbook/components/WriterInfo";
 import { getWorkbookQueryOptions } from "@workbook/remotes/getWorkbookQueryOptions";
 import { getWorkbookId } from "@workbook/utils";
 
+import SubscribeBottomBar from "@subscription/components/SubscribeBottomBar";
 import SubscribeForm from "@subscription/components/SubscribeForm";
-
-import SubscribeBottomBar from "@main/components/SubscribeBottomBar";
-import { SUBSCRIBE_TITLES } from "@main/constants/main";
+import { SUBSCRIBE_TITLES } from "@subscription/constants/main";
 
 const SUBSCRIBE_POPUP_TITLE = (
   <div className="h3-bold text-lg text-black">

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/main';
 
 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/main";
+import { useSubscribeForm } from "@subscription/hooks/useSubscribeForm";
 
 export default function SubscribeBottomBar() {
     const { form, onSubmit } = useSubscribeForm();

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/main';
 
 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/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/main";
+import { useSubscribeForm } from "@subscription/hooks/useSubscribeForm";
 
 import SubscribeFormField from "../SubscribeFormField";
 

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/main";
 
 const SubscribeFormField = () => {
   const { control, formState } = useFormContext();

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/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/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/main/hooks/useSubscribeForm.tsx → src/subscription/hooks/useSubscribeForm.tsx

@@ -4,9 +4,9 @@ import { z } from 'zod';
 
 import { useToast } from '@shared/components/ui/use-toast';
 
-import { SUBSCRIBE_USER_ACTIONS } from '@main/constants/main';
-import { emailSubscribeSchema } from '@main/schemas';
-import { EmailSubscribeFormData } from '@main/types';
+import { SUBSCRIBE_USER_ACTIONS } from '@subscription/constants/main';
+import { emailSubscribeSchema } from '@subscription/schemas';
+import { EmailSubscribeFormData } from '@subscription/types/subscription';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 

src/subscription/hooks/useUnsubscribeForm.tsx

@@ -4,9 +4,9 @@ import { z } from "zod";
 
 import { useToast } from "@shared/components/ui/use-toast";
 
-import { UNSUBSCRIBE_CONFIRM } from "@workbook/constants/unsubscribe";
-import { unSubscribeSchema } from "@workbook/schemas";
-import { UnsubscribeFormData } from "@workbook/types";
+import { UNSUBSCRIBE_CONFIRM } from "@subscription/constants/unsubscribe";
+import { unSubscribeSchema } from "@subscription/schemas";
+import { UnsubscribeFormData } from "@subscription/types/subscription";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 

src/subscription/remotes/api.ts

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

src/subscription/remotes/postSubscriptionQueryOptions.ts

@@ -0,0 +1,31 @@
+import { UseMutationOptions } from "@tanstack/react-query";
+
+import { ApiResponse, axiosRequest } from "@api/api-config";
+
+import {
+    MessageOnlyResponse,
+  SubscribeBody,
+  SubscribeParams,
+} from "@subscription/types/subscription";
+
+import { API_ROUTE, QUERY_KEY } from "./api";
+
+export const subscribeWorkbook = (
+  params: SubscribeParams,
+  body: SubscribeBody,
+): Promise<ApiResponse<MessageOnlyResponse>> => {
+  return axiosRequest("post", API_ROUTE.SUBSCRIBE(params.workbookId), body);
+};
+
+export const subscribeWorkbookOptions = (
+    params: SubscribeParams
+): UseMutationOptions<
+    ApiResponse<MessageOnlyResponse>,
+    Error, 
+    SubscribeBody
+> => {
+    return {
+        mutationKey: [QUERY_KEY.SUBSCRIBE_WORKBOOK, params.workbookId],
+        mutationFn: (body) => subscribeWorkbook(params, body)
+    };
+}

src/subscription/schemas/index.ts

@@ -1,10 +1,18 @@
 import { z } from "zod"
 
-import { UNSUBSCRIBE_FORM } from "@workbook/constants/unsubscribe"
+import { EMAIL_CONTROL } from "@subscription/constants/main"
+import { UNSUBSCRIBE_FORM } from "@subscription/constants/unsubscribe"
 
 export const unSubscribeSchema = z.object({
     opinion: z
     .string()
     .max(255, { message: UNSUBSCRIBE_FORM.WORD_LIMIT })
 
+})
+
+export const emailSubscribeSchema = z.object({
+    email: z
+    .string()
+    .min(1, { message: EMAIL_CONTROL.INVALID_EMAIL })
+    .email(EMAIL_CONTROL.INVALID_EMAIL)
 })

src/subscription/types/subscription.ts

@@ -1,5 +1,20 @@
 import { z } from "zod";
 
-import { unSubscribeSchema } from "@subscription/schemas";
+import { ApiResponse } from "@api/api-config";
 
-export type UnsubscribeFormData = z.infer<typeof unSubscribeSchema>;
+import { emailSubscribeSchema, unSubscribeSchema } from "@subscription/schemas";
+
+export type variantType = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+export type EmailSubscribeFormData = z.infer<typeof emailSubscribeSchema>;
+
+export type UnsubscribeFormData = z.infer<typeof unSubscribeSchema>;
+
+export type SubscribeParams = {
+    workbookId: string;
+}
+
+export type SubscribeBody = {
+    email: string
+}
+
+export interface MessageOnlyResponse extends Pick<ApiResponse<any>, 'message'> {}

vitest.config.ts

@@ -38,7 +38,7 @@ export default defineConfig({
       "@mocks": resolve("src/mocks"),
       "@common": resolve("src/common"),
       "@problem": resolve("src/problem"),
-      "@subscription/*": resolve("src/subscription"),
+      "@subscription": resolve("src/subscription"),
       public: resolve("public"),
     },
   },