feat(Feed): MyFeed Page API 연동

Ref #54

data/services/services.api.ts

@@ -9,6 +9,7 @@ import {
   WritingContentsRequest,
   ContentsSearchParams,
   InfiniteQueryParam,
+  FeedParams,
 } from './services.model';
 
 export async function getMainContents({
@@ -63,13 +64,11 @@ export async function getTranslatingContents(contentsId: number) {
   return data;
 }
 
-export async function getFeedContents(writerId?: string) {
+export async function getFeedContents(feedParams: FeedParams) {
   const { data } = await axios.get<SuccessResponse<FeedContentsData>>(
     '/services/feed_contents',
     {
-      params: {
-        writerId,
-      },
+      params: feedParams,
     },
   );
   return data;

data/services/services.hooks.ts

@@ -15,8 +15,11 @@ import {
   MainContentsResponse,
   TranslatingContentsData,
   ReadingContentsData,
+  FeedContentsData,
+  FeedParams,
 } from './services.model';
 import {
+  getFeedContents,
   getMainContents,
   getMainWriters,
   getReadingContents,
@@ -136,3 +139,23 @@ export function usePostContents(
     },
   );
 }
+
+export function useFeedContents(
+  feedParams: FeedParams,
+  options:
+    | UseQueryOptions<
+        SuccessResponse<FeedContentsData>,
+        AxiosError<unknown>,
+        SuccessResponse<FeedContentsData>
+      >
+    | undefined = {},
+) {
+  return useQuery<SuccessResponse<FeedContentsData>, AxiosError>(
+    ['/services/feed_contents', feedParams],
+    () => getFeedContents(feedParams),
+    {
+      retry: 2,
+      ...options,
+    },
+  );
+}

data/services/services.model.ts

@@ -50,9 +50,20 @@ export interface TranslatingContentsData extends Contents {
   contents: string;
 }
 
+export interface FeedParams {
+  writerId: string;
+  count: number;
+  page: number;
+}
+
+export interface FeedPagingInfo extends MainPagingInfo {
+  totalPages: number;
+}
+
 export interface FeedContentsData {
   writer: Writer;
   feedContentsList: Contents[];
+  paging: FeedPagingInfo;
 }
 
 export interface WritingContentsRequest {

pages/myfeed.tsx

@@ -1,6 +1,25 @@
+import { GetServerSidePropsContext, PreviewData } from 'next';
 import { NextSeo } from 'next-seo';
+import { ParsedUrlQuery } from 'querystring';
+import { useState } from 'react';
+import { dehydrate, QueryClient } from 'react-query';
+import { getFeedContents } from '~/data/services/services.api';
+import { useFeedContents } from '~/data/services/services.hooks';
+import { FeedParams } from '~/data/services/services.model';
+import {
+  DEFAULT_FEED_COUNT,
+  DEFAULT_START_PAGE,
+} from '~/shared/constants/pagination';
+
+interface MyFeedProps {
+  feedParams: FeedParams;
+  dehydratedState: any;
+}
+
+const MyFeed = function ({ feedParams: initFeedParams }: MyFeedProps) {
+  const [feedParams, setFeedParams] = useState(initFeedParams);
+  const { data, isLoading } = useFeedContents(feedParams);
 
-const MyFeed = function () {
   return (
     <>
       <NextSeo
@@ -11,4 +30,36 @@ const MyFeed = function () {
   );
 };
 
+export async function getServerSideProps(
+  context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>,
+): Promise<
+  | {
+      props: MyFeedProps;
+    }
+  | undefined
+> {
+  try {
+    const writerId = context.query.writerId as string;
+    const feedParams: FeedParams = {
+      writerId: writerId,
+      count: DEFAULT_FEED_COUNT,
+      page: DEFAULT_START_PAGE,
+    };
+    const queryClient = new QueryClient();
+    await queryClient.prefetchQuery(
+      ['/services/feed_contents', feedParams],
+      () => getFeedContents(feedParams),
+    );
+
+    return {
+      props: {
+        feedParams: feedParams,
+        dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
+      },
+    };
+  } catch (e) {
+    console.error(e);
+  }
+}
+
 export default MyFeed;

shared/constants/pagination.ts

@@ -1,2 +1,4 @@
 export const DEFAULT_SEARCH_RANGE = 20;
+export const DEFAULT_FEED_COUNT = 8;
 export const GRID_COLUMN_COUNT = 4;
+export const DEFAULT_START_PAGE = 1;