A사이드 토픽 생성 API 연동

src/apis/topic/useTopics.ts

@@ -1,11 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import {
-  CHOICE_OPTIONS,
-  ChoiceContent,
-  TopicCreateRequestDTO,
-  TopicResponse,
-} from '@interfaces/api/topic';
+import { TopicCreateRequestDTO, TopicResponse } from '@interfaces/api/topic';
 
 import { PagingDataResponse } from '@interfaces/api';
 

src/interfaces/api/topic.ts

@@ -18,10 +18,10 @@ interface TopicResponse {
 
 export interface TopicCreateRequestDTO {
   side: string;
-  keywordName: string;
+  keywordName: string | null;
   title: string;
   choices: ChoiceRequest[];
-  deadline: number;
+  deadline: number | null;
 }
 
 interface ChoiceRequest {

src/routes/Topic/Create/ASide/ATopicCreate.tsx

@@ -1,47 +1,79 @@
 import React, { useState, useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import { useCreateTopics } from '@apis/topic/useTopics';
 import DefaultButton from '@components/commons/Button/DefaultButton';
 import { Col } from '@components/commons/Flex/Flex';
 import Text from '@components/commons/Text/Text';
 import TextInput from '@components/commons/TextInput/TextInput';
 import { theme3 } from '@components/commons/TextInput/theme';
 import TopicCreateTextInput from '@components/TopicCreate/TopicCreateTextInput';
+import { CHOICE_OPTIONS } from '@interfaces/api/topic';
+import { TopicCreateDTO } from '@routes/Topic/Create/TopicCreate';
 
 import { INPUT_TYPE, CONFIG } from '@constants/form';
 
 import { colors } from '@styles/theme';
 
 import { Container, SubmitButton } from './ATopicCreate.styles';
 
-interface TopicCreateDTO {
-  topicTitle: string;
-  ATopic: string;
-  BTopic: string;
-}
-
 const ATopicCreate = () => {
   const methods = useForm<TopicCreateDTO>({ mode: 'onChange' });
 
   const titleProgress = methods.watch(INPUT_TYPE.TOPIC_TITLE)
     ? `${methods.watch(INPUT_TYPE.TOPIC_TITLE)?.length}/20`
     : '0/20';
   const [isFormFilled, setIsFormFilled] = useState(false);
-  const handleSubmitButtonClick = () => {
-    console.log('submit');
+
+  const createTopicMutation = useCreateTopics();
+
+  const handleSubmitForm = async () => {
+    const data = methods.getValues();
+    try {
+      const res = await createTopicMutation.mutateAsync({
+        side: 'TOPIC_A',
+        title: data.topicTitle,
+        keywordName: null,
+        deadline: null,
+        choices: [
+          {
+            choiceContentRequest: {
+              text: data.ATopic,
+              type: 'IMAGE_TEXT',
+              imageUrl: null,
+            },
+            choiceOption: CHOICE_OPTIONS.CHOICE_A,
+          },
+          {
+            choiceContentRequest: {
+              text: data.BTopic,
+              type: 'IMAGE_TEXT',
+              imageUrl: null,
+            },
+            choiceOption: CHOICE_OPTIONS.CHOICE_B,
+          },
+        ],
+      });
+      console.log('success :', res);
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   useEffect(() => {
+    const ATopicCondition = methods.getFieldState(INPUT_TYPE.A_TOPIC, methods.formState);
+    const BTopicCondition = methods.getFieldState(INPUT_TYPE.B_TOPIC, methods.formState);
     if (
-      methods.getValues(INPUT_TYPE.TOPIC_TITLE) &&
-      methods.getValues(INPUT_TYPE.A_TOPIC) &&
-      methods.getValues(INPUT_TYPE.B_TOPIC)
+      !ATopicCondition.invalid &&
+      !BTopicCondition.invalid &&
+      ATopicCondition.isDirty &&
+      BTopicCondition.isDirty
     ) {
       setIsFormFilled(true);
     } else {
       setIsFormFilled(false);
     }
-  }, [methods]);
+  }, [methods.formState, methods]);
 
   return (
     <FormProvider {...methods}>
@@ -69,7 +101,7 @@ const ATopicCreate = () => {
         <SubmitButton>
           <DefaultButton
             title={'토픽 던지기'}
-            onClick={handleSubmitButtonClick}
+            onClick={handleSubmitForm}
             disabled={!isFormFilled}
           ></DefaultButton>
         </SubmitButton>

src/routes/Topic/Create/BSide/BTopicCreate.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'react-router-dom';
 import { useCreateTopics } from '@apis/topic/useTopics';
 import DefaultButton from '@components/commons/Button/DefaultButton';
 import { CHOICE_OPTIONS, TopicCreateRequestDTO } from '@interfaces/api/topic';
+import { TopicCreateDTO } from '@routes/Topic/Create/TopicCreate';
 
 import { INPUT_TYPE } from '@constants/form';
 
@@ -18,17 +19,6 @@ import {
 import BTopicCreateStep1 from './BTopicCreateStep1';
 import BTopicCreateStep2 from './BTopicCreateStep2';
 
-interface TopicCreateDTO {
-  topicTitle: string;
-  ATopic: string;
-  BTopic: string;
-  topicCategory: string;
-  ATopicImageURL: string;
-  BTopicImageURL: string;
-  topicDeadline: number;
-  topicType: string;
-}
-
 const BTopicCreate = () => {
   const methods = useForm<TopicCreateDTO>({ mode: 'onChange' });
   const contentType = useWatch({

src/routes/Topic/Create/TopicCreate.tsx

@@ -18,6 +18,17 @@ import {
   SideChangeButton,
 } from './TopicCreate.sytles';
 
+export interface TopicCreateDTO {
+  topicTitle: string;
+  ATopic: string;
+  BTopic: string;
+  topicCategory: string;
+  ATopicImageURL: string;
+  BTopicImageURL: string;
+  topicDeadline: number;
+  topicType: string;
+}
+
 const TopicCreate = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();