feat(xbridge-test): xbridge test service 추가 (#21)

* feat(xbridge-test): xbridge test service 추가

* feat(xbridge): docker file 변경

services/xbridge-test/Dockerfile

@@ -0,0 +1,37 @@
+FROM node:16-alpine AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+ADD ./services/xbridge-test/package.json ./
+ADD yarn.lock ./
+RUN yarn install
+
+FROM node:16-alpine AS builder
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY ./services/xbridge-test/. .
+
+RUN yarn build
+
+FROM node:16-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/package.json ./package.json
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+ENTRYPOINT ["node", "server.js"]

services/xbridge-test/README.md

@@ -0,0 +1,2 @@
+# @service/xbridge-test
+bridge test를 위한 웹뷰

services/xbridge-test/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

services/xbridge-test/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+    reactStrictMode: true,
+    basePath: process.env.NODE_ENV === 'production' ? '/xbridge-test' : undefined,
+    experimental: {
+        outputStandalone: true,
+        externalDir: true,
+    },
+};

services/xbridge-test/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@service/xbridge-test",
+    "description": "bridge test를 위한 웹뷰",
+    "version": "0.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@semicolondsm/react-emotion-theme": "^1.0.8",
+        "@semicolondsm/ui": "1.3.9",
+        "@shared/xbridge": "workspace:*",
+        "@xquare/utils": "1.0.8",
+        "next": "12.1.5",
+        "react": "18.0.0",
+        "react-dom": "18.0.0"
+    },
+    "devDependencies": {
+        "@types/node": "17.0.24",
+        "@types/react": "18.0.5",
+        "@types/react-dom": "18.0.1",
+        "eslint": "8.13.0",
+        "eslint-config-next": "12.1.5",
+        "typescript": "4.6.3"
+    }
+}

services/xbridge-test/src/pages/_app.tsx

@@ -0,0 +1,11 @@
+import { SDSThemeProvider } from '@semicolondsm/react-emotion-theme';
+import type { AppProps } from 'next/app';
+
+function MyApp({ Component, pageProps }: AppProps) {
+    return (
+        <SDSThemeProvider mode="light-only">
+            <Component {...pageProps} />
+        </SDSThemeProvider>
+    );
+}
+export default MyApp;

services/xbridge-test/src/pages/back.tsx

@@ -0,0 +1,16 @@
+import type { NextPage } from 'next';
+import { Button } from '@semicolondsm/ui';
+import { sendBridgeEvent } from '@shared/xbridge';
+import { useRouter } from 'next/router';
+const Back: NextPage = () => {
+    const router = useRouter();
+    return (
+        <div>
+            <Button onClick={() => sendBridgeEvent('back', true, () => router.back())}>
+                뒤로가기
+            </Button>
+        </div>
+    );
+};
+
+export default Back;

services/xbridge-test/src/pages/index.tsx

@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import { Button } from '@semicolondsm/ui';
+import { sendBridgeEvent } from '@shared/xbridge';
+import { useRouter } from 'next/router';
+const Home: NextPage = () => {
+    const router = useRouter();
+    return (
+        <div>
+            <Button
+                onClick={() =>
+                    sendBridgeEvent('image-detail', [
+                        'https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/resize/416/quality/80/optimize',
+                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKS1BGRjgU289BZuhSFI4V7GBh6Ny_UzgH6A&usqp=CAU',
+                    ])
+                }>
+                이미지 상세보기
+            </Button>
+            <Button
+                onClick={() =>
+                    sendBridgeEvent('navigate', '/back', ({ data }) => router.push(data))
+                }>
+                내비게이션
+            </Button>
+        </div>
+    );
+};
+
+export default Home;

services/xbridge-test/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

shared/xbridge/src/index.ts

@@ -1,11 +1,13 @@
 import { Device } from '@xquare/utils';
 
+type BridgeType = 'navigate' | 'back' | 'image-detail';
+
 export interface BrowserActionParameters<T> {
-    bridge: string;
+    bridge: BridgeType;
     data: T;
 }
 export const sendBridgeEvent = <T extends unknown>(
-    bridge: string,
+    bridge: BridgeType,
     data: T,
     browserAction?: (params: BrowserActionParameters<T>) => any,
 ) => {

yarn.lock

@@ -2060,7 +2060,6 @@ __metadata:
     "@emotion/styled": ^11.8.1
     "@semicolondsm/react-emotion-theme": ^1.0.8
     "@semicolondsm/ui": 1.3.9
-    "@shared/xbridge": "workspace:*"
     "@types/node": 17.0.24
     "@types/react": 18.0.5
     "@types/react-dom": 18.0.1
@@ -2103,6 +2102,28 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@service/xbridge-test@workspace:services/xbridge-test":
+  version: 0.0.0-use.local
+  resolution: "@service/xbridge-test@workspace:services/xbridge-test"
+  dependencies:
+    "@emotion/react": ^11.9.0
+    "@emotion/styled": ^11.8.1
+    "@semicolondsm/react-emotion-theme": ^1.0.8
+    "@semicolondsm/ui": 1.3.9
+    "@shared/xbridge": "workspace:*"
+    "@types/node": 17.0.24
+    "@types/react": 18.0.5
+    "@types/react-dom": 18.0.1
+    "@xquare/utils": 1.0.8
+    eslint: 8.13.0
+    eslint-config-next: 12.1.5
+    next: 12.1.5
+    react: 18.0.0
+    react-dom: 18.0.0
+    typescript: 4.6.3
+  languageName: unknown
+  linkType: soft
+
 "@shared/xbridge@workspace:*, @shared/xbridge@workspace:shared/xbridge":
   version: 0.0.0-use.local
   resolution: "@shared/xbridge@workspace:shared/xbridge"