[feat] complete sign-up additional page

f-lab-edu · Jan 10, 2025 · 1277ca8 · 1277ca8
1 parent f2ccc82
commit 1277ca8
Show file tree

Hide file tree

Showing 12 changed files with 297 additions and 150 deletions.
diff --git a/src/api/info.ts b/src/api/info.ts
@@ -44,11 +44,14 @@ const postInterest = async ({
 const removeInterest = async ({
   userId,
   hashTagId,
+  name,
 }: {
   userId: number;
   hashTagId: number;
+  name: string;
 }) => {
-  const url = `/users/${userId}/interests?hashTagId=${hashTagId}`;
+  console.log(name);
+  const url = `/users/${userId}/interests?hashTagId=${hashTagId}&name=${encodeURIComponent(name)}`;
 
   const result = await authInstance({
     method: 'DELETE',

diff --git a/src/api/mutations/info.ts b/src/api/mutations/info.ts
@@ -50,11 +50,12 @@ const useRemoveInterest = (
   options: UseMutationOptions<
     HttpSuccessType<unknown>,
     ResponseError,
-    { userId: number; hashTagId: number }
+    { userId: number; hashTagId: number; name: string }
   >,
 ) => {
   return useMutation({
     mutationFn: removeInterest,
+    throwOnError: false,
     ...options,
   });
 };

diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -1,22 +1,18 @@
 'use client';
 
 import clsx from 'clsx';
-// import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { FormProvider, SubmitHandler } from 'react-hook-form';
 
 import { RECOMMANED_INTERESTS } from '@/data/mock';
 import Logo from '@/components/common/Logo';
 import Field from '@/components/common/Field';
 import Button from '@/components/common/Button';
-import {
-  useAddInterest,
-  useAddSocialAccountMutation,
-  useRemoveInterest,
-  useRemoveSocialAccountMutation,
-} from '@/api/mutations/info';
 import { getUserId } from '@/utils/manageToken';
+import { useToastContext } from '@/components/common/Toast/ToastProvider';
+import useInterestsServerRequests from '@/hooks/useInterestsServerRequests';
+import useSocialAccountsServerRequest from '@/hooks/useSocialAccountsServerRequests';
 
-import { authInstance } from '@/api/httpRequest';
 import PlusIcon from '@/assets/icons/plus.svg';
 import AdditionalLink from './components/AdditionalLink';
 import MyInterestField from './components/MyInterestField';
@@ -31,7 +27,8 @@ const LINK_FIELDS_LIMIT = 3;
 const MY_INTERESTS_FIELDS_LIMIT = 10;
 
 const AdditionalInfoPage = () => {
-  // const router = useRouter();
+  const router = useRouter();
+  const { addToast } = useToastContext();
   const methods = useAdditionalInfoForm<IAddionalInfoType>({
     defaultValues: { links: [{ link: '' }], interests: [], myInterests: [] },
   });
@@ -63,31 +60,15 @@ const AdditionalInfoPage = () => {
     fieldLimit: MY_INTERESTS_FIELDS_LIMIT,
   });
 
-  const { mutate: saveSocialAccount } = useAddSocialAccountMutation({});
-  const { mutate: removeSocialAccount } = useRemoveSocialAccountMutation({});
-
-  const { mutate: saveInterest } = useAddInterest({
-    onSuccess: (response) => {
-      console.log('saveInterest', response);
-    },
-    onError: (err) => {
-      console.log('saveInterest', err);
-    },
-  });
-  const { mutate: removeInterest } = useRemoveInterest({
-    onSuccess: (response) => {
-      console.log('removeInterest', response);
-    },
-    onError: (err) => {
-      console.log('removeInterest', err);
-    },
-  });
+  const { requestSocialAccountSaveSocialAccounts } =
+    useSocialAccountsServerRequest();
+  const { requestSaveInterest } = useInterestsServerRequests();
 
   const submitHandler: SubmitHandler<IAddionalInfoType> = async (values) => {
     const { links, interests, myInterests } = values;
 
     const userId = getUserId();
-
+    const uniqueSocialAccounts = links.filter((v) => !!v.link);
     const myInterestsNames = myInterests.map(({ myInterest }) => ({
       userId,
       interestName: myInterest,
@@ -96,90 +77,25 @@ const AdditionalInfoPage = () => {
       userId,
       interestName,
     }));
-
     const wholeInterestName = [...myInterestsNames, ...interestNames];
 
-    const uniqueSocialAccounts = links.filter((v) => !!v.link);
-
     if (uniqueSocialAccounts.length) {
-      const successfulSocialRequests: string[] = [];
-
-      try {
-        await Promise.all(
-          uniqueSocialAccounts.map(
-            async ({ link: socialAccountUrl }) =>
-              new Promise((res, rej) => {
-                saveSocialAccount(
-                  { socialAccountUrl },
-                  {
-                    onSuccess: (response) => {
-                      successfulSocialRequests.push(socialAccountUrl);
-                      res(response);
-                    },
-                    onError: (err) => {
-                      rej(err);
-                    },
-                  },
-                );
-              }),
-          ),
-        );
-      } catch (error) {
-        await Promise.all(
-          successfulSocialRequests.map(async (socialAccountUrl) => {
-            removeSocialAccount({ socialAccountUrl });
-          }),
-        );
-      }
+      requestSocialAccountSaveSocialAccounts({
+        targetSocialAccounts: uniqueSocialAccounts,
+      });
     }
 
-    const successfulIntersetRequests: {
-      userId: number;
-      interestName: string;
-    }[] = [];
-
-    console.log(wholeInterestName);
+    requestSaveInterest({
+      targetInterests: wholeInterestName,
+      onSuccess: () => {
+        addToast({
+          type: 'success',
+          message: '회원가입이 정상적으로 완료되었습니다.',
+        });
 
-    saveInterest(wholeInterestName[0]); //! 500 에러 발생
-    // removeInterest({ userId: gottenUserId, hashTagId: 2 });
-
-    const result = await authInstance({
-      method: 'GET',
-      url: `/users/${userId}/profile_page`,
+        router.push('/');
+      },
     });
-
-    console.log(result);
-
-    try {
-      await Promise.all(
-        wholeInterestName.map(
-          async ({ userId: interestUserId, interestName }) =>
-            new Promise((res, rej) => {
-              saveInterest(
-                { userId: interestUserId, interestName },
-                {
-                  onSuccess: (response) => {
-                    successfulIntersetRequests.push({ userId, interestName });
-                    console.log(response);
-                    res(response);
-                  },
-                  onError: (err) => {
-                    rej(err);
-                  },
-                },
-              );
-            }),
-        ),
-      );
-    } catch (error) {
-      await Promise.all(
-        successfulIntersetRequests.map(async ({ userId: interestUserId }) => {
-          removeInterest({ userId: interestUserId, hashTagId: 1 });
-        }),
-      );
-    }
-
-    console.log(interestNames);
   };
 
   const currentInterestList = [

diff --git a/src/app/my/types/my.ts b/src/app/my/types/my.ts
diff --git a/src/app/profile/components/MyInterest/MyEditInterest/MyEditInterest.tsx b/src/app/profile/components/MyInterest/MyEditInterest/MyEditInterest.tsx
@@ -1,17 +1,23 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import If from '@/components/common/If';
 import Button from '@/components/common/Button';
+import { UserInterestWithOptionalHashTagIdType } from '@/app/profile/types/my';
+
 import CircleCloseIcon from '@/assets/icons/circle-close-gray.svg';
 import MyInterestFieldForMyPage from '../MyInterestFieldForMyPage';
 
 import styles from './MyEditInterest.module.scss';
 
 interface MyEditInterestProps {
-  interests: string[];
-  submitHandler: (next: string[]) => void;
+  interests: UserInterestWithOptionalHashTagIdType[];
+  submitHandler: (next: {
+    nextInterestsState: UserInterestWithOptionalHashTagIdType[];
+    add: UserInterestWithOptionalHashTagIdType[];
+    remove: UserInterestWithOptionalHashTagIdType[];
+  }) => void;
   toggleHandler: () => void;
 }
 
@@ -20,30 +26,54 @@ const MyEditInterest = ({
   submitHandler,
   toggleHandler,
 }: MyEditInterestProps) => {
-  const [nextInterests, setNextInterests] = useState<string[]>(interests);
+  const [nextInterests, setNextInterests] =
+    useState<UserInterestWithOptionalHashTagIdType[]>(interests);
+  const [mutatedInterests, setMutatedInterests] = useState<{
+    add: UserInterestWithOptionalHashTagIdType[];
+    remove: UserInterestWithOptionalHashTagIdType[];
+  }>({ add: [], remove: [] });
+
+  const stringNextInterests = useMemo(
+    () => nextInterests.map(({ hashTagName }) => hashTagName),
+    [nextInterests],
+  );
 
   const removeInterest = (index: number) => {
-    setNextInterests((prev) => prev.filter((_, i) => i !== index));
+    setNextInterests((prevInterest) =>
+      prevInterest.filter((removePossibleInterest, i) => {
+        if (i === index) {
+          setMutatedInterests((prevMutatedInterests) => ({
+            ...prevMutatedInterests,
+            remove: [...prevMutatedInterests.remove, removePossibleInterest],
+          }));
+        }
+        return i !== index;
+      }),
+    );
   };
 
   const addInterest = (interest: string) => {
-    setNextInterests((prev) => [...prev, interest]);
+    setNextInterests((prev) => [...prev, { hashTagName: interest }]);
+    setMutatedInterests((prev) => ({
+      ...prev,
+      add: [...prev.add, { hashTagName: interest }],
+    }));
   };
 
   const confirmNextInterests = () => {
-    submitHandler(nextInterests);
+    submitHandler({ nextInterestsState: nextInterests, ...mutatedInterests });
   };
 
   return (
     <>
       <ul className={styles.my_interest_list}>
-        {nextInterests.map((interest, index) => (
+        {nextInterests.map(({ hashTagName }, index) => (
           <button
-            key={interest}
+            key={hashTagName}
             className={styles.my_interest}
             onClick={() => removeInterest(index)}
           >
-            #{interest}
+            #{hashTagName}
             <i>
               <CircleCloseIcon />
             </i>
@@ -52,7 +82,7 @@ const MyEditInterest = ({
         <If condition={nextInterests.length < 10}>
           <If.True>
             <MyInterestFieldForMyPage
-              checkList={nextInterests}
+              checkList={stringNextInterests}
               addInterestHandler={addInterest}
             />
           </If.True>

diff --git a/src/app/profile/components/MyInterest/MyInterest.tsx b/src/app/profile/components/MyInterest/MyInterest.tsx
@@ -5,24 +5,40 @@ import { useState } from 'react';
 import If from '@/components/common/If';
 import MyReadOnlyInterest from './MyReadOnlyInterest';
 import MyEditInterest from './MyEditInterest';
+import {
+  UserInterestType,
+  UserInterestWithOptionalHashTagIdType,
+} from '../../types/my';
 
 import styles from './MyInterest.module.scss';
 
 interface MyInterestProps {
-  interests: string[];
+  interests: UserInterestType[];
   isMine: boolean;
 }
 
 const MyInterest = ({ isMine, interests }: MyInterestProps) => {
   const [isEdit, setIsEdit] = useState<boolean>(false);
-  const [myInterests, setMyInterests] = useState<string[]>(interests);
+  const [myInterests, setMyInterests] =
+    useState<UserInterestWithOptionalHashTagIdType[]>(interests);
 
   const toggleHandler = () => {
     setIsEdit((prev) => !prev);
   };
 
-  const submitHandler = (next: string[]) => {
-    setMyInterests(next);
+  const submitHandler = ({
+    nextInterestsState,
+    add,
+    remove,
+  }: {
+    nextInterestsState: UserInterestWithOptionalHashTagIdType[];
+    add: UserInterestWithOptionalHashTagIdType[];
+    remove: UserInterestWithOptionalHashTagIdType[];
+  }) => {
+    console.log('add', add);
+    console.log('remove', remove);
+
+    setMyInterests(nextInterestsState);
     toggleHandler();
   };
 

diff --git a/src/app/profile/components/MyInterest/MyReadOnlyInterest/MyReadOnlyInterest.tsx b/src/app/profile/components/MyInterest/MyReadOnlyInterest/MyReadOnlyInterest.tsx
@@ -1,11 +1,12 @@
 import If from '@/components/common/If';
 import Button from '@/components/common/Button';
+import { UserInterestWithOptionalHashTagIdType } from '@/app/profile/types/my';
 
 import styles from './MyReadOnlyInterest.module.scss';
 
 interface MyReadOnlyInterestProps {
   isMine: boolean;
-  interests: string[];
+  interests: UserInterestWithOptionalHashTagIdType[];
   toggleHandler: () => void;
 }
 
@@ -17,9 +18,9 @@ const MyReadOnlyInterest = ({
   return (
     <>
       <ul className={styles.my_interest_list}>
-        {interests.map((interest) => (
-          <li key={interest} className={styles.my_interest}>
-            #{interest}
+        {interests.map(({ hashTagName }) => (
+          <li key={hashTagName} className={styles.my_interest}>
+            #{hashTagName}
           </li>
         ))}
       </ul>