KISA 핀테크 아카데미 기초반 5일차 1차시 <수업일지>

드디어 마지막날!

 

계좌 이체 서비스

 

- 자금을 집금하는

- 계좌에서 돈을 가지고 오는 (출금이체)

- 이용기관의 계좌에서 사용자의 계좌로 자금을 송금

 

출금이체

API 이용기관이 등록된 한 개의 사용자 계좌로부터 대금을 출금합니다. 등록된 핀테크이용번호로 요청하는 경우(/fin_num)와 실 계좌번호로 요청하는 경우(/acnt_num)의 두 가지 기능을 각각 제공합니다

 

출금이체를 통해 고객들의 돈을 받아낼 약정 계좌를 만들어냄

입금계좌에서 돈을 뽑아서 사용자에게 돈을 보내게 됨

 

출금 요청의 주체는 나.

이거 포스트맨에 요청

---

 

팝업요청을 위해서는 모달이라는것을 사용해야함

외부라이브러리이고, 

외부라이브러리에 컴포넌트전달해서 웹에 그려주는방식

npm install react-modal

스캔이 되면 모달창을 띄워주는

 

 

QrcodeReader.js

import React, { useState } from "react";
import Header from "../component/Header";
import QrReader from "react-web-qr-reader";
import Modal from "react-modal";
const CustomStyles = {
  overlay: {
    backgroundColor: "rgba(0, 0, 0, 0.7)",
    zIndex: "9",
  },
  content: {
    width: "95%",
    border: `0 solid black`,
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)",
    zIndex: "99999",
  },
};


const QrcodeReader = () => {
  const [openModal, setOpenModal] = useState(false);
  const delay = 500;
  const previewStyle = {
    height: 375,
    width: 375,
  };
  // 스캔된 데이터를 result라는 파라미터로 가져옴
  const [result, setResult] = useState("No result");
  const handleScan = (result) => {
    console.log(result.data);
    setResult(result.data);
    setOpenModal(true);
  };

  const handleError = (error) => {
    console.log(error);
  };
  const closeModal = () => {
    setOpenModal(false);
  };

  return (
    <div>
      <Header title={"QR 리더기"}></Header>
      <QrReader
        delay={delay}
        style={previewStyle}
        onError={handleError}
        onScan={handleScan}
      />
      <p>{result}</p>
      <Modal
        isOpen={openModal}
        style={CustomStyles}
        onRequestClose={closeModal}
        ariaHideApp={false}
      >
        <h1>모달</h1>
      </Modal>
    </div>
  );
};

export default QrcodeReader;

 

옆으로 넘기는 기능 만들기

슬릭이라는 라이브러리 설치해야

npm install react-slick

 

 

Modal with draw

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import Slider from "react-slick";
import axios from "axios";

const ModalWithdrawBlock = styled.div`
  display: flex;
  flex-direction: column;
  margin: 0.5rem;
  padding: 20px;
  border: 1px #dfdfdf solid;
`;

const ModalWithdraw = ({ tofintechno }) => {
  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  const [acountList, setAccountList] = useState([]);
  useEffect(() => {
    getAccountList();
  }, []);
  const getAccountList = () => {};

  return (
    <ModalWithdrawBlock>
      <Slider {...settings}></Slider>
    </ModalWithdrawBlock>
  );
};

export default ModalWithdraw;

ModalCard

import axios from "axios";
import React, { useState } from "react";
import styled from "styled-components";

const ModalCardBlock = styled.div`
  display: flex;
  flex-direction: column;
  margin: 0.5rem;
  padding: 20px;
  border: 1px #112211 solid;
`;
const CardTitle = styled.div`
  font-size: 1rem;
  color: black;
`;
const FintechUseNo = styled.div`
  font-size: 0.7rem;
  margin-bottom: 30px;
`;

const WithDrawButton = styled.button`
  border: none;
  padding: 0.3rem;
  background: #2aa450;
  color: white;
  margin-top: 0.3rem;
`;

const ModalCard = ({ bankName, fintechUseNo, tofintechno }) => {
  // input data 받아온다음에 결제 버튼을 눌렀을때 axios 출금 이체를 바생시키기;
  const [amount, setamount] = useState("");
  const handleAmountChange = (e) => {
    const { value } = e.target;
    setamount(value);
  };
  const genTransId = () => {
    let countnum = Math.floor(Math.random() * 1000000000) + 1;
    let transId = "T991599190U" + countnum; //이용기과번호 본인것 입력
    return transId;
  };

  return (
    <ModalCardBlock>
      <CardTitle>{bankName}</CardTitle>
      <FintechUseNo>{fintechUseNo}</FintechUseNo>
      <p>{tofintechno}에 출금이체를 발생시킵니다.</p>
      <input onChange={handleAmountChange}></input>
      <WithDrawButton onClick={handleClickWithdraw}>결재하기</WithDrawButton>
    </ModalCardBlock>
  );
};

export default ModalCard;

토스같은곳은 예대마진이나 낙전수입? 으로 ..수익을얻는다고

금융쪽 취업하고싶으면 한국은행 유튜브 추천

어우 듣기싫은데...취업 못하겠다! ㅋㅋㅋㅋㅋ

 

 

---

입금이체 오류    

 

"rsp_code": "O0011",

    "rsp_message": "허용되지 않은 Scope 입니다."

}

고객한테 허락을 받아야함.

원래 scope가 login, inquery , transfer 밖에없었음

 

이용기관이 사용자의 계좌로 대금을송금을 한다입금을 위한 약정계좌에서 송금을 해줄것보낼때 받는사람 허락 신경안씀이제는 고객의 허락이 필요한것이아니라, 2legged token을 받아야함.(아..앞부분에 말씀하셨던거다!)

3legged token (고객의 허락 포함)

 

(2.1.2참고)

□ 센터인증 이용기관 토큰발급 API (2-legged) ㅇ 설 명 센터인증 이용기관이 사용자의 개입이 없는 2-legged 인증을 하는 경우에는 scope=oob로 정의되며, 사용자인증 API의 호출 없이 바로 /token API를 호출하여 토큰을 획득합니다.

 

토큰 발급 받고! 입금이체 포스트맨에 api 가이드대로 입력해주면 서비스 잘 되는거 확인가능

 

그리고 중간에 응답전문오류 라는게 뜨는데 이거 해결하기 위해서는

금융결제원 오픈API사이트에서

입력하는 사이트에 맞게 데이터 추가해줘야함 이거 못해서 헤맴..

 

그리고 여기서는 계좌 만들어줘서

입금시에쓰는 계좌 (200000000001)

출금시에쓰는 계좌 (100000000001) 생성

 

 

쨌든 중요한건, API가이드 매뉴얼에 맞게

포스트맨에서 요청 보내보고, 

이걸 코드에 넣어줘서 그려지게 하는 과정임.

이 과정에서 여러 오류와 파라미터를 직면하게 되는데 그걸 잘 공부하고 헤쳐나가야함

---