feat: 개발 api 호출 테스트 코드 작성

- services api 추가
- constants 추가 (env 2개 추가)
- axios 기본 형태 추가. 추가 설정 필요
- request, response 기본 type 추가

close #21

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

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

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

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();

web/pages/index.tsx

@@ -1,78 +1,18 @@
 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>
         <title>Create Next App</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div>{renderTodoList()}</div>
-      <DefaultButton>test</DefaultButton>
     </div>
   );
 };

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;

web/shared/axios/index.ts

@@ -0,0 +1 @@
+export { default } from './axios.factory';

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;

web/shared/types/index.ts

@@ -0,0 +1,2 @@
+export * from './request';
+export * from './response';

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

web/shared/types/response.ts

@@ -0,0 +1,5 @@
+export interface Response<T> {
+  status_code: number;
+  msg: string;
+  data: T;
+}