[동현] Web Component

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "printWidth": 140
+}

src/components/todo-Input.ts

@@ -0,0 +1,20 @@
+import Component from "../core"
+
+export default class TodoInput extends Component<HTMLDivElement> {
+  template(): string {
+    return `
+			 <form>
+        <input type="text" />
+        <button>Submit</button>
+      </form>
+		`
+  }
+
+  setEvent(): void {
+    this.addEvent("submit", "form", (event) => {
+      event.preventDefault()
+      const inputElem = this.target.querySelector("input") as HTMLInputElement
+      this.props.addTodo(inputElem.value)
+    })
+  }
+}

src/components/todo-list.ts

@@ -0,0 +1,46 @@
+import Component from "../core"
+import { Todo } from "../types"
+
+interface TodoListProps {
+  todos: Todo[]
+  deleteTodo: (todoId: number) => void
+  toggleActive: (todoId: number) => void
+}
+
+export default class TodoList extends Component<HTMLUListElement, TodoListProps> {
+  template(): string {
+    const { todos } = this.props!
+    return `
+			${todos
+        .map(
+          (todo) => `
+					<li data-id=${todo.id}>
+						${todo.title}
+						<button type="button" id="toggle-button" style="color: ${todo.isActive ? "#09F" : "#F09"}">
+							${todo.isActive ? "비활성화" : "활성화"}
+						</button>
+						<button type="button" id="delete-button">삭제</button>
+					</li>
+				`
+        )
+        .join("")}
+		`
+  }
+
+  getTodoId(element: HTMLElement): number {
+    const todoId = Number((element.closest("[data-id]") as HTMLLIElement)!.dataset.id)
+    return todoId
+  }
+
+  setEvent(): void {
+    this.addEvent("click", "#toggle-button", (event) => {
+      const todoId = this.getTodoId(event.target as HTMLElement)
+      this.props!.toggleActive(todoId)
+    })
+
+    this.addEvent("click", "#delete-button", (event) => {
+      const todoId = this.getTodoId(event.target as HTMLElement)
+      this.props!.deleteTodo(todoId)
+    })
+  }
+}

src/core/index.ts

@@ -0,0 +1,67 @@
+type ComponentInternalRecord = Record<string, any>
+
+interface ComponentOptions<TElement = HTMLElement, Props = any, State extends ComponentInternalRecord = ComponentInternalRecord> {
+  target: TElement
+  props?: Props
+  state?: State
+}
+
+export default abstract class Component<
+  TElement extends HTMLElement,
+  Props = any,
+  State extends ComponentInternalRecord = ComponentInternalRecord
+> {
+  target: TElement
+  props?: Props
+  private _state?: State
+
+  constructor({ target, props, state = {} as State }: ComponentOptions<TElement, Props, State>) {
+    this.target = target
+    this.props = props
+    this._state = state
+
+    this.setup()
+    this.render()
+    this.setEvent()
+  }
+
+  setup() {}
+
+  get state() {
+    return { ...this._state! }
+  }
+
+  set state(newState: State) {
+    if (this._state) {
+      this._state = { ...this._state, ...newState }
+      this.render()
+    }
+  }
+
+  setState(newState: State) {
+    if (this._state) {
+      this._state = { ...this._state, ...newState }
+      this.render()
+    }
+  }
+
+  abstract template(): string
+
+  render() {
+    this.target.innerHTML = this.template()
+    this.componentDidMount()
+  }
+
+  componentDidMount() {}
+
+  addEvent(eventType: keyof HTMLElementEventMap, selector: keyof HTMLElementTagNameMap | string, callback: EventListener) {
+    this.target.addEventListener(eventType, (event) => {
+      const target = event.target as HTMLElement
+      if (target.closest(selector)) {
+        callback(event)
+      }
+    })
+  }
+
+  setEvent() {}
+}

src/main.ts

@@ -1 +1,72 @@
-// your Code
+import Component from "./core"
+
+import TodoInput from "./components/todo-Input"
+import TodoList from "./components/todo-list"
+import { Todo } from "./types"
+
+interface TodoState {
+  todos: Todo[]
+}
+
+class App extends Component<HTMLDivElement, {}, TodoState> {
+  setup() {
+    this.state = {
+      todos: [],
+    }
+  }
+
+  componentDidMount(): void {
+    const todoInputElem = this.target.querySelector("#todo-input") as HTMLDivElement
+    const todoListElem = this.target.querySelector("#todo-list") as HTMLUListElement
+
+    new TodoInput({
+      target: todoInputElem,
+      props: {
+        addTodo: this.addTodo.bind(this),
+      },
+    })
+
+    new TodoList({
+      target: todoListElem,
+      props: {
+        todos: this.state!.todos,
+        deleteTodo: this.deleteTodo.bind(this),
+        toggleActive: this.toggleTodoActive.bind(this),
+      },
+    })
+  }
+
+  template(): string {
+    return `
+			<main>
+				<div id="todo-input"></div>
+      	<ul id="todo-list"></ul>
+			</main>
+		`
+  }
+
+  addTodo(title: string) {
+    const newTodo = {
+      id: Date.now(),
+      title,
+      isActive: false,
+    } as Todo
+    this.setState({ ...this.state, todos: [...this.state!.todos, { ...newTodo }] })
+  }
+
+  deleteTodo(todoId: number) {
+    const filteredTodo = this.state!.todos.filter((todo) => todo.id !== todoId)
+    this.setState({ todos: filteredTodo })
+  }
+
+  toggleTodoActive(todoId: number) {
+    const updateTodo = this.state!.todos.map((todo) => (todo.id === todoId ? { ...todo, isActive: !todo.isActive } : todo))
+    this.setState({ todos: updateTodo })
+  }
+}
+
+const rootElement = document.getElementById("app") as HTMLDivElement
+
+if (rootElement) {
+  new App({ target: rootElement })
+}

src/types/index.ts

@@ -0,0 +1,5 @@
+export interface Todo {
+  id: number
+  title: string
+  isActive: boolean
+}

tsconfig.json

@@ -17,8 +17,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }