로그인 폼

import load from "../../router.js";
import { $, isInVailInput, openModal, popFail, renderError } from "../../libs/util.js";
import api from "../../libs/api.js";
import { setStorage } from "../../libs/storage.js";

const LoginFrom = () => {
    /* usecase event */
    const onLogin = async() => {
        const id = $('.id', root).value;
        const pw = $('.pw', root).value;

        // 로그인 api
        const {data} = await api('get', '/users/login', {id, pw});
        const {user, success} = data;
        if(success){
	        setStorage('user', user);
	        load('home');
				}
    }

    /* evnet listener*/
    const initEventListener = () => {
        root.addEventListener('submit', e => {
            e.preventDefault();
            onLogin();
        })
        $('.signup-bt', root).addEventListener('click', e => openModal("signup-wrapper"));
    }
    /* MAIN */
    const root = document.createElement('form');
    root.className = 'login-form';
    root.innerHTML = `
        <input class="id" placeholder="ID">
        <input class="pw" type="password" placeholder="pw">
        <button type="submit"> log in </button>
        <button type="button" class="signup-bt"> sign up </button> 
    `
    initEventListener();
    return root;
}

export default LoginFrom;

회원가입 폼

import { $, $$, isInVailInput, popSuccess, renderError } from "../../libs/util.js";
import makeModal from "../../libs/makeModal.js";
import api from "../../libs/api.js";
import load from "../../router.js";

const Signup = () => {
    /* usecase event */
    const onSignup= () => {
        const id = $('.id', root).value;
        const pw = $('.pw', root).value;
        const name = $('.name', root).value;
        if(isInVailInput([id, pw, name])){
            renderError(root);
            return;
        }
        // 회원가입 api
        api('post', '/users/signup', {id, pw, name}).then((res) => {
            const {success} = res.data;
            if(success){
	            popSuccess('sign-in');
	            load('login');
            }
        })
    }

    /* evnet listener*/
    const initEventListener = () => {
        root.addEventListener('submit', e => {
            e.preventDefault();
            onSignup();
        })
    }
    
    /* render */
    const innerHtml = `<form class="signup-form f-c">
        <input class="id" placeholder="ID">
        <input class="pw" type="password" placeholder="pw">
        <input class="name" placeholder="name">
        <div class="bt-wrapper">
            <button type="submit"> sign in </button>
            <button type="button" class="close"> close </button>
        </div>
        <p class="error"> &nbsp </p>
    </form>`

    /* MAIN */
    const root = document.createElement('div');
    root.className = 'signup-wrapper';
    makeModal(root, innerHtml, () => {
        initEventListener();
    });

    return root;
}

export default Signup;

리스트

import { $, $$$, findParent, getPassTime, openModal, popSuccess } from "../../libs/util.js";
import load from "../../router.js";
import BoardEditModal from "./BoardEditModal.js";
import BoardAddModal from "./BoardAddModal.js";
import { setStorage } from "../../libs/storage.js";
import { renderBoardsThum } from "../../libs/renderApi.js";
import api from "../../libs/api.js";
import Modal from "../../libs/Modal.js";
const BoardsWrapper = ({boards}) => {

    const onJoin = ({boardId}) => {
        api('post', '/boards/join', {boardId}).then(res => {
            Modal(document.createElement('div'), '🤩 JUST WAIT FOR OWNER ACEPT 🤩')
        })
    }
    const onMyBoard = async() => {
        const {data: {boards: newBoards}} = await api('get', '/boards');
        renderBoardsThum(newBoards, root);
    }

    const getBoardId = (e) => {
        const board = findParent('board', e.target);
        if(!board)
            return;
        return board.id;
    }
    const initEventListener = () => {
        root.addEventListener('click', e => {
            const boardId  = getBoardId(e);
            switch(e.target.className){
                case 'my-board-bt':
                    onMyBoard();
                    break;
                case 'add-bt':
                    openModal('board-add-wrapper');
                    break;
                case 'sort-bt':
                    break;
                case 'name':
                    setStorage('boardId', boardId);
                    load('board');
                    break;
                case 'edit':
                    BoardEditModal({boards, boardId});
                    break;
                case 'join':
                    onJoin({boardId});
                    break;
            }
        })
    }
		/* RENDER */
		const getAction = (members, id) => {
		    const user = members.find(e => e.id === id);
		    if(!user)
		        return 'join'
		    switch(user.auth){
		        case 'owner': 
		            return 'edit';
		        case 'edit': case 'read':
		            return '😎'
		    }
		    return 'wait'
		}
		const renderBoardsThum = (boards, root=document) => {
		    const {id} = getStorage('user');
		
		    const $wrapper = $('.boards-thum-wrapper', root);
		    $wrapper.innerHTML = boards.map(item => {
		        let action = getAction(item.members, id);
		
		        return `<div class="board f-r" id="${item._id}">
		            <div class="f-c">
		                <div class="f">
		                    <p class="name"> ${item.name} </p>
		                    <p class="state"> ${item.state} </p>
		                </div>
		                <p class="time"> ${getPassTime(item.lastUpdate)} </p>
		            </div>
		            <p style="flex: 1.5"> ${item.description} </p>
		            <div class="bt-wrapper f-r">
		                <button class="${action}"> ${action} </button>
		            </div>
		        </div>`
		    }).join('');
		}
	
    /* MAIN */
    const root = document.createElement('div');
    root.className = 'boards-wrapper f-c';
    root.innerHTML = `
        <div class="setting bt-wrapper">
            <button class="my-board-bt"> my board </button>
            <button class="add-bt"> add board </button>
            <button class="sort-bt"> sort </button>
        </div>
        <div class="boards-thum-wrapper"></div>
    `
    renderBoardsThum(boards, root);

    root.appendChild(BoardAddModal());
    initEventListener();
    return root;
}

export default BoardsWrapper;