From 867b62a366cc606640510ce66cf797a05d6b86f8 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Wed, 11 Sep 2024 10:57:23 +0900 Subject: [PATCH] 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 | 23 ++++++++++++++++++++++- src/components/Playground.jsx | 2 +- src/hooks/useMessage.js | 28 +++++++++++++++------------- src/locales/ja.json | 1 + src/locales/ko.json | 1 + src/store/localeAtom.js | 5 +++++ yarn.lock | 10 +++++----- 7 files changed, 50 insertions(+), 20 deletions(-) diff --git a/src/app/[locale]/layout.js b/src/app/[locale]/layout.js index 334cfbb3..28847d66 100644 --- a/src/app/[locale]/layout.js +++ b/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 ( <> diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx index da470ab3..f0a71e44 100644 --- a/src/components/Playground.jsx +++ b/src/components/Playground.jsx @@ -119,7 +119,7 @@ export default function Playground() {

Sass 테스트입니다.

-
{getMessage('hi')}
+
test']) }}>

React ColorPicker

diff --git a/src/hooks/useMessage.js b/src/hooks/useMessage.js index bc2f7eef..f336f0b7 100644 --- a/src/hooks/useMessage.js +++ b/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 JA from '@/locales/ja.json' +// import KO from '@/locales/ko.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 (globalLocale === 'ko') { - setSessionMessage(JSON.stringify(KO)) - } else { - setSessionMessage(JSON.stringify(JA)) - } - } + // if (sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY) === null) { + // if (globalLocale === 'ko') { + // setSessionMessage(JSON.stringify(KO)) + // } else { + // setSessionMessage(JSON.stringify(JA)) + // } + // } - const sessionMessage = getSessionMessage() - const message = sessionMessage[key] || key + // const sessionMessage = getSessionMessage() + // const message = sessionMessage[key] || key + const message = appMessageState[key] || key return args.reduce((acc, arg, i) => { return acc.replaceAll(`{${i}}`, arg) diff --git a/src/locales/ja.json b/src/locales/ja.json index 75f49389..acc6bcbb 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -1,5 +1,6 @@ { "hi": "こんにちは", + "welcome": "환영합니다. {0}님", "common.message.no.data": "No data", "common.message.no.dataDown": "ダウンロードするデータがありません", "common.message.noData": "表示するデータがありません", diff --git a/src/locales/ko.json b/src/locales/ko.json index 75ef871f..21b0115e 100644 --- a/src/locales/ko.json +++ b/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", diff --git a/src/store/localeAtom.js b/src/store/localeAtom.js index d82bcf7b..8070d6ac 100644 --- a/src/store/localeAtom.js +++ b/src/store/localeAtom.js @@ -4,3 +4,8 @@ export const globalLocaleState = atom({ key: 'globalLocaleState', default: 'ko', }) + +export const appMessageStore = atom({ + key: 'appMessageState', + default: {}, +}) diff --git a/yarn.lock b/yarn.lock index 62434324..d77f654f 100644 --- a/yarn.lock +++ b/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"