Merge branch 'dev' into dependabot/npm_and_yarn/dev/vercel-28.16.12

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,24 +14,24 @@
     "author": "Pon Cheol Ku <dev@bbon.kr> (http://bbon.kr/)",
     "license": "MIT",
     "devDependencies": {
-        "@tailwindcss/typography": "^0.4.1",
-        "@types/react": "^17.0.36",
+        "@tailwindcss/typography": "^0.5.12",
+        "@types/react": "^18.0.12",
         "@types/react-dom": "^17.0.11",
-        "autoprefixer": "^10.4.0",
-        "eslint": "^7.32.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": "^2.2.19",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.3",
         "typescript": "^4.7.2",
         "vercel": "^28.16.12"
     },
     "dependencies": {
         "class-name-prop": "^5.0.0",
         "next": "^12.1.6",
-        "next-i18next": "^9.1.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "next-i18next": "^13.2.1",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
         "react-icons": "^4.4.0"
     }
 }

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>

src/pages/about.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import Layout from '../components/common/Layout';
 import Content from '../components/Content';

src/pages/index.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import Layout from '../components/common/Layout';
 import Content from '../components/Content';

tailwind.config.js

@@ -1,8 +1,12 @@
 const typography = require('@tailwindcss/typography');
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-    purge: [],
-    darkMode: false, // or 'media' or 'class'
+    content: [
+        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
     theme: {
         extend: {},
     },