release : bug/67-FE_feedB (#72)

피드 페이지 및 다른 페이지 버그 해결

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,
     },
   },

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 };
+};

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 };
 };

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 };

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 };

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 };

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 };

front/src/interfaces/GroupInterface.ts

@@ -2,6 +2,7 @@ export interface IGroupProps {
   id: number;
   name: string;
   isPrivate: boolean;
+  isMember: boolean;
 }
 
 export interface ICreateGroupModalProps {

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 = () => {
                 }
               />
             </CalendarLayout>
-            {/* {selectedDate &&
-          problemRecords.find(
-            (problem) => problem.solvedDate === formattedDate
-          ) ? (
-            <ProblemList
-              problems={problemRecords}
-              formattedDate={formattedDate}
-            />
-          ) : (
-            <div style={{ width: '470px' }} />
-          )} */}
-            {selectedDate &&
-              problemData &&
-              !problemPending &&
-              !problemError && (
-                <ProblemList
-                  problems={problemData}
-                  formattedDate={formattedDate}
-                />
-              )}
+            {selectedDate && problemData && !problemPending && !problemError ? (
+              <ProblemList
+                problems={problemData}
+                formattedDate={formattedDate}
+              />
+            ) : (
+              <div style={{ width: 470 }}></div>
+            )}
           </FeedLayout>
         ) : (
           <LoginLayout>

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;

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 <InputResultLayout>검색 결과가 없습니다.</InputResultLayout>;
   }
 
+  const filteredGroups = data.filter((group: IGroupProps) => !group.isMember);
+
   const onClickNav = () => {};
 
   return (
     <InputResultLayout>
-      {data.map((group: IGroupProps) => (
-        <SearchResultLayout key={group.id}>
-          <Text size='var(--size-sm)' weight='700' color='var(--color-black)'>
-            {group.name}
-          </Text>
-          <PButton onClick={onClickNav}>참여하기</PButton>
-        </SearchResultLayout>
-      ))}
+      {filteredGroups.length === 0 ? (
+        <Text size='var(--size-sm)' weight='700' color='var(--color-black)'>
+          조건에 맞는 검색 결과가 없습니다.
+        </Text>
+      ) : (
+        filteredGroups.map((group: IGroupProps) => (
+          <SearchResultLayout key={group.id}>
+            <GroupTypeLayout>
+              <Text
+                size='var(--size-sm)'
+                weight='700'
+                color='var(--color-black)'
+              >
+                {group.name}
+              </Text>
+              <GroupType>{group.isPrivate ? 'Private' : 'Public'}</GroupType>
+            </GroupTypeLayout>
+            <PButton onClick={onClickNav}>참여하기</PButton>
+          </SearchResultLayout>
+        ))
+      )}
     </InputResultLayout>
   );
 };

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;
+  }
+};