feat: i18next 설정 적용

devears-front/package.json

@@ -17,9 +17,11 @@
     "axios": "^0.21.1",
     "connected-react-router": "^6.8.0",
     "http-proxy-middleware": "^1.0.6",
+    "i18next": "^19.8.7",
     "nodemon": "^2.0.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-i18next": "^11.8.6",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
@@ -60,9 +62,9 @@
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-jsx": "^2.2.8",
     "customize-cra": "^1.0.0",
+    "json-server": "^0.16.3",
     "node-sass": "^5.0.0",
     "react-app-rewired": "^2.1.8",
-    "styled-jsx-plugin-sass": "^1.0.0",
-    "json-server": "^0.16.3"
+    "styled-jsx-plugin-sass": "^1.0.0"
   }
 }

devears-front/src/App.tsx

@@ -1,24 +1,29 @@
 import React from 'react';
-import {Switch} from "react-router-dom";
+import {Switch} from 'react-router-dom';
 import {ConnectedRouter} from "connected-react-router";
 import css from 'styled-jsx/css';
 import {History} from "history";
 
 import DefaultLayout from "./layouts/DefaultLayout";
-import Main from "./views/Main";
+import Main from './views/Main';
+
+import i18n from './config/i18n';
+import { I18nextProvider } from 'react-i18next';
 
 interface AppProps {
   history: History
 }
 
 const App: React.FC<AppProps> = ({history}) => {
   return (
+    <I18nextProvider i18n={i18n}>
     <ConnectedRouter history={history}>
       <Switch>
         <DefaultLayout exact path="/" component={Main}/>
       </Switch>
       <style jsx global>{globalStyles}</style>
     </ConnectedRouter>
+    </I18nextProvider>
   );
 }
 
@@ -27,41 +32,41 @@ const globalStyles = css.global`
     margin: 0;
     padding: 0;
   }
-  
+
   html {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;    
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   }
-  
+
   body {
     font-family: inherit;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background: #f5f5f5;
     font-size: 15px;
   }
-  
+
   input, textarea, button {
     font-family: inherit;
   }
-  
+
   strong, h1, h2, h3, h4, h5, h6 {
     font-weight: 600;
   }
-  
+
   ul, li {
     list-style: none;
   }
-  
+
   a {
     text-decoration: none;
     color: inherit;
   }
-  
+
   code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
   }
-  
+
   .container {
     width: 1200px;
     margin: 0 auto;

devears-front/src/config/i18n.js

@@ -0,0 +1,29 @@
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { ko } from './locales';
+
+const KO = 'ko';
+
+const ns = [ 'common', 'user', 'study' ];
+
+i18next
+  .use(initReactI18next)
+  // https://www.i18next.com/overview/configuration-options
+  .init({
+    whitelist: [ KO ],
+    fallbackLng: KO ,
+    load: 'languageOnly',
+    resources: { ko },
+    ns,
+    defaultNS: 'common',
+    react: {
+      wait: true,
+      bindI18n: 'languageChanged loaded',
+      useSuspense: false,
+      nsMode: "default",
+      transSupportBasicHtmlNodes: true,
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i']
+    }
+  });
+
+export default i18next;

devears-front/src/config/locales/index.js

@@ -0,0 +1,3 @@
+import ko from './ko';
+
+export { ko };

devears-front/src/config/locales/ko/common.json

@@ -0,0 +1,3 @@
+{
+  "group": "그룹"
+}

devears-front/src/config/locales/ko/index.js

@@ -0,0 +1,7 @@
+import common from './common.json';
+import user from './user.json';
+import study from './study.json';
+
+const ko = { common, user, study };
+
+export default ko;

devears-front/src/config/locales/ko/study.json

@@ -0,0 +1,7 @@
+{
+  "study": "스터디",
+  "participating": "참여 중인",
+  "being_recruited": "모집 중인",
+  "in_progress": "진행 중인",
+  "terminated": "종료 된"
+}

devears-front/src/config/locales/ko/user.json

@@ -0,0 +1,4 @@
+{
+  "login": "로그인",
+  "logout": "로그아웃"
+}

devears-front/src/layouts/default/Header.tsx

@@ -2,8 +2,11 @@ import React, {useCallback} from "react";
 import {Link} from "react-router-dom";
 import logo from "assets/image/logo.svg";
 import css from "styled-jsx/css";
+import { useTranslation } from "react-i18next";
 
 const Header: React.FC = () => {
+  const { t } = useTranslation();
+
   const handleLogin = useCallback((e) => {
     e.preventDefault();
   }, []);
@@ -17,7 +20,7 @@ const Header: React.FC = () => {
             <ul>
               <li>
                 <a href="#!" onClick={handleLogin}>
-                  로그인
+                  { t('user:login') }
                 </a>
               </li>
             </ul>
@@ -74,4 +77,4 @@ const headerStyles = css`
   }
 `;
 
-export default React.memo(Header);
+export default React.memo(Header);

devears-front/src/views/Main.tsx

@@ -5,8 +5,10 @@ import css from "styled-jsx/css";
 import selectors from "../data/rootSelectors";
 import actions from "../data/rootActions";
 import CrewCard from "../components/card/CrewCard";
+import { useTranslation } from "react-i18next";
 
 const Main: React.FC = () => {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const crews = useSelector(selectors.crew.getCrews);
 
@@ -18,7 +20,7 @@ const Main: React.FC = () => {
     <main>
       <div className="container">
         <section>
-          <h2 className="title">스터디 <strong>크루</strong></h2>
+          <h2 className="title">{ t('study:study') } <strong>{ t('common:group') }</strong></h2>
           <div className="articles">
             {crews.map((crew, key) => <CrewCard key={key} {...crew} />)}
           </div>

devears-front/yarn.lock

@@ -1012,6 +1012,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.3.1":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.13.tgz#0a21452352b02542db0ffb928ac2d3ca7cb6d66d"
+  integrity sha512-8+3UMPBrjFa/6TtKi/7sehPKqfAm4g6K+YQjyyFOLUTxzOngcRZTlAVY8sc2CORJYqdHQY8gRPHmn+qo15rCBw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.3.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -6068,6 +6075,13 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-parse-stringify2@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 html-webpack-plugin@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c"
@@ -6191,6 +6205,13 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+i18next@^19.8.7:
+  version "19.8.7"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.8.7.tgz#ef023e353974d1b1453e8b6331bd9fb7cba427df"
+  integrity sha512-ezo1gb7QO4OQ5gQCdZMUxopwQSoqpRp6whdEjm1grxMSmkGj1NJ+kYS0UQd4NnpPIVqsgqTQ2L2eqSQYQ+U3Fw==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -10456,6 +10477,14 @@ react-error-overlay@^6.0.8:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
 
+react-i18next@^11.8.6:
+  version "11.8.6"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.8.6.tgz#f9a09964fb38407247ae9542fe51741b6fb93d1a"
+  integrity sha512-Nr4Fq7BvzDLJQmaDyJRkPPINgMW1Y1qeT4STBoY/ePGmYlCZGShTYqqyBm0ly6M8dV1X0twt7M5dfmDzfi9yGQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    html-parse-stringify2 "2.0.1"
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -12848,6 +12877,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"