iamport-react-native 2.0.15 → 3.0.1-alpha.0

package/example/metro.config.js

@@ -1,66 +0,0 @@
-const path = require('path');
-const blacklist = require('metro-config/src/defaults/exclusionList');
-const escape = require('escape-string-regexp');
-const pak = require('../package.json');
-
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
-
-const root = path.resolve(__dirname, '..');
-
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
-
-module.exports = mergeConfig(getDefaultConfig(__dirname), {
-  projectRoot: __dirname,
-  watchFolders: [root],
-
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we blacklist them at the root, and alias them to the versions in example's node_modules
-  resolver: {
-    blacklistRE: blacklist(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      ),
-      modules.map(
-        (m) =>
-          new RegExp(
-            `^${escape(
-              path.join(root, 'exampleForExpo/node_modules', m)
-            )}\\/.*$`
-          )
-      ),
-      modules.map(
-        (m) =>
-          new RegExp(
-            `^${escape(
-              path.join(root, 'exampleForManagedExpo/node_modules', m)
-            )}\\/.*$`
-          )
-      ),
-      modules.map(
-        (m) =>
-          new RegExp(
-            `^${escape(
-              path.join(root, 'exampleForWebView/node_modules', m)
-            )}\\/.*$`
-          )
-      )
-    ),
-
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
-  },
-
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-});

package/example/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "iamport-react-native-example",
-  "description": "아임포트 리액트 네이티브 예제",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "start": "react-native start"
-  },
-  "dependencies": {
-    "@react-native-community/masked-view": "^0.1.11",
-    "@react-navigation/native": "^6.1.1",
-    "@react-navigation/stack": "^6.3.10",
-    "@types/react-native-vector-icons": "^6.4.12",
-    "@gluestack-ui/themed": "^1.0.33",
-    "@gluestack-ui/config": "^1.0.10",
-    "@gluestack-style/react": "^1.0.30",
-    "react": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-gesture-handler": "^2.9.0",
-    "react-native-safe-area-context": "^4.4.1",
-    "react-native-screens": "^3.18.2",
-    "react-native-svg": "^13.6.0",
-    "react-native-vector-icons": "^9.2.0",
-    "react-native-webview": "^13.6.2",
-    "styled-components": "^5.3.6",
-    "styled-system": "^5.1.5"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/runtime": "^7.20.6",
-    "@types/react": "^18.0.26",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "metro-react-native-babel-preset": "^0.73.6",
-    "react-native-codegen": "^0.71.3",
-    "@react-native/metro-config": "^0.74.0"
-  }
-}

package/example/src/App.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { IamportNavigation } from './NavigationService';
-import { GluestackUIProvider } from '@gluestack-ui/themed';
-import { config } from '@gluestack-ui/config';
-
-function App() {
-  return (
-    <GluestackUIProvider config={config}>
-      <SafeAreaProvider>
-        <IamportNavigation />
-      </SafeAreaProvider>
-    </GluestackUIProvider>
-  );
-}
-
-export default App;

package/example/src/Certification/index.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import IMP from 'iamport-react-native';
-import type { RootStackParamList } from '../NavigationService';
-import type { StackScreenProps } from '@react-navigation/stack';
-import Loading from '../Loading';
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-type Props = StackScreenProps<RootStackParamList, 'Certification'>;
-
-function Certification({ route, navigation }: Props) {
-  const params = route.params?.params!;
-  const tierCode = route.params?.tierCode;
-  const userCode = route.params?.userCode!;
-
-  return (
-    <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
-      <IMP.Certification
-        userCode={userCode}
-        tierCode={tierCode}
-        data={params}
-        loading={<Loading />}
-        callback={(response) =>
-          navigation.replace('CertificationResult', response)
-        }
-      />
-    </SafeAreaView>
-  );
-}
-
-export default Certification;

