prgrms-web-devcourse · harry7435 · Nov 13, 2023 · Nov 20, 2023 · Nov 28, 2023 · Dec 10, 2023
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 # FEDC5_LearningTS_Study
+
 [러닝 타입스크립트](https://www.yes24.com/Product/Goods/116585556)로 타입스크립트 뿌시기 !
 
 <br/>
 
-
 ## ⭐️ 스타디 팀 ⭐️
 
 > 조익준 김석주 이예진 백윤서 손호민 최용재 현세인
@@ -12,15 +12,16 @@
 
 ## ⏰ 스터디 시간
 
-**매주 월요일 10:00**
+~~매주 월요일 10:00~~
 
-<br/>
+**월요일 16:00**
 
+<br/>
 
 ## 🔨 진행 방식
 
 - 정해진 챕터의 내용을 공부하고 본인 폴더에 정리.md 올리기
-  - 안올리면 반성문 
+  - 안올리면 반성문
 - 지정 문제 풀고 코드파일도 올리기
 - 모르는 것 자유롭게 많이 많이 질문하기
 - 다른 팀원 코드 리뷰하기
@@ -30,18 +31,18 @@
 
 ## ⚙️ 컨벤션
 
-* 본인 이름의 브랜치에 정리 파일 및 실습 파일 올리고 PR 보내기
-* 파일명 규칙
-  * 본인 이름 폴더 / 챕터 {번호 및 제목} / {정리}.md
-  * 본인 이름 폴더 / 챕터 {번호 및 제목} / Practice / {문제}.ts
+- 본인 이름의 브랜치에 정리 파일 및 실습 파일 올리고 PR 보내기
+- 파일업로드
+  - `본인 이름 폴더` / 내에 정리 md 파일, 예제문제 풀이 ts파일
 
 <br/>
 
-
 ## 🗓 스터디 일정
 
-| 회차 | 일시     | 스터디 내용      | 
-| ---- | -------- | --------  |
-| 1    | 23.11.13 월 | CHAPTER 1, 2, 3, 4 | 
-
-
+| 회차 | 일시        | 스터디 내용                                        |
+| ---- | ----------- | -------------------------------------------------- |
+| 1    | 23.11.13 월 | CHAPTER 1, 2, 3, 4                                 |
+| 2    | 23.11.20 월 | CHAPTER 5, 6, 7 ,10                                |
+| 3    | 23.11.27 월 | CHAPTER 8,9 + type-challenges 워밍업(1) & 쉬움(13) |
+| 4    | 23.12.04 월 | CHAPTER 15, Vue+TS 과제 중 이슈 공유               |
+| 5    | 23.12.11 월 | TodoList 과제 TS 전환                              |
diff --git a/Todo-ts/.gitignore b/Todo-ts/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Todo-ts/index.html b/Todo-ts/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./main.css" />
+    <title>To Do List TS</title>
+  </head>
+  <body>
+    <main class="app"></main>
+    <!-- <div id="app"></div> -->
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/Todo-ts/main.css b/Todo-ts/main.css
@@ -0,0 +1,141 @@
+/* 전역 css */
+body {
+  font-size: 62.5%;
+  background-color: #fff2d8;
+  margin: 0;
+  padding: 10px;
+}
+
+main {
+  background-color: #ead7bb;
+  margin: 0 auto;
+  padding: 20px;
+  width: 90vw;
+  height: 90vh;
+}
+
+/* 제목 */
+h1 {
+  font-size: 2rem;
+  text-align: center;
+  margin: 10px 0;
+  user-select: none;
+}
+
+/* 입력 폼 */
+.todoForm {
+  display: flex;
+  width: 80%;
+  height: 10%;
+  text-align: center;
+  vertical-align: middle;
+  margin: 0 auto;
+  background: #ead7bb;
+  justify-content: center;
+  align-items: center;
+}
+
+.todoForm > input {
+  margin: 5px auto;
+  padding: 10px;
+  width: 80%;
+  height: 70%;
+  font-size: 1.4rem;
+  font-weight: 700;
+  border: 0;
+  border-radius: 5px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.todoForm > button {
+  margin: 5px auto;
+  text-align: center;
+  background: #113946;
+  color: white;
+  font-size: 1.2rem;
+  font-weight: 700;
+  width: 15%;
+  height: 75%;
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.todoForm > button:hover {
+  background: #267b97;
+}
+
+/* TodoList */
+.todoList {
+  width: 80%;
+  margin: 10px auto;
+}
+
+.todoList > ul {
+  display: flex;
+  margin: 0 auto;
+  padding: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.todoList li {
+  display: flex;
+  list-style: none;
+  margin: 10px 0;
+  padding: 10px;
+  width: 100%;
+  text-align: center;
+  background: #bca37f;
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+}
+
+.todoList li span {
+  margin: 0 auto;
+  font-size: 1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+}
+
+.todoList li span:hover {
+  text-decoration: underline;
+  color: #fff2d8;
+}
+
+.todoList button {
+  padding: 5px 10px;
+  background: #113946;
+  color: white;
+  font-size: 1rem;
+  font-weight: 700;
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.todoList button:hover {
+  background: #267b97;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: lightgray;
+}
+
+/* TodoCount */
+.todoCount {
+  width: 80%;
+  margin: 10px auto;
+  text-align: center;
+  font-size: 1.2rem;
+  font-weight: 700;
+  user-select: none;
+}
diff --git a/Todo-ts/package.json b/Todo-ts/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "vanilla-ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/Todo-ts/public/vite.svg b/Todo-ts/public/vite.svg
diff --git a/Todo-ts/src/components/App.ts b/Todo-ts/src/components/App.ts
@@ -0,0 +1,77 @@
+import { NewFuncParams, StateArray } from '../globalTypes';
+import { storage } from '../utils/storage';
+import validation from '../utils/validation';
+import Header from './Header';
+import TodoCount from './TodoCount';
+import TodoForm from './TodoForm';
+import TodoList from './TodoList';
+
+export default function App(
+  this: any,
+  { $target, initialState }: NewFuncParams
+) {
+  // new 미사용 방어코드
+  if (!new.target) {
+    throw new Error('new 키워드를 사용하여야 합니다.');
+  }
+  this.state = initialState;
+
+  this.setState = (nextState: StateArray) => {
+    this.state = nextState;
+    todoCount.setState(this.state);
+    todoList.setState(this.state);
+  };
+
+  // 헤더
+  new Header({
+    $target,
+    text: 'Simple Todo List',
+  });
+
+  // Todo 입력폼
+  new TodoForm({
+    $target,
+    onSubmit: (text: string) => {
+      const nextState = [
+        ...todoList.state,
+        {
+          text,
+          isCompleted: false,
+        },
+      ];
+
+      // state 유효성 검사 후 업데이트
+      this.setState(validation(nextState));
+      storage.setItem('todos', JSON.stringify(nextState));
+    },
+  });
+
+  // Todo 리스트
+  const todoList = new TodoList({
+    $target,
+    initialState: validation(initialState),
+    onClick: (text: string, id: string | undefined) => {
+      const nextState = [...this.state];
+
+      // 삭제할 값이 있을 경우 삭제
+      if (text === '삭제') nextState.splice(Number(id), 1);
+
+      nextState.forEach((task, i) => {
+        if (task.text === text && i === Number(id)) {
+          // 데이터 수정
+          nextState[i].isCompleted = !nextState[i].isCompleted;
+        }
+      });
+
+      // state 유효성 검사 후 업데이트
+      this.setState(validation(nextState));
+      storage.setItem('todos', JSON.stringify(nextState));
+    },
+  });
+
+  // TodoCount
+  const todoCount = new TodoCount({
+    $target,
+    initialState: this.state,
+  });
+}
diff --git a/Todo-ts/src/components/Header.ts b/Todo-ts/src/components/Header.ts
@@ -0,0 +1,24 @@
+import { QuerySelectType } from '../globalTypes';
+
+interface HeaderParams {
+  $target: HTMLElement;
+  text: string;
+}
+
+export default function Header(this: any, { $target, text }: HeaderParams) {
+  // new 미사용 방어코드
+  if (!new.target) {
+    throw new Error('new 키워드를 사용하여야 합니다.');
+  }
+
+  const $header: QuerySelectType<HTMLHeadingElement> =
+    document.createElement('h1');
+
+  $target.appendChild($header);
+
+  this.render = () => {
+    $header.textContent = text;
+  };
+
+  this.render();
+}