refactor: CreateCrewPage 리팩토링

src/pages/CreateCrewPage/CreateCrewPage.tsx

@@ -6,7 +6,6 @@ import { CREATE_CREW_STRINGS } from '@pages/CreateCrewPage/constants/createCrewO
 import { ConditionalFormInput } from '@components/ConditionalFormInput';
 import { Header } from '@components/Header';
 import { Modal } from '@components/Modal';
-import { TextArea } from '@components/TextArea';
 import { Button } from '@components/shared/Button';
 import { Text } from '@components/shared/Text';
 import { VirtualScroll } from '@components/shared/VirtualScroll';
@@ -20,10 +19,13 @@ import {
   PageWrapper,
   StyledCreateForm,
   StyledEmptyContainer,
+  StyledInput,
   StyledModalContent,
   StyledModalHeader,
   StyledSelectBox,
   StyledSelectedLocationButton,
+  StyledSubTitle,
+  StyledTextArea,
   StyledTitle,
   StyledToggleButton,
 } from './CreateCrewPage.styles';
@@ -36,16 +38,13 @@ export const CreateCrewPage = () => {
     methods,
     locations,
     onSubmit,
-    setName,
-    setContent,
     handleMaxMemberCount,
     handleToggleLocation,
     toggleMaxMemberCountModal,
     toggleAddressDepth2Modal,
   } = useCreateCrewPage();
 
   const {
-    name,
     maxMemberCount,
     selectedLocation,
     selectedLocations,
@@ -58,29 +57,31 @@ export const CreateCrewPage = () => {
       <PageWrapper>
         <Header title={showHeaderTitle ? CREATE_CREW_STRINGS.TITLE : ''} />
         <FormProvider {...methods}>
-          <StyledCreateForm onSubmit={methods.handleSubmit(onSubmit)}>
+          <StyledCreateForm onSubmit={onSubmit}>
             <StyledTitle>
               <div ref={entryRef}>
                 <Text size={20} weight={700}>
                   {CREATE_CREW_STRINGS.TITLE}
                 </Text>
               </div>
             </StyledTitle>
-            <ConditionalFormInput
-              title={CREATE_CREW_STRINGS.CREW_NAME}
-              isRequired={true}
-              isContainModal={false}
-              inputLabel="crew-name"
-              inputOnChange={setName}
-              value={name}
+            <StyledSubTitle>
+              <Text size={16} weight={300}>
+                {CREATE_CREW_STRINGS.CREW_NAME}
+              </Text>
+            </StyledSubTitle>
+            <StyledInput
+              {...methods.register('name', {
+                required: true,
+              })}
               minLength={1}
               maxLength={20}
             />
             <ConditionalFormInput
               title={CREATE_CREW_STRINGS.CREW_MEMBER_COUNT}
               readOnly={true}
               isContainModal={true}
-              inputLabel="crew-count"
+              inputLabel="maxMemberCount"
               onClick={toggleMaxMemberCountModal}
               value={maxMemberCount}
               isModalOpen={isOpenMaxMemberCountModal}
@@ -130,11 +131,12 @@ export const CreateCrewPage = () => {
                 </StyledSelectBox>
               </StyledModalContent>
             </Modal>
-            <TextArea
-              title={CREATE_CREW_STRINGS.CREW_DESCRIPTION}
-              inputLabel="content"
-              inputOnChange={setContent}
-            />
+            <StyledSubTitle>
+              <Text size={16} weight={300}>
+                {CREATE_CREW_STRINGS.CREW_DESCRIPTION}
+              </Text>
+            </StyledSubTitle>
+            <StyledTextArea {...methods.register('content')} maxLength={1000} />
             <Button
               width="100%"
               height="50px"

src/pages/CreateCrewPage/hooks/useCreateCrewPage.ts

@@ -1,10 +1,12 @@
 import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { FieldValues, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import { AxiosError } from 'axios';
 
+import { CREATE_CREW_ERROR_MESSAGE } from '@pages/CreateCrewPage/constants/createCrewOptions';
+
 import { LoginRequireError } from '@routes/LoginRequireBoundary';
 
 import { useToggleButtons } from '@components/shared/ToggleButton';
@@ -27,41 +29,13 @@ export const useCreateCrewPage = () => {
 
   const navigate = useNavigate();
   const { data: locations } = useLocationsQuery();
-
   const { mutate } = useCrewMutation();
+
   const methods = useForm();
+  const { handleSubmit } = methods;
 
-  const [name, setName] = useState<string>('');
-  const [content, setContent] = useState<string>('');
   const [maxMemberCount, setMaxMemberCount] = useState<string>('');
   const [selectedLocation, setSelectedLocation] = useState<string[]>();
-
-  const onSubmit = () => {
-    const crewData: PostCrewRequest = {
-      name,
-      content,
-      maxMemberCount: parseInt(maxMemberCount),
-      addressDepth1: '서울시',
-      addressDepth2: selectedLocation![0],
-    };
-
-    mutate(crewData, {
-      onSuccess: ({ crewId }) => {
-        navigate(PATH_NAME.GET_CREWS_PATH(String(crewId)));
-      },
-      onError: (error) => {
-        if (error instanceof AxiosError) {
-          if (error.response?.data.code === 'CRE-012') {
-            return toast.error('최대 크루 생성 횟수 3회를 초과했습니다.');
-          }
-          if (error.response?.data.code === 'CRE-002') {
-            return toast.error('중복된 크루 이름 입니다.');
-          }
-        }
-      },
-    });
-  };
-
   const [isOpenMaxMemberCountModal, setIsOpenMaxMemberCountModal] =
     useState(false);
   const [isOpenAddressDepth2Modal, setIsOpenAddressDepth2Modal] =
@@ -87,20 +61,46 @@ export const useCreateCrewPage = () => {
     isOpenMaxMemberCountModal || setMaxMemberCount(maxMemberCount);
   };
 
+  const onSubmit = handleSubmit((data: FieldValues) => {
+    const addressDepth2 = selectedLocation![0];
+    const { name, content } = data;
+    const crewData: PostCrewRequest = {
+      name,
+      content,
+      maxMemberCount: parseInt(maxMemberCount),
+      addressDepth1: '서울시',
+      addressDepth2,
+    };
+    mutate(crewData, {
+      onSuccess: ({ crewId }) => {
+        navigate(PATH_NAME.GET_CREWS_PATH(String(crewId)));
+      },
+      onError: (error) => {
+        if (error instanceof AxiosError) {
+          if (error.response?.data.code === 'CRE-012') {
+            return toast.error(
+              CREATE_CREW_ERROR_MESSAGE.MAX_CREW_LIMIT_EXCEEDED
+            );
+          }
+          if (error.response?.data.code === 'CRE-002') {
+            return toast.error(CREATE_CREW_ERROR_MESSAGE.DUPLICATE_CREW_NAME);
+          }
+        }
+      },
+    });
+  });
+
   return {
     state: {
-      name,
       maxMemberCount,
       selectedLocation,
       selectedLocations,
       isOpenMaxMemberCountModal,
       isOpenAddressDepth2Modal,
     },
-    methods,
     locations,
+    methods,
     onSubmit,
-    setName,
-    setContent,
     handleMaxMemberCount,
     handleToggleLocation,
     toggleMaxMemberCountModal,