package/example/src/CertificationResult/index.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import type { StackScreenProps } from '@react-navigation/stack';
-import type { RootStackParamList } from '../NavigationService';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  ArrowLeftIcon,
-  Box,
-  Button,
-  ButtonIcon,
-  ButtonText,
-  Heading,
-  HStack,
-  Text,
-  VStack,
-} from '@gluestack-ui/themed';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
-
-type Props = StackScreenProps<RootStackParamList, 'CertificationResult'>;
-
-function CertificationResult({ route, navigation }: Props) {
-  const imp_success = route.params?.imp_success;
-  const success = route.params?.success;
-  const imp_uid = route.params?.imp_uid;
-  const merchant_uid = route.params?.merchant_uid;
-  const error_msg = route.params?.error_msg;
-
-  const isSuccess = !(
-    imp_success === 'false' ||
-    imp_success === false ||
-    success === 'false' ||
-    success === false
-  );
-
-  return (
-    <SafeAreaView
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        margin: 10,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-      }}
-    >
-      {isSuccess ? (
-        <FontAwesome name={'check-circle'} color={'#52c41a'} size={150} />
-      ) : (
-        <FontAwesome name={'warning'} color={'#f5222d'} size={150} />
-      )}
-      <Heading size={'2xl'}>
-        {`본인인증에 ${isSuccess ? '성공' : '실패'}하였습니다`}
-      </Heading>
-      <Box>
-        <VStack my={10}>
-          <HStack mx={'15%'} my={10}>
-            <Text w={'40%'}>아임포트 번호</Text>
-            <Text w={'60%'}>{imp_uid}</Text>
-          </HStack>
-          {success ? (
-            <HStack mx={'15%'} my={10}>
-              <Text w={'40%'}>주문번호</Text>
-              <Text w={'60%'}>{merchant_uid}</Text>
-            </HStack>
-          ) : (
-            <HStack mx={'15%'} my={10}>
-              <Text w={'40%'}>에러메시지</Text>
-              <Text w={'60%'}>{error_msg}</Text>
-            </HStack>
-          )}
-        </VStack>
-      </Box>
-      <Button size={'md'} onPress={() => navigation.navigate('Home')}>
-        <ButtonIcon as={ArrowLeftIcon} />
-        <ButtonText>돌아가기</ButtonText>
-      </Button>
-    </SafeAreaView>
-  );
-}
-
-export default CertificationResult;

package/example/src/CertificationTest/index.tsx

@@ -1,214 +0,0 @@
-import React, { useState } from 'react';
-import type { StackScreenProps } from '@react-navigation/stack';
-import type {
-  CertificationParams,
-  RootStackParamList,
-} from '../NavigationService';
-import { CARRIERS, CERT_PGS } from '../constants';
-import {
-  SafeAreaView,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
-import { IMPConst } from 'iamport-react-native';
-import { Platform } from 'react-native';
-import {
-  Button,
-  ButtonText,
-  FormControl,
-  Input,
-  InputField,
-  KeyboardAvoidingView,
-  ScrollView,
-  Text,
-  VStack,
-} from '@gluestack-ui/themed';
-import Picker from '../Picker';
-
-type Props = StackScreenProps<RootStackParamList, 'CertificationTest'>;
-
-function CertificationTest({ navigation }: Props) {
-  const [userCode, setUserCode] = useState('');
-  const [pg, setPg] = useState('danal');
-  const [merchantUid, setMerchantUid] = useState(`mid_${new Date().getTime()}`);
-  const [company, setCompany] = useState('아임포트');
-  const [carrier, setCarrier] = useState('');
-  const [name, setName] = useState('');
-  const [phone, setPhone] = useState('');
-  const [minAge, setMinAge] = useState('');
-  const [tierCode, setTierCode] = useState('');
-
-  const insets = useSafeAreaInsets();
-
-  return (
-    <SafeAreaView
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        backgroundColor: '#f5f5f5',
-        paddingTop: -insets.top,
-      }}
-    >
-      <KeyboardAvoidingView
-        flex={1}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 95 : undefined}
-      >
-        <ScrollView mx={1} backgroundColor={'#fff'}>
-          <FormControl p={2} borderRadius={3}>
-            <VStack>
-              <FormControl.Label my={1}>
-                <Text color={'#9e9e9e'} fontSize={15}>
-                  가맹점 식별코드
-                </Text>
-              </FormControl.Label>
-              <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
-                <InputField
-                  value={userCode}
-                  onChangeText={(value) => setUserCode(value)}
-                />
-              </Input>
-            </VStack>
-            <VStack>
-              <FormControl.Label my={1}>
-                <Text color={'#9e9e9e'} fontSize={15}>
-                  PG사
-                </Text>
-              </FormControl.Label>
-              <Picker
-                data={CERT_PGS}
-                selectedValue={pg}
-                onValueChange={(value) => setPg(value)}
-              />
-            </VStack>
-            <VStack>
-              <FormControl.Label my={1}>
-                <Text color={'#9e9e9e'} fontSize={15}>
-                  주문번호
-                </Text>
-              </FormControl.Label>
-              <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
-                <InputField
-                  value={merchantUid}
-                  onChangeText={(value) => setMerchantUid(value)}
-                />
-              </Input>
-            </VStack>
-            {pg === 'danal' && (
-              <>
-                <VStack>
-                  <FormControl.Label my={1}>
-                    <Text color={'#9e9e9e'} fontSize={15}>
-                      회사명
-                    </Text>
-                  </FormControl.Label>
-                  <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
-                    <InputField
-                      value={company}
-                      onChangeText={(value) => setCompany(value)}
-                    />
-                  </Input>
-                </VStack>
-                <VStack>
-                  <FormControl.Label my={1}>
-                    <Text color={'#9e9e9e'} fontSize={15}>
-                      통신사
-                    </Text>
-                  </FormControl.Label>
-                  <Picker
-                    data={CARRIERS}
-                    selectedValue={carrier}
-                    onValueChange={(value) => setCarrier(value)}
-                  />
-                </VStack>
-                <VStack>
-                  <FormControl.Label my={1}>
-                    <Text color={'#9e9e9e'} fontSize={15}>
-                      이름
-                    </Text>
-                  </FormControl.Label>
-                  <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
-                    <InputField
-                      value={name}
-                      onChangeText={(value) => setName(value)}
-                    />
-                  </Input>
-                </VStack>
-                <VStack>
-                  <FormControl.Label my={1}>
-                    <Text color={'#9e9e9e'} fontSize={15}>
-                      전화번호
-                    </Text>
-                  </FormControl.Label>
-                  <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
-                    <InputField
-                      keyboardType="number-pad"
-                      returnKeyType={'done'}
-                      value={phone}
-                      onChangeText={(value) => setPhone(value)}
-                    />
-                  </Input>
-                </VStack>
-                <VStack>
-                  <FormControl.Label my={1}>
-                    <Text color={'#9e9e9e'} fontSize={15}>
-                      최소연령
-                    </Text>
-                  </FormControl.Label>
-                  <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
-                    <InputField
-                      keyboardType="number-pad"
-                      returnKeyType={'done'}
-                      value={minAge}
-                      onChangeText={(value) => setMinAge(value)}
-                    />
-                  </Input>
-                </VStack>
-              </>
-            )}
-            <VStack>
-              <FormControl.Label my={1}>
-                <Text color={'#9e9e9e'} fontSize={15}>
-                  티어 코드
-                </Text>
-              </FormControl.Label>
-              <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
-                <InputField
-                  value={tierCode}
-                  onChangeText={(value) => setTierCode(value)}
-                />
-              </Input>
-            </VStack>
-            <Button
-              mt={4}
-              bgColor={'#344e81'}
-              /* @ts-ignore */
-              onPress={() => {
-                const data: CertificationParams = {
-                  params: {
-                    merchant_uid: merchantUid,
-                    company,
-                    carrier,
-                    name,
-                    phone,
-                    pg,
-                    min_age: minAge,
-                    m_redirect_url: IMPConst.M_REDIRECT_URL,
-                  },
-                  userCode,
-                  tierCode,
-                };
-                navigation.navigate('Certification', data);
-              }}
-            >
-              <ButtonText fontWeight={'bold'} color={'#fff'}>
-                본인인증 하기
-              </ButtonText>
-            </Button>
-          </FormControl>
-        </ScrollView>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
-}
-
-export default CertificationTest;

