Bug: pagebutton 수정 및 회원정보 수정 점검

src/apis/instance.ts

@@ -18,27 +18,28 @@ instance.interceptors.request.use(async (config) => {
   return config;
 });
 
-instance.interceptors.response.use(
-  (response) => response,
-  async (error) => {
-    const originalRequest = error.config;
+// instance.interceptors.response.use(
+//   (response) => {
+//     return response;
+//   },
+//   async (error) => {
+//     const originalRequest = error.config;
+//     if (error.response.status === 401 && !originalRequest._retry) {
+//       originalRequest._retry = true;
+//       try {
+//         const setMember = memberStore().setMember;
+//         const response = await getNewToken();
+//         const { accessToken } = response.data;
+//         setMember(accessToken);
+//         originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;
+//         return instance(originalRequest);
+//       } catch (refreshError) {
+//         return Promise.reject(refreshError);
+//       }
+//     }
 
-    if (error.response.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
-      try {
-        const setMember = memberStore().setMember;
-        const response = await getNewToken();
-        const { accessToken } = response.data;
-        setMember(accessToken);
-        originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;
-        return instance(originalRequest);
-      } catch (refreshError) {
-        return Promise.reject(refreshError);
-      }
-    }
-
-    return Promise.reject(error);
-  },
-);
+//     return Promise.reject(error);
+//   },
+// );
 
 export default instance;

src/components/pageButtons/index.tsx

@@ -1,11 +1,11 @@
 import { Icon, Text } from '@/components';
 import { pageStore } from '@/stores/page';
 import getVisiblePage from '@/utils/getPage';
-
-import * as S from './styles';
 import { Typograph } from '@/styles/typography';
 import { useEffect } from 'react';
 
