diff --git a/front/src/hooks/queries/Http.ts b/front/src/hooks/queries/Http.ts index f90de6e..f1f065f 100644 --- a/front/src/hooks/queries/Http.ts +++ b/front/src/hooks/queries/Http.ts @@ -7,8 +7,8 @@ export const queryClient = new QueryClient({ queries: { retry: 0, staleTime: 1000 * 60 * 5, - refetchOnWindowFocus: false, refetchOnMount: false, + refetchOnWindowFocus: false, refetchOnReconnect: false, }, }, diff --git a/front/src/hooks/queries/feed/getProblemMonth.ts b/front/src/hooks/queries/feed/getProblemMonth.ts new file mode 100644 index 0000000..9edea2f --- /dev/null +++ b/front/src/hooks/queries/feed/getProblemMonth.ts @@ -0,0 +1,13 @@ +import { getUserProblemMonth } from '@services/feed/getProblemMonth'; + +import { useQuery } from '@tanstack/react-query'; + +export const useProblemMonth = (yearMonth: string | null) => { + const { data, isPending, isError, error, refetch } = useQuery({ + queryKey: ['userProblemsMonth', yearMonth], + queryFn: () => + yearMonth ? getUserProblemMonth(yearMonth) : Promise.resolve([]), + }); + + return { data, isPending, isError, error, refetch }; +}; diff --git a/front/src/hooks/queries/feed/getProblems.ts b/front/src/hooks/queries/feed/getProblems.ts index 7528407..ae0922e 100644 --- a/front/src/hooks/queries/feed/getProblems.ts +++ b/front/src/hooks/queries/feed/getProblems.ts @@ -3,11 +3,10 @@ import { getUserProblems } from '@services/feed/getProblems'; import { useQuery } from '@tanstack/react-query'; export const useProblem = (date: string | null) => { - const { data, isPending, isError, error } = useQuery({ + const { data, isPending, isError, error, refetch } = useQuery({ queryKey: ['userProblems', date], queryFn: () => (date ? getUserProblems(date) : Promise.resolve([])), - refetchOnMount: false, }); - return { data, isPending, isError, error }; + return { data, isPending, isError, error, refetch }; }; diff --git a/front/src/hooks/queries/feed/getUserCommitQuery.ts b/front/src/hooks/queries/feed/getUserCommitQuery.ts index c8f9b5a..89782cb 100644 --- a/front/src/hooks/queries/feed/getUserCommitQuery.ts +++ b/front/src/hooks/queries/feed/getUserCommitQuery.ts @@ -6,7 +6,6 @@ export const useCommits = () => { const { data, isPending, isError, error } = useQuery({ queryKey: ['user_commit'], queryFn: getUserCommit, - refetchOnMount: false, }); return { data, isPending, isError, error }; diff --git a/front/src/hooks/queries/feed/getUserDataQuery.ts b/front/src/hooks/queries/feed/getUserDataQuery.ts index b810f44..53bf2e7 100644 --- a/front/src/hooks/queries/feed/getUserDataQuery.ts +++ b/front/src/hooks/queries/feed/getUserDataQuery.ts @@ -6,7 +6,6 @@ export const useUserData = () => { const { data, isPending, isError, error } = useQuery({ queryKey: ['users'], queryFn: getUserData, - refetchOnMount: false, }); return { data, isPending, isError, error }; diff --git a/front/src/hooks/queries/group/getMyGroupQuery.ts b/front/src/hooks/queries/group/getMyGroupQuery.ts index 84cddf8..426e3a0 100644 --- a/front/src/hooks/queries/group/getMyGroupQuery.ts +++ b/front/src/hooks/queries/group/getMyGroupQuery.ts @@ -6,8 +6,6 @@ export const useMyGroupData = () => { const { data, isPending, isError, error, refetch } = useQuery({ queryKey: ['users-group'], queryFn: getMyGroup, - refetchOnMount: false, - refetchOnWindowFocus: true, }); return { data, isPending, isError, error, refetch }; diff --git a/front/src/hooks/queries/search/getGroupsQuery.ts b/front/src/hooks/queries/search/getGroupsQuery.ts index 7022531..24ca231 100644 --- a/front/src/hooks/queries/search/getGroupsQuery.ts +++ b/front/src/hooks/queries/search/getGroupsQuery.ts @@ -6,7 +6,6 @@ export const useGroups = () => { const { data, isPending, isError, error, refetch } = useQuery({ queryKey: ['users-groups'], queryFn: getGroups, - refetchOnMount: false, }); return { data, isPending, isError, error, refetch }; diff --git a/front/src/interfaces/GroupInterface.ts b/front/src/interfaces/GroupInterface.ts index 54c8d32..a0d9405 100644 --- a/front/src/interfaces/GroupInterface.ts +++ b/front/src/interfaces/GroupInterface.ts @@ -2,6 +2,7 @@ export interface IGroupProps { id: number; name: string; isPrivate: boolean; + isMember: boolean; } export interface ICreateGroupModalProps { diff --git a/front/src/pages/feed/FeedPage.tsx b/front/src/pages/feed/FeedPage.tsx index f99b1b4..c369dfb 100644 --- a/front/src/pages/feed/FeedPage.tsx +++ b/front/src/pages/feed/FeedPage.tsx @@ -17,6 +17,7 @@ import { IProblem } from '@interfaces/ProblemInterface'; import { Layout, DisplayLayout, LoginLayout } from '@styles/Layout'; +import { useProblemMonth } from '@/hooks/queries/feed/getProblemMonth'; import styled from '@emotion/styled'; import 'dayjs/locale/ko'; @@ -93,13 +94,17 @@ const FeedPage = () => { const formattedDate = selectedDate ? dayjs(selectedDate).format('YYYY-MM-DD') : ''; + + const formattedMonth = selectedDate + ? dayjs(selectedDate).format('YYYY-MM') + : dayjs().format('YYYY-MM'); const { data: problemData, isPending: problemPending, isError: problemError, } = useProblem(formattedDate); + const { data: problemDataMonth } = useProblemMonth(formattedMonth); - // eslint-disable-next-line @typescript-eslint/naming-convention const formatDay = (_locale: string | undefined, date: Date) => dayjs(date).format('D'); @@ -123,9 +128,9 @@ const FeedPage = () => { onClickDay={handleDateClick} tileContent={({ date, view }) => view === 'month' && - problemData && - problemData.length > 0 && - problemData.some( + problemDataMonth && + problemDataMonth.length > 0 && + problemDataMonth.some( (problem: IProblem) => problem.solvedDate === dayjs(date).format('YYYY-MM-DD') ) ? ( @@ -134,26 +139,14 @@ const FeedPage = () => { } /> - {/* {selectedDate && - problemRecords.find( - (problem) => problem.solvedDate === formattedDate - ) ? ( - - ) : ( -
- )} */} - {selectedDate && - problemData && - !problemPending && - !problemError && ( - - )} + {selectedDate && problemData && !problemPending && !problemError ? ( + + ) : ( +
+ )} ) : ( diff --git a/front/src/pages/group/components/GroupLists.tsx b/front/src/pages/group/components/GroupLists.tsx index 52d3dd1..3e0697f 100644 --- a/front/src/pages/group/components/GroupLists.tsx +++ b/front/src/pages/group/components/GroupLists.tsx @@ -9,18 +9,18 @@ import { IGroupProps } from '@interfaces/GroupInterface'; import styled from '@emotion/styled'; -const MyGroupLists = [ - { - id: 1, - name: '해달 파이팅', - isPrivate: false, - }, - { - id: 2, - name: '해달 고고', - isPrivate: false, - }, -]; +// const MyGroupLists = [ +// { +// id: 1, +// name: '해달 파이팅', +// isPrivate: false, +// }, +// { +// id: 2, +// name: '해달 고고', +// isPrivate: false, +// }, +// ]; const GroupContainer = styled.div` padding: 20px; diff --git a/front/src/pages/search/components/SearchResult.tsx b/front/src/pages/search/components/SearchResult.tsx index b7dc7d7..720830d 100644 --- a/front/src/pages/search/components/SearchResult.tsx +++ b/front/src/pages/search/components/SearchResult.tsx @@ -42,6 +42,26 @@ const InputResultLayout = styled.div` padding: 0.5rem 1rem; `; +const GroupType = styled.p` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 5px 0 0; + font-size: 14px; + color: var(--color-white); + width: 60px; + height: 20px; + border-radius: 12px; + background-color: var(--color-red); + font-size: var(--size-xs); +`; + +const GroupTypeLayout = styled.div` + display: flex; + flex-direction: column; +`; + const SearchResult = () => { const { data, isPending, isError, error } = useGroups(); @@ -61,18 +81,33 @@ const SearchResult = () => { return 검색 결과가 없습니다.; } + const filteredGroups = data.filter((group: IGroupProps) => !group.isMember); + const onClickNav = () => {}; return ( - {data.map((group: IGroupProps) => ( - - - {group.name} - - 참여하기 - - ))} + {filteredGroups.length === 0 ? ( + + 조건에 맞는 검색 결과가 없습니다. + + ) : ( + filteredGroups.map((group: IGroupProps) => ( + + + + {group.name} + + {group.isPrivate ? 'Private' : 'Public'} + + 참여하기 + + )) + )} ); }; diff --git a/front/src/services/feed/getProblemMonth.ts b/front/src/services/feed/getProblemMonth.ts new file mode 100644 index 0000000..4d9c34e --- /dev/null +++ b/front/src/services/feed/getProblemMonth.ts @@ -0,0 +1,18 @@ +import { BASE_URI } from '@constants/URI'; + +import { instance } from '@services/API_JWT'; + +export const getUserProblemMonth = async (yearMonth: string) => { + try { + const response = await instance.get(`${BASE_URI}/problems`, { + params: { + type: 'MONTH', + yearMonth: yearMonth, + }, + }); + return response.data; + } catch (error) { + console.error('Error fetching UserData:', error); + throw error; + } +};