From 2924bf006d92c6c354b429acb97179b789eb2e15 Mon Sep 17 00:00:00 2001
From: jtpark <vigabhan1231@gmail.com>
Date: Mon, 10 Jan 2022 00:00:48 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=9C=EB=B0=9C=20api=20=ED=98=B8?=
 =?UTF-8?q?=EC=B6=9C=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20-=20services=20api=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?-=20constants=20=EC=B6=94=EA=B0=80=20(env=202=EA=B0=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80)=20-=20axios=20=EA=B8=B0=EB=B3=B8=20?=
 =?UTF-8?q?=ED=98=95=ED=83=9C=20=EC=B6=94=EA=B0=80.=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95=20=ED=95=84=EC=9A=94=20-=20request,=20res?=
 =?UTF-8?q?ponse=20=EA=B8=B0=EB=B3=B8=20type=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close #21
---
 web/data/services/services.api.ts    | 13 ++++++
 web/data/services/services.hooks.ts  | 37 ++++++++++++++++
 web/data/services/services.model.ts  | 15 +++++++
 web/mocks/index.ts                   |  3 ++
 web/pages/index.tsx                  | 66 ++--------------------------
 web/shared/axios/axios.factory.ts    |  6 +++
 web/shared/axios/index.ts            |  1 +
 web/shared/constants/environments.ts |  2 +
 web/shared/types/index.ts            |  2 +
 web/shared/types/request.ts          | 10 +++++
 web/shared/types/response.ts         |  5 +++
 11 files changed, 97 insertions(+), 63 deletions(-)
 create mode 100644 web/data/services/services.api.ts
 create mode 100644 web/data/services/services.hooks.ts
 create mode 100644 web/data/services/services.model.ts
 create mode 100644 web/shared/axios/axios.factory.ts
 create mode 100644 web/shared/axios/index.ts
 create mode 100644 web/shared/constants/environments.ts
 create mode 100644 web/shared/types/index.ts
 create mode 100644 web/shared/types/request.ts
 create mode 100644 web/shared/types/response.ts

