woowacourse-teams · Jaymyong66 · Jul 24, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -45,6 +45,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
+    "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,6 +7,5 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/frontend/src/api/customFetch.ts b/frontend/src/api/customFetch.ts
@@ -0,0 +1,40 @@
+interface Props {
+  url: string;
+  method?: 'GET' | 'POST' | 'PATCH' | 'DELETE';
+  headers?: RequestInit['headers'];
+  body?: RequestInit['body'];
+  errorMessage?: string;
+}
+
+export const customFetch = async ({
+  url,
+  headers,
+  method = 'GET',
+  body,
+  errorMessage = '[Error] response was not ok',
+}: Props) => {
+  try {
+    const response = await fetch(url, {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+        ...headers,
+      },
+      body,
+    });
+
+    if (!response.ok) {
+      throw new Error(errorMessage);
+    }
+
+    if (method !== 'GET') {
+      return response;
+    }
+
+    const data = await response.json();
+
+    return data;
+  } catch (error) {
+    throw new Error(errorMessage);
+  }
+};
diff --git a/frontend/src/api/queryKeys.ts b/frontend/src/api/queryKeys.ts
@@ -0,0 +1,4 @@
+export const QUERY_KEY = {
+  TEMPLATE: 'template',
+  TEMPLATE_LIST: 'templateList',
+};
diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
@@ -0,0 +1,24 @@
+import { Template, TemplateListResponse, TemplateUploadRequest } from '@/types/template';
+import { customFetch } from './customFetch';
+
+const BASE_URL = process.env.REACT_APP_API_URL;
+
+export const TEMPLATE_API_URL = `${BASE_URL}/templates`;
+
+export const getTemplateList = async (): Promise<TemplateListResponse> =>
+  await customFetch({
+    url: `${TEMPLATE_API_URL}`,
+  });
+
+export const getTemplate = async (id: number): Promise<Template> =>
+  await customFetch({
+    url: `${TEMPLATE_API_URL}/${id}`,
+  });
+
+export const postTemplate = async (newTemplate: TemplateUploadRequest): Promise<void> => {
+  await customFetch({
+    method: 'POST',
+    url: `${TEMPLATE_API_URL}`,
+    body: JSON.stringify(newTemplate),
+  });
+};
diff --git a/frontend/src/components/TemplateItem/TemplateItem.tsx b/frontend/src/components/TemplateItem/TemplateItem.tsx
@@ -1,6 +1,7 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { TemplateListItem } from '@/types/template';
+import { formatRelativeTime } from '@/utils/formatRelativeTime';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 
@@ -9,28 +10,29 @@ interface Props {
 }
 
 const TemplateItem = ({ item }: Props) => {
-  const { title, member, modified_at, representative_snippet } = item;
-  const [year, month, day] = modified_at.split(' ')[0].split('-');
+  const { title, modifiedAt, thumbnailSnippet } = item;
 
   return (
     <Flex direction='column' gap='1.2rem' width='100%'>
       <Flex direction='column' justify='flex-start' align='flex-start' width='100%' gap='0.8rem'>
         <Text.SubTitle color='white'>{title}</Text.SubTitle>
-        <Text.Caption color='white'>{member.nickname}</Text.Caption>
       </Flex>
 
       <SyntaxHighlighter
         language='javascript'
         style={vscDarkPlus}
         showLineNumbers={true}
         customStyle={{ borderRadius: '10px', width: '100%', tabSize: 2 }}
+        codeTagProps={{
+          style: {
+            fontSize: '1.8rem',
+          },
+        }}
       >
-        {representative_snippet.content_summary}
+        {thumbnailSnippet.contentSummary}
       </SyntaxHighlighter>
 
-      <Text.Caption color='white'>
-        {year}년 {month}월 {day}일
-      </Text.Caption>
+      <Text.Caption color='white'>{formatRelativeTime(modifiedAt)}</Text.Caption>
     </Flex>
   );
 };

diff --git a/frontend/src/hooks/useTemplateListQuery.spec.tsx b/frontend/src/hooks/useTemplateListQuery.spec.tsx
@@ -9,11 +9,12 @@ const queryWrapper = ({ children }: PropsWithChildren) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 );
 
