refactor(FE) : 유틸 함수 Promise 확인 로직 추가 (#88)

client/.eslintrc.json

@@ -15,7 +15,16 @@
     "no-console": "off",
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "import/extensions": ["off"],
-    "no-shadow": 0,
-    "no-promise-executor-return": "off"
+    "no-shadow": "off",
+    "no-promise-executor-return": "off",
+    "no-return-assign": "off",
+    "no-param-reassign": "off",
+    "no-cond-assign": "off",
+    "guard-for-in": "off",
+    "no-plusplus": "off",
+    "func-names": "off",
+    "no-restricted-syntax": "off",
+    "no-use-before-define": "off",
+    "no-unused-expressions": "off"
   }
 }

client/src/components/auth/register.js

@@ -4,13 +4,24 @@ import { $ } from '@/utils';
 import { _ } from '@/utils/customFx';
 
 const register = () => {
-  const addCodeForm = () => {
+  const REGISTER_INPUT_TYPE = ['email', 'tel', 'password', 'passwordCheck'];
+
+  const addCodeForm = (e, resolve) => {
     const newForm = _.find(({ type }) => type === 'verificationCode', INPUT);
 
     newForm.target = '.auth-form';
     inputForm(newForm)();
+    resolve(() => 'resolved');
   };
 
+  const sendVerificationCode = () =>
+    new Promise((resolve) =>
+      _.go(
+        $.qs('.verify-button'),
+        $.on('click', (e) => addCodeForm(e, resolve)),
+      ),
+    );
+
   const disableVerifyButton = () => {
     const verifyButton = $.qs('.verify-button');
     verifyButton.disabled = false;
@@ -29,11 +40,8 @@ const register = () => {
   };
 
   const testValidCode = ({ target }) => {
-    console.log(1);
-
     const codeReg = /^[0-9]{6}$/i;
     if (codeReg.test(target.value)) {
-      console.log(2);
       disableConfirmButton();
     }
   };
@@ -43,21 +51,29 @@ const register = () => {
     new Promise(resolve =>
       _.go(
         INPUT,
-        _.filter((input) => input.type !== 'verificationCode'),
-        _.map((input) => inputForm({ ...input, target: '.auth-form' })()),
+        _.filter((input) => REGISTER_INPUT_TYPE.includes(input.type)),
+        _.map((input) => inputForm({ ...input, target: '.auth-form' })),
+        _.map(f => f()),
+        _.take(1),
+        ([f]) => f,
         resolve));
 
   // prettier-ignore
   const appendRegister = async () =>
     _.go(
       await render(),
-      () => $.qs('#email-input'),
-      $.on('input', testValidEmail),
-      () => $.find('.verify-button')(),
-      $.on('click', await addCodeForm),
-      () => console.log(22),
-      () => $.qs('#verification-code-input'),
-      $.on('input', testValidCode));
+      () => console.log(2),
+      _.tap(
+        $.find('#email-input'),
+        $.on('input', testValidEmail),
+      ),
+      await sendVerificationCode(),
+      console.log)
+  // (a) => a.then((res) =>
+  //   console.log(res)
+  // ));
+  // $.find('#verification-code-input'),
+  // $.on('input', testValidCode));
 
   return appendRegister;
 };

client/src/core/router.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-use-before-define */
-/* eslint-disable no-unused-expressions */
 import { NotFound } from '@/pages';
 import { _ } from '@/utils/customFx';
 

client/src/main.js

@@ -2,7 +2,8 @@ import '@/styles/style.scss';
 import { setScreenSize } from '@/utils';
 import { navigateHome, navigateAuth, navigateMain, navigatePost } from '@/pages';
 import { routes, navigate } from '@/core/router';
-import client from '@/apis/client';
+import { _ } from '@/utils/customFx';
+// import client from '@/apis/client';
 
 routes.push(
   { path: '/', component: navigateHome },
@@ -17,3 +18,12 @@ navigate(path);
 window.addEventListener('resize', setScreenSize);
 
 // client.get('cookie');
+
+const test = async () => 'test';
+const test2 = async () => 'test2';
+
+const start = async () => {
+  _.go(await test(), console.log, test2, console.log);
+};
+
+// start();

client/src/pages/AuthPage.js

@@ -8,22 +8,6 @@ const logoUrl = `${SERVER_URL.IMG}logo/logo-pink.png`;
 const mintLogoUrl = `${SERVER_URL.IMG}logo/logo-mint.png`;
 const backIconUrl = `${SERVER_URL.IMG}icon/left-arrow.svg`;
 
-// const status = (componentName) => {
-//   if (componentName === 'register') {
-//     const signupInputs = [inputs[0], inputs[1], inputs[3], inputs[4]];
-
-//     // return registerTemplate(inputs);
-//     return registerTemplate(signupInputs);
-//   }
-//   if (componentName === 'login') {
-//     const loginInputs = [inputs[0], inputs[3]];
-
-//     return loginTemplate(loginInputs);
-//   }
-
-//   return 0;
-// };
-
 AuthPage.temp = `
   <article class="auth-article">
     <section class="white-header-section">
@@ -33,6 +17,7 @@ AuthPage.temp = `
       </section>
     </section>
     <section class="auth-form-section">
+      <h1 class="auth-text">${'회원가입'}</h1>
       <form class="auth-form">
         <div class="auth-button-container">
           <input type="submit" class="auth-button" name="auth-button" value="완료" />

client/src/pages/HomePage.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-async-promise-executor */
 import { SERVER_URL } from '@/constants/constant';
 import { addNavigateEvent } from '@/core/router';
 import { _ } from '@/utils/customFx';

client/src/pages/PostPage.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-expressions */
 import { SERVER_URL } from '@/constants/constant';
 import { inputForm, header } from '@/components/common';
 import { $, drag } from '@/utils';

client/src/styles/auth.scss

@@ -5,12 +5,6 @@
   justify-content: center;
   align-items: center;
   padding: 5%;
-  //padding-top: 7rem;
-
-  // .small-logo-pink {
-  //   width: 10.5rem;
-  //   padding-bottom: 30%;
-  // }
 
   .white-header-section {
     width: 100vw;
@@ -38,6 +32,13 @@
   .auth-form-section {
     width: 100%;
 
+    .auth-text {
+      font-size: 3rem;
+      text-align: center;
+      margin-bottom: 5rem;
+      font-weight: normal;
+    }
+
     .input-label {
       font-size: 1rem;
     }
@@ -83,7 +84,7 @@
     }
 
     .auth-button-container {
-      margin-top: 1rem;
+      margin-top: 3rem;
       display: flex;
 
       .auth-button {

client/src/utils/customFx.js

@@ -1,79 +1,81 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-cond-assign */
-/* eslint-disable guard-for-in */
-/* eslint-disable no-plusplus */
-/* eslint-disable func-names */
-/* eslint-disable no-restricted-syntax */
 const _ = {};
 const L = {};
 
+const nop = Symbol('nop');
 const makeString = (iter) => _.reduce((a, b) => `${a}${b}`, iter);
+const goPromise = (a, f) => (a instanceof Promise ? a.then(f) : f(a));
+const head = (iter) => goPromise(_.take(1, iter), ([h]) => h);
+
+const reducePromise = (acc, a, f) =>
+  a instanceof Promise
+    ? a.then(
+        (a) => f(acc, a),
+        (e) => (e === nop ? acc : Promise.reject(e)),
+      )
+    : f(acc, a);
 
 _.curry =
   (f) =>
   (a, ..._) =>
     _.length ? f(a, ..._) : (..._) => f(a, ..._);
 
+_.map = _.curry(_.pipe(L.map, _.takeAll));
+_.filter = _.curry(_.pipe(L.filter, _.takeAll));
+
 L.map = _.curry(function* (f, iter) {
   for (const a of iter) {
-    yield f(a);
+    yield goPromise(a, f);
   }
 });
-
 L.filter = _.curry(function* (f, iter) {
   for (const a of iter) {
-    if (f(a)) yield a;
+    const b = goPromise(a, f);
+    if (b instanceof Promise) yield b.then((b) => (b ? a : Promise.reject(nop)));
+    else if (b) yield a;
   }
 });
 
-L.entries = function* (obj) {
-  for (const k in obj) yield [k, obj[k]];
-};
-
 _.reduce = _.curry((f, acc, iter) => {
-  if (!iter) {
-    iter = acc[Symbol.iterator]();
-    acc = iter.next().value;
-  } else {
-    iter = iter[Symbol.iterator]();
-  }
-  let cur;
-  while (!(cur = iter.next()).done) {
-    const a = cur.value;
-    acc = f(acc, a);
-  }
-  return acc;
-});
+  if (!iter) return _.reduce(f, head((iter = acc[Symbol.iterator]())), iter);
 
+  iter = iter[Symbol.iterator]();
+  return goPromise(acc, function recur(acc) {
+    let cur;
+    while (!(cur = iter.next()).done) {
+      acc = reducePromise(acc, cur.value, f);
+      if (acc instanceof Promise) return acc.then(recur);
+    }
+    return acc;
+  });
+});
 _.go = (...args) => _.reduce((a, f) => f(a), args);
-
 _.pipe =
   (f, ...fs) =>
   (...as) =>
     _.go(f(...as), ...fs);
 
+_.takeAll = _.take(Infinity);
 _.take = _.curry((l, iter) => {
   const res = [];
   iter = iter[Symbol.iterator]();
-  let cur;
-  while (!(cur = iter.next()).done) {
-    const a = cur.value;
-    res.push(a);
-    if (res.length === l) return res;
-  }
-  return res;
+  return (function recur() {
+    let cur;
+    while (!(cur = iter.next()).done) {
+      const a = cur.value;
+      if (a instanceof Promise) {
+        return a
+          .then((a) => ((res.push(a), res).length === l ? res : recur()))
+          .catch((e) => (e === nop ? recur() : Promise.reject(e)));
+      }
+      res.push(a);
+      if (res.length === l) return res;
+    }
+    return res;
+  })();
 });
 
-_.takeAll = _.take(Infinity);
-
-_.map = _.curry(_.pipe(L.map, _.takeAll));
-
-_.filter = _.curry(_.pipe(L.filter, _.takeAll));
-
 _.find = _.curry((f, iter) => _.go(iter, L.filter(f), _.take(1), ([a]) => a));
-
 _.strMap = _.curry(_.pipe(_.map, makeString));
-
 _.tap =
   (f, ...fs) =>
   (a, ...as) =>