hp-edu · bumory1987 · Jan 30, 2020 · Jan 31, 2020 · Feb 1, 2020 · Feb 2, 2020
diff --git a/README.md b/README.md
diff --git a/frontend/api.js b/frontend/api.js
@@ -0,0 +1,58 @@
+export default class APIHandler {
+  constructor() {
+    this.dummyData = [
+      {
+        id: "abc123",
+        title: "데이터베이스 구축하기",
+        category: "ongoing"
+      },
+      {
+        id: "def456",
+        title: "데이터베이스 삭제하기",
+        category: "todo"
+      }
+    ];
+  }
+
+  // TODO: 전체 카드 객체 리스트 반환. 없으면 NULL
+  async getCards() {
+    if (this.dummyData.length === 0) {
+      return null;
+    } else {
+      return this.dummyData;
+    }
+  }
+
+  // TODO: 카드 객체 생성/추가 후 ID 반환
+  async postCard(cardObj) {
+    let id = Math.round(Math.random() * 10000).toString();
+    this.dummyData.push({
+      id: id,
+      title: cardObj.title,
+      category: cardObj.category
+    });
+    console.log(this.dummyData);
+    return id;    
+  }
+
+  // TODO: ID로 카드 검색 후 내용,카테고리 수정
+  async putCard(cardObj) {
+    this.dummyData = this.dummyData.map(card => {
+      return card.id === cardObj.id
+        ? { ...card, category: cardObj.category, title: cardObj.title }
+        : card;
+    });
+    console.log(this.dummyData)
+  }
+
+  // TODO: ID로 카드 검색 후 삭제
+  async deleteCard(id) {
+    this.dummyData = this.dummyData.filter(card =>{
+      return card.id !== id
+    });
+    console.log(this.dummyData);
+  }
+
+  // TODO: API 요청 컨테이너. Method, Path, Body 속성
+  // TODO: API 호출 함수
+}
diff --git a/frontend/favicon.ico b/frontend/favicon.ico
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>AWS Kanban</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <nav>
+      <div></div>
+      <div>AWS Kaban Board</div>
+      <div></div>
+    </nav>
+    <div class="column-container">
+      <div class="column" data-card-category="todo">
+        <div class="column-header">
+          할 일
+        </div>
+        <div class="card card-create" onclick="createCard(event)">
+          +
+        </div>
+        <section class="card-container"></section>
+      </div>
+      <div class="column" data-card-category="ongoing">
+        <div class="column-header ongoing">
+          진행중
+        </div>
+        <div class="card card-create" onclick="createCard(event)">
+          +
+        </div>
+        <section class="card-container"></section>
+      </div>
+      <div class="column" data-card-category="test">
+        <div class="column-header test">
+          테스트
+        </div>
+        <div class="card card-create" onclick="createCard(event)">
+          +
+        </div>
+        <section class="card-container"></section>
+      </div>
+      <div class="column" data-card-category="done">
+        <div class="column-header done">
+          완료
+        </div>
+        <div class="card card-create" onclick="createCard(event)">
+          +
+        </div>
+        <section class="card-container"></section>
+      </div>
+    </div>
+    <script type="module" src="index.js" tyle="text/javascript"></script>
+  </body>
+</html>
diff --git a/frontend/index.js b/frontend/index.js
@@ -0,0 +1,158 @@
+// API 객체
+import APIHandler from "./api.js";
+const API = new APIHandler();
+
+// 카드 클래스
+class Card {
+  constructor(cardElement, title, id, category) {
+    this.cardElement = cardElement;
+    this.title = title;
+    this.id = id;
+    this.category = category;
+  }
+}
+
+// 전체 카드 카테고리 요소 반환
+const getCardContainers = () => {
+  return document.querySelectorAll(".card-container");
+};
+
+// 카드 요소에서 카드 객체 반환
+const getCardInfo = cardElement =>
+  new Card(
+    cardElement,
+    cardElement.children[1].value,
+    cardElement.id.replace("card-id-", ""),
+    cardElement.parentNode.parentNode.getAttribute("data-card-category")
+  );
+
+// 카드 드래그 앤 드랍 시작 이벤트. 카테고리 이름 & 카드 ID 저장. 이동가능 영역 표시
+const ondragstart = event => {
+  let currentColumnType = event.target.parentNode.parentNode.getAttribute(
+    "data-card-category"
+  );
+  getCardContainers().forEach(element => {
+    if (
+      element.parentNode.getAttribute("data-card-category") !==
+      currentColumnType
+    )
+      element.classList.add("hoverable");
+  });
+  event.dataTransfer.setData("columnType", currentColumnType);
+  event.dataTransfer.setData("cardID", event.target.id);
+};
+
+// 카드 온드랍 이벤트. 카테고리 이동
+const cardOnDrop = event => {
+  event.target.classList.remove("hover");
+  let from = event.dataTransfer.getData("columnType");
+  let to = event.target.parentNode.getAttribute("data-card-category");
+  let id = event.dataTransfer.getData("cardID");
+  let card = document.getElementById(id);
+  if (from && to && card && from !== to) {
+    event.target.appendChild(card);
+    updateCard(getCardInfo(card));
+  }
+};
+
+// 카드 드래그 앤 드랍 종료 이벤트. 이동가능 영역 표시 CSS class 제거
+const ondragend = event => {
+  getCardContainers().forEach(element => {
+    element.classList.remove("hoverable");
+  });
+};
+
+// 새로운 카드 생성 이벤트.
+const createCard = event => {
+  let category = event.target.parentNode.getAttribute("data-card-category");
+  let cardObj = new Card(null, null, null, category);
+  cardFactory(cardObj);
+};
+
+// 기존/신규 카드 요소 생성. 이후 onChangeCard() 트리거
+const cardFactory = cardObj => {
+  let cardElement = document.createElement("div");
+  cardElement.className = "card";
+  cardElement.ondragstart = ondragstart;
+  cardElement.ondragend = ondragend;
+  cardElement.setAttribute("draggable", true);
+  if (cardObj.id) cardElement.id = "card-id-" + cardObj.id;
+
+  let title = document.createElement("textarea");
+  title.setAttribute("rows", 3);
+  title.setAttribute("cols", 1);
+  title.setAttribute("name", "title");
+  title.className = "card-title";
+  title.onchange = onChangeCard;
+  if (cardObj.title) title.value = cardObj.title;
+
+  let del = document.createElement("div");
+  del.innerHTML = "x";
+  del.className = "card-delete";
+  del.onclick = deleteCard;
+
+  cardElement.appendChild(del);
+  cardElement.appendChild(title);
+
+  let cardContainer = document
+    .querySelectorAll(`[data-card-category='${cardObj.category}']`)[0]
+    .querySelector(".card-container");
+  cardContainer.appendChild(cardElement);
+  title.focus();
+};
+
+// 카드 생성/업데이트 컨트롤러
+const onChangeCard = event => {
+  let title = event.target.value.trim();
+  let cardElement = event.target.parentNode;
+  let cardObj = getCardInfo(cardElement);
+  if (title.length > 0 && cardElement.id === "") {
+    registerCard(cardObj);
+  } else if (title.length > 0 && cardElement.id !== "") {
+    updateCard(cardObj);
+  } else {
+    card.remove(); // 입력된 내용이 없으면 카드 생성 취소
+  }
+};
+
+// 기존 카드들 불러오기
+const getCards = async () => {
+  var cards = await API.getCards();  
+  if (cards && cards.length > 0) {
+    cards.forEach(card => {      
+      let cardObj = new Card(null, card.title, card.id, card.category);
+      cardFactory(cardObj);
+    });
+  }
+};
+
+// 카드 등록
+const registerCard = async cardObj => {
+  let cardId = await API.postCard(cardObj);
+  cardObj.cardElement.id = "card-id-" + cardId;
+};
+
+// 카드 업데이트
+const updateCard = async cardObj => {
+  await API.putCard(cardObj);
+};
+
+// 카드 삭제
+const deleteCard = event => {
+  let cardElement = event.target.parentNode;
+  let id = cardElement.id.replace("card-id-", "");
+  API.deleteCard(id);
+  cardElement.remove();
+};
+
+// 드래그 앤 드랍 이벤트 등록
+(() => {
+  window.createCard = createCard;
+  getCardContainers().forEach(element => {
+    element.ondragenter = event => event.target.classList.add("hover");
+    element.ondragleave = event => event.target.classList.remove("hover");
+    element.ondragover = event => event.preventDefault();
+    element.ondrop = cardOnDrop;
+  });
+  getCards();
+})();