diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index 2467798a..e1043d2b 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -3,6 +3,7 @@
import { Button, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
import { useAxios } from '@/hooks/useAxios'
+import { useMessage } from '@/hooks/useMessage'
// import { get } from '@/lib/Axios'
import QSelect from '@/components/ui/QSelect'
@@ -12,6 +13,7 @@ import styles from './playground.module.css'
export default function Playground() {
const { get } = useAxios()
const testVar = process.env.NEXT_PUBLIC_TEST
+ const { getMessage } = useMessage()
const handleUsers = async () => {
// const users = await get('/api/user/find-all')
@@ -58,6 +60,7 @@ export default function Playground() {
+ {getMessage('hi')}
>
)
diff --git a/src/hooks/useMessage.js b/src/hooks/useMessage.js
new file mode 100644
index 00000000..bc2f7eef
--- /dev/null
+++ b/src/hooks/useMessage.js
@@ -0,0 +1,38 @@
+import { useRecoilValue } from 'recoil'
+import { globalLocaleState } from '@/store/localeAtom'
+
+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 getMessage = (key, args = []) => {
+ 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
+
+ return args.reduce((acc, arg, i) => {
+ return acc.replaceAll(`{${i}}`, arg)
+ }, message)
+ }
+
+ const setSessionMessage = (sessionMessage) => {
+ sessionStorage.setItem(SESSION_STORAGE_MESSAGE_KEY, sessionMessage)
+ }
+
+ const getSessionMessage = () => {
+ return JSON.parse(sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY))
+ }
+
+ return { getMessage }
+}
diff --git a/src/locales/ja.json b/src/locales/ja.json
new file mode 100644
index 00000000..a1725dfd
--- /dev/null
+++ b/src/locales/ja.json
@@ -0,0 +1,3 @@
+{
+ "hi": "こんにちは"
+}
diff --git a/src/locales/ko.json b/src/locales/ko.json
new file mode 100644
index 00000000..282d9722
--- /dev/null
+++ b/src/locales/ko.json
@@ -0,0 +1,3 @@
+{
+ "hi": "안녕하세요"
+}
diff --git a/src/store/localeAtom.js b/src/store/localeAtom.js
new file mode 100644
index 00000000..d82bcf7b
--- /dev/null
+++ b/src/store/localeAtom.js
@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const globalLocaleState = atom({
+ key: 'globalLocaleState',
+ default: 'ko',
+})