feat: setup localizations

crossplatformkorea · Jul 27, 2024 · 77718e7 · 77718e7
1 parent 5d11ded
commit 77718e7
Show file tree

Hide file tree

Showing 15 changed files with 198 additions and 122 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,11 +2,28 @@ const path = require('path');
 
 module.exports = {
   root: true,
-  extends: [
-    '@dooboo/eslint-config-react-native',
-  ],
+  extends: ['expo', 'prettier', 'plugin:i18n-json/recommended'],
   rules: {
     'eslint-comments/no-unlimited-disable': 0,
     'eslint-comments/no-unused-disable': 0,
+    'i18n-json/identical-keys': [
+      2,
+      {
+        filePath: path.resolve('./assets/langs/ko.json'),
+      },
+    ],
+    'i18n-json/sorted-keys': [
+      2,
+      {
+        order: 'asc',
+        indentSpaces: 2,
+      },
+    ],
+    'i18n-json/valid-message-syntax': [
+      2,
+      {
+        syntax: path.resolve('./custom-syntax-validator.ts'),
+      },
+    ],
   },
 };
diff --git a/app/(app)/(tabs)/_layout.tsx b/app/(app)/(tabs)/_layout.tsx
@@ -4,6 +4,7 @@ import {Link, Redirect, Tabs, useRouter} from 'expo-router';
 import {useRecoilValue} from 'recoil';
 
 import {authRecoilState} from '../../../src/recoil/atoms';
+import {t} from '../../../src/STRINGS';
 
 function SettingsMenu(): JSX.Element {
   const {theme} = useDooboo();
@@ -49,7 +50,7 @@ export default function TabLayout(): JSX.Element {
       <Tabs.Screen
         name="index"
         options={{
-          title: '커뮤니티',
+          title: t('common.community'),
           tabBarIcon: ({color}) => (
             <Icon color={color} name="Article" size={24} />
           ),
@@ -59,7 +60,7 @@ export default function TabLayout(): JSX.Element {
       <Tabs.Screen
         name="profile"
         options={{
-          title: '프로필',
+          title: t('common.profile'),
           tabBarIcon: ({color}) => <Icon color={color} name="User" size={24} />,
           headerRight: () => <View>{SettingsMenu()}</View>,
         }}

diff --git a/app/(app)/(tabs)/index.tsx b/app/(app)/(tabs)/index.tsx
@@ -1,7 +1,8 @@
 import styled, {css} from '@emotion/native';
 import {Fab, Typography} from 'dooboo-ui';
 import StatusBarBrightness from 'dooboo-ui/uis/StatusbarBrightness';
-import {Stack} from 'expo-router';
+
+import {t} from '../../../src/STRINGS';
 
 const Container = styled.View`
   flex: 1;
@@ -13,7 +14,7 @@ export default function Community(): JSX.Element {
   return (
     <Container>
       <StatusBarBrightness />
-      <Typography.Heading3>커뮤니티</Typography.Heading3>
+      <Typography.Heading3>{t('common.community')}</Typography.Heading3>
       <Fab
         animationDuration={300}
         fabIcon="Plus"

diff --git a/app/(app)/(tabs)/profile.tsx b/app/(app)/(tabs)/profile.tsx
@@ -5,15 +5,16 @@ import {Stack} from 'expo-router';
 import {useRecoilValue} from 'recoil';
 
 import {authRecoilState} from '../../../src/recoil/atoms';
+import {t} from '../../../src/STRINGS';
 import {supabase} from '../../../src/supabase';
 
 export default function Profile(): JSX.Element {
   const [loading, setLoading] = useState(true);
 
   return (
     <View>
-      <Stack.Screen options={{title: '프로필'}} />
-      <Typography.Heading3>프로필</Typography.Heading3>
+      <Stack.Screen options={{title: t('common.profile')}} />
+      <Typography.Heading3>{t('common.profile')}</Typography.Heading3>
     </View>
   );
 }
diff --git a/app/(app)/details.tsx b/app/(app)/details.tsx
diff --git a/app/(app)/settings/index.tsx b/app/(app)/settings/index.tsx
@@ -11,11 +11,9 @@ import {Stack, useRouter} from 'expo-router';
 import * as SystemUI from 'expo-system-ui';
 import {useRecoilValue} from 'recoil';
 
-import useAppState from '../../../src/hooks/useAppState';
 import {authRecoilState} from '../../../src/recoil/atoms';
 import {t} from '../../../src/STRINGS';
 import CustomLoadingIndicator from '../../../src/uis/CustomLoadingIndicator';
-import {openURL} from '../../../src/utils/common';
 import {AsyncStorageKey} from '../../../src/utils/constants';
 
 const Container = styled.View`
@@ -80,7 +78,6 @@ export default function Settings(): JSX.Element {
   const menus = useMemo<Menu[]>(
     () => [
       {
-        // 로그인 정보
         onPress: () => push('/settings/login-info'),
         startElement: (
           <Icon
@@ -100,10 +97,9 @@ export default function Settings(): JSX.Element {
             `}
           />
         ),
-        title: '로그인 정보',
+        title: t('settings.loginInfo'),
       },
       {
-        // 프로필 수정
         onPress: () => push('/settings/profile-update'),
         startElement: (
           <Icon
@@ -123,10 +119,9 @@ export default function Settings(): JSX.Element {
             `}
           />
         ),
-        title: '프로필 수정',
+        title: t('settings.updateProfile'),
       },
       {
-        // 차단한 사용자
         onPress: () => push('/settings/block-users'),
         startElement: (
           <Icon
@@ -146,10 +141,9 @@ export default function Settings(): JSX.Element {
             `}
           />
         ),
-        title: '차단한 사용자',
+        title: t('settings.bannedUsers'),
       },
       {
-        // 다크 모드
         startElement: (
           <Icon
             name="StarAndCrescent"
@@ -184,11 +178,10 @@ export default function Settings(): JSX.Element {
             ]}
           />
         ),
-        title: '다크 모드',
+        title: t('settings.darkMode'),
         onPress: undefined,
       },
       {
-        // 노티피케이션
         startElement: (
           <Icon
             name="BellRinging"
@@ -210,11 +203,10 @@ export default function Settings(): JSX.Element {
             }}
           />
         ),
-        title: '알림 설정',
+        title: t('settings.notificationSettings'),
         onPress: undefined,
       },
       {
-        // 약관
         onPress: () => push('/termsofservice'),
         startElement: (
           <Icon
@@ -234,7 +226,7 @@ export default function Settings(): JSX.Element {
             `}
           />
         ),
-        title: '서비스 이용약관',
+        title: t('settings.termsOfService'),
       },
     ],
     [hasNotificationPermission, themeType, changeThemeType, push],
@@ -243,15 +235,15 @@ export default function Settings(): JSX.Element {
   if (!authId) {
     return (
       <>
-        <Stack.Screen options={{title: '설정'}} />
+        <Stack.Screen options={{title: t('settings.title')}} />
         <CustomLoadingIndicator />
       </>
     );
   }
 
   return (
     <Container>
-      <Stack.Screen options={{title: '설정', headerShown: true}} />
+      <Stack.Screen options={{title: t('settings.title'), headerShown: true}} />
       <ScrollView
         bounces={false}
         showsVerticalScrollIndicator={Platform.OS === 'web'}

diff --git a/app/(app)/settings/login-info.tsx b/app/(app)/settings/login-info.tsx
@@ -8,6 +8,7 @@ import {Stack, useRouter} from 'expo-router';
 import {useRecoilValue} from 'recoil';
 
 import {authRecoilState} from '../../../src/recoil/atoms';
+import {t} from '../../../src/STRINGS';
 import {supabase} from '../../../src/supabase';
 import type {User} from '../../../src/types/supabase';
 import CustomLoadingIndicator from '../../../src/uis/CustomLoadingIndicator';
@@ -65,14 +66,16 @@ function SocialProvider({provider, email}: ProviderType): JSX.Element {
             margin-bottom: 6px;
           `}
         >
-          {iconName === 'Envelope'
-            ? '이메일'
-            : iconName === 'AppleLogo'
-              ? '애플'
-              : iconName === 'GoogleLogo'
-                ? '구글'
-                : '깃허브'}
-          로 로그인됨
+          {t('loginInfo.loggedInWith', {
+            provider:
+              iconName === 'Envelope'
+                ? 'Email'
+                : iconName === 'AppleLogo'
+                  ? 'Apple'
+                  : iconName === 'GoogleLogo'
+                    ? 'Google'
+                    : 'Github',
+          })}
         </Typography.Body3>
         <Typography.Body3
           style={css`
@@ -108,8 +111,8 @@ export default function LoginInfo({}: Props): JSX.Element {
     }
 
     const confirmed = await showConfirm({
-      title: '탈퇴하기',
-      description: '정말 탈퇴하시겠습니까? 탈퇴하면 다시 로그인할 수 없습니다.',
+      title: t('loginInfo.cancelAccount'),
+      description: t('loginInfo.cancelAccountDescription'),
     });
 
     if (!confirmed) {
@@ -128,23 +131,24 @@ export default function LoginInfo({}: Props): JSX.Element {
   if (!auth.user) {
     return (
       <>
-        <Stack.Screen options={{title: '로그인 정보'}} />
+        <Stack.Screen options={{title: t('loginInfo.title')}} />
         <CustomLoadingIndicator />
       </>
     );
   }
 
   return (
     <Content>
-      <Stack.Screen options={{title: '로그인 정보'}} />
+      <Stack.Screen options={{title: t('loginInfo.title')}} />
       <ScrollView bounces={false}>
         <View
           style={css`
             gap: 12px;
           `}
         >
-          <Typography.Heading5>로그인 수단</Typography.Heading5>
-
+          <Typography.Heading5>
+            {t('loginInfo.loginMethod')}
+          </Typography.Heading5>
           <SocialProvider
             email={auth.user?.email ?? ''}
             provider={auth.user?.provider ?? 'email'}
@@ -161,7 +165,7 @@ export default function LoginInfo({}: Props): JSX.Element {
                 font-family: Pretendard-Bold;
               `,
             }}
-            text="로그아웃"
+            text={t('loginInfo.logout')}
             touchableHighlightProps={{
               underlayColor: theme.text.contrast,
             }}
@@ -173,8 +177,8 @@ export default function LoginInfo({}: Props): JSX.Element {
         color="danger"
         onPress={() => {
           alertDialog.open({
-            title: '회원 탈퇴',
-            body: '탈퇴 시 앱 내 모든 데이터가 삭제됩니다. 정말 탈퇴 하시겠습니까?',
+            title: t('loginInfo.cancelAccount'),
+            body: t('loginInfo.cancelAccountDescription'),
             closeOnTouchOutside: false,
             actions: [
               <Button
@@ -186,7 +190,7 @@ export default function LoginInfo({}: Props): JSX.Element {
                     height: 48px;
                   `,
                 }}
-                text="취소"
+                text={t('common.cancel')}
               />,
               <Button
                 color="danger"
@@ -198,7 +202,7 @@ export default function LoginInfo({}: Props): JSX.Element {
                     height: 48px;
                   `,
                 }}
-                text="탈퇴하기"
+                text={t('common.confirm')}
               />,
             ],
           });