[고농축 백엔드 코스Quiz5]프론트엔드와 API 연동하기

[고농축 백엔드 코스Quiz5]프론트엔드와 API 연동하기 - /users

카테고리 없음 2023. 7. 30. 21:16

Index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />
    <script src="./index.js"></script>
    <script src="./user.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>유저 리스트</title>
  </head>
  <body>
    <div class="Container">
      <div id="Wrapper">
        <div
          id="Navi_Wrapper"
          style="width: 100%; display: flex; justify-content: space-between"
        >
          <a href="../login/index.html" class="Back_Button"> 🔙로그인 </a>
          <a href="../menu/index.html" class="Back_Button"> 메뉴보기 </a>
        </div>
        <div id="Title_Wrapper">유저 리스트</div>
        <div onclick="openMenu()" id="Open_Menu_Btn">유저 리스트 열기</div>
        <div class="CloseBtnWrapper">
          <span id="CloseBtn" onclick="closeMenu()">X</span>
        </div>
        <div id="Menu_Background">
          <div class="User_Table_Item">
            <div class="Item_Info" id="email">이메일</div>
            <div class="Item_Info" id="personal">주민번호</div>
            <div class="Item_Info" id="phone">전화번호</div>
            <div class="Item_Info" id="prefer">좋아하는 사이트</div>
          </div>
          <div id="User_Data_Wrapper" />
        </div>
      </div>
    </div>
  </body>
</html>

Index.js (data를 보내는)

import express from "express";
import swaggerUi from "swagger-ui-express";
import swaggerJSDoc from "swagger-jsdoc";
import { options } from "./swagger/config.js";
import cors from "cors";

const app = express();
// swagger 생성
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerJSDoc(options)));
app.use(express.json());
app.use(cors());

app.get("/users", (req, res) => {
  const result = [
    {
      email: "aaa@gmail.com",
      name: "철수",
      phone: "010-1234-5678",
      personal: "220110-2221232",
      prefer: "https://naver.com",
    },
    {
      email: "bbb@gmail.com",
      name: "영수",
      phone: "010-1234-5678",
      personal: "220110-2000000",
      prefer: "https://naver.com",
    },
    {
      email: "ccc@gmail.com",
      name: "진수",
      phone: "010-1234-5678",
      personal: "220110-2222222",
      prefer: "https://naver.com",
    },
    {
      email: "ddd@gmail.com",
      name: "혜수",
      phone: "010-1234-5678",
      personal: "220110-2222222",
      prefer: "https://naver.com",
    },
    {
      email: "eee@gmail.com",
      name: "민수",
      phone: "010-1234-5678",
      personal: "220110-2222222",
      prefer: "https://naver.com",
    },
  ];

  res.send(result);
});


app.listen(3000, () => {
  console.log("POSTMAN으로 요청을 보냈습니다.");
});

index.js (data를 받는)

const openMenu = () => {
  let wrapper = document.getElementById('Wrapper')
  let menu = document.getElementById('Menu_Background')
  let button = document.getElementById('Open_Menu_Btn')
  let closeButton = document.getElementById('CloseBtn')
  let naviWrapper = document.getElementById('Navi_Wrapper')
  let titleWrapper = document.getElementById('Title_Wrapper')
  // wrapper.style.height = "1700px";
  wrapper.style.backgroundImage = 'url()'
  wrapper.style.backgroundColor = 'rgba(0,0,0,0.9)'
  button.style.display = 'none'
  menu.style.display = 'flex'
  closeButton.style.display = 'flex'
  naviWrapper.style.display = 'none'
  titleWrapper.style.display = 'none'

  // 회원 목록 조회 API 요청
  getUser()
}
const closeMenu = () => {
  let wrapper = document.getElementById('Wrapper')
  let menu = document.getElementById('Menu_Background')
  let button = document.getElementById('Open_Menu_Btn')
  let closeButton = document.getElementById('CloseBtn')
  let naviWrapper = document.getElementById('Navi_Wrapper')
  let titleWrapper = document.getElementById('Title_Wrapper')
  let userDataWrapper = document.querySelector('#User_Data_Wrapper')
  wrapper.style.height = ''
  wrapper.style.backgroundImage = 'url(../img/user-back-ground.jpg)'
  wrapper.style.backgroundColor = 'rgba(0,0,0,0.2)'
  wrapper.style.backgroundPosition = 'center'
  button.style.display = 'flex'
  menu.style.display = 'none'
  closeButton.style.display = 'none'
  naviWrapper.style.display = 'flex'
  titleWrapper.style.display = 'block'
  while (userDataWrapper.firstChild) {
    userDataWrapper.removeChild(userDataWrapper.firstChild)
  }
}

