[#65] feat: 서비스 수정 API 연동

- useServiceEdit hook 수정 - API 연동, 로딩, 에러, 수정 완료 처리
telbby · Dec 29, 2021 · 4ccff9b · 4ccff9b
1 parent bbded92
commit 4ccff9b
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 12 deletions.
diff --git a/src/apis/serviceApi/index.ts b/src/apis/serviceApi/index.ts
@@ -23,6 +23,10 @@ class ServiceApi extends Api {
 
     return response.data;
   }
+
+  async updateInfo(id: string, formData: FormData): Promise<void> {
+    await this.patch<void, FormData>(formData, { additionalUri: `/${id}` });
+  }
 }
 
 export default ServiceApi;
diff --git a/src/components/service/ServiceEditForm/index.tsx b/src/components/service/ServiceEditForm/index.tsx
@@ -14,6 +14,7 @@ import {
 
 type ServiceEditFormProps = {
   serviceInfo: ServiceInfo;
+  updateServiceInfo: (formData: FormData) => void;
 };
 
 type ServiceEditFormInput = {
@@ -29,7 +30,10 @@ type ImageInput = {
   raw: File | null;
 };
 
-const ServiceEditForm: FC<ServiceEditFormProps> = ({ serviceInfo }) => {
+const ServiceEditForm: FC<ServiceEditFormProps> = ({
+  serviceInfo,
+  updateServiceInfo,
+}) => {
   const {
     name,
     clientId,
@@ -74,10 +78,6 @@ const ServiceEditForm: FC<ServiceEditFormProps> = ({ serviceInfo }) => {
     [inputs],
   );
 
-  const onSubmit = () => {
-    // TODO: 서비스 수정 API 연결
-  };
-
   const onChangeImgFile = (e) => {
     if (e.target.files.length) {
       setImage({
@@ -87,8 +87,23 @@ const ServiceEditForm: FC<ServiceEditFormProps> = ({ serviceInfo }) => {
     }
   };
 
+  const onClickSaveBtn = () => {
+    const formData = new FormData();
+    if (name !== inputs.name) formData.append('name', inputs.name);
+    if (description !== inputs.description)
+      formData.append('description', inputs.description);
+    if (domain !== inputs.domain) formData.append('domain', inputs.domain);
+    if (firstQuestion !== inputs.firstQuestion)
+      formData.append('question', inputs.firstQuestion);
+    if (theme.toString() !== inputs.theme)
+      formData.append('themeId', inputs.theme);
+    if (image.raw !== null) formData.append('image', image.raw);
+
+    updateServiceInfo(formData);
+  };
+
   return (
-    <form onSubmit={onSubmit}>
+    <form>
       <div css={formHeaderStyle}>
         <label htmlFor="service-profile">
           <input
@@ -105,7 +120,7 @@ const ServiceEditForm: FC<ServiceEditFormProps> = ({ serviceInfo }) => {
           <span>Client ID: {clientId}</span>
           <h2>{inputs.name}</h2>
         </div>
-        <button type="submit" disabled={!isBtnActive}>
+        <button type="button" disabled={!isBtnActive} onClick={onClickSaveBtn}>
           SAVE
         </button>
       </div>

diff --git a/src/hooks/useServiceEdit.ts b/src/hooks/useServiceEdit.ts
@@ -6,19 +6,25 @@ import {
   NOT_FOUND_ERROR,
   UNEXPECTED_ERROR,
 } from '@/constants/error';
+import styleTheme from '@/styles/theme';
 import { ServiceInfo } from '@/types';
 
+import useSnackbar from './useSnackbar';
+
 const useServiceEdit = (
   serviceId: string,
 ): {
   isLoading: boolean;
   error: string;
   serviceInfo: ServiceInfo;
+  updateServiceInfo: (formData: FormData) => void;
 } => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [serviceInfo, setServiceInfo] = useState<ServiceInfo | null>(null);
 
+  const snackbar = useSnackbar({});
+
   const getServiceInfo = async () => {
     try {
       setIsLoading(true);
@@ -58,6 +64,27 @@ const useServiceEdit = (
     }
   };
 
+  const updateServiceInfo = async (formData: FormData) => {
+    try {
+      setIsLoading(true);
+
+      await serviceApi.updateInfo(serviceId, formData);
+
+      snackbar.showMessage('Service Update Success!!', {
+        duration: 1500,
+        backgroundColor: styleTheme.colorSuccess,
+      });
+    } catch (e) {
+      if (e.response) {
+        setError(UNEXPECTED_ERROR);
+      } else {
+        setError(NETWORK_ERROR);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   useEffect(() => {
     getServiceInfo();
   }, []);
@@ -66,6 +93,7 @@ const useServiceEdit = (
     isLoading,
     error,
     serviceInfo,
+    updateServiceInfo,
   };
 };
 

diff --git a/src/pages/ServiceEditPage/index.tsx b/src/pages/ServiceEditPage/index.tsx
@@ -11,23 +11,28 @@ import theme from '@/styles/theme';
 
 const ServiceEditPage: FC = () => {
   const { serviceId } = useParams<{ serviceId: string }>();
-  const { isLoading, error, serviceInfo } = useServiceEdit(serviceId);
-  const snackbar = useSnackbar({
-    backgroundColor: theme.colorPrimary,
-  });
+  const { isLoading, error, serviceInfo, updateServiceInfo } =
+    useServiceEdit(serviceId);
+  const snackbar = useSnackbar({});
 
   useEffect(() => {
     if (error) {
       snackbar.showMessage(error, {
         duration: 1500,
+        backgroundColor: theme.colorPrimary,
       });
     }
   }, [error]);
 
   return (
     <Layout>
       {isLoading && <Loader />}
-      {serviceInfo && <ServiceEditForm serviceInfo={serviceInfo} />}
+      {serviceInfo && (
+        <ServiceEditForm
+          serviceInfo={serviceInfo}
+          updateServiceInfo={updateServiceInfo}
+        />
+      )}
       {error && <NoService />}
     </Layout>
   );