diff --git a/web/data/services/services.api.ts b/web/data/services/services.api.ts
new file mode 100644
index 0000000..854a857
--- /dev/null
+++ b/web/data/services/services.api.ts
@@ -0,0 +1,13 @@
+import axios from '~/shared/axios';
+import { Response } from '~/shared/types';
+import { MainContents } from './services.model';
+
+export async function getMainContents(params: { keyword: string }) {
+  const { data } = await axios.get<Response<MainContents[]>>(
+    '/services/main_contents',
+    {
+      params,
+    },
+  );
+  return data;
+}
diff --git a/web/data/services/services.hooks.ts b/web/data/services/services.hooks.ts
new file mode 100644
index 0000000..2568c4e
--- /dev/null
+++ b/web/data/services/services.hooks.ts
@@ -0,0 +1,37 @@
+import { useQuery, UseQueryOptions } from 'react-query';
+import { AxiosError } from 'axios';
+import { Response } from '~/shared/types';
+import { MainContents } from './services.model';
+import { getMainContents } from './services.api';
+
+export function useMainContents(
+  params: {
+    keyword: string;
+  },
+  /**
+   * @see https://github.com/tannerlinsley/react-query/discussions/1195
+   * query variables가 필요할 때
+   */
+  /**
+   * @see https://github.com/tannerlinsley/react-query/discussions/1477
+   * TQueryFnData : Query 함수의 반환 데이터
+   * TError: Query 함수의 에러 반환값
+   * TData: Query 함수의 최종 데이터
+   */
+  options:
+    | UseQueryOptions<
+        Response<MainContents[]>,
+        AxiosError<unknown>,
+        Response<MainContents[]>
+      >
+    | undefined = {},
+) {
+  return useQuery<Response<MainContents[]>, AxiosError>(
+    ['/services/main_contents', params],
+    () => getMainContents(params),
+    {
+      retry: 2,
+      ...options,
+    },
+  );
+}
diff --git a/web/data/services/services.model.ts b/web/data/services/services.model.ts
new file mode 100644
index 0000000..8401713
--- /dev/null
+++ b/web/data/services/services.model.ts
@@ -0,0 +1,15 @@
+export interface MainContents {
+  contents_id: number;
+  title: string;
+  thumbnail: string;
+  introduction: string;
+  writer: Writer;
+  language: string;
+  is_translate: boolean;
+  original_id: number;
+}
+
+export interface Writer {
+  writer_name: string;
+  writer_id: string;
+}
diff --git a/web/mocks/index.ts b/web/mocks/index.ts
index d082e91..a55ce13 100644
--- a/web/mocks/index.ts
+++ b/web/mocks/index.ts
@@ -1,4 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+/**
+ * @see https://github.com/vercel/next.js/tree/canary/examples/with-msw
+ */
 if (typeof window === 'undefined') {
   const { server } = require('./server');
   server.listen();
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index c4c5d47..884449c 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,69 +1,11 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import { useState, ChangeEvent } from 'react';
-import { useQueryClient } from 'react-query';
-import TodoItem from '~/components/Todo/TodoItem';
-import { useTodoList, useCreateTodo } from '~/data/todo/todo.hooks';
-import { DefaultButton } from '@nolmungshemung/ui-kits';
+import { useMainContents } from '~/data/services/services.hooks';
 
 const Home: NextPage = function () {
-  const queryClient = useQueryClient();
-
-  const [value, setValue] = useState('');
-  const { data: todos, isLoading, error } = useTodoList();
-  const createMutation = useCreateTodo({
-    onSuccess() {
-      queryClient.invalidateQueries('todos');
-    },
-    onError(e) {
-      console.error(e);
-    },
-  });
-
-  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-
-  const onClick = () => {
-    if (todos) {
-      const newId = todos.reduce((_newId, todo) => {
-        return _newId > todo.id ? _newId : todo.id;
-      }, 0);
-
-      createMutation.mutate({
-        id: newId + 1,
-        text: value,
-        isDone: false,
-      });
-      setValue('');
-    }
-  };
-
-  const renderTodoList = () => {
-    if (isLoading) {
-      return <div>loading...</div>;
-    }
-
-    if (error) {
-      return <div>error...</div>;
-    }
-
-    if (todos) {
-      return (
-        <div className="App__Container">
-          <input type="text" value={value} onChange={onChange} />
-          <button className="Create__Button" onClick={onClick}>
-            Create
-          </button>
-          {todos?.map((todo) => (
-            <TodoItem key={todo.id} todo={todo} />
-          ))}
-        </div>
-      );
-    }
-    return <div>empty Todo data...</div>;
-  };
+  const { data: mainContents } = useMainContents({ keyword: 'test' });
 
+  console.log(mainContents);
   return (
     <div>
       <Head>
@@ -71,8 +13,6 @@ const Home: NextPage = function () {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div>{renderTodoList()}</div>
-      <DefaultButton>test</DefaultButton>
     </div>
   );
 };
diff --git a/web/shared/axios/axios.factory.ts b/web/shared/axios/axios.factory.ts
new file mode 100644
index 0000000..c0aeaa8
--- /dev/null
+++ b/web/shared/axios/axios.factory.ts
@@ -0,0 +1,6 @@
+import axios from 'axios';
+import { API_URL } from '~/shared/constants/environments';
+
+const axiosInstance = axios.create({ baseURL: API_URL });
+
+export default axiosInstance;
diff --git a/web/shared/axios/index.ts b/web/shared/axios/index.ts
new file mode 100644
index 0000000..7869ebb
--- /dev/null
+++ b/web/shared/axios/index.ts
@@ -0,0 +1 @@
+export { default } from './axios.factory';
diff --git a/web/shared/constants/environments.ts b/web/shared/constants/environments.ts
new file mode 100644
index 0000000..83088b0
--- /dev/null
+++ b/web/shared/constants/environments.ts
@@ -0,0 +1,2 @@
+export const API_URL = process.env.NEXT_PUBLIC_API_URL;
+export const APP_STAGE = process.env.NEXT_PUBLIC_APP_STAGE;
diff --git a/web/shared/types/index.ts b/web/shared/types/index.ts
new file mode 100644
index 0000000..a051759
--- /dev/null
+++ b/web/shared/types/index.ts
@@ -0,0 +1,2 @@
+export * from './request';
+export * from './response';
diff --git a/web/shared/types/request.ts b/web/shared/types/request.ts
new file mode 100644
index 0000000..2572bfc
--- /dev/null
+++ b/web/shared/types/request.ts
@@ -0,0 +1,10 @@
+export interface WritingContentsRequest {
+  title: string;
+  thumbnail: string;
+  introduction: string;
+  contents: string;
+  writer_id: string;
+  language: string;
+  is_translate: boolean;
+  original_id: number;
+}
diff --git a/web/shared/types/response.ts b/web/shared/types/response.ts
new file mode 100644
index 0000000..dc5f0a9
--- /dev/null
+++ b/web/shared/types/response.ts
@@ -0,0 +1,5 @@
+export interface Response<T> {
+  status_code: number;
+  msg: string;
+  data: T;
+}