[WIP] JS Iteration protocols

hook으로 만들고 싶어서 작업중
원하는 조건의 함수가 호출되는 것까지는 확인,
머리안돌아가서 임시저장

원하는 동작

• isUncertificated과 isDuplicated 상태에 따라 4가지 경우의 flow가 발생
  - [우선순위 low] 고려해야하는 상태값이 늘어나면 경우의 수도 늘어남 => 단순 if분기로는 if문 무한증식, 방법이 없나?
• 버튼 클릭 시 상태값(isUncertificated과 isDuplicated)에 맞는 다음단계를 순차적으로 진행시켜 최종 동작까지 이어가는 함수를 만들고 싶다.

사용하는 경우 검색, 참고

https://ko.javascript.info/async-iterators-generators

일반적인 이터레이터와 제너레이터는 데이터를 가져오는 데 시간이 걸리지 않을 때에 적합 ...
그런데 약간의 지연이 있어서 데이터가 비동기적으로 들어오는 경우 async 이터레이터와 async 제너레이터, for..of대신 for await..of를 사용하게 됩니다.

버튼

type = {
  isUncertificated: boolean;
  isDuplicated: boolean;
}

const startGen = genToNextStep(isUncertificated, isDuplicated);
<StyledLink 
  onClick={async () => {
    if (v.forwardAction === "verification") {
      for (let result of startGen) {
        startGen.next();
        console.log("result ============> ", result);
      }
    }
  }}
/>

Iterator

import { useState } from "react";

export function* genToNextStep(isUncertificated, isDuplicated) {
  let flag: "verify" | "integ" | "both" | "allPass" = "both";
  if (isUncertificated && !isDuplicated) {
    // 처리할 플로우 동작 후 리턴
    flag = "verify";
  }
  if (!isUncertificated && isDuplicated) {
    flag = "integ";
  }
  if (isUncertificated && isDuplicated) {
    flag = "both";
  }
  if (!isUncertificated && !isDuplicated) {
    flag = "allPass";
  }
  const openPassPopup = () => {
    console.log("팝업오픈!============> ", "팝업오픈!");
  };

  const redirectToIntegrationPage = () => {
    console.log("계정통합 페이지로 ============> ");
  };
  if (flag === "verify") {
    openPassPopup();
    yield 10;
  }
  if (flag === "integ") {
    redirectToIntegrationPage();
    yield 20;
  }
  if (flag === "both") {
    console.log(
      "both ============> ",
      `${openPassPopup} + ${redirectToIntegrationPage}`
    );
    yield 30;
  }
  if (flag === "allPass") {
    console.log("/order 진행 ============> ");
    yield 40;
  }
}

// export const useIntegrateAccounts = (isUncertificated, isDuplicated) => {
//   // const [] = useState();
//   /*
//     체크 isUncertificated
//     PASS popup

//     체크 isDuplicated
//     /integrate-my-accounts
//     /integrate-success
//     /login?redirect=/order

//     문제없으면 order 진행

//     */
//   let flag: "verify" | "integ" | "both" | "allPass" = "both";
//   if (isUncertificated && !isDuplicated) {
//     // 처리할 플로우 동작 후 리턴
//     flag = "verify";
//   }
//   if (!isUncertificated && isDuplicated) {
//     flag = "integ";
//   }
//   if (isUncertificated && isDuplicated) {
//     flag = "both";
//   }
//   if (!isUncertificated && !isDuplicated) {
//     flag = "allPass";
//   }

//   const gen = genToNextStep(flag);
//   // gen.next().done 될때까지 .next()시켜보기
//   const isFinished = gen.next().done ? true : false;

//   for (let result of gen) {
//     gen.next();
//     console.log("result ============> ", result);
//   }

// return {
//   gen,
//   isFinished,
// };
// };