users.js

// 회원 목록 조회 API를 요청해주세요.
const getUser = async () => {
  // 받은 데이터로 createUserDiv함수를 이용해
  uData = await getUserData();
  userInfo = uData.data;
  // 목록 화면을 완성해주세요.
  const result = userInfo.map((uInfo) => {
    createUserDiv({
      email: uInfo.email,
      name: uInfo.name,
      phone: uInfo.phone,
      personal: uInfo.personal,
      prefer: uInfo.prefer,
    });
  });
};

const createUserDiv = (data) => {
  const userTableItem = document.createElement("div");
  userTableItem.className = "User_Table_Item";

  const emailItem = document.createElement("div");
  emailItem.className = "Item_Info";
  emailItem.textContent = data?.email || "abc@gmail.com";

  const personalItem = document.createElement("div");
  personalItem.className = "Item_Info";
  personalItem.textContent = data?.personal || "220111-1******";

  const phoneItem = document.createElement("div");
  phoneItem.className = "Item_Info";
  phoneItem.textContent = data?.phone || "010-1234-5678";

  const preferItem = document.createElement("div");
  preferItem.className = "Item_Info";
  preferItem.textContent = data?.prefer || "naver.com";

  const menuBack = document.querySelector("#User_Data_Wrapper");
  menuBack.appendChild(userTableItem);
  userTableItem.appendChild(emailItem);
  userTableItem.appendChild(personalItem);
  userTableItem.appendChild(phoneItem);
  userTableItem.appendChild(preferItem);
};

const getUserData = () => {
  return axios.get("http://localhost:3000/users");
};

index.css

* {
  box-sizing: border-box;
}

.Container {
  display: flex;
  justify-content: center;
  padding: 0 100px;
}
#Wrapper {
  width: 640px;
  min-height: 100vh;
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../img/user-back-ground.jpg');
  background-color: rgba(0, 0, 0, 0.2);
  background-blend-mode: multiply;
}
#Title_Wrapper {
  padding: 150px 0 50px 0;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}
.Back_Button {
  padding-top: 30px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ebebeb;
  cursor: pointer;
}
.Back_Button:hover {
  color: #fff;
}
#Open_Menu_Btn {
  background-color: #036635;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  border-radius: 10px;
  padding: 20px;
  /* margin: 500px 0 500px 0; */
  cursor: pointer;
}
#Open_Menu_Btn:hover {
  background-color: #fff;
  color: #036635;
}
.CloseBtnWrapper {
  width: 100%;
  padding-top: 100px;
  display: flex;
  justify-content: flex-end;
}
#CloseBtn {
  display: none;
  color: #fff;
  font-size: 60px;
  font-weight: bold;
  cursor: pointer;
}
#CloseBtn:hover {
  color: #036635;
}
#Menu_Background {
  width: 100%;
  margin: 0 0 100px 0;
  padding: 20px;
  border-radius: 20px;
  background-color: rgba(999, 999, 999, 0.2);
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.User_Table_Item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 15px;
  border-bottom: 1px solid #eaeaea;
  color: #fff;
  margin-bottom: 15px;
}
.Item_Info {
  padding: 5px;
  width: 25%;
  text-align: center;
}

저작자표시 (새창열림)

ABOUT ME

코드일기 코드일기

티스토리툴바