Refactor current locale change

src/app/[locale]/layout.js

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { appMessageStore, globalLocaleState } from '@/store/localeAtom'
+import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 import { LocaleProvider } from './LocaleProvider'
 import { useCurrentLocale } from '@/locales/client'
 import ServerError from './error'
@@ -14,21 +14,21 @@ import JA from '@/locales/ja.json'
 
 export default function LocaleLayout({ children }) {
   const locale = useCurrentLocale()
-  const globalLocale = useRecoilValue(globalLocaleState)
+  const globalLocale = useRecoilValue(globalLocaleStore)
   const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
 
   useEffect(() => {
     console.log(globalLocale)
     console.log(sessionStorage.getItem('hi'))
     console.log(Object.keys(appMessageState).length)
-    if (Object.keys(appMessageState).length === 0) {
+    // if (Object.keys(appMessageState).length === 0) {
-      if (globalLocale === 'ko') {
+    if (globalLocale === 'ko') {
-        setAppMessageState(KO)
+      setAppMessageState(KO)
-      } else {
+    } else {
-        setAppMessageState(JA)
+      setAppMessageState(JA)
-      }
     }
-  }, [])
+    // }
+  }, [globalLocale])
 
   return (
     <>

src/components/auth/Login.jsx

@@ -5,18 +5,33 @@ import { setSession } from '@/lib/authActions'
 import { redirect } from 'next/navigation'
 import { useMessage } from '@/hooks/useMessage'
 
-import { Button } from '@nextui-org/react'
+import { Button, Switch } from '@nextui-org/react'
 import { useRecoilState } from 'recoil'
+import { globalLocaleStore } from '@/store/localeAtom'
 import { modalContent, modalState } from '@/store/modalAtom'
+import { useState } from 'react'
 
 export default function Login(props) {
   const { currentLocale } = props
   const { getMessage } = useMessage()
+  const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore)
+  const [isSelected, setIsSelected] = useState(globalLocaleState === 'ko' ? true : false)
+
+  const handleSelected = () => {
+    if (isSelected) {
+      setGlbalLocaleState('ja')
+    } else {
+      setGlbalLocaleState('ko')
+    }
+
+    setIsSelected(!isSelected)
+  }
 
   // login process
   const loginProcess = async (formData) => {
     const param = {
-      langCd: currentLocale,
+      // langCd: currentLocale
+      langCd: globalLocaleState,
       lastEditUser: formData.get('id'),
       loginId: formData.get('id'),
       pwd: formData.get('password'),
@@ -174,6 +189,12 @@ export default function Login(props) {
               {getMessage('login.init_password.btn')}
             </Button>
           </p>
+
+          <div className="flex align-center mt-2">
+            <Switch isSelected={isSelected} onValueChange={handleSelected}>
+              {isSelected ? 'Current Locale: KO' : 'Current Locale: JA'}
+            </Switch>
+          </div>
         </div>
       </div>
     </div>

src/locales/ja.json

@@ -95,7 +95,7 @@
   "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
 
   "login": "로그인",
-  "login.init_password.btn": "비밀번호 초기화",
+  "login.init_password.btn": "비밀번호 초기화 ja",
   "login.init_password.title": "비밀번호 초기화",
   "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.",
   "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.",

src/store/localeAtom.js

@@ -1,6 +1,6 @@
 import { atom } from 'recoil'
 
-export const globalLocaleState = atom({
+export const globalLocaleStore = atom({
   key: 'globalLocaleState',
   default: 'ko',
 })