Prepare for migration (add useTranslatedString hook, set noImplicitAny true)

index.html

@@ -42,7 +42,7 @@
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
     <div id="popup-root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

package.json

@@ -44,6 +44,8 @@
   },
   "devDependencies": {
     "@types/node": "^20.4.5",
+    "@types/qs": "^6.9.12",
+    "@types/react-dom": "^18.2.22",
     "@types/react-slick": "^0.23.10",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",

src/hooks/useTranslatedString.tsx

@@ -0,0 +1,18 @@
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Custom hook that returns a function for translating strings based on the current language.
+ *
+ * @returns {function} A function that takes an object and a key and returns the translated string.
+ * @example const translate = useTranslatedString();
+ *          const translatedString = translate(review.lecture, 'title');
+ */
+export const useTranslatedString = () => {
+  const { i18n } = useTranslation();
+
+  return <T,>(obj: T, key: keyof T extends string ? keyof T : never) => {
+    const translatedValue = obj[(i18n.language.startsWith('ko') ? key : `${key}_en`) as keyof T];
+
+    return typeof translatedValue === 'string' ? translatedValue : null;
+  };
+};

src/index.jsx → src/index.tsx

@@ -34,14 +34,29 @@ i18n
       formatSeparator: ',',
       format: (value, formatting, lng) => {
         if (value instanceof Date) {
-          return moment(value).locale(lng).format(formatting);
+          return moment(value)
+            .locale(lng ?? 'ko')
+            .format(formatting);
         }
         return value.toString();
       },
     },
   });
 
 import axios from 'axios';
+
+declare module 'axios' {
+  export interface AxiosRequestConfig {
+    metadata: {
+      gaCategory: string;
+      gaVariable: string;
+      startTime?: Date;
+      endTime?: Date;
+      duration?: number;
+    };
+  }
+}
+
 import Qs from 'qs';
 import { API_URL } from './const';
 
@@ -71,7 +86,7 @@ axios.interceptors.response.use(
   (response) => {
     response.config.metadata.endTime = new Date();
     response.config.metadata.duration =
-      response.config.metadata.endTime - response.config.metadata.startTime;
+      response.config.metadata.endTime.getTime() - response.config.metadata.startTime!.getTime();
     return response;
   },
   (error) => {
@@ -83,11 +98,15 @@ axios.interceptors.response.use(
 );
 
 import { BrowserRouter } from 'react-router-dom';
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
 const container = document.getElementById('root');
+
+if (!container) {
+  throw new Error('There must be root element');
+}
+
 const root = ReactDOM.createRoot(container); // createRoot(container!) if you use TypeScript
 root.render(
   <BrowserRouter>

tsconfig.json

@@ -9,7 +9,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noImplicitAny": false,
+    "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
     "module": "CommonJS",
     "moduleResolution": "node",

yarn.lock

@@ -517,6 +517,18 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/qs@^6.9.12":
+  version "6.9.12"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.12.tgz#afa96b383a3a6fdc859453a1892d41b607fc7756"
+  integrity sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg==
+
+"@types/react-dom@^18.2.22":
+  version "18.2.22"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.22.tgz#d332febf0815403de6da8a97e5fe282cbe609bae"
+  integrity sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.20":
   version "7.1.25"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"