release : feat/61-FE_fAPI(#66)

피드 페이지 API 연결하기

front/src/hooks/queries/feed/getProblems.ts

@@ -0,0 +1,13 @@
+import { getUserProblems } from '@services/feed/getProblems';
+
+import { useQuery } from '@tanstack/react-query';
+
+export const useProblem = (date: string | null) => {
+  const { data, isPending, isError, error } = useQuery({
+    queryKey: ['userProblems', date],
+    queryFn: () => (date ? getUserProblems(date) : Promise.resolve([])),
+    refetchOnMount: false,
+  });
+
+  return { data, isPending, isError, error };
+};

front/src/hooks/queries/feed/getUserCommitQuery.ts

@@ -0,0 +1,13 @@
+import { getUserCommit } from '@services/feed/getUserCommit';
+
+import { useQuery } from '@tanstack/react-query';
+
+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

@@ -0,0 +1,13 @@
+import { getUserData } from '@services/feed/getUserData';
+
+import { useQuery } from '@tanstack/react-query';
+
+export const useUserData = () => {
+  const { data, isPending, isError, error } = useQuery({
+    queryKey: ['users'],
+    queryFn: getUserData,
+    refetchOnMount: false,
+  });
+
+  return { data, isPending, isError, error };
+};

front/src/interfaces/ProblemInterface.ts

@@ -0,0 +1,6 @@
+export interface IProblem {
+  solvedDate: string;
+  commitUrl: string;
+  title: string;
+  rank: string;
+}

front/src/pages/feed/FeedPage.tsx

@@ -2,55 +2,62 @@ import 'react-calendar/dist/Calendar.css';
 
 import dayjs from 'dayjs';
 
+import Text from '@components/typography/Text';
+
 import { StyleCalendar } from '@pages/feed/components/Calendar';
 import ProblemList from '@pages/feed/components/ProblemList';
 import Profile from '@pages/feed/components/Profile';
 
+import { useProblem } from '@hooks/queries/feed/getProblems';
+
 import { useFeedStore } from '@stores/useFeedStore';
+import { useTokenStore } from '@stores/useTokenStore';
+
+import { IProblem } from '@interfaces/ProblemInterface';
 
-import { Layout, DisplayLayout } from '@styles/Layout';
+import { Layout, DisplayLayout, LoginLayout } from '@styles/Layout';
 
 import styled from '@emotion/styled';
 import 'dayjs/locale/ko';
 
-interface IProblem {
-  date: string;
-  problem: string;
-  difficulty: string;
-}
-
-const problemRecords: IProblem[] = [
-  {
-    date: '2024-05-20',
-    problem: '토마토',
-    difficulty: 'gold4',
-  },
-  {
-    date: '2024-05-20',
-    problem: '사과',
-    difficulty: 'gold2',
-  },
-  {
-    date: '2024-05-20',
-    problem: '감자',
-    difficulty: 'gold4',
-  },
-  {
-    date: '2024-05-20',
-    problem: '감자',
-    difficulty: 'gold4',
-  },
-  {
-    date: '2024-05-20',
-    problem: '감자',
-    difficulty: 'gold4',
-  },
-  {
-    date: '2024-05-20',
-    problem: '감자',
-    difficulty: 'gold4',
-  },
-];
+// const problemRecords: IProblem[] = [
+//   {
+//     solvedDate: '2024-05-20',
+//     commitUrl: 'https://github.com/gidskql6671',
+//     title: '토마토',
+//     rank: 'gold4',
+//   },
+//   {
+//     solvedDate: '2024-05-20',
+//     commitUrl: 'https://github.com/gidskql6671',
+//     title: '사과',
+//     rank: 'gold2',
+//   },
+//   {
+//     solvedDate: '2024-05-20',
+//     commitUrl: 'https://github.com/gidskql6671',
+//     title: '감자',
+//     rank: 'gold4',
+//   },
+//   {
+//     solvedDate: '2024-05-20',
+//     commitUrl: 'https://github.com/gidskql6671',
+//     title: '감자',
+//     rank: 'gold4',
+//   },
+//   {
+//     solvedDate: '2024-05-20',
+//     commitUrl: 'https://github.com/gidskql6671',
+//     title: '감자',
+//     rank: 'gold4',
+//   },
+//   {
+//     solvedDate: '2024-05-20',
+//     commitUrl: 'https://github.com/gidskql6671',
+//     title: '감자',
+//     rank: 'gold4',
+//   },
+// ];
 
 const FeedLayout = styled.div`
   margin-top: 62px;
@@ -81,7 +88,16 @@ const ProfileWrapper = styled.div`
 `;
 
 const FeedPage = () => {
+  const { isAccessToken } = useTokenStore();
   const { selectedDate, setSelectedDate } = useFeedStore();
+  const formattedDate = selectedDate
+    ? dayjs(selectedDate).format('YYYY-MM-DD')
+    : '';
+  const {
+    data: problemData,
+    isPending: problemPending,
+    isError: problemError,
+  } = useProblem(formattedDate);
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const formatDay = (_locale: string | undefined, date: Date) =>
@@ -91,42 +107,61 @@ const FeedPage = () => {
     setSelectedDate(date);
   };
 
-  const formattedDate = selectedDate
-    ? dayjs(selectedDate).format('YYYY-MM-DD')
-    : '';
-
   return (
     <Layout>
       <DisplayLayout>
-        <FeedLayout>
-          <CalendarLayout>
-            <ProfileWrapper>
-              <Profile />
-            </ProfileWrapper>
-            <StyleCalendar
-              formatDay={formatDay}
-              calendarType='iso8601'
-              onClickDay={handleDateClick}
-              tileContent={({ date, view }) =>
-                view === 'month' &&
-                problemRecords.find(
-                  (problem) => problem.date === dayjs(date).format('YYYY-MM-DD')
-                ) ? (
-                  <div className='react-calendar__tile--dot'></div>
-                ) : null
-              }
-            />
-          </CalendarLayout>
-          {selectedDate &&
-          problemRecords.find((problem) => problem.date === formattedDate) ? (
+        {isAccessToken ? (
+          <FeedLayout>
+            {' '}
+            <CalendarLayout>
+              <ProfileWrapper>
+                <Profile />
+              </ProfileWrapper>
+              <StyleCalendar
+                formatDay={formatDay}
+                calendarType='iso8601'
+                onClickDay={handleDateClick}
+                tileContent={({ date, view }) =>
+                  view === 'month' &&
+                  problemData &&
+                  problemData.length > 0 &&
+                  problemData.some(
+                    (problem: IProblem) =>
+                      problem.solvedDate === dayjs(date).format('YYYY-MM-DD')
+                  ) ? (
+                    <div className='react-calendar__tile--dot'></div>
+                  ) : null
+                }
+              />
+            </CalendarLayout>
+            {/* {selectedDate &&
+          problemRecords.find(
+            (problem) => problem.solvedDate === formattedDate
+          ) ? (
             <ProblemList
               problems={problemRecords}
               formattedDate={formattedDate}
             />
           ) : (
             <div style={{ width: '470px' }} />
-          )}
-        </FeedLayout>
+          )} */}
+            {selectedDate &&
+              problemData &&
+              !problemPending &&
+              !problemError && (
+                <ProblemList
+                  problems={problemData}
+                  formattedDate={formattedDate}
+                />
+              )}
+          </FeedLayout>
+        ) : (
+          <LoginLayout>
+            <Text size='var(--size-lg)' weight='700'>
+              환영합니다! Guest님! 로그인 후 이용해주세요.
+            </Text>
+          </LoginLayout>
+        )}
       </DisplayLayout>
     </Layout>
   );

front/src/pages/feed/components/ProblemList.tsx

@@ -1,13 +1,9 @@
 import { ButtonWrapper } from '@components/button/ButtonWrapper';
 import { DefaultButton } from '@components/button/DefaultButton';
 
-import styled from '@emotion/styled';
+import { IProblem } from '@interfaces/ProblemInterface';
 
-interface IProblem {
-  date: string;
-  problem: string;
-  difficulty: string;
-}
+import styled from '@emotion/styled';
 
 const ProblemContainer = styled.div`
   background: linear-gradient(
@@ -101,15 +97,15 @@ const ProblemList = ({
         </thead>
         <tbody>
           {problems
-            .filter((problem) => problem.date === formattedDate)
+            .filter((problem) => problem.solvedDate === formattedDate)
             .map((problem, index) => (
               <tr key={index}>
-                <td>{problem.problem}</td>
-                <td>{problem.difficulty}</td>
+                <td>{problem.title}</td>
+                <td>{problem.rank}</td>
                 <td>
                   <ButtonWrapper display='flex' justifyContent='center'>
                     <ProblemButton
-                      onClick={() => alert('click')}
+                      onClick={() => window.open(problem.commitUrl)}
                       color='white'
                       backgroundColor='blue'
                     >