translate(frontend): update namespace names, move translate keys, translate some keys into korean

frontend/pages/settings/billing/[id].js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Head from "next/head";
+import useTranslation from "next-translate/useTranslation";
 
 import Plan from "~/components/billing/Plan";
 import NavHeader from "~/components/navigation/NavHeader";
@@ -12,36 +13,38 @@ export default function SettingsBilling() {
   let [currentPlan, setCurrentPlan] = useState("");
   let [numUsers, setNumUsers] = useState("");
 
+  const { t } = useTranslation();
+
   const plans = [
     {
       key: 1,
-      name: "Starter",
-      price: "Free",
-      priceExplanation: "up to 5 team members",
-      text: "Manage any project with 5 members for free!",
-      subtext: "$5 per member/month afterwards.",
-      buttonTextMain: "Downgrade",
-      buttonTextSecondary: "Learn More",
+      name: t("common:starter"),
+      price: t("common:free"),
+      priceExplanation: t("billing:starter.price-explanation"),
+      text: t("billing:starter.text"),
+      subtext: t("billing:starter.subtext"),
+      buttonTextMain: t("common:downgrade"),
+      buttonTextSecondary: t("common:learn-more"),
       current: currentPlan == STRIPE_PRODUCT_STARTER,
     },
     {
       key: 2,
-      name: "Professional",
+      name: t("common:professional"),
       price: "$9",
-      priceExplanation: "/member/month",
-      subtext: "Includes unlimited projects & members.",
-      text: "Keep up with key management as you grow.",
-      buttonTextMain: "Upgrade",
-      buttonTextSecondary: "Learn More",
+      priceExplanation: t("billing:professional.price-explanation"),
+      subtext: t("billing:professional.subtext"),
+      text: t("billing:professional.text"),
+      buttonTextMain: t("common:upgrade"),
+      buttonTextSecondary: t("common:learn-more"),
       current: currentPlan == STRIPE_PRODUCT_PRO,
     },
     {
       key: 3,
-      name: "Enterprise",
-      price: "Custom Pricing",
-      text: "More control for advanced organizations.",
-      buttonTextMain: "Schedule a Demo",
-      buttonTextSecondary: "Learn More",
+      name: t("common:enterprise"),
+      price: t("common:custom-pricing"),
+      text: t("billing:enterprise.text"),
+      buttonTextMain: t("common:schedule-demo"),
+      buttonTextSecondary: t("common:learn-more"),
       current: false,
     },
   ];
@@ -61,30 +64,32 @@ export default function SettingsBilling() {
   return (
     <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
       <Head>
-        <title>Settings - Billing</title>
+        <title>{t("common:head-title", { title: t("billing:title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
       <div className="flex flex-row">
         <div className="w-full max-h-screen pb-2 overflow-y-auto">
-          <NavHeader pageName="Usage & Billing" />
+          <NavHeader pageName={t("billing:title")} />
           <div className="flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl">
             <div className="flex flex-col justify-start items-start text-3xl">
               <p className="font-semibold mr-4 text-gray-200">
-                Usage & Billing
+                {t("billing:title")}
               </p>
               <p className="font-normal mr-4 text-gray-400 text-base">
-                View and manage your {"organization's"} subscription here.
+                {t("billing:description")}
               </p>
             </div>
           </div>
           <div className="flex flex-col ml-6 text-mineshaft-50">
-            <p className="text-xl font-semibold">Subscription</p>
+            <p className="text-xl font-semibold">{t("billing:subscription")}</p>
             <div className="flex flex-row mt-4 overflow-x-auto">
               {plans.map((plan) => (
                 <Plan key={plan.name} plan={plan} />
               ))}
             </div>
-            <p className="text-xl font-bold mt-12">Current Usage</p>
+            <p className="text-xl font-bold mt-12">
+              {t("billing:current-usage")}
+            </p>
             <div className="flex flex-row">
               <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
                 <p className="text-6xl font-bold">{numUsers}</p>