package/example/src/Home/index.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
-import type { StackScreenProps } from '@react-navigation/stack';
-import type { RootStackParamList } from '../NavigationService';
-import {
-  Button,
-  ButtonGroup,
-  Center,
-  Text,
-  View,
-  VStack,
-} from '@gluestack-ui/themed';
-
-type Props = StackScreenProps<RootStackParamList, 'Home'>;
-
-function Home({ navigation }: Props) {
-  return (
-    <View flex={1}>
-      <View
-        flex={1}
-        position={'relative'}
-        alignItems={'center'}
-        bgColor={'#344e81'}
-        justifyContent={'center'}
-      >
-        <Text
-          color={'#fff'}
-          fontSize={20}
-          mb={10}
-          fontWeight={'bold'}
-          textAlign={'center'}
-        >
-          아임포트 테스트
-        </Text>
-        <Text color={'#fff'} fontSize={15} textAlign={'center'}>
-          아임포트 리액트 네이티브 모듈 테스트 화면입니다.
-        </Text>
-        <Text color={'#fff'} fontSize={15} textAlign={'center'}>
-          아래 버튼을 눌러 결제 또는 본인인증 테스트를 진행해주세요.
-        </Text>
-      </View>
-      <View
-        flex={1}
-        position={'relative'}
-        bottom={'0%'}
-        w={'90%'}
-        flexDirection={'row'}
-        alignSelf={'center'}
-      >
-        <ButtonGroup bottom={'50%'} width={'100%'} alignSelf={'center'}>
-          <Button
-            h={60}
-            m={'4%'}
-            bgColor={'#fff'}
-            borderRadius={3}
-            flex={1}
-            onPress={() => navigation.push('PaymentTest')}
-          >
-            <VStack alignItems={'center'}>
-              <Center>
-                <FontAwesome name={'credit-card'} size={30} />
-                <Text fontSize={15}>결제 테스트</Text>
-              </Center>
-            </VStack>
-          </Button>
-          <Button
-            h={60}
-            m={'4%'}
-            bgColor={'#fff'}
-            borderRadius={3}
-            flex={1}
-            onPress={() => navigation.push('CertificationTest')}
-          >
-            <VStack alignItems={'center'}>
-              <Center>
-                <FontAwesome name={'user'} size={30} />
-                <Text fontSize={15}>본인인증 테스트</Text>
-              </Center>
-            </VStack>
-          </Button>
-        </ButtonGroup>
-      </View>
-    </View>
-  );
-}
-
-export default Home;

