Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

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() {
         <div className="test">
           <p className="text-white">Sass 테스트입니다.</p>
         </div>
+        <div>{getMessage('hi')}</div>
       </div>
     </>
   )

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 }
+}

src/locales/ja.json

@@ -0,0 +1,3 @@
+{
+  "hi": "こんにちは"
+}

src/locales/ko.json

@@ -0,0 +1,3 @@
+{
+  "hi": "안녕하세요"
+}

src/store/localeAtom.js

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