Merge pull request #3 from psst54/feature/class-definitions

Feature/class definitions: define subject / task class

index.html

@@ -23,65 +23,23 @@ <h2>Open</h2>
 
           <hr class="open-hr" />
 
-          <ul class="card-list">
-            <li class="card">
-              <header><h3>Card Title 1</h3></header>
-              <main>
-                <ol>
-                  <li class="task">
-                    <input type="checkbox" />
-                    <p>task 1</p>
-                  </li>
-                  <li class="task">
-                    <input type="checkbox" />
-                    <p>task 2</p>
-                  </li>
-                </ol>
-              </main>
-            </li>
-            <li class="card">
-              <header><h3>Card Title 2</h3></header>
-              <main>
-                <ol>
-                  <li class="task">
-                    <input type="checkbox" />
-                    <p>task 1</p>
-                  </li>
-                  <li class="task">
-                    <input type="checkbox" />
-                    <p>task 2</p>
-                  </li>
-                </ol>
-              </main>
-            </li>
-          </ul>
+          <ul class="card-list" id="open-subject-list"></ul>
         </section>
 
         <section class="board-column" id="done-column">
           <h2>Done</h2>
 
           <hr class="done-hr" />
 
-          <ul class="card-list">
-            <li class="card">
-              <header><h3>Card Title 1</h3></header>
-              <main>
-                <ol>
-                  <li class="task">
-                    <input type="checkbox" />
-                    <p>task 1</p>
-                  </li>
-                  <li class="task">
-                    <input type="checkbox" />
-                    <p>task 2</p>
-                  </li>
-                </ol>
-              </main>
-            </li>
-          </ul>
+          <ul class="card-list" id="done-subject-list"></ul>
         </section>
       </div>
     </div>
   </body>
   <script src="js/index.js"></script>
+  <script src="js/models/subject.js"></script>
+  <script src="js/models/task.js"></script>
+  <script src="js/viewModels/subjectViewModel.js"></script>
+  <script src="js/viewModels/taskViewModel.js"></script>
+  <script src="js/constant.js"></script>
 </html>

js/constant.js

@@ -0,0 +1,2 @@
+const OPEN = 'open';
+const DONE = 'done';

js/index.js

@@ -1 +1,18 @@
-console.log('작성 시작');
+document.addEventListener('DOMContentLoaded', () => {
+  const taskViewModel = new TaskViewModel();
+  const subjectViewModel = new SubjectViewModel(taskViewModel);
+
+  const openSubject1 = new Subject('Opened Subject 1', OPEN);
+  taskViewModel.addTask('task 1', openSubject1.getId());
+  taskViewModel.addTask('task 2', openSubject1.getId());
+  subjectViewModel.addSubject(openSubject1);
+
+  const openSubject2 = new Subject('Opened Subject 2', OPEN);
+  taskViewModel.addTask('task 1', openSubject2.getId());
+  subjectViewModel.addSubject(openSubject2);
+
+  const doneSubject1 = new Subject('Done Subject 1', DONE);
+  taskViewModel.addTask('task 1', doneSubject1.getId());
+  taskViewModel.addTask('task 2', doneSubject1.getId());
+  subjectViewModel.addSubject(doneSubject1);
+});

js/models/subject.js

@@ -0,0 +1,28 @@
+class Subject {
+  constructor(title = 'New Subject', state = OPEN) {
+    this.title = title;
+    this.taskList = [];
+    this.state = state;
+    this.id = Math.random().toString(36).substring(2); // [todo] make random id function
+  }
+
+  addTask(task) {
+    this.taskList.push(task);
+  }
+
+  getTitle() {
+    return this.title;
+  }
+
+  getState() {
+    return this.state;
+  }
+
+  getTaskList() {
+    return this.taskList;
+  }
+
+  getId() {
+    return this.id;
+  }
+}

js/models/task.js

@@ -0,0 +1,10 @@
+class Task {
+  constructor(title, subjectId) {
+    this.title = title;
+    this.subjectId = subjectId;
+  }
+
+  getTitle() {
+    return this.title;
+  }
+}

js/viewModels/subjectViewModel.js

