Refactor locale layout and message handling

- Refactor the locale layout component to use the useEffect hook and Recoil state management for app messages.
- Update the getMessage function in the useMessage hook to retrieve messages from the appMessageStore Recoil atom.
- Remove unused imports and commented out code.

src/app/[locale]/layout.js

@@ -1,13 +1,34 @@
 'use client'
 
-import { useCurrentLocale } from '@/locales/client'
+import { useEffect } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { appMessageStore, globalLocaleState } from '@/store/localeAtom'
 import { LocaleProvider } from './LocaleProvider'
+import { useCurrentLocale } from '@/locales/client'
 import ServerError from './error'
 import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
 import '@/styles/common.scss'
 
+import KO from '@/locales/ko.json'
+import JA from '@/locales/ja.json'
+
 export default function LocaleLayout({ children }) {
   const locale = useCurrentLocale()
+  const globalLocale = useRecoilValue(globalLocaleState)
+  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 (globalLocale === 'ko') {
+        setAppMessageState(KO)
+      } else {
+        setAppMessageState(JA)
+      }
+    }
+  }, [])
 
   return (
     <>

src/components/Playground.jsx

@@ -119,7 +119,7 @@ export default function Playground() {
         <div className="test">
           <p className="text-white">Sass 테스트입니다.</p>
         </div>
-        <div>{getMessage('hi')}</div>
+        <div dangerouslySetInnerHTML={{ __html: getMessage('welcome', ['<span style="color: red">test</span>']) }}></div>
         <div>
           <h1>React ColorPicker</h1>
           <ColorPicker color={color} setColor={setColor} />

src/hooks/useMessage.js

@@ -1,25 +1,27 @@
 import { useRecoilValue } from 'recoil'
-import { globalLocaleState } from '@/store/localeAtom'
+import { appMessageStore } from '@/store/localeAtom'
 
-import KO from '@/locales/ko.json'
+// import KO from '@/locales/ko.json'
-import JA from '@/locales/ja.json'
+// import JA from '@/locales/ja.json'
 
 const SESSION_STORAGE_MESSAGE_KEY = 'QCAST_MESSAGE_STORAGE'
 
 export const useMessage = () => {
-  const globalLocale = useRecoilValue(globalLocaleState)
+  // const globalLocale = useRecoilValue(globalLocaleState)
+  const appMessageState = useRecoilValue(appMessageStore)
 
   const getMessage = (key, args = []) => {
-    if (sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY) === null) {
+    // if (sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY) === null) {
-      if (globalLocale === 'ko') {
+    //   if (globalLocale === 'ko') {
-        setSessionMessage(JSON.stringify(KO))
+    //     setSessionMessage(JSON.stringify(KO))
-      } else {
+    //   } else {
-        setSessionMessage(JSON.stringify(JA))
+    //     setSessionMessage(JSON.stringify(JA))
-      }
+    //   }
-    }
+    // }
 
-    const sessionMessage = getSessionMessage()
+    // const sessionMessage = getSessionMessage()
-    const message = sessionMessage[key] || key
+    // const message = sessionMessage[key] || key
+    const message = appMessageState[key] || key
 
     return args.reduce((acc, arg, i) => {
       return acc.replaceAll(`{${i}}`, arg)

src/locales/ja.json

@@ -1,5 +1,6 @@
 {
   "hi": "こんにちは",
+  "welcome": "환영합니다. {0}님",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
   "common.message.noData": "表示するデータがありません",

src/locales/ko.json

@@ -1,5 +1,6 @@
 {
   "hi": "안녕하세요",
+  "welcome": "환영합니다. {0}님",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
   "common.message.noData": "No data to display",

src/store/localeAtom.js

@@ -4,3 +4,8 @@ export const globalLocaleState = atom({
   key: 'globalLocaleState',
   default: 'ko',
 })
+
+export const appMessageStore = atom({
+  key: 'appMessageState',
+  default: {},
+})

yarn.lock

@@ -5515,11 +5515,6 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
-react-hook-form@^7.53.0:
-  version "7.53.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
-  integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
-
 react-draggable@^4.4.6:
   version "4.4.6"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
@@ -5528,6 +5523,11 @@ react-draggable@^4.4.6:
     clsx "^1.1.1"
     prop-types "^15.8.1"
 
+react-hook-form@^7.53.0:
+  version "7.53.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
+  integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
+
 react-icons@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"