[FE] 코드잽 프로덕션 v1.1.7 배포 (#917)

woowacourse-teams · Nov 16, 2024 · 4c2bde2 · 4c2bde2
2 parents e4c8fad + 844a8b7
commit 4c2bde2
Show file tree

Hide file tree

Showing 36 changed files with 131 additions and 162 deletions.
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
@@ -2,6 +2,10 @@ import type { Preview } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import GlobalStyles from '../src/style/GlobalStyles';
+import { AuthProvider, ToastProvider } from '../src/contexts';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 const preview: Preview = {
   parameters: {
@@ -15,19 +19,16 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => (
-      <>
-        <GlobalStyles />
-        <MemoryRouter>
-          <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-            <div style={{ border: '2px solid black', borderRadius: '8px', padding: '2rem', background: 'white' }}>
-              <Story />
-            </div>
-            <div style={{ border: '2px solid black', borderRadius: '8px', padding: '2rem', background: 'black' }}>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <ToastProvider>
+            <GlobalStyles />
+            <MemoryRouter>
               <Story />
-            </div>
-          </div>
-        </MemoryRouter>
-      </>
+            </MemoryRouter>
+          </ToastProvider>
+        </AuthProvider>
+      </QueryClientProvider>
     ),
   ],
 };

diff --git a/frontend/jest.config.ts b/frontend/jest.config.ts
@@ -11,12 +11,13 @@ const config: Config = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/src/mocks/fileTransformer.js',
   },
   clearMocks: true,
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': '<rootDir>/src/mocks/fileMock.js',
     'react-syntax-highlighter/dist/esm': 'react-syntax-highlighter/dist/cjs',
   },
   transformIgnorePatterns: ['/node_modules/(?!react-syntax-highlighter)'],

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "code-zap",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/frontend/public/mockServiceWorker.js b/frontend/public/mockServiceWorker.js
@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.5'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.5.2'
+const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }

diff --git a/frontend/src/api/ApiClient.ts b/frontend/src/api/ApiClient.ts
@@ -96,7 +96,7 @@ class ApiClient {
   }
 }
 