package/example/src/Loading/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Text, View } from '@gluestack-ui/themed';
-
-function Loading() {
-  return (
-    <View flex={1} alignItems={'center'} justifyContent={'center'}>
-      <Text fontSize={20}>잠시만 기다려주세요...</Text>
-    </View>
-  );
-}
-
-export default Loading;

package/example/src/NavigationService.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
-import { NavigationContainer } from '@react-navigation/native';
-import Home from './Home';
-import Certification from './Certification';
-import CertificationTest from './CertificationTest';
-import CertificationResult from './CertificationResult';
-import Payment from './Payment';
-import PaymentTest from './PaymentTest';
-import PaymentResult from './PaymentResult';
-import type { IMPData } from 'iamport-react-native';
-
-export interface CertificationParams {
-  params: IMPData.CertificationData;
-  userCode: string;
-  tierCode?: string;
-}
-
-export interface PaymentParams {
-  params: IMPData.PaymentData;
-  userCode: string;
-  tierCode?: string;
-}
-
-export type RootStackParamList = {
-  Home: undefined;
-  Certification: CertificationParams | undefined;
-  CertificationTest: undefined;
-  CertificationResult: any;
-  Payment: PaymentParams | undefined;
-  PaymentTest: undefined;
-  PaymentResult: any;
-};
-
-const RootStack = createStackNavigator<RootStackParamList>();
-
-function IamportNavigation() {
-  return (
-    <NavigationContainer>
-      <RootStack.Navigator
-        initialRouteName="Home"
-        // screenOptions={{ headerShown: false }}
-      >
-        <RootStack.Screen
-          options={{ headerShown: false }}
-          name="Home"
-          component={Home}
-        />
-        <RootStack.Screen
-          options={{ headerShown: false }}
-          name="Certification"
-          component={Certification}
-        />
-        <RootStack.Screen
-          options={{
-            headerTitle: '아임포트 본인인증 테스트',
-            headerTitleAlign: 'center',
-            headerStyle: {
-              backgroundColor: '#344e81',
-            },
-            headerTitleStyle: {
-              color: '#fff',
-            },
-            headerTintColor: '#fff',
-            headerBackTitle: ' ',
-          }}
-          name="CertificationTest"
-          component={CertificationTest}
-        />
-        <RootStack.Screen
-          options={{
-            headerTitle: '아임포트 본인인증 결과',
-            headerTitleAlign: 'center',
-            headerStyle: {
-              backgroundColor: '#344e81',
-            },
-            headerTitleStyle: {
-              color: '#fff',
-            },
-            headerLeft: () => null,
-          }}
-          name="CertificationResult"
-          component={CertificationResult}
-        />
-        <RootStack.Screen
-          options={{ headerShown: false }}
-          name="Payment"
-          component={Payment}
-        />
-        <RootStack.Screen
-          options={{
-            headerTitle: '아임포트 결제 테스트',
-            headerTitleAlign: 'center',
-            headerStyle: {
-              backgroundColor: '#344e81',
-            },
-            headerTitleStyle: {
-              color: '#fff',
-            },
-            headerTintColor: '#fff',
-            headerBackTitle: ' ',
-          }}
-          name="PaymentTest"
-          component={PaymentTest}
-        />
-        <RootStack.Screen
-          options={{
-            headerTitle: '아임포트 결제 결과',
-            headerTitleAlign: 'center',
-            headerStyle: {
-              backgroundColor: '#344e81',
-            },
-            headerTitleStyle: {
-              color: '#fff',
-            },
-            headerTintColor: '#fff',
-            headerLeft: () => null,
-          }}
-          name="PaymentResult"
-          component={PaymentResult}
-        />
-      </RootStack.Navigator>
-    </NavigationContainer>
-  );
-}
-
-export { RootStack, IamportNavigation };