hsu-makeus-challenge · immhyemi · May 27, 2025 · May 27, 2025 · May 27, 2025 · May 27, 2025
@@ -0,0 +1 @@
+* @hyesngy
@@ -0,0 +1,23 @@
+<!-- PR 제목은 "Create Week{주차} Mission{번호}" 으로 작성 -->
+<!-- ex) Create Week1 Mission1 -->
+
+## 📝 미션 번호
+<!-- 주차와 미션 번호를 넣어주세요 -->
+N주차 Misson N
+
+## 📋 구현 사항
+<!-- 구현한 내용을 bullet point로 작성해주세요 -->
+- 
+
+## 📎 스크린샷
+<!-- 미션 구현 화면의 스크린샷을 첨부해주세요 -->
+
+
+## ✅ 체크리스트
+- [ ] Merge 하려는 브랜치가 올바르게 설정되어 있나요?
+- [ ] 로컬에서 실행했을 때 에러가 발생하지 않나요?
+- [ ] 불필요한 주석이 제거되었나요?
+- [ ] 코드 스타일이 일관적인가요?
+
+## 🤔 질문 사항
+<!-- 다른 스터디원들에게 궁금한 점이 있다면 작성해주세요 -->
@@ -0,0 +1,14 @@
+name: Auto Author Assign
+
+on:
+  pull_request_target:
+    types: [ opened, reopened ]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  assign-author:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: toshimaru/[email protected]
@@ -0,0 +1,3 @@
+node_modules
+# Keep environment variables out of version control
+.env
@@ -0,0 +1,53 @@
+# 🍀 HSU UMC 8th Web 🍀
+
+
+## 👤 스터디원
+**👴🏼Senior**
+
+
+| <img src="https://avatars.githubusercontent.com/u/165576376?s=96&v=4" width=100> | <img src="https://avatars.githubusercontent.com/u/113487989?s=96&v=4" width=100> | <img src="https://avatars.githubusercontent.com/u/180927161?s=96&v=4" width=100> |<img src="https://avatars.githubusercontent.com/u/139767837?s=96&v=4" width=100> | <img src="https://avatars.githubusercontent.com/u/146899497?s=96&v=4" width=100> | <img src="https://avatars.githubusercontent.com/u/147235267?s=96&v=4" width=100> |
+| :---: | :---: | :---: | :---: | :---: | :---: |
+| [윤혜성](https://github.com/hyesngy) | [양인서](https://github.com/sheepyis) | [우정혁](https://github.com/woojo230) | [윤상혁](https://github.com/ysh2002m) | [조희연](https://github.com/joyeeon) | [임성훈](https://github.com/PocheonLim) | 
+
+**👶🏼Junior**
+
+| <img src="https://avatars.githubusercontent.com/u/158552165?s=96&v=4" width=100> | <img src="https://avatars.githubusercontent.com/u/147246023?s=96&v=4" width=100> | <img src="https://avatars.githubusercontent.com/u/160628390?s=96&v=4" width=100> | <img src="https://avatars.githubusercontent.com/u/163666284?s=96&v=4" width=100> |<img src="https://avatars.githubusercontent.com/u/202471958?s=96&v=4" width=100> |
+| :---: | :---: | :---: | :---: | :---: |
+| [박세웅](https://github.com/hardwoong) | [원준영](https://github.com/geg222) | [임혜미](https://github.com/wendy0802) | [유상완](https://github.com/wantkdd) | [정동열](https://github.com/dongyeol02) |
+
+<br>
+
+
+## 🤙🏼 컨벤션
+### 💡커밋 메시지
+✅ **feat: Create Week{주차} Mission{번호}**
+
+ex) 1주차 미션 1 완료한 경우
+<br>
+`feat: Create Week1 Mission1`
+
+<br>
+
+✅ **{커밋 태그}: {메시지}**
+
+ex) `feat: 댓글 등록 기능 추가`
+
+
+<br>
+
+### 💫 commit 태그
+
+| 태그 | 설명 |
+| --- | --- |
+| feat | 새로운 기능 추가 |
+| fix | 버그 수정 |
+| docs | 문서 수정 |
+| style | 코드 스타일 수정 |
+| refactor | 코드 리팩토링 |
+| design | UI, CSS 수정 및 디자인 변경 |
+| comment | 주석 추가(코드 변경 X) 혹은 오타 수정 |
+| rename | 파일, 폴더명 수정 혹은 이동 |
+| remove | 파일, 폴더 삭제
+<br>
+
+
diff --git a/Web/Week0/dongyeol02/1주차/index.html b/Web/Week0/dongyeol02/1주차/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <script type="module" src="./dist/script.js" defer></script>
+    <title>UMC TODO</title>
+  </head>
+  <body>
+    <main>
+      <div class="todo-container">
+        <h1 class="todo-container__header">YONG TODO</h1>
+        <form id="todo-form" class="todo-container__form">
+          <input
+            type="text"
+            id="todo-input"
+            class="todo-container__input"
+            placeholder="할 일을 입력해주세요"
+            required
+          />
+          <!--버튼이 눌렸을때 어떠한 행동을 취하기 위해서 type="submit -->
+          <button type="submit" class="todo-container__button">할 일 추가</button>
+        </form>
+        <div class="render-container">
+          <div class="render-container__section">
+            <h2 class="render-container__title">할 일</h2>
+            <ul id="todo-list" class="render-container__list"></ul>
+        </div>
+            <div class="render-container__section">
+            <h2 class="render-container__title">완 료</h2>
+            <ul id="done-list" class="render-container__list">
+            </ul>
+          </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/Web/Week0/dongyeol02/1주차/src/script.ts b/Web/Week0/dongyeol02/1주차/src/script.ts
@@ -0,0 +1,91 @@
+//1. HTML 요소 선택
+const todoInput = document.getElementById("todo-input") as HTMLInputElement;
+const todoForm = document.getElementById("todo-form") as HTMLFormElement;
+const todoList = document.getElementById("todo-list") as HTMLUListElement;
+const doneList = document.getElementById("done-list") as HTMLUListElement;
+
+//2. 할 일이 어떨게 생긴건지 Type 정의
+type Todo = {
+  id: number;
+  text: string;
+};
+let todos: Todo[] = [];
+let doneTasks: Todo[] = [];
+
+//-할 일 목록 렌더링 하는 함수 정의
+const renderTasks = (): void => {
+  todoList.innerHTML = "";
+  doneList.innerHTML = "";
+
+  todos.forEach((todo): void => {
+    const li = createTodoElement(todo, false);
+    todoList.appendChild(li);
+  });
+
+  doneTasks.forEach((todo) => {
+    const li = createTodoElement(todo, true);
+    doneList.appendChild(li);
+  });
+};
+
+//3. 할 일 텍스트 입력 처리 함수 (공백 자르기)
+/*const getTodoText = (): string => {
+  return todoInput.value.trim();
+};*/
+
+const getTodoText = (): string => todoInput.value.trim();
+
+//4.할 일 추가 처리 함수
+const addTodo = (text: string): void => {
+  todos.push({ id: Date.now(), text: text });
+  todoInput.value = "";
+  renderTasks();
+};
+//5.할 일 상태 변경 (*완료 이동)
+const completeTodo = (todo: Todo): void => {
+  todos = todos.filter((t): boolean => t.id !== todo.id);
+  doneTasks.push(todo);
+  renderTasks();
+};
+//6. 완료됭 할 일 삭제 함수
+const deleteTodo = (todo: Todo): void => {
+  doneTasks = doneTasks.filter((t): boolean => t.id !== todo.id);
+  renderTasks();
+};
+
+//7. 할일 아이쳄 생성 함수 (완료 여부에 따라 버튼 텍스트나 색상 설정)
+const createTodoElement = (todo: Todo, isDone: boolean): HTMLLIElement => {
+  const li = document.createElement("li");
+  li.classList.add("render-container__item");
+  li.textContent = todo.text;
+  const button = document.createElement("button");
+  button.classList.add("render-container__item-button");
+
+  if (isDone) {
+    button.textContent = "삭제";
+    button.style.backgroundColor = "#dc3545";
+  } else {
+    button.textContent = "완료";
+    button.style.backgroundColor = "#28a745";
+  }
+
+  button.addEventListener("click", (): void => {
+    if (isDone) {
+      deleteTodo(todo);
+    } else {
+      completeTodo(todo);
+    }
+  });
+
+  li.appendChild(button);
+  return li;
+};
+
+//8. 폼 제출 이벤트 리스너!
+todoForm.addEventListener("submit", (event: Event): void => {
+  event.preventDefault();
+  const text = getTodoText();
+  if (text) {
+    addTodo(text);
+  }
+});
diff --git a/Web/Week0/dongyeol02/1주차/style.css b/Web/Week0/dongyeol02/1주차/style.css
@@ -0,0 +1,113 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /*VH(Viewport Height) : 뷰포트 높이의 1% 길이와 동일합니다.*/
+  background-color: #f1f1f1;
+}
+
+.todo-container {
+  background-color: white;
+  padding: 20px;
+  border-radius: 12px;
+  width: 350px;
+  text-align: center;
+}
+
+.todo-container__header {
+  font-size: 24px;
+  margin-bottom: 16px;
+}
+
+.todo-container__form {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.todo-container__input {
+  flex: 1; /*속성값이 1 이상이면 flex item의 원래 크기에 상관없이 flex container를 채우도록 flex item의 크기가 커진다.*/
+  padding: 10px;
+  border: 1px black solid;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.todo-container__button {
+  background-color: greenyellow;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  cursor: pointer; /*커서 바꾸기*/
+  border-radius: 6px;
+  transition: backgrond-color 0.3s ease;
+}
+
+.todo-container__button:hover {
+  background-color: green;
+}
+.render-container {
+  display: flex;
+  justify-content: space-between; /*좌우로 찢어지게끔 배치!!*/
+  gap: 20px;
+}
+.render-container__title {
+  font-size: 18px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.render-container__section {
+  width: 100%;
+  text-align: left;
+}
+.render-container__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.render-container__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 8px;
+  border-bottom: 1px solid skyblue;
+  background-color: #f1f1f1;
+
+  border-radius: 6px;
+  margin-bottom: 6px;
+
+  width: 100%;
+}
+
+.render-container__item-text {
+  flex: 1;
+}
+
+.render-container__item-button {
+  background-color: red;
+  color: white;
+  border: none;
+  padding: 6px, 10px;
+
+  cursor: pointer;
+  border-radius: 3px;
+  font-size: 12px;
+  transition: background-color 0.3s ease;
+  width: 30%;
+  height: 25px;
+}
+.render-container__item-button:hover {
+  background-color: rgb(217, 79, 79);
+}
diff --git a/Web/Week0/dongyeol02/1주차/tsconfig.json b/Web/Week0/dongyeol02/1주차/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2016", // ECMAScript 2016으로 컴파일
+    "module": "ES2015", // ES2015 모듈 시스템 사용
+    "rootDir": "./src", // 소스 파일의 루트 디렉토리
+    "outDir": "./dist", // 컴파일된 파일이 저장될 디렉토리
+    "esModuleInterop": true, // ES 모듈 호환성 설정
+    "forceConsistentCasingInFileNames": true, // 파일 이름의 대소문자 일관성 강제
+    "strict": true, // 엄격한 타입 검사
+    "skipLibCheck": true, // 라이브러리 파일 검사 건너뜀
+    "removeComments": true, // 컴파일된 코드에서 주석 제거
+    "noEmitOnError": false, // 컴파일 에러 발생 시 파일 생성 안 함
+    "noUnusedLocals": true, // 사용하지 않는 지역 변수에 대해 에러 발생
+    "noUnusedParameters": true, // 사용하지 않는 매개변수에 대해 에러 발생
+    "noImplicitReturns": true, // 함수에서 명시적으로 값을 반환하지 않는 경우 에러 발생
+    "noFallthroughCasesInSwitch": true, // switch 문에서 fallthrough 방지
+    "noUncheckedIndexedAccess": true // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+  }
+}