chore: fix build error

next-i18next.config.js

@@ -2,7 +2,7 @@ const config = {
     i18n: {
         defaultLocale: 'ko',
         locales: ['ko', 'en', 'ru'],
-        defaultNS: 'common',
+        // defaultNS: 'common',
         localeDetection: false,
     },
 };

package.json

@@ -14,15 +14,15 @@
     "author": "Pon Cheol Ku <dev@bbon.kr> (http://bbon.kr/)",
     "license": "MIT",
     "devDependencies": {
-        "@tailwindcss/typography": "^0.4.1",
+        "@tailwindcss/typography": "^0.5.12",
         "@types/react": "^18.0.12",
         "@types/react-dom": "^17.0.11",
-        "autoprefixer": "^10.4.0",
+        "autoprefixer": "^10.4.19",
         "eslint": "^8.35.0",
         "eslint-config-next": "^12.1.6",
         "eslint-config-prettier": "^8.3.0",
-        "postcss": "^8.4.14",
-        "tailwindcss": "^3.2.7",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.3",
         "typescript": "^4.7.2",
         "vercel": "^23.1.2"
     },

src/components/Debug/Debug.tsx

@@ -5,9 +5,12 @@ import { useTranslation } from 'react-i18next';
 const Debug = () => {
     const { i18n, t } = useTranslation();
     const router = useRouter();
+
+    const debugTitleTranslated = t('debug.title');
+
     return (
         <div className="flex flex-col">
-            <h3 className="text-lg">{t('debug.title')}</h3>
+            <h3 className="text-lg">{debugTitleTranslated}</h3>
             <hr className="my-1 border-0" />
 
             <pre className="bg-gray-600 rounded-md p-6 text-gray-50">

src/components/Navigator/Navigator.tsx

@@ -10,18 +10,25 @@ type NavigatorProps = {
 
 const Navigator = ({ href, label, onClick }: NavigatorProps) => {
     const { t } = useTranslation();
+
+    const navigatorLinkTranslated = t('navigator.link');
+    const navigatorRouterTranslated = t('navigator.router');
     return (
         <div className="flex justify-center items-start p-3">
             <div className="flex flex-col px-3">
-                <label className="text-sm mb-1">{t('navigator.link')}</label>
+                <label className="text-sm mb-1">
+                    {navigatorLinkTranslated}
+                </label>
                 <Link href={href}>
                     <a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-center">
                         {label}
                     </a>
                 </Link>
             </div>
             <div className="flex flex-col px-3">
-                <label className="text-sm mb-1">{t('navigator.router')}</label>
+                <label className="text-sm mb-1">
+                    {navigatorRouterTranslated}
+                </label>
                 <button
                     onClick={onClick}
                     className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"

src/components/common/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
@@ -52,13 +52,15 @@ const Header = () => {
         [],
     );
 
+    const titleTranslated = t('global.title');
+
     return (
         <header className="bg-gray-800 ">
             <nav className="container mx-auto flex justify-between px-6 py-3">
                 <div className="flex justify-start items-center">
                     <p className="text-lg text-gray-300 shadow-sm">
                         <Link href="/">
-                            <a>{t('global.title')}</a>
+                            <a>{titleTranslated}</a>
                         </Link>
                     </p>
                 </div>