feat: 번역 작업 마이페이지 추가

.expo/types/router.d.ts

@@ -7,7 +7,7 @@ declare module "expo-router" {
   export * from 'expo-router/build';
 
   // prettier-ignore
-  type StaticRoutes = `/` | `/_layout` | `/answer` | `/create` | `/createHotelAgree` | `/createHotelName` | `/createHotelSelect` | `/feekCharge` | `/gingercard` | `/letter` | `/letterCompleted` | `/login` | `/mailbox` | `/modal` | `/navigation/` | `/push` | `/tabs/hotels` | `/tabs/my` | `/tabs/village`;
+  type StaticRoutes = `/` | `/answer` | `/create` | `/createHotelAgree` | `/createHotelName` | `/createHotelSelect` | `/feekCharge` | `/gingercard` | `/lang/i18n` | `/letter` | `/letterCompleted` | `/login` | `/mailbox` | `/modal` | `/navigation/` | `/push` | `/tabs/hotels` | `/tabs/my` | `/tabs/village` | `/_layout`;
   // prettier-ignore
   type DynamicRoutes<T extends string> = `/${CatchAllRoutePart<T>}`;
   // prettier-ignore

app/lang/i18n.ts

@@ -0,0 +1,61 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+const resource = {
+    en: {
+        translation: {
+            // 마이페이지
+            "My Membership": "My Membership",
+            "My Code": "My Code",
+            "My Key": "My Key",
+            "My Peek": "My Peek",
+            "HotelModify": "Modifying My Hotel",
+            "Membership": "Membership",
+            "Terms of Use": "Terms of Use",
+            "Privacy Policy": "Privacy Policy",
+            "CS Center": "CS Center",
+            "Team Ginger": "Team Ginger",
+            "gingerhotel_welcome": "gingerhotel_welcome",
+            "Busniess": "Business Registration Number: 202-58-00723 CEO: Minji Kang",
+            "Address": "Address: 16, Seodaemun-ro 7-gil, Jung-gu, Seoul, Room 508-3",
+            "Email": "Email: teamgingerkr@gmail.com",
+        }
+    },
+    ko: {
+        translation: {
+            // 마이페이지
+            "My Membership": "내 멤버쉽",
+            "My Code": "내 코드",
+            "My Key": "내 열쇠",
+            "My Peek": "내 엿보기",
+            "HotelModify": "호텔수정",
+            "Membership": "멤버쉽",
+            "Terms of Use": "이용약관",
+            "Privacy Policy": "개인정보 처리방침",
+            "CS Center": "고객센터",
+            "Team Ginger": "팀진저",
+            "gingerhotel_welcome": "진저호텔",
+            "Busniess": "사업자등록번호 : 202-58-00723 대표이사 강민지",
+            "Address": "주소 : 서울특별시 중구 서대문로7길 16 508-3호",
+            "Email": "이메일 : teamgingerkr@gmail.com",
+        }
+    }
+}
+
+i18n
+    .use(initReactI18next)
+    .init({
+        resources:resource,
+        // 초기 설정 언어
+        lng: "ko",
+        fallbackLng: "ko",
+        debug: true,
+        defaultNS: "translations",
+        ns: "translations",
+        keySeparator: false,
+        interpolation: {
+            escapeValue: false
+        }
+    })
+
+export default i18n;

app/navigation/index.tsx

@@ -27,7 +27,7 @@ import Header from "../../components/appHeader";
 import { SvgImg } from "../../components/svgImg";
 import { MonoText } from "../../components/styledText";
 import FeekCharge from "../feekCharge";
-
+import "../lang/i18n" // 다국어 파일
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 

app/tabs/my.tsx

@@ -13,9 +13,13 @@ import { WithLocalSvg } from "react-native-svg";
 import axios from "axios";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
+import { useTranslation } from "react-i18next";
+
 const keySvg = require("../../assets/icon/i_key.svg");
 const glassesSvg = require("../../assets/icon/i_glasses.svg");
 
+const { t, i18n } = useTranslation()
+
 interface User {
   nickname: string;
   code: string;
@@ -118,7 +122,7 @@ export default function TabThreeScreen({ navigation }: any) {
                     fontFamily: "NanumSquareNeo-Variable",
                   }}
                 >
-                  내 멤버쉽
+                  {t('My Membership')}
                 </Text>
                 <Text
                   style={{
@@ -145,7 +149,7 @@ export default function TabThreeScreen({ navigation }: any) {
                       fontFamily: "NanumSquareNeo-Variable",
                     }}
                   >
-                    내 코드 <FontAwesome5 name="copy" />
+                    {t('My Code')} <FontAwesome5 name="copy" />
                   </Text>
                   <Text
                     style={{

package.json

@@ -21,6 +21,8 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/stack": "^6.3.18",
     "@react-oauth/google": "^0.11.1",
+    "@types/i18next": "^13.0.0",
+    "@types/react-i18next": "^8.1.0",
     "axios": "^1.6.0",
     "expo": "~49.0.11",
     "expo-font": "~11.4.0",
@@ -30,10 +32,12 @@
     "expo-status-bar": "~1.6.0",
     "expo-system-ui": "~2.4.0",
     "expo-web-browser": "~12.3.2",
+    "i18next": "^23.7.6",
     "jwt-decode": "^3.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.48.2",
+    "react-i18next": "^13.5.0",
     "react-native": "0.72.6",
     "react-native-btr": "^2.2.0",
     "react-native-eject": "^0.2.0",
@@ -47,9 +51,9 @@
     "react-native-web": "~0.19.6",
     "react-navigation": "^5.0.0",
     "react-navigation-helpers": "^2.3.1",
+    "recoil": "^0.7.7",
     "styled-components": "^6.1.1",
-    "typeface-nanum-square-neo": "^0.0.6",
-    "recoil": "^0.7.7"
+    "typeface-nanum-square-neo": "^0.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",