-const API_URL = process.env.REACT_APP_API_URL ?? '';
+const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
 const httpHeader = {
   'Content-Type': 'application/json',

diff --git a/frontend/src/api/authentication.ts b/frontend/src/api/authentication.ts
@@ -5,7 +5,7 @@ import { MemberInfo } from '@/types';
 import { apiClient } from './ApiClient';
 import { customFetch } from './customFetch';
 
-const API_URL = process.env.REACT_APP_API_URL ?? '';
+const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
 export const SIGNUP_API_URL = `${API_URL}${END_POINTS.SIGNUP}`;
 export const LOGIN_API_URL = `${API_URL}${END_POINTS.LOGIN}`;

diff --git a/frontend/src/api/categories.ts b/frontend/src/api/categories.ts
@@ -12,7 +12,7 @@ import type {
 
 import { customFetch } from './customFetch';
 
-const API_URL = process.env.REACT_APP_API_URL ?? '';
+const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
 export const CATEGORY_API_URL = `${API_URL}${END_POINTS.CATEGORIES}`;
 

diff --git a/frontend/src/api/like.ts b/frontend/src/api/like.ts
@@ -5,7 +5,7 @@ import { LikeDeleteRequest, LikePostRequest } from '@/types';
 
 import { customFetch } from './customFetch';
 
-const API_URL = process.env.REACT_APP_API_URL ?? '';
+const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
 export const LIKE_API_URL = `${API_URL}${END_POINTS.LIKES}`;
 

diff --git a/frontend/src/api/members.ts b/frontend/src/api/members.ts
@@ -3,7 +3,7 @@ import { GetMemberNameResponse } from '@/types';
 
 import { customFetch } from './customFetch';
 
-const API_URL = process.env.REACT_APP_API_URL;
+const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
 export const MEMBER_API_URL = `${API_URL}${END_POINTS.MEMBERS}`;
 

diff --git a/frontend/src/api/tags.ts b/frontend/src/api/tags.ts
@@ -3,7 +3,7 @@ import { TagListResponse } from '@/types/api';
 
 import { customFetch } from './customFetch';
 
-const API_URL = process.env.REACT_APP_API_URL ?? '';
+const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
 export const TAG_API_URL = `${API_URL}${END_POINTS.TAGS}`;
 

diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
@@ -12,7 +12,7 @@ import { SortingOption } from '@/types';
 import { apiClient } from './ApiClient';
 import { customFetch } from './customFetch';
 
-const API_URL = process.env.REACT_APP_API_URL ?? '';
+const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
 export const TEMPLATE_API_URL = `${API_URL}${END_POINTS.TEMPLATES_EXPLORE}`;
 

diff --git a/frontend/src/components/PagingButtons/PagingButtons.stories.tsx b/frontend/src/components/PagingButtons/PagingButtons.stories.tsx
@@ -6,7 +6,7 @@ const meta: Meta<typeof PagingButtons> = {
   title: 'PagingButtons',
   component: PagingButtons,
   args: {
-    totalPages: 6,
+    paginationSizes: 5,
     onPageChange: () => {},
   },
 };

diff --git a/frontend/src/components/PagingButtons/PagingButtons.tsx b/frontend/src/components/PagingButtons/PagingButtons.tsx
@@ -6,28 +6,26 @@ import * as S from './PagingButtons.style';
 
 interface Props {
   currentPage: number;
-  totalPages: number;
+  paginationSizes: number;
   onPageChange: (page: number) => void;
 }
 
-const PagingButtons = ({ currentPage, totalPages, onPageChange }: Props) => {
+const PagingButtons = ({ currentPage, paginationSizes, onPageChange }: Props) => {
   const getPageNumbers = () => {
-    const startPage = Math.max(1, Math.min(currentPage - 2, totalPages - 4));
-    const endPage = Math.min(totalPages, startPage + 4);
+    const startPage = Math.max(1, Math.min(currentPage - 2, currentPage + paginationSizes - 5));
+    const endPage = Math.min(currentPage + paginationSizes - 1, startPage + 4);
 
     return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
   };
 
   const handlePagingClick = (page: number, label: string) => {
-    trackMyTemplatePaging({ page, totalPages, label });
+    trackMyTemplatePaging({ page, label });
     onPageChange(page);
   };
 
   return (
     <S.PagingContainer>
-      <PagingButton page={1} disabled={currentPage === 1} onClick={handlePagingClick} label='<<' />
       <PagingButton page={currentPage - 1} disabled={currentPage === 1} onClick={handlePagingClick} label='<' />
-
       {getPageNumbers().map((page) => (
         <PagingButton
           key={page}
@@ -37,14 +35,7 @@ const PagingButtons = ({ currentPage, totalPages, onPageChange }: Props) => {
           label={String(page)}
         />
       ))}
-
-      <PagingButton
-        page={currentPage + 1}
-        disabled={currentPage === totalPages}
-        onClick={handlePagingClick}
-        label='>'
-      />
-      <PagingButton page={totalPages} disabled={currentPage === totalPages} onClick={handlePagingClick} label='>>' />
+      <PagingButton page={currentPage + 1} disabled={paginationSizes === 1} onClick={handlePagingClick} label='>' />
     </S.PagingContainer>
   );
 };
@@ -59,7 +50,9 @@ interface PagingButtonProps {
 
 const PagingButton = ({ page, isActive, disabled, onClick, label }: PagingButtonProps) => (
   <S.PagingButton isActive={isActive} disabled={disabled || isActive} onClick={() => onClick(page ?? 1, label)}>
-    <Text.Small color={isActive ? theme.color.light.white : theme.color.light.secondary_500}>{label}</Text.Small>
+    {!disabled && (
+      <Text.Small color={isActive ? theme.color.light.white : theme.color.light.secondary_500}>{label}</Text.Small>
+    )}
   </S.PagingButton>
 );
 

diff --git a/frontend/src/components/SelectList/SelectList.style.ts b/frontend/src/components/SelectList/SelectList.style.ts
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { theme } from '@/style/theme';
+
 import type { OptionProps } from './SelectList';
 
 export const SelectListContainer = styled.div`

diff --git a/frontend/src/components/SelectList/SelectList.tsx b/frontend/src/components/SelectList/SelectList.tsx
@@ -1,7 +1,7 @@
-import { useTheme } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 
 import { Text } from '@/components';
+import { theme } from '@/style/theme';
 
 import * as S from './SelectList.style';
 
@@ -12,19 +12,15 @@ export interface OptionProps {
 
 const SelectListBase = ({ children }: PropsWithChildren) => <S.SelectListContainer>{children}</S.SelectListContainer>;
 
-const SelectListOption = ({ children, isSelected, onClick }: PropsWithChildren<OptionProps>) => {
-  const theme = useTheme();
-
-  return (
-    <S.SelectListOption href={`#${children}`} onClick={onClick} isSelected={isSelected}>
-      <S.SelectListText className='select-list-text'>
-        <Text.Medium color={isSelected ? theme.color.light.white : theme.color.light.secondary_600}>
-          {children}
-        </Text.Medium>
-      </S.SelectListText>
-    </S.SelectListOption>
-  );
-};
+const SelectListOption = ({ children, isSelected, onClick }: PropsWithChildren<OptionProps>) => (
+  <S.SelectListOption href={`#${children}`} onClick={onClick} isSelected={isSelected}>
+    <S.SelectListText className='select-list-text'>
+      <Text.Medium color={isSelected ? theme.color.light.white : theme.color.light.secondary_600}>
+        {children}
+      </Text.Medium>
+    </S.SelectListText>
+  </S.SelectListOption>
+);
 
 const SelectList = Object.assign(SelectListBase, {
   Option: SelectListOption,

diff --git a/frontend/src/components/SourceCode/SourceCode.tsx b/frontend/src/components/SourceCode/SourceCode.tsx
@@ -1,7 +1,6 @@
-import { ViewUpdate } from '@codemirror/view';
 import { type LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { quietlight } from '@uiw/codemirror-theme-quietlight';
-import ReactCodeMirror, { EditorView, ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import ReactCodeMirror, { EditorView, ReactCodeMirrorRef, type ViewUpdate } from '@uiw/react-codemirror';
 import { useRef } from 'react';
 
 import { useWindowWidth } from '@/hooks';

diff --git a/frontend/src/components/SourceCodeEditor/SourceCodeEditor.tsx b/frontend/src/components/SourceCodeEditor/SourceCodeEditor.tsx
@@ -1,4 +1,4 @@
-import { ViewUpdate } from '@codemirror/view';
+import { type ViewUpdate } from '@uiw/react-codemirror';
 import { useRef } from 'react';
 
 import { TrashcanIcon } from '@/assets/images';

diff --git a/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts b/frontend/src/components/SourceCodeViewer/SourceCodeViewer.style.ts
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { Button } from '@/components';
+import { theme } from '@/style/theme';
 
 export const SourceCodeViewerContainer = styled.div`
   overflow: hidden;
@@ -17,7 +18,7 @@ export const FilenameContainer = styled.div`
   height: 3rem;
   padding: 1rem 1.5rem;
 
-  background: ${({ theme }) => theme.color.light.tertiary_600};
+  background: ${theme.color.light.tertiary_600};
 `;
 
 export const ToggleButton = styled.button`

diff --git a/frontend/src/components/Toast/Toast.style.ts b/frontend/src/components/Toast/Toast.style.ts
@@ -1,6 +1,8 @@
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { theme } from '@/style/theme';
+
 const slideIn = keyframes`
   from {
     transform: translateY(20px) translateX(-50%);
@@ -37,7 +39,7 @@ export const BaseToast = styled.div<{ visible: boolean; type: 'success' | 'fail'
   font-size: 16px;
   color: white;
 
-  background-color: ${({ theme, type }) => {
+  background-color: ${({ type }) => {
     switch (type) {
       case 'success':
         return theme.color.light.complementary_300;

diff --git a/frontend/src/hooks/template/index.ts b/frontend/src/hooks/template/index.ts
@@ -1,3 +1,2 @@
 export { useSourceCode } from './useSourceCode';
 export { useTag } from './useTag';
-export { useSearchKeyword } from './useSearchKeyword';
diff --git a/frontend/src/hooks/template/useSearchKeyword.ts b/frontend/src/hooks/template/useSearchKeyword.ts
diff --git a/frontend/src/mocks/fileTransformer.js b/frontend/src/mocks/fileTransformer.js
@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  process(sourceText, sourcePath, options) {
+    return {
+      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
+    };
+  },
+};
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
@@ -61,8 +61,7 @@ export const templateHandlers = [
         break;
     }
 
-    const totalElements = filteredTemplates.length;
-    const totalPages = Math.ceil(totalElements / size);
+    const paginationSizes = Math.min(Math.ceil(filteredTemplates.length / size - page + 1), 5);
     const startIndex = (page - 1) * size;
     const endIndex = startIndex + size;
     const paginatedTemplates = filteredTemplates.slice(startIndex, endIndex);
@@ -71,8 +70,7 @@ export const templateHandlers = [
     return HttpResponse.json({
       status: 200,
       templates: paginatedTemplates,
-      totalPages,
-      totalElements,
+      paginationSizes,
       numberOfElements,
     });
   }),

diff --git a/frontend/src/pages/LoginPage/LoginPage.tsx b/frontend/src/pages/LoginPage/LoginPage.tsx
@@ -8,6 +8,7 @@ import { useTrackPageViewed } from '@/service/amplitude';
 
 import { useLoginForm } from './hooks';
 import * as S from './LoginPage.style';
+import { theme } from '@/style/theme';
 
 const LoginPage = () => {
   useTrackPageViewed({ eventName: '[Viewed] 로그인 페이지' });
@@ -21,7 +22,7 @@ const LoginPage = () => {
         <S.LoginPageContainer direction='column' justify='center' align='center' gap='3.5rem' width='27.5rem'>
           <Flex direction='column' justify='center' align='center' gap='1rem'>
             <ZapzapLogo width={100} height={100} />
-            <S.ResponsiveHeading color='#F79037'>환영하잽</S.ResponsiveHeading>
+            <S.ResponsiveHeading color={theme.color.light.primary_800}>환영하잽</S.ResponsiveHeading>
           </Flex>
 
           <S.LoginForm
@@ -61,7 +62,7 @@ const LoginPage = () => {
               로그인
             </Button>
             <Flex justify='flex-end' align='center' width='100%' gap='0.5rem'>
-              <Text.XSmall color='#6B7079'>계정이 없으신가요?</Text.XSmall>
+              <Text.XSmall color={theme.color.light.secondary_600}>계정이 없으신가요?</Text.XSmall>
 
               <Link to={END_POINTS.SIGNUP}>
                 <Button variant='text' size='small'>