From cb5a6dc9a87aaf09aafdece089196ad06a16caf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=9D=98=EC=B0=AC?=
 <80962550+kimulchan@users.noreply.github.com>
Date: Tue, 7 Jun 2022 23:47:36 +0900
Subject: [PATCH] =?UTF-8?q?feat(xbridge-test):=20xbridge-test=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?(#22)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* feat(xbridge): docker file 변경

* feat(xbridge-test): xbridge test image 로직 변경
---
 services/xbridge-test/common/XbridgeImage.tsx | 16 ++++++++++++++++
 services/xbridge-test/src/pages/index.tsx     | 12 +++---------
 2 files changed, 19 insertions(+), 9 deletions(-)
 create mode 100644 services/xbridge-test/common/XbridgeImage.tsx

diff --git a/services/xbridge-test/common/XbridgeImage.tsx b/services/xbridge-test/common/XbridgeImage.tsx
new file mode 100644
index 00000000..8eb6021b
--- /dev/null
+++ b/services/xbridge-test/common/XbridgeImage.tsx
@@ -0,0 +1,16 @@
+import { ButtonProps } from '@semicolondsm/ui/dist/components/Button/types';
+import { sendBridgeEvent } from '@shared/xbridge';
+import React, { FC, HTMLProps, ReactPropTypes } from 'react';
+
+interface Props {
+    src: string;
+}
+const XbridgeImage = ({ src }: Props) => {
+    return (
+        <img
+            src={src}
+            onClick={() => sendBridgeEvent('image-detail', [src], () => console.log(src))}></img>
+    );
+};
+
+export default XbridgeImage;
diff --git a/services/xbridge-test/src/pages/index.tsx b/services/xbridge-test/src/pages/index.tsx
index 19d4ce49..48cf8d2b 100644
--- a/services/xbridge-test/src/pages/index.tsx
+++ b/services/xbridge-test/src/pages/index.tsx
@@ -2,19 +2,13 @@ import type { NextPage } from 'next';
 import { Button } from '@semicolondsm/ui';
 import { sendBridgeEvent } from '@shared/xbridge';
 import { useRouter } from 'next/router';
+import XbridgeImage from '../../common/XbridgeImage';
 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>
+            <XbridgeImage src="https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/resize/416/quality/80/optimize" />
+            <XbridgeImage src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKS1BGRjgU289BZuhSFI4V7GBh6Ny_UzgH6A&usqp=CAU" />
             <Button
                 onClick={() =>
                     sendBridgeEvent('navigate', '/back', ({ data }) => router.push(data))