+import * as S from './styles';
+
 export interface PageButtonsProps {
   orientation?: 'horizontal' | 'vertical';
   numberSize?: Typograph;
@@ -26,7 +26,7 @@ const PageButtons = ({
     return () => {
       resetPageInfo();
     };
-  }, [resetPageInfo]);
+  }, []);
   return (
     <S.Container orientation={orientation}>
       <S.ButtonBox orientation={orientation}>

src/consts/signup.ts

@@ -5,7 +5,7 @@ interface FormField {
   label: string;
   title?: string;
   value: keyof ExtendedSignupForm;
-  registerOptions?: RegisterOptions;
+  registerOptions?: RegisterOptions<ExtendedSignupForm>;
   checkOption?: CheckOption;
   type?: 'input' | 'textarea';
 }

src/mocks/keywordHandler.ts

@@ -2,7 +2,7 @@ import { HttpResponse, http } from 'msw';
 
 const keywords: string[] = [];
 export const keywordHandler = [
-  http.get('/search', async () => {
+  http.get('/api/search', async () => {
     return HttpResponse.json({ results: keywords } as { results: string[] }, {
       status: 200,
     });

src/pages/editMemberInfo/components/editMemberForm/index.tsx

@@ -2,21 +2,21 @@ import { useForm } from 'react-hook-form';
 import { Text, UserCircle } from '@/components';
 import { EditFormData } from '@/types/member';
 import { alertStore } from '@/stores/modal';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { getMemberInfo, postCheckNickname, putMemberEditInfo } from '@/apis/member';
+import { useQuery } from '@tanstack/react-query';
+import { getMemberInfo, postCheckNickname } from '@/apis/member';
 import { memberStore } from '@/stores/member';
 import BasicProfile from '@/assets/images/defaultUser.png';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 
 import * as S from './styles';
+import usePutMember from '../../hooks/usePutMember';
 
 const EditMemberForm = () => {
   const open = alertStore((state) => state.open);
-  const queryClient = useQueryClient();
+  const { mutate } = usePutMember();
   const {
     auth: { nickname },
-    setMember,
   } = memberStore();
   const [nicknameError, setNicknameError] = useState('');
   const [profileImageSrc, setProfileImageSrc] = useState<string | undefined>(
@@ -32,16 +32,6 @@ const EditMemberForm = () => {
     queryFn: () => getMemberInfo(nickname),
   });
 
-  const mutation = useMutation({
-    mutationKey: ['edit'],
-    mutationFn: async (formData: FormData) => putMemberEditInfo(formData),
-    onSettled: () => {
-      queryClient.invalidateQueries({
-        queryKey: ['edit'],
-      });
-    },
-  });
-
   const birthday =
     editData?.birthday.toString() === '1997-01-07'
       ? '정보 없음'
@@ -78,18 +68,14 @@ const EditMemberForm = () => {
     }
 
     try {
-      await mutation.mutateAsync(formData).then(() => {
-        if (data.nickname) {
-          setMember(data.nickname);
-        }
-        open({
-          title: '수정 완료',
-          description: '수정이 완료되었습니다.',
-          buttonLabel: '확인',
-          onClickButton: () => {
-            reset();
-          },
-        });
+      mutate(formData);
+      open({
+        title: '수정 완료',
+        description: '수정이 완료되었습니다.',
+        buttonLabel: '확인',
+        onClickButton: () => {
+          reset();
+        },
       });
     } catch (err) {
       console.error(err);

src/pages/editMemberInfo/hooks/usePutMember.ts

@@ -0,0 +1,25 @@
+import { getNewToken, putMemberEditInfo } from '@/apis/member';
+import { memberStore } from '@/stores/member';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+const usePutMember = () => {
+  const queryClient = useQueryClient();
+  const setMember = memberStore((state) => state.setMember);
+  return useMutation({
+    mutationKey: ['edit'],
+    mutationFn: async (formData: FormData) => putMemberEditInfo(formData),
+    onSuccess: async () => {
+      const response = await getNewToken();
+      const { accessToken } = response.data;
+      setMember(accessToken);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['edit'],
+      });
+    },
+    onError: () => {},
+  });
+};
+
+export default usePutMember;

src/pages/main/components/filter/index.tsx

@@ -12,6 +12,7 @@ import * as S from './styles';
 
 const Filter = () => {
   const { filterValue, onChange, onNestingChange } = filterStore();
+
   return (
     <S.Container>
       <S.TitleBox>

src/pages/main/hooks/useGetGalleries.ts

@@ -8,10 +8,18 @@ const useGetGalleries = (pageIndex: number) => {
   return useSuspenseQuery({
     queryKey: ['galleries', [pageIndex, ...Object.values(filterValue)]],
     queryFn: () => getGalleries({ page: pageIndex, size, ...filterValue }),
-    select: (data) => ({
-      pages: data.pages,
-      pageParams: data.pageInfo,
-    }),
+    select: (data) => {
+      if (pageIndex === data.pageInfo.pageIndex) {
+        return {
+          pages: data.pages,
+          pageParams: { ...data.pageInfo, pageIndex: 0 },
+        };
+      }
+      return {
+        pages: data.pages,
+        pageParams: data.pageInfo,
+      };
+    },
   });
 };
 

src/stores/modal.ts

@@ -96,3 +96,16 @@ export const checkModalStore = create<CheckModalState>((set) => ({
       checkModalValue: defaultValue,
     })),
 }));
+
+// 쿠폰 모달
+interface CouponState {
+  couponValue: { open: boolean };
+  open: () => void;
+  close: () => void;
+}
+
+export const couponStore = create<CouponState>((set) => ({
+  couponValue: { open: false },
+  open: () => set({ couponValue: { open: true } }),
+  close: () => set({ couponValue: { open: false } }),
+}));

src/styles/layout.ts

@@ -15,4 +15,16 @@ export const LayoutMap = {
     top: 50%;
     transform: translate(-50%, -50%);
   `,
+  flexBoxScrollbar: css`
+    flex: 1;
+    overflow: scroll;
+    overflow-x: hidden;
+  `,
+  noneScrollbar: css`
+    ::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE와 Edge */
+  `,
 };