-describe('useTemplateListQuery test', () => {
-  it('GET  요청시 templates 데이터를 가져온다', async () => {
+describe('useTemplateListQuery', () => {
+  it('templates 목록을 조회할 수 있다.', async () => {
     const { result } = renderHook(() => useTemplateListQuery(), { wrapper: queryWrapper });
 
     await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
       expect(result.current.data?.templates[0].title).toBe('title1');
     });
   });

diff --git a/frontend/src/hooks/useTemplateListQuery.ts b/frontend/src/hooks/useTemplateListQuery.ts
@@ -1,25 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEY } from '@/api/queryKeys';
+import { getTemplateList } from '@/api/templates';
 import type { TemplateListResponse } from '@/types/template';
 
-const fetchTemplateList = async (): Promise<TemplateListResponse> => {
-  // change this url after MSW initial setting
-  // const apiUrl = process.env.REACT_APP_API_URL;
-  const response = await fetch('http://localhost:8080/templates', {
-    method: 'GET',
+export const useTemplateListQuery = () =>
+  useQuery<TemplateListResponse, Error>({
+    queryKey: [QUERY_KEY.TEMPLATE_LIST],
+    queryFn: getTemplateList,
   });
-
-  if (!response.ok) {
-    throw new Error('Network response was not ok');
-  }
-
-  return response.json();
-};
-
-export const useTemplateListQuery = () => {
-  const { data, error, isLoading } = useQuery<TemplateListResponse, Error>({
-    queryKey: ['templateList'],
-    queryFn: fetchTemplateList,
-  });
-
-  return { data, error, isLoading };
-};
diff --git a/frontend/src/hooks/useTemplateQuery.spec.tsx b/frontend/src/hooks/useTemplateQuery.spec.tsx
@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useTemplateQuery } from './useTemplateQuery';
+
+const queryClient = new QueryClient();
+
+const queryWrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('useTemplateQuery', () => {
+  it('한 개의 template을 조회할 수 있다.', async () => {
+    const { result } = renderHook(() => useTemplateQuery(2024), { wrapper: queryWrapper });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+      expect(result.current.data?.id).toBe(2024);
+      expect(result.current.data?.title).toBe('회원가입 유효성 검증');
+    });
+  });
+});
diff --git a/frontend/src/hooks/useTemplateQuery.ts b/frontend/src/hooks/useTemplateQuery.ts
@@ -1,19 +1,10 @@
 import { UseQueryResult, useQuery } from '@tanstack/react-query';
+import { QUERY_KEY } from '@/api/queryKeys';
+import { getTemplate } from '@/api/templates';
 import { Template } from '@/types/template';
 
-const fetchTemplate = async (id: string): Promise<Template> => {
-  const apiUrl = process.env.REACT_APP_API_URL;
-  const response = await fetch(`${apiUrl}/templates/${id}`);
-
-  if (!response.ok) {
-    throw new Error('Network response was not ok');
-  }
-
-  return response.json();
-};
-
-export const useTemplateQuery = (id: string): UseQueryResult<Template, Error> =>
+export const useTemplateQuery = (id: number): UseQueryResult<Template, Error> =>
   useQuery<Template, Error>({
-    queryKey: ['template', id],
-    queryFn: () => fetchTemplate(id),
+    queryKey: [QUERY_KEY.TEMPLATE, id],
+    queryFn: () => getTemplate(id),
   });
diff --git a/frontend/src/hooks/useTemplateUploadQuery.spec.tsx b/frontend/src/hooks/useTemplateUploadQuery.spec.tsx
@@ -0,0 +1,32 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useTemplateUploadQuery } from './useTemplateUploadQuery';
+
+const queryClient = new QueryClient();
+
+const queryWrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('useTemplateUploadQuery', () => {
+  it('template을 생성할 수 있다.', async () => {
+    const { result } = renderHook(() => useTemplateUploadQuery(), { wrapper: queryWrapper });
+
+    const body = {
+      title: 'Upload Test',
+      snippets: [
+        {
+          filename: 'filename1.txt',
+          content: 'content1',
+          ordinal: 1,
+        },
+      ],
+    };
+
+    await result.current.mutateAsync(body);
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+  });
+});
diff --git a/frontend/src/hooks/useTemplateUploadQuery.ts b/frontend/src/hooks/useTemplateUploadQuery.ts
@@ -1,34 +1,14 @@
-import { UseMutationResult, useMutation, useQueryClient } from '@tanstack/react-query';
-import { CreateTemplateRequest, Template } from '@/types/template';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEY } from '@/api/queryKeys';
+import { postTemplate } from '@/api/templates';
 
-const createTemplate = async (newTemplate: CreateTemplateRequest): Promise<Template> => {
-  const apiUrl = process.env.REACT_APP_API_URL;
-  const response = await fetch(`${apiUrl}/templates`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(newTemplate),
-  });
-
-  if (!response.ok) {
-    throw new Error('Failed to create template');
-  }
-
-  if (response.status === 201) {
-    return newTemplate as Template;
-  }
-
-  return response.json();
-};
-
-export const useTemplateUploadQuery = (): UseMutationResult<Template, Error, CreateTemplateRequest> => {
+export const useTemplateUploadQuery = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<Template, Error, CreateTemplateRequest>({
-    mutationFn: createTemplate,
+  return useMutation({
+    mutationFn: postTemplate,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['templateList'] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.TEMPLATE_LIST] });
     },
   });
 };
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -9,11 +9,23 @@ const queryClient = new QueryClient();
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
-root.render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <GlobalStyles />
-      <RouterProvider router={router} />
-    </QueryClientProvider>
-  </React.StrictMode>,
-);
+const enableMocking = async () => {
+  if (process.env.NODE_ENV !== 'development') {
+    return;
+  }
+
+  const { worker } = await import('./mocks/browser');
+
+  await worker.start();
+};
+
+enableMocking().then(() => {
+  root.render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <GlobalStyles />
+        <RouterProvider router={router} />
+      </QueryClientProvider>
+    </React.StrictMode>,
+  );
+});
diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts
@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handlers';
+
+export const worker = setupWorker(...handlers);
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
@@ -1,13 +1,18 @@
-import { http, HttpResponse } from 'msw';
-import mockTemplates from './templateList.json';
-
-// change this url after MSW initial setting
-// const apiUrl = process.env.REACT_APP_API_URL || 'http://localhost:8080';
+import { HttpResponse, http } from 'msw';
+import { TEMPLATE_API_URL } from '@/api/templates';
+import mockTemplate from './template.json';
+import mockTemplateList from './templateList.json';
 
 export const handlers = [
-  http.get('http://localhost:8080/templates', () => {
-    const response = HttpResponse.json(mockTemplates);
+  http.get(`${TEMPLATE_API_URL}`, () => {
+    const response = HttpResponse.json(mockTemplateList);
+
+    return response;
+  }),
+  http.get(`${TEMPLATE_API_URL}/:id`, () => {
+    const response = HttpResponse.json(mockTemplate);
 
     return response;
   }),
+  http.post(`${TEMPLATE_API_URL}`, async () => HttpResponse.json({ status: 201 })),
 ];