[Node] Project - Identify, DeleteUser

1. Identify

Client

import { Image, Title, Subtitle, Button, Input } from "./Component"
import IMG_LOGO from "../images/facebook-logo.svg"
import { useState } from "react"
import axios from 'axios'

export default function Identify(props) {
    const [email, setEmail] = useState("");

    const onChangeEmail = (event) => {
        // console.log(event.target.value)
        setEmail(event.target.value)
    }
    const onClickCancel = (event) => {
        window.location.href = "/"
    }
    const onClickSearch = () => {
        if(!email) {
            alert("이메일은 반드시 입력해야 합니다.")
            return
        }
        
        let check = email.indexOf("@");
        if(check < 0) return alert("이메일 형식에는 @ 문자가 들어가야 합니다.");

        check = email.indexOf(".")
        if(check < 0) return alert("이메일 형식에는 . 문자가 들어가야 합니다.");

        axios.get("/api/identify", {params : {email}}).then((res) => {
            console.log(res.data)
            const {result, text} = res.data;

            if(result === "fail" && text) {
                alert(text);
            } else {
                alert("계정은 " + result + "입니다.")
            }
        })
    }

    return (
        <div className="identify-layer">
            <div class="logo-box">
                <Image src={IMG_LOGO} alt="로고"/>
            </div>
            <div class="card-box">
                <div class="head">
                <Title text="내 계정 찾기"/>
                </div>
                <div class="body">
                    <Subtitle text="계정을 검색하려면 이메일 주소 또는 휴대폰 번호를 입력하세요." />
                    <Input type="text" placeholder="이메일을 입력하세요" onChange={onChangeEmail}/>
                </div>
                <div class="foot">
                    <Button type="secondary" text="취소" onClick={onClickCancel}/>
                    <Button type="primary" text="검색" onClick={onClickSearch}/>
                </div>
            </div>
        </div>
    )
}

Server

const express = require("express");
const path = require("path");
const app = express();

// 메인 페이지 접속시 html 응답하는 방법

// 미들웨어 : html, css, js, img 파일들이 담긴 곳 명시
app.use(express.static(path.join(__dirname, "public")))

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'))
})

// Body로 파라미터를 받기 위한 설정
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}))
app.use(bodyparser.json())

const api = require("./src/api/index");
app.use("/api", api);

const http = require("http").createServer(app);
http.listen(8080, () => {
    console.log("server listen start : 8080")
})

// /api/identify GET 데이터를 전달 받는다.
router.get("/identify", (req, res) => {
    console.log("====================> [GET]/api/identify call!!!")

    console.log(req.query);

    const {email} = req.query;
    if(email == "ssjj04022@naver.com") {
        res.send({result: "ssjj04022"});
    } else if(email === "aaa@naver.com") {
        res.send({result: "aaa"});
    } else if(email === "bbb@naver.com") {
        res.send({result: "bbb"});
    } else {
        res.send({result: "fail", text:"계정이 존재하지 않습니다."})
    }
})

2. DeleteUser

Client

import { Image, Title, Subtitle, Button, Input } from "./Component"
import IMG_LOGO from "../images/facebook-logo.svg"
import { useState } from "react"
import axios from 'axios'

export default function Identify(props) {
  const [userid, setUserid] = useState("")
  const [email, setEmail] = useState("")

  const onChangeUserid = (event) => {
        // console.log(event.target.value)
        setUserid(event.target.value)
  }

  const onChangeEmail = (event) => {
        // console.log(event.target.value)
        setEmail(event.target.value)
  }

  const onClickCancel = (event) => {
        window.location.href = "/"
  }

  const onClickOk = (event) => {
        // validation 체크      
        if(!userid) return alert("계정 아이디를 입력하세요")

        let check = email.indexOf("@")
        if(check < 0) return alert("이메일 형식에는 @ 이 들어가야 합니다.")

        check = email.indexOf(".")
        if(check < 0) return alert("이메일 형식에는 . 이 들어가야 합니다.")

        axios.delete('/api/user', {params: {email: email, userid: userid}} ).then((res) => {
            const { result } = res.data
            console.log(result);

            if(result === "success") {
                alert("회원탈퇴가 정상적으로 처리되었습니다.")
                window.location.href = "/"
            } else {
                alert("회원탈퇴가 처리되지 못했습니다. 잠시후 다시 이용해주세요")
            }
        })
    }

  return (
    <div className="identify-layer delete-user-layer">
        <div className="logo-box">
            <Image src={IMG_LOGO} alt="로고"/>
        </div>
        <div className="card-box">
            <div className="head">
                <Title text="회원탈퇴" />
            </div>
            <div className="body">
                <Subtitle text="계정을 삭제하려면 확인을 위해 계정 아이디와 이메일 주소를 입력하세요." />
                <Input type="text" name="userid" placeholder="계정 아이디" onChange={onChangeUserid} />
                <Input type="text" name="email" placeholder="이메일 주소" onChange={onChangeEmail} />
            </div>
            <div className="foot">
                <Button type="secondary" text="취소" onClick={onClickCancel} />
                <Button type="primary" text="탈퇴" onClick={onClickOk} />
            </div>
        </div>
    </div>
  )
}

Server

const express = require("express");
const path = require("path");
const app = express();

// 메인 페이지 접속시 html 응답하는 방법

// 미들웨어 : html, css, js, img 파일들이 담긴 곳 명시
app.use(express.static(path.join(__dirname, "public")))

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'))
})

// Body로 파라미터를 받기 위한 설정
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}))
app.use(bodyparser.json())

const api = require("./src/api/index");
app.use("/api", api);

const http = require("http").createServer(app);
http.listen(8080, () => {
    console.log("server listen start : 8080")
})

// /api/user DELETE 데이터를 전달 받는다.
router.delete("/user", (req, res) => {
    console.log("====================> [DELETE]/api/user call!!!")
    console.log(req.query);

    const {email, userid} = req.query;

    if(email == "ssjj04022@naver.com" && userid == "ssjj04022") {
        res.send({result: "success"});
    } else {
        res.send({result: "fail"});
    }
})