@@ -0,0 +1,59 @@
+class SubjectViewModel {
+  constructor(taskViewModel) {
+    this.subjectList = [];
+    this.taskViewModel = taskViewModel;
+  }
+
+  addSubject(subject) {
+    this.subjectList.push(subject);
+    this.render();
+  }
+
+  render() {
+    const columnList = [OPEN, DONE];
+
+    columnList.forEach((column) => {
+      const subjectListElement = document.getElementById(
+        `${column}-subject-list`
+      );
+      subjectListElement.innerHTML = '';
+
+      this.subjectList.forEach((subject) => {
+        const subjectId = subject.getId();
+        const taskListElementId = `${subjectId}-task-list`;
+        if (subject.getState() !== column) return;
+
+        const subjectElement = document.createElement('li');
+        subjectElement.classList.add('card');
+        subjectElement.innerHTML = `
+            <header>
+              <h3>${subject.getTitle()}</h3>
+            <header>
+            <main>
+              <ol id=${taskListElementId}>
+              </ol>
+            </main>
+            `;
+        subjectListElement.appendChild(subjectElement);
+
+        const taskListElement = document.getElementById(taskListElementId);
+        this.renderTasks(subjectId, taskListElement);
+      });
+    });
+  }
+
+  renderTasks(subjectId, taskListElement) {
+    this.taskViewModel.getTasksBySubject(subjectId).forEach((task) => {
+      const taskElement = document.createElement('li');
+      taskElement.className = 'task';
+      const checkboxElement = document.createElement('input');
+      checkboxElement.type = 'checkbox';
+      const titleElement = document.createElement('p');
+      titleElement.innerText = task.getTitle();
+
+      taskElement.appendChild(checkboxElement);
+      taskElement.appendChild(titleElement);
+      taskListElement.appendChild(taskElement);
+    });
+  }
+}

js/viewModels/taskViewModel.js

@@ -0,0 +1,17 @@
+class TaskViewModel {
+  constructor() {
+    this.taskList = new Map();
+  }
+
+  addTask(title, subjectId) {
+    const task = new Task(title, subjectId);
+    if (!this.taskList.has(subjectId)) {
+      this.taskList.set(subjectId, []);
+    }
+    this.taskList.get(subjectId).push(task);
+  }
+
+  getTasksBySubject(subjectId) {
+    return this.taskList.get(subjectId) || [];
+  }
+}

todo.md

@@ -4,14 +4,14 @@
 | -------- | ---------------------------------- | ----------------------------------- |
 | high     | **기본 레이아웃**                  | 헤더, column(open, done) 배치       |
 |          |                                    | CSS 스타일 적용                     |
-| high     | **데이터 구조 작성**               | 카드 및 태스크 class 정의           |
-| high     | **카드 추가**                      | 카드 추가 버튼과 모달 구현          |
-|          |                                    | 카드 추가 버튼 이벤트 핸들러 작성   |
-| high     | **카드 삭제**                      | 카드 삭제 버튼 구현                 |
-|          |                                    | 카드 삭제 버튼 이벤트 핸들러 작성   |
-| high     | **카드 상태 토글**                 | 카드 완료 체크박스 추가             |
-|          |                                    | 카드 상태에 따른 스타일 변경        |
-|          |                                    | 카드 상태 변경 이벤트 핸들러 작성   |
+| high     | **데이터 구조 작성**               | 목표 및 태스크 class 정의           |
+| high     | **목표 추가**                      | 목표 추가 버튼과 모달 구현          |
+|          |                                    | 목표 추가 버튼 이벤트 핸들러 작성   |
+| high     | **목표 삭제**                      | 목표 삭제 버튼 구현                 |
+|          |                                    | 목표 삭제 버튼 이벤트 핸들러 작성   |
+| high     | **목표 상태 토글**                 | 목표 완료 체크박스 추가             |
+|          |                                    | 목표 상태에 따른 스타일 변경        |
+|          |                                    | 목표 상태 변경 이벤트 핸들러 작성   |
 | high     | **태스크 추가**                    | 태스크 input 필드 구현              |
 |          |                                    | submit 이벤트 핸들러 작성           |
 | high     | **태스크 삭제**                    | 태스크 삭제 버튼 구현               |