Merge pull request #130 from Hain-tain/feat/router_basename

react-router-dom의 basename 설정, api filedName 수정
woowacourse-teams · Jul 24, 2024 · 41aa239 · 41aa239
2 parents 020b8d8 + 78c098b
commit 41aa239
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 29 deletions.
diff --git a/.github/workflows/frontend_ci.yml b/.github/workflows/frontend_ci.yml
@@ -22,6 +22,10 @@ jobs:
         run: npm install
         working-directory: ${{ env.frontend-directory }}
 
+      - name: Run Type Checking
+        run: npm run tsc
+        working-directory: ${{ env.frontend-directory }}
+
       - name: Run Tests
-        run: npm test
+        run: npm run test
         working-directory: ${{ env.frontend-directory }}
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "jest",
-    "start": "webpack serve --mode development",
+    "dev": "webpack serve --mode development",
+    "tsc": "npx tsc --noEmit",
     "build": "webpack --mode production",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

diff --git a/frontend/src/components/TemplateItem/TemplateItem.tsx b/frontend/src/components/TemplateItem/TemplateItem.tsx
@@ -29,7 +29,7 @@ const TemplateItem = ({ item }: Props) => {
           },
         }}
       >
-        {thumbnailSnippet.contentSummary}
+        {thumbnailSnippet.thumbnailContent}
       </SyntaxHighlighter>
 
       <Text.Caption color='white'>{formatRelativeTime(modifiedAt)}</Text.Caption>

diff --git a/frontend/src/mocks/templateList.json b/frontend/src/mocks/templateList.json
@@ -5,7 +5,7 @@
       "title": "title1",
       "thumbnailSnippet": {
         "filename": "title1.java",
-        "contentSummary": "import { Flex } from '@/components/Flex';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { monokaiSublime } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nconst Template = () => {\n  const content = '';\n  return (\n    <>\n      <Flex direction='column' justify='flex-start' align='center'>\n        <h1>회원 가입 검증</h1>"
+        "thumbnailContent": "import { Flex } from '@/components/Flex';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { monokaiSublime } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nconst Template = () => {\n  const content = '';\n  return (\n    <>\n      <Flex direction='column' justify='flex-start' align='center'>\n        <h1>회원 가입 검증</h1>"
       },
       "modifiedAt": "2024-07-11 12:34"
     },
@@ -14,7 +14,7 @@
       "title": "title2",
       "thumbnailSnippet": {
         "filename": "title1.java",
-        "contentSummary": "public class ......"
+        "thumbnailContent": "public class ......"
       },
       "modifiedAt": "2024-07-10 12:34"
     },
@@ -23,7 +23,7 @@
       "title": "title3",
       "thumbnailSnippet": {
         "filename": "title1.java",
-        "contentSummary": "const GlobalStyles = () => {"
+        "thumbnailContent": "const GlobalStyles = () => {"
       },
       "modifiedAt": "2024-07-09 12:34"
     },
@@ -32,7 +32,7 @@
       "title": "title4",
       "thumbnailSnippet": {
         "filename": "title1.java",
-        "contentSummary": "public class ......"
+        "thumbnailContent": "public class ......"
       },
       "modifiedAt": "2024-07-08 12:34"
     },
@@ -41,7 +41,7 @@
       "title": "title5",
       "thumbnailSnippet": {
         "filename": "title1.java",
-        "contentSummary": "public class ......"
+        "thumbnailContent": "public class ......"
       },
       "modifiedAt": "2024-07-07 12:34"
     }

diff --git a/frontend/src/pages/Template.tsx b/frontend/src/pages/Template.tsx
@@ -36,7 +36,9 @@ const Template = () => {
     <>
       <Flex direction='column' justify='center' align='flex-start' gap='1.5rem' padding='10rem 0 0 0' width='100%'>
         <Flex direction='column' justify='center' align='flex-start' gap='2rem'>
-          <Text.Title weight='bold'>{template.title}</Text.Title>
+          <Text.Title color='white' weight='bold'>
+            {template.title}
+          </Text.Title>
           <Text.Caption weight='bold' color='#ffd369'>
             {formatRelativeTime(template.modifiedAt)}
           </Text.Caption>

diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx
@@ -4,24 +4,27 @@ import Template from '@/pages/Template';
 import TemplateList from '@/pages/TemplateList';
 import TemplateUpload from '@/pages/TemplateUpload';
 
-const router = createBrowserRouter([
-  {
-    element: <Layout />,
-    children: [
-      {
-        path: '/',
-        element: <TemplateList />,
-      },
-      {
-        path: 'templates/:id',
-        element: <Template />,
-      },
-      {
-        path: 'templates/uploads',
-        element: <TemplateUpload />,
-      },
-    ],
-  },
-]);
+const router = createBrowserRouter(
+  [
+    {
+      element: <Layout />,
+      children: [
+        {
+          path: '/',
+          element: <TemplateList />,
+        },
+        {
+          path: 'templates/:id',
+          element: <Template />,
+        },
+        {
+          path: 'templates/uploads',
+          element: <TemplateUpload />,
+        },
+      ],
+    },
+  ],
+  { basename: process.env.NODE_ENV === 'development' ? '/' : process.env.REACT_APP_BASE_URL },
+);
 
 export default router;
diff --git a/frontend/src/types/template.ts b/frontend/src/types/template.ts
@@ -17,7 +17,7 @@ export interface TemplateListItem {
   title: string;
   thumbnailSnippet: {
     filename: string;
-    contentSummary: string;
+    thumbnailContent: string;
   };
   modifiedAt: string;
 }