mfe

every-jap-dict/App.tsx

@@ -1,5 +1,5 @@
 import { StatusBar } from 'expo-status-bar';
-import { FlatList, Keyboard, Modal, Pressable, StyleSheet, View } from 'react-native';
+import { FlatList, Keyboard, Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
@@ -10,11 +10,15 @@ import { useMemo, useState } from 'react';
 import { jaPack, languages } from './lib/providers/dictionaries';
 import { Input, InputField } from './components/ui/input';
 import { HStack } from './components/ui/hstack';
-import { Button, ButtonText } from './components/ui/button';
+import { Button, ButtonIcon, ButtonText } from './components/ui/button';
 import DictWebView from './components/DictWebView';
 import AdBannerPlaceholder from './components/AdBannerPlaceholder';
 import { Toast, ToastDescription, ToastTitle, useToast } from './components/ui/toast';
 
+import mobileAds from 'react-native-google-mobile-ads';
+import { Icon } from './components/ui/icon';
+import { Bookmark, BookMarked, BookOpen, Search } from 'lucide-react-native';
+
 function MainScreen() {
   const [q, setQ] = useState('');
   const [query, setQuery] = useState('');
@@ -54,6 +58,7 @@ function MainScreen() {
     add(q.trim(), pack.code);
 
     toast.show({
+      id: 'onSave',
       placement: 'top',
       duration: 2000,
       render: () => (
@@ -82,29 +87,17 @@ function MainScreen() {
     <View className="flex-1">
       {/* 상단 검색창, 버튼 */}
       <View className="p-4 gap-3">
-        {/* 액션 버튼 */}
+        {/* 검색창 */}
         <HStack space="md" className="flex-row">
           <Button
-            className="flex-1"
+            className="p-1"
             onPress={() => setWordbookOpen(true)}
             variant="outline"
             action="secondary"
+            accessibilityLabel="단어장 보기"
           >
-            <ButtonText>단어장 보기</ButtonText>
+            <Icon as={BookMarked} />
           </Button>
-          <Button
-            className="flex-1"
-            onPress={onSave}
-            variant="outline"
-            action="secondary"
-            isDisabled={!canSearch}
-          >
-            <ButtonText>단어장 저장</ButtonText>
-          </Button>
-        </HStack>
-
-        {/* 검색창 */}
-        <HStack space="md" className="flex-row">
           <Input className="flex-1">
             <InputField
               placeholder="검색어를 입력하세요"
@@ -115,15 +108,29 @@ function MainScreen() {
               onSubmitEditing={onSearch}
             />
           </Input>
+          <Button
+            className="p-1"
+            onPress={onSave}
+            variant="outline"
+            action="secondary"
+            isDisabled={!canSearch}
+            accessibilityLabel="단어장 저장"
+          >
+            <Icon as={Bookmark} />
+          </Button>
           <Button onPress={onSearch} isDisabled={!canSearch}>
             <ButtonText>검색</ButtonText>
           </Button>
         </HStack>
       </View>
 
-      {/* 커스텀 탭 헤더 */}
+      {/* 커스텀 탭 헤더 (가로스크롤) */}
       <View className="px-4 pb-2">
-        <HStack space="sm" className="flex-row">
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerClassName="gap-1"
+        >
           {providers.map((p) => {
             const selected = activeId ? activeId === p.id : false;
             return (
@@ -138,7 +145,7 @@ function MainScreen() {
               </Button>
             );
           })}
-        </HStack>
+        </ScrollView>
       </View>
 
       {/* 패널: WebView 모두 마운트 후 토글 */}
@@ -186,7 +193,7 @@ function MainScreen() {
               data={items}
               keyExtractor={(x) => x.id}
               renderItem={({ item }) => (
-                <View className="flex-row justify-between py-3 gap-4">
+                <View className="flex-row justify-between py-1">
                   <Pressable
                     onPress={() => onPickWord(item.text)}
                     style={{ flex: 1 }}
@@ -208,6 +215,12 @@ function MainScreen() {
 }
 
 export default function App() {
+  // mobileAds()
+  //   .initialize()
+  //   .then(() => {
+  //     // ready
+  //   });
+
   return (
     <GluestackUIProvider mode="light">
       <SafeAreaProvider>

every-jap-dict/app.json

@@ -24,6 +24,14 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      [
+        "react-native-google-mobile-ads",
+        {
+          "androidAppId": "ca-app-pub-7854988771210967~3806885931"
         }
+      ]
+    ]
   }
 }

every-jap-dict/components/AdBannerPlaceholder.tsx

@@ -1,5 +1,15 @@
 import { View } from 'react-native';
+import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
+
+// const unitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-7854988771210967~3806885931';
 
 export default function AdBannerPlaceholder() {
-  return <View className="w-full h-14" />;
+  return (
+    <View className="w-full h-14" />
+    // <BannerAd
+    //   unitId={unitId}
+    //   size={BannerAdSize.BANNER}
+    //   requestOptions={{ requestNonPersonalizedAdsOnly: true }}
+    // />
+  );
 }

every-jap-dict/lib/providers/dictionaries.ts

@@ -25,6 +25,16 @@ export const jaPack: LanguagePack = {
       label: '다음',
       buildUrl: (q) => `https://dic.daum.net/search.do?q=${encodeURIComponent(q)}&dic=jp`,
     },
+    {
+      id: 'papago-ko-to-ja',
+      label: '파파고(한→일)',
+      buildUrl: (q) => `https://papago.naver.com/?sk=ko&tk=ja&hn=0&st=${encodeURIComponent(q)}`,
+    },
+    {
+      id: 'papago-ja-to-ko',
+      label: '파파고(일→한)',
+      buildUrl: (q) => `https://papago.naver.com/?sk=ja&tk=ko&st=${encodeURIComponent(q)}`,
+    },
     {
       id: 'weblio',
       label: 'Weblio',

every-jap-dict/package-lock.json

@@ -15,17 +15,20 @@
         "@react-native-async-storage/async-storage": "^2.2.0",
         "babel-plugin-module-resolver": "^5.0.2",
         "expo": "~53.0.22",
+        "expo-dev-client": "~5.2.4",
         "expo-status-bar": "~2.2.3",
         "install": "^0.13.0",
+        "lucide-react-native": "^0.543.0",
         "nativewind": "^4.1.23",
         "npm": "^11.6.0",
         "react": "19.0.0",
         "react-aria": "^3.33.0",
         "react-dom": "^19.1.1",
         "react-native": "0.79.6",
+        "react-native-google-mobile-ads": "^15.7.0",
         "react-native-reanimated": "^4.1.0",
         "react-native-safe-area-context": "^5.6.1",
-        "react-native-svg": "^15.2.0",
+        "react-native-svg": "^15.12.0",
         "react-native-webview": "^13.16.0",
         "react-native-worklets": "^0.5.0",
         "react-stately": "^3.39.0",
@@ -2072,21 +2075,6 @@
         "react-native-web": ">=0.19.0"
       }
     },
-    "node_modules/@gluestack-ui/core/node_modules/react-native-svg": {
-      "version": "15.12.1",
-      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.1.tgz",
-      "integrity": "sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==",
-      "license": "MIT",
-      "dependencies": {
-        "css-select": "^5.1.0",
-        "css-tree": "^1.1.3",
-        "warn-once": "0.1.1"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/@gluestack-ui/utils": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@gluestack-ui/utils/-/utils-3.0.0.tgz",
@@ -2177,6 +2165,12 @@
         "tailwindcss": "*"
       }
     },
+    "node_modules/@iabtcf/core": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@iabtcf/core/-/core-1.5.6.tgz",
+      "integrity": "sha512-u2q9thI9vLurYZdGtyJsDYOqoeLc4EgQsYGSc+UVibYII61B/ENJPZS6eFlML1F0hSoTR/goptpo5nGRDkKd2w==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@internationalized/date": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.9.0.tgz",
@@ -4772,6 +4766,22 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/anser": {
       "version": "1.4.10",
       "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.10.tgz",
@@ -5967,6 +5977,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6306,6 +6325,58 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-dev-client": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/expo-dev-client/-/expo-dev-client-5.2.4.tgz",
+      "integrity": "sha512-s/N/nK5LPo0QZJpV4aPijxyrzV4O49S3dN8D2fljqrX2WwFZzWwFO6dX1elPbTmddxumdcpczsdUPY+Ms8g43g==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-dev-launcher": "5.1.16",
+        "expo-dev-menu": "6.1.14",
+        "expo-dev-menu-interface": "1.10.0",
+        "expo-manifests": "~0.16.6",
+        "expo-updates-interface": "~1.1.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-launcher": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/expo-dev-launcher/-/expo-dev-launcher-5.1.16.tgz",
+      "integrity": "sha512-tbCske9pvbozaEblyxoyo/97D6od9Ma4yAuyUnXtRET1CKAPKYS+c4fiZ+I3B4qtpZwN3JNFUjG3oateN0y6Hg==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "8.11.0",
+        "expo-dev-menu": "6.1.14",
+        "expo-manifests": "~0.16.6",
+        "resolve-from": "^5.0.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-menu": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/expo-dev-menu/-/expo-dev-menu-6.1.14.tgz",
+      "integrity": "sha512-yonNMg2GHJZtuisVowdl1iQjZfYP85r1D1IO+ar9D9zlrBPBJhq2XEju52jd1rDmDkmDuEhBSbPNhzIcsBNiPg==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-dev-menu-interface": "1.10.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-menu-interface": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/expo-dev-menu-interface/-/expo-dev-menu-interface-1.10.0.tgz",
+      "integrity": "sha512-NxtM/qot5Rh2cY333iOE87dDg1S8CibW+Wu4WdLua3UMjy81pXYzAGCZGNOeY7k9GpNFqDPNDXWyBSlk9r2pBg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-file-system": {
       "version": "18.1.11",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.1.11.tgz",
@@ -6329,6 +6400,12 @@
         "react": "*"
       }
     },
+    "node_modules/expo-json-utils": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.15.0.tgz",
+      "integrity": "sha512-duRT6oGl80IDzH2LD2yEFWNwGIC2WkozsB6HF3cDYNoNNdUvFk6uN3YiwsTsqVM/D0z6LEAQ01/SlYvN+Fw0JQ==",
+      "license": "MIT"
+    },
     "node_modules/expo-keep-awake": {
       "version": "14.1.4",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-14.1.4.tgz",
@@ -6339,6 +6416,19 @@
         "react": "*"
       }
     },
+    "node_modules/expo-manifests": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.16.6.tgz",
+      "integrity": "sha512-1A+do6/mLUWF9xd3uCrlXr9QFDbjbfqAYmUy8UDLOjof1lMrOhyeC4Yi6WexA/A8dhZEpIxSMCKfn7G4aHAh4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@expo/config": "~11.0.12",
+        "expo-json-utils": "~0.15.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "2.1.14",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.1.14.tgz",
@@ -6380,12 +6470,27 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-updates-interface": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-1.1.0.tgz",
+      "integrity": "sha512-DeB+fRe0hUDPZhpJ4X4bFMAItatFBUPjw/TVSbJsaf3Exeami+2qbbJhWkcTMoYHOB73nOIcaYcWXYJnCJXO0w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/exponential-backoff": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.2.tgz",
       "integrity": "sha512-8QxYTVXUkuy7fIIoitQkPwGonB8F3Zj8eEO8Sqg9Zv/bkI7RJAzowee4gr81Hak/dUTpA2Z7VfQgoijjPNlUZA==",
       "license": "Apache-2.0"
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -7288,6 +7393,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "license": "MIT"
     },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -7729,6 +7840,17 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react-native": {
+      "version": "0.543.0",
+      "resolved": "https://registry.npmjs.org/lucide-react-native/-/lucide-react-native-0.543.0.tgz",
+      "integrity": "sha512-citYLzBOmDy14leIr20cFAZ8hNy23Y3LkE4gXM4/AAF8Cyo4gfOzRZXRJPmpY5yiayrwOOcV1jwID+VA3FI92Q==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-native": "*",
+        "react-native-svg": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -11827,6 +11949,24 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-google-mobile-ads": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/react-native-google-mobile-ads/-/react-native-google-mobile-ads-15.7.0.tgz",
+      "integrity": "sha512-VAskkfiK/ct9jer0XlASclgpiDLYnaLf4RPCcoenneZ3wVGfPwOtQ2T/HVZ6ZNc42BmRIRefqQSCWZPqIA2Drg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iabtcf/core": "^1.5.3",
+        "use-deep-compare-effect": "^1.8.1"
+      },
+      "peerDependencies": {
+        "expo": ">=47.0.0"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-is-edge-to-edge": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",
@@ -11876,13 +12016,14 @@
       }
     },
     "node_modules/react-native-svg": {
-      "version": "15.2.0",
+      "version": "15.12.0",
-      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.0.tgz",
-      "integrity": "sha512-R0E6IhcJfVLsL0lRmnUSm72QO+mTqcAOM5Jb8FVGxJqX3NfJMlMP0YyvcajZiaRR8CqQUpEoqrY25eyZb006kw==",
+      "integrity": "sha512-iE25PxIJ6V0C6krReLquVw6R0QTsRTmEQc4K2Co3P6zsimU/jltcDBKYDy1h/5j9S/fqmMeXnpM+9LEWKJKI6A==",
       "license": "MIT",
       "dependencies": {
         "css-select": "^5.1.0",
-        "css-tree": "^1.1.3"
+        "css-tree": "^1.1.3",
+        "warn-once": "0.1.1"
       },
       "peerDependencies": {
         "react": "*",
@@ -13398,6 +13539,32 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-deep-compare-effect": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz",
+      "integrity": "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "dequal": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",

every-jap-dict/package.json

@@ -16,17 +16,20 @@
     "@react-native-async-storage/async-storage": "^2.2.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "expo": "~53.0.22",
+    "expo-dev-client": "~5.2.4",
     "expo-status-bar": "~2.2.3",
     "install": "^0.13.0",
+    "lucide-react-native": "^0.543.0",
     "nativewind": "^4.1.23",
     "npm": "^11.6.0",
     "react": "19.0.0",
     "react-aria": "^3.33.0",
     "react-dom": "^19.1.1",
     "react-native": "0.79.6",
+    "react-native-google-mobile-ads": "^15.7.0",
     "react-native-reanimated": "^4.1.0",
     "react-native-safe-area-context": "^5.6.1",
-    "react-native-svg": "^15.2.0",
+    "react-native-svg": "^15.12.0",
     "react-native-webview": "^13.16.0",
     "react-native-worklets": "^0.5.0",
     "react-stately": "^3.39.0",