From bacadca7b8ffeae8127136f6c2a42b2ec9af03f1 Mon Sep 17 00:00:00 2001 From: kangsinbeom Date: Fri, 21 Jun 2024 10:05:25 +0900 Subject: [PATCH] =?UTF-8?q?Bug:=20pagebutton=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=ED=9A=8C=EC=9B=90=EC=A0=95=EB=B3=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=A0=90=EA=B2=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/instance.ts | 43 ++++++++++--------- src/components/pageButtons/index.tsx | 6 +-- src/consts/signup.ts | 2 +- src/mocks/keywordHandler.ts | 2 +- .../components/editMemberForm/index.tsx | 38 ++++++---------- .../editMemberInfo/hooks/usePutMember.ts | 25 +++++++++++ src/pages/main/components/filter/index.tsx | 1 + src/pages/main/hooks/useGetGalleries.ts | 16 +++++-- src/stores/modal.ts | 13 ++++++ src/styles/layout.ts | 12 ++++++ 10 files changed, 102 insertions(+), 56 deletions(-) create mode 100644 src/pages/editMemberInfo/hooks/usePutMember.ts diff --git a/src/apis/instance.ts b/src/apis/instance.ts index 21cb57f..a160f56 100644 --- a/src/apis/instance.ts +++ b/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; diff --git a/src/components/pageButtons/index.tsx b/src/components/pageButtons/index.tsx index cd98dea..1480e90 100644 --- a/src/components/pageButtons/index.tsx +++ b/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 ( diff --git a/src/consts/signup.ts b/src/consts/signup.ts index 9c8194a..9d06dcc 100644 --- a/src/consts/signup.ts +++ b/src/consts/signup.ts @@ -5,7 +5,7 @@ interface FormField { label: string; title?: string; value: keyof ExtendedSignupForm; - registerOptions?: RegisterOptions; + registerOptions?: RegisterOptions; checkOption?: CheckOption; type?: 'input' | 'textarea'; } diff --git a/src/mocks/keywordHandler.ts b/src/mocks/keywordHandler.ts index 44aa0b3..3777695 100644 --- a/src/mocks/keywordHandler.ts +++ b/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, }); diff --git a/src/pages/editMemberInfo/components/editMemberForm/index.tsx b/src/pages/editMemberInfo/components/editMemberForm/index.tsx index 7924788..913508c 100644 --- a/src/pages/editMemberInfo/components/editMemberForm/index.tsx +++ b/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( @@ -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); diff --git a/src/pages/editMemberInfo/hooks/usePutMember.ts b/src/pages/editMemberInfo/hooks/usePutMember.ts new file mode 100644 index 0000000..4e7f503 --- /dev/null +++ b/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; diff --git a/src/pages/main/components/filter/index.tsx b/src/pages/main/components/filter/index.tsx index 07193e8..435a738 100644 --- a/src/pages/main/components/filter/index.tsx +++ b/src/pages/main/components/filter/index.tsx @@ -12,6 +12,7 @@ import * as S from './styles'; const Filter = () => { const { filterValue, onChange, onNestingChange } = filterStore(); + return ( diff --git a/src/pages/main/hooks/useGetGalleries.ts b/src/pages/main/hooks/useGetGalleries.ts index 1f2adcc..452fbfb 100644 --- a/src/pages/main/hooks/useGetGalleries.ts +++ b/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, + }; + }, }); }; diff --git a/src/stores/modal.ts b/src/stores/modal.ts index 7e8851f..248ac1f 100644 --- a/src/stores/modal.ts +++ b/src/stores/modal.ts @@ -96,3 +96,16 @@ export const checkModalStore = create((set) => ({ checkModalValue: defaultValue, })), })); + +// 쿠폰 모달 +interface CouponState { + couponValue: { open: boolean }; + open: () => void; + close: () => void; +} + +export const couponStore = create((set) => ({ + couponValue: { open: false }, + open: () => set({ couponValue: { open: true } }), + close: () => set({ couponValue: { open: false } }), +})); diff --git a/src/styles/layout.ts b/src/styles/layout.ts index 1dc42c5..85601f4 100644 --- a/src/styles/layout.ts +++ b/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 */ + `, };