Merge pull request #231 from Strong-Potato/200-feat-seperate-api-requ…

…est-to-authts Feat: seperate api request to auth
Strong-Potato · Jan 27, 2024 · 5bbf00f · 5bbf00f
2 parents 24fdf1f + 17d0579
commit 5bbf00f
Show file tree

Hide file tree

Showing 15 changed files with 66 additions and 36 deletions.
diff --git a/src/assets/icons/city_default.svg → public/city_default.svg b/src/assets/icons/city_default.svg → public/city_default.svg
diff --git a/src/assets/profile_default.svg → public/profile_default.svg b/src/assets/profile_default.svg → public/profile_default.svg
diff --git a/src/api/auth.ts b/src/api/auth.ts
@@ -40,6 +40,37 @@ export const authRequest = {
       token,
     }),
 
+  /* ------------------------------ FIND PASSWORD ----------------------------- */
+  lostPassword_sendEmail: (email?: string) =>
+    axios.post('/api/auth/modify/lost-password/send-email', {
+      email,
+    }),
+
+  lostPassword_emailSert: (email?: string, code?: string) =>
+    axios.post('/api/auth/modify/lost-password/check-token', {
+      email,
+      code,
+    }),
+
+  lostPassword_submit: (email?: string, password?: string, token?: string) =>
+    axios.post('/api/auth/modify/lost-password', {
+      email,
+      password,
+      token,
+    }),
+
+  /* ----------------------------- MODIFY PASSWORD ---------------------------- */
+  modifyPassword_check: (password?: string) =>
+    axios.post('/api/auth/modify/password/check', {
+      password,
+    }),
+
+  modifyPassword_submit: (token?: string, password?: string) =>
+    axios.post('/api/auth/modify/password', {
+      token,
+      password,
+    }),
+
   /* ------------------------------- WITHDRAWAL ------------------------------- */
   withdrawal: (password?: string) =>
     axios.post(

diff --git a/src/assets/icons/profile_default.svg b/src/assets/icons/profile_default.svg
diff --git a/src/components/Alarm/TabCapsule/Content/Content.tsx b/src/components/Alarm/TabCapsule/Content/Content.tsx
@@ -1,6 +1,6 @@
 import styles from './Content.module.scss';
 
-import DefaultProfile from '@/assets/profile_default.svg?react';
+import DefaultProfile from '@/assets/icons/profile_default.svg?react';
 import formatTimeAgo from '@/utils/formatTimeAgo';
 
 import {ContentProps} from '@/types/alarm';

diff --git a/src/components/Auth/FindPassword/FindPasswordForm.tsx b/src/components/Auth/FindPassword/FindPasswordForm.tsx
@@ -1,4 +1,3 @@
-import axios from 'axios';
 import {useState} from 'react';
 import {SubmitHandler, useForm} from 'react-hook-form';
 import {useNavigate} from 'react-router-dom';
@@ -7,6 +6,8 @@ import styles from './FindPasswordForm.module.scss';
 
 import CustomToast from '@/components/CustomToast/CustomToast';
 
+import {authRequest} from '@/api/auth';
+
 import StepEmail from './Step/StepEmail';
 import StepEmailSert from './Step/StepEmailSert';
 import StepPassword from './Step/StepPassword';
@@ -43,11 +44,7 @@ function FindPasswordForm() {
 
     try {
       const {email, password} = data;
-      const res = await axios.post('/api/auth/modify/lost-password', {
-        email,
-        newPassword: password,
-        token: code,
-      });
+      const res = await authRequest.lostPassword_submit(email, password, code);
       console.log(res);
 
       if (res.data.responseCode === 204) {

diff --git a/src/components/Auth/FindPassword/Step/StepEmail.tsx b/src/components/Auth/FindPassword/Step/StepEmail.tsx
@@ -1,4 +1,3 @@
-import axios from 'axios';
 import {useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {useSetRecoilState} from 'recoil';
@@ -7,6 +6,7 @@ import styles from './Step.module.scss';
 
 import CustomToast from '@/components/CustomToast/CustomToast';
 
+import {authRequest} from '@/api/auth';
 import {isModalOpenState} from '@/recoil/vote/alertModal';
 
 import ExpireAlert from '../../Alert/ExpireAlert';
@@ -23,9 +23,7 @@ function StepEmail({setFindPasswordStep, register, watchFields: {email}, dirty,
 
   const onClickEmail = async () => {
     try {
-      const res = await axios.post('/api/auth/modify/lost-password/send-email', {
-        email,
-      });
+      const res = await authRequest.lostPassword_sendEmail(email);
       console.log(res);
 
       if (res.data.responseCode === 404) {

diff --git a/src/components/Auth/FindPassword/Step/StepEmailSert.tsx b/src/components/Auth/FindPassword/Step/StepEmailSert.tsx
@@ -1,4 +1,3 @@
-import axios from 'axios';
 import {useEffect, useState} from 'react';
 
 import styles from './Step.module.scss';
@@ -7,6 +6,8 @@ import AuthButton from '@/components/Auth/Button/AuthButton';
 import InputEmailSert from '@/components/Auth/Input/InputEmailSert';
 import CustomToast from '@/components/CustomToast/CustomToast';
 
+import {authRequest} from '@/api/auth';
+
 import {StepEmailSertProps} from '@/types/auth';
 
 function StepEmailSert({
@@ -34,18 +35,14 @@ function StepEmailSert({
 
   const onClickEmailSert = async () => {
     try {
-      const res = await axios.post('/api/auth/modify/lost-password/check-token', {
-        email,
-        code: emailSert,
-      });
+      const res = await authRequest.lostPassword_emailSert(email, emailSert);
       console.log(res);
 
       if (res.data.responseCode === 203) {
         showToast('인증코드가 일치하지 않습니다.');
         return;
       }
 
-      console.log(res.data.data.token);
       setCode!(await res.data.data.token);
       setFindPasswordStep!('password');
     } catch (error) {

diff --git a/src/components/Auth/ModifyPassword/ModifyPasswordForm.tsx b/src/components/Auth/ModifyPassword/ModifyPasswordForm.tsx
@@ -1,10 +1,11 @@
-import axios from 'axios';
 import {useState} from 'react';
 import {useForm} from 'react-hook-form';
 import {useNavigate} from 'react-router-dom';
 
 import styles from './ModifyPasswordForm.module.scss';
 
+import {authRequest} from '@/api/auth';
+
 import StepNewPassword from './Step/StepNewPassword';
 import StepOldPassword from './Step/StepOldPassword';
 
@@ -33,11 +34,10 @@ function ModifyPasswordForm() {
   const navigate = useNavigate();
 
   const onSubmit = async () => {
+    if (Object.keys(dirtyFields).length < 2) return;
+
     try {
-      const res = axios.post('/api/auth/modify/password', {
-        token,
-        newPassword: watchFields.password,
-      });
+      const res = await authRequest.modifyPassword_submit(token, watchFields.password);
 
       console.log(res);
       navigate('/user', {replace: true});

diff --git a/src/components/Auth/ModifyPassword/Step/StepOldPassword.tsx b/src/components/Auth/ModifyPassword/Step/StepOldPassword.tsx
@@ -1,8 +1,9 @@
-import axios from 'axios';
 import {Link} from 'react-router-dom';
 
 import styles from './Step.module.scss';
 
+import {authRequest} from '@/api/auth';
+
 import AuthButton from '../../Button/AuthButton';
 import InputOldPassword from '../../Input/InputOldPassword';
 
@@ -18,9 +19,7 @@ function StepOldPassword({
 }: StepOldPasswordProps) {
   const onClickNext = async () => {
     try {
-      const res = await axios.post('/api/auth/modify/password/check', {
-        password: oldPassword,
-      });
+      const res = await authRequest.modifyPassword_check(oldPassword);
 
       setToken!(await res.data.data.token);
       setStep!('newPassword');

diff --git a/src/components/Auth/Signup/Step/StepProfile.tsx b/src/components/Auth/Signup/Step/StepProfile.tsx
@@ -4,13 +4,13 @@ import styles from './Step.module.scss';
 
 import AuthButton from '@/components/Auth/Button/AuthButton';
 
-import defaultProfile from '@/assets/profile_default.svg';
-
 import InputImage from '../../Input/InputImage';
 import InputNickname from '../../Input/InputNickname';
 
 import {StepProfileProps} from '@/types/auth';
 
+const defaultProfile = '/profile_default.svg';
+
 function StepProfile({register, resetField, dirty, error}: StepProfileProps) {
   const [imageUrl, setImageUrl] = useState<string | undefined>(defaultProfile);
 

diff --git a/src/components/MySpaceBody/MySpaceList/MySpaceList.tsx b/src/components/MySpaceBody/MySpaceList/MySpaceList.tsx
@@ -7,12 +7,13 @@ import {useInfiniteScroll} from '@/hooks/useInfiniteScroll';
 
 import ObserveTarget from '@/components/Route/ObserveTarget/ObserveTarget';
 
-import defaultCity from '@/assets/icons/city_default.svg';
 import {setSpaceDate} from '@/utils/formatDate';
 
 import {Spaces} from '@/types/sidebar';
 import {MySpaceListProps} from '@/types/user';
 
+const defaultThumbnail = '/city_default.svg';
+
 function MySpaceList({tab}: MySpaceListProps) {
   const {data: upcomingData} = useGetSpaces(true);
   const [outdatedData, hasNextData, inViewRef] = useInfiniteScroll(useGetSpacesOut);
@@ -33,7 +34,7 @@ function MySpaceList({tab}: MySpaceListProps) {
                 dueDate !== null && styles.dimmed
               }`}
               style={{
-                backgroundImage: `url(${thumbnail ? thumbnail : defaultCity})`,
+                backgroundImage: `url(${thumbnail ? thumbnail : defaultThumbnail})`,
               }}
             >
               <span>{dueDate !== null ? (dueDate <= 0 ? '여행중' : `D-${dueDate}`) : ''}</span>
@@ -63,7 +64,7 @@ function MySpaceList({tab}: MySpaceListProps) {
               <div
                 className={`${styles.img} ${thumbnail ? styles.city : styles.default}`}
                 style={{
-                  backgroundImage: `url(${thumbnail ? thumbnail : defaultCity})`,
+                  backgroundImage: `url(${thumbnail ? thumbnail : defaultThumbnail})`,
                 }}
               ></div>
 

diff --git a/src/components/User/EditProfileForm/EditProfileForm.tsx b/src/components/User/EditProfileForm/EditProfileForm.tsx
@@ -10,11 +10,12 @@ import InputImage from '@/components/Auth/Input/InputImage';
 import InputNickname from '@/components/Auth/Input/InputNickname';
 
 import {s3Request} from '@/api/s3';
-import defaultProfile from '@/assets/profile_default.svg';
 
 import {AuthForm} from '@/types/auth';
 import {GetUserProp} from '@/types/sidebar';
 
+const defaultProfile = '/profile_default.svg';
+
 function EditProfileForm({data}: {data: GetUserProp | undefined}) {
   const {
     register,

diff --git a/src/components/User/Profile/Profile.tsx b/src/components/User/Profile/Profile.tsx
@@ -3,10 +3,11 @@ import {useNavigate} from 'react-router-dom';
 import styles from './Profile.module.scss';
 
 import Pencil from '@/assets/icons/pencil.svg?react';
-import defaultImage from '@/assets/profile_default.svg';
 
 import {ProfileProps} from '@/types/user';
 
+const defaultProfile = '/profile_default.svg';
+
 function Profile({data}: ProfileProps) {
   const navigate = useNavigate();
 
@@ -15,7 +16,7 @@ function Profile({data}: ProfileProps) {
       <div
         className={styles.image}
         style={{
-          backgroundImage: `${data?.data.profile ? `url(${data?.data.profile})` : `url(${defaultImage})`}`,
+          backgroundImage: `${data?.data.profile ? `url(${data?.data.profile})` : `url(${defaultProfile})`}`,
         }}
       >
         <button

diff --git a/src/pages/User/MyReview/MyReview.tsx b/src/pages/User/MyReview/MyReview.tsx
@@ -12,13 +12,14 @@ import ReviewImageSlider from '@/components/Detail/Contents/Review/ReviewImageSl
 import ActionList from '@/components/MyReview/ActionList/ActionList';
 import ObserveTarget from '@/components/Route/ObserveTarget/ObserveTarget';
 
-import defaultImage from '@/assets/icons/city_default.svg';
 import Meatball from '@/assets/icons/meatball.svg?react';
 import Star from '@/assets/icons/star_fill.svg?react';
 import {setMyReviewDate} from '@/utils/formatDate';
 
 import {Reviews} from '@/types/myReview';
 
+const defaultThumbnail = '/city_default.svg';
+
 function MyReview() {
   const {isOpen: isBottomSlideOpen, onOpen: onBottomSlideOpen, onClose: onBottomSlideClose} = useDisclosure();
   const [reviews, hasNextData, inViewRef] = useInfiniteScroll(useGetMyReview);
@@ -38,7 +39,7 @@ function MyReview() {
                   <div
                     className={`${styles.myreview__header__img} ${place.thumbnail || styles.default}`}
                     style={{
-                      backgroundImage: `url(${place.thumbnail ? place.thumbnail : defaultImage})`,
+                      backgroundImage: `url(${place.thumbnail ? place.thumbnail : defaultThumbnail})`,
                     }}
                   ></div>