From ebb97fe063f37bb9ec984885b725ce418b4fc31b Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Fri, 23 Aug 2024 16:20:07 +0900
Subject: [PATCH] feat: Add useMessage hook for localization support

---
 src/components/Playground.jsx |  3 +++
 src/hooks/useMessage.js       | 38 +++++++++++++++++++++++++++++++++++
 src/locales/ja.json           |  3 +++
 src/locales/ko.json           |  3 +++
 src/store/localeAtom.js       |  6 ++++++
 5 files changed, 53 insertions(+)
 create mode 100644 src/hooks/useMessage.js
 create mode 100644 src/locales/ja.json
 create mode 100644 src/locales/ko.json
 create mode 100644 src/store/localeAtom.js

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