3. 게시물 조회

메인페이지에서는 모든 사용자의 게시물과 팔로우한 계정의 게시물 두 가지 분류로 조회할 수 있도록 개발하였다.

    const postList = await (await axios.get(`${host}/post/${networkType}`)).data.data;
    // const tokenContract = await new web3.eth.Contract(erc721Abi, contractAddress);
    const tokenContract = await new caver.klay.Contract(kip17Abi, contractAddress);
    const totalSupply = await tokenContract.methods.totalSupply().call();
    setNFTList([]);
    let arr = [];

    for (let i = 1; i <= totalSupply; i++) {
      arr.push(i);
    }
    arr = arr.map(el => el).reverse();

    for(let postInfo of postList) {
      for (let tokenId of arr) {
        if(tokenId === postInfo.token_id && !postInfo.isDelete) {
          let tokenOwner = await tokenContract.methods.ownerOf(tokenId).call();
          let tokenURI = await tokenContract.methods.tokenURI(tokenId).call();
          const metadata = await (await axios.get(`${tokenURI}`)).data;
    
          // isAll이 true면 전체 피드 로드
          if (isAll) {
            setNFTList((prevState) => {
              return [...prevState, { postInfo, tokenId, metadata }];
            });
          } else {  // false면 팔로워 피드만 로드
            if (String(tokenOwner).toLowerCase() !== account.toLowerCase()) {
              for (let follow of followList) {
                if (postInfo.user._id === follow.follower._id) {
                  setNFTList((prevState) => {
                    return [...prevState, { postInfo, tokenId, metadata }];
                  });
                }
              }
            }
          }
        }
        
      }
    }

게시물의 정보를 불러오는 방식은 먼저 DB에 요청하여 데이터를 받아오고
DB의 TOKEN ID와 KIP-17을 배포한 컨트랙트의 TOKEN LIST와 비교하여 일치하는 정보를 읽어오도록 하였다.
이리하여 게시물이 삭제되어도 DB에서만 삭제될 뿐, 자신의 지갑에 NFT 로 데이터가 남아 있기 때문에
영원히 자신의 소유의 데이터로 보존할 수 있는 것이다.

4. 좋아요 획득

좋아요 기능은 병원 예약에 사용할 수 있는 PETO TOKEN(KIP-7)을 지급받을 수 있는 수단으로 사용자들의 적극적인 서비스 이용을 기대하고 설계하였다.
사용자는 본인이 작성한 게시물에서 다른 사용자들에게 좋아요를 얻을 때 마다 일정 수량의 PETO TOKEN을 관리자 계정을 통해 지급 받는다.
지급받은 PETO TOKEN의 내역은 마이페이지에서 확인할 수 있으며 **메디컬 페이지에서 병원 예약 서비스**에 사용할 수 있도록 개발하였다.

    const caver = new Caver('https://api.baobab.klaytn.net:8651/');
    const amount = 0x8ac7230489e80000;
    
    // add admin wallet
    const adminKeyring = caver.wallet.add(caver.wallet.keyring.createFromPrivateKey(kasSecretKey));

    // Create KIP7 Instance with TokenAddr
    const kip7 = new caver.kct.kip7(kasTokenAddr);
    
    // Transaction
    kip7.options.from = adminKeyring.address;
    const result = await kip7.transfer(toAddress, amount);

    caver.wallet.remove(kasAccessKey);
    return result.status;

위 코드는 좋아요 클릭시 서버에서 실행되는 코드로
미리 배포해놓은 KIP-7 토큰을 관리자 계정에서 게시물 작성자의 지갑으로 전송하도록 개발하였다.
트랜잭션을 발생시키기 위해서 Caver-js 를 사용하였다.
자세한 사항은 Caver-js Docs 참고.

5. 병원 예약

병원 예약 서비스는 좋아요를 통해 지급된 PETO TOKEN을 소비할 수 있는 사용처로
사용자는 메디컬 서비스 페이지에서 병원 목록 중에 원하는 병원을 선택하고 예약이 가능한 시간대를 선택해서 진료를 예약할 수 있다.
예약을 완료하면 사용자의 지갑에서 해당 병원의 지갑으로 별도로 정해진 수량의 PETO TOKEN이 전송되고
예약 현황은 마이페이지에서 확인할 수 있도록 개발하였다.

    const sendToken = async (recipient) => {
        const sender = JSON.parse(localStorage.getItem('account'));
        const amount = 1;
        const decimal = 18;
        let txResult = false;

        const data = caver.klay.abi.encodeFunctionCall(
            {
              name: 'transfer',
              type: 'function',
              inputs: [
                {
                  type: 'address',
                  name: 'recipient'
                },
                {
                  type: 'uint256',
                  name: 'amount'
                }
              ]
            },
            [
              recipient,
              caver.utils
                .toBN(amount)
                .mul(caver.utils.toBN(Number(`1e${decimal}`)))
                .toString()
            ]
          )

          const txHash = await caver.klay
            .sendTransaction({
              type: 'SMART_CONTRACT_EXECUTION',
              from: sender,
              to: kip7CA,
              data: data,
              gas: '100000'
            })
            .on('transactionHash', transactionHash => {
              console.log('txHash', transactionHash)
            })
            .on('receipt', receipt => {
              console.log('receipt', receipt)
              txResult = true;
            })
            .on('error', error => {
              console.log('error', error)
            })

        return txResult;

예약시 토큰 전송은 프론트단에서 Caver-js를 사용하여 트랜잭션을 발생시켰다.
자세한 사항은 Caver-js Docs 참고.

회고

우선 최종 프로젝트를 배포까지 성공적으로 마무리 지어서 매우 기쁘다.
사실 이전의 두번의 프로젝트를 진행하면서 개인적으로 완성도 측면에서 아쉬운 부분이 많았다.
물론 이전 팀원분들도 잘해주셨지만 내 스스로가 만족스럽지가 않았기 때문에,
하나의 프로젝트라도 완성도 있는 결과물로서 완성하고 싶은 마음이 컸다.

그래서 처음 프로젝트를 기획할 때 이전의 프로젝트를 진행하며 아쉬웠던 점들을 제대로 완성하고 싶은 마음으로
이전 프로젝트에서 다룬 내용들에 토큰이코노미를 추가하여 고도화 하는 방향으로 기획하게 되었다.

주제가 조금은 뻔할 수도 있고 첫번째와 두번째 프로젝트의 연장선 같은 느낌은 있지만,
모든 팀원들이 열심히 하여 완성도 있는 결과물이 나온 것 같아서 최종 프로젝트 만큼은 만족할 수 있었다.

기술적인면에서도 관련 문서를 보며 Caver-js를 활용한 클레이튼 네트워크 API를 적용하는 방법을 익혔고,
서버 설계와 mongoose의 이용, react에서의 상태관리 등 배웠던 내용들을 종합적으로 활용하여
지난 22주의 부트캠프에서의 성장한 모습을 확인할 수 있었다.

그 동안 부트캠프에 배운 것들은 풀스택 블록체인 개발자가 되기 위한 밑거름으로 삼고
앞으로 더욱 자기개발에 정진해보자!