feat(frontend): add change language button in login page

frontend/pages/login.js

@@ -3,6 +3,7 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import setLanguage from "next-translate/setLanguage";
 import useTranslation from "next-translate/useTranslation";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -10,6 +11,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Button from "~/components/basic/buttons/Button";
 import Error from "~/components/basic/Error";
 import InputField from "~/components/basic/InputField";
+import ListBox from "~/components/basic/Listbox";
 import attemptLogin from "~/utilities/attemptLogin";
 
 import getWorkspaces from "./api/workspace/getWorkspaces";
@@ -20,7 +22,7 @@ export default function Login() {
   const [errorLogin, setErrorLogin] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
-  const { t } = useTranslation("");
+  const { t, lang } = useTranslation("");
 
   useEffect(async () => {
     let userWorkspace;
@@ -71,7 +73,8 @@ export default function Login() {
           />
         </div>
       </Link>
-      <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
+      <div className="w-full max-w-md mx-auto">
+        <div className="bg-bunker w-full mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
           <p className="text-4xl flex justify-center font-semibold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
             {t("login:login")}
           </p>
@@ -124,6 +127,19 @@ export default function Login() {
           <p className="text-gray-400">I may have <Link href="/login"><u className="text-sky-500 cursor-pointer">forgotten my password.</u></Link></p>
         </div> */}
         </div>
+        <div className="mt-4 flex items-center justify-center w-full">
+          <div className="w-1/2 ">
+            <ListBox
+              selected={lang}
+              onChange={setLanguage}
+              data={["en-US", "ko-KR"]}
+              width="full"
+              text={`${t("common:language")}: `}
+            />
+          </div>
+        </div>
+      </div>
+
       {false && (
         <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
           <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />

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

@@ -31,10 +31,6 @@ export default function PersonalSettings() {
 
   const { t, lang } = useTranslation();
 
-  const changeLanguage = useCallback((code) => {
-    setLanguage(code);
-  }, []);
-
   useEffect(async () => {
     let user = await getUser();
     setPersonalEmail(user.email);