SSUMC-8th · starvingorange · Mar 21, 2025 · Mar 27, 2025 · Apr 3, 2025 · Apr 10, 2025
diff --git a/gang/Week1/todo/dist/script.js b/gang/Week1/todo/dist/script.js
@@ -0,0 +1,101 @@
+"use strict";
+const todoContainer = document.getElementById('container');
+const todoInput = document.getElementById('input');
+const todoButton = document.getElementById('input_button');
+const ongoingList = document.getElementById('ongoing_list');
+const doneList = document.getElementById('done_list');
+;
+let todos = [];
+let donetodos = [];
+const savedDoneList = localStorage.getItem("donetodos");
+const savedTodoList = localStorage.getItem("todos");
+function addTodo(event) {
+    event.preventDefault();
+    const newTodo = todoInput.value;
+    const newTodoObj = {
+        text: newTodo,
+        id: Date.now(),
+    };
+    todos.push(newTodoObj);
+    todoInput.value = "";
+    todoListup(newTodoObj);
+    saveTodo();
+}
+function saveTodo() {
+    localStorage.setItem("todos", JSON.stringify(todos));
+}
+function saveDone() {
+    localStorage.setItem("donetodos", JSON.stringify(donetodos));
+}
+function todoListup(newTodoObj) {
+    const newtodoList = document.createElement('li');
+    newtodoList.classList.add("listline");
+    newtodoList.id = newTodoObj.id.toString();
+    const newtodoText = document.createElement('span');
+    newtodoText.innerText = newTodoObj.text;
+    const newtodoButton = document.createElement('button');
+    newtodoButton.classList.add("greenbtn");
+    newtodoButton.innerText = "완료";
+    newtodoButton.addEventListener('click', doneListup);
+    newtodoList.appendChild(newtodoText);
+    newtodoList.appendChild(newtodoButton);
+    ongoingList.appendChild(newtodoList);
+}
+function doneListup(event) {
+    const doneBtn = event.target;
+    ;
+    const doneLi = doneBtn.parentElement;
+    const doneSpan = doneLi.querySelector('span');
+    todos = todos.filter((todo) => todo.id !== parseInt(doneLi.id));
+    donetodos.push({
+        text: doneSpan.innerText,
+        id: parseInt(doneLi.id),
+    });
+    doneLi.remove();
+    saveTodo();
+    const newdoneList = document.createElement('li');
+    newdoneList.classList.add("listline");
+    newdoneList.id = doneLi.id.toString();
+    const newdoneText = document.createElement('span');
+    newdoneText.innerText = doneSpan.innerText;
+    const newdoneButton = document.createElement('button');
+    newdoneButton.innerText = "삭제";
+    newdoneButton.classList.add("redbtn");
+    newdoneButton.addEventListener('click', deleteDone);
+    newdoneList.appendChild(newdoneText);
+    newdoneList.appendChild(newdoneButton);
+    doneList.appendChild(newdoneList);
+    saveDone();
+}
+function deleteDone(event) {
+    const eraseBtn = event.target;
+    const eraseList = eraseBtn.parentElement;
+    donetodos = donetodos.filter((done) => done.id !== parseInt(eraseList.id));
+    eraseList.remove();
+    saveDone();
+}
+function createDoneList(doneObj) {
+    const newdoneList = document.createElement('li');
+    newdoneList.classList.add("listline");
+    newdoneList.id = doneObj.id.toString();
+    const newdoneText = document.createElement('span');
+    newdoneText.innerText = doneObj.text;
+    const newdoneButton = document.createElement('button');
+    newdoneButton.innerText = "삭제";
+    newdoneButton.classList.add("redbtn");
+    newdoneButton.addEventListener('click', deleteDone);
+    newdoneList.appendChild(newdoneText);
+    newdoneList.appendChild(newdoneButton);
+    doneList.appendChild(newdoneList);
+}
+if (savedDoneList) {
+    const parsedDone = JSON.parse(savedDoneList);
+    donetodos = parsedDone;
+    parsedDone.forEach(createDoneList);
+}
+if (savedTodoList) {
+    const parsedTodos = JSON.parse(savedTodoList);
+    todos = parsedTodos;
+    parsedTodos.forEach(todoListup);
+}
+todoContainer.addEventListener('submit', addTodo);
diff --git a/gang/Week1/todo/index.html b/gang/Week1/todo/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UMC ToDoList</title>
+    <link rel="stylesheet" href="./style.css">
+    <script type= "module" src="./dist/script.js" defer></script>
+<body>
+    <div id="container">
+        <h1 id="header">GANG TODO</h1>
+        <form id="add_form">
+            <input type="text" id="input" placeholder="할 일 입력">
+            <button class= "greenbtn" type="submit">할 일 추가</button>
+        </form>
+
+        <div id= "list" display="flex">
+            <div id="ongoing_list">
+                <h2 class="minititle">할 일</h2>
+                <ul>
+            </div>
+            <div id ="done_list">
+                <h2 class="minititle">완료</h2>
+                <ul>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/gang/Week1/todo/src/script.ts b/gang/Week1/todo/src/script.ts
@@ -0,0 +1,127 @@
+const todoContainer = document.getElementById('container') as HTMLFormElement;
+const todoInput = document.getElementById('input') as HTMLInputElement;
+const todoButton = document.getElementById('input_button');
+const ongoingList= document.getElementById('ongoing_list') as HTMLUListElement;
+const doneList= document.getElementById('done_list')as HTMLUListElement;;
+
+
+let todos: {text:string, id:number}[] = [];//할 일 저장 배열
+let donetodos: {text:string, id:number}[] = [];//완료 저장 배열
+
+
+const savedDoneList = localStorage.getItem("donetodos");//새로고침 시 저장된 목록 
+const savedTodoList = localStorage.getItem("todos");//저장된 할 일 목록
+
+//할 일 추가
+function addTodo(event:SubmitEvent){
+    event.preventDefault();
+    const newTodo:string = todoInput.value;
+    const newTodoObj={
+        text: newTodo,
+        id: Date.now(),
+    };
+
+    todos.push(newTodoObj);
+    todoInput.value = "";
+    todoListup(newTodoObj);
+    saveTodo();
+}
+
+//저장
+function saveTodo(){
+    localStorage.setItem("todos", JSON.stringify(todos));
+}
+function saveDone(){
+    localStorage.setItem("donetodos", JSON.stringify(donetodos));
+}
+
+//할 일 목록 생성
+function todoListup(newTodoObj: {text:string, id: number}){
+    const newtodoList = document.createElement('li');
+    newtodoList.classList.add("listline");
+    newtodoList.id = newTodoObj.id.toString();
+    const newtodoText = document.createElement('span');
+    newtodoText.innerText = newTodoObj.text;
+    const newtodoButton = document.createElement('button');
+    newtodoButton.classList.add("greenbtn");
+    newtodoButton.innerText = "완료";
+    newtodoButton.addEventListener('click', doneListup);
+
+    newtodoList.appendChild(newtodoText);
+    newtodoList.appendChild(newtodoButton);
+    ongoingList.appendChild(newtodoList);
+}
+
+//완료 목록 생성
+function doneListup(event: MouseEvent){
+    const doneBtn = event.target as HTMLButtonElement; ;
+    const doneLi = doneBtn.parentElement as HTMLLIElement;
+    const doneSpan= doneLi.querySelector('span') as HTMLSpanElement;
+    todos = todos.filter((todo) => todo.id !== parseInt(doneLi.id));//할 일 목록에서 삭제
+    donetodos.push({
+        text: doneSpan.innerText,
+        id:parseInt(doneLi.id),
+    });//완료 목록에 추가
+    doneLi.remove();
+    saveTodo();
+
+    const newdoneList = document.createElement('li');
+    newdoneList.classList.add("listline");
+    newdoneList.id = doneLi.id.toString();
+    const newdoneText = document.createElement('span');
+    newdoneText.innerText = doneSpan.innerText;
+    const newdoneButton = document.createElement('button');
+    newdoneButton.innerText = "삭제";
+    newdoneButton.classList.add("redbtn");
+
+    newdoneButton.addEventListener('click', deleteDone);
+
+    newdoneList.appendChild(newdoneText);
+    newdoneList.appendChild(newdoneButton);
+    doneList.appendChild(newdoneList);
+    saveDone();
+}
+
+//삭제
+function deleteDone(event: Event){
+    const eraseBtn = event.target as HTMLButtonElement;
+    const eraseList = eraseBtn.parentElement as HTMLLIElement;
+    donetodos = donetodos.filter((done) => done.id !== parseInt(eraseList.id));
+    eraseList.remove();
+    saveDone();
+}
+
+//새로 고침 시 완료 목록 불러오기
+function createDoneList(doneObj: { text: string, id: number }) {
+    const newdoneList = document.createElement('li');
+    newdoneList.classList.add("listline");
+    newdoneList.id = doneObj.id.toString();
+
+    const newdoneText = document.createElement('span');
+    newdoneText.innerText = doneObj.text;
+
+    const newdoneButton = document.createElement('button');
+    newdoneButton.innerText = "삭제";
+    newdoneButton.classList.add("redbtn");
+
+    newdoneButton.addEventListener('click', deleteDone);
+
+    newdoneList.appendChild(newdoneText);
+    newdoneList.appendChild(newdoneButton);
+    doneList.appendChild(newdoneList);
+}
+
+//새로고침 시 저장된 배열 불러오기기
+if(savedDoneList){
+    const parsedDone = JSON.parse(savedDoneList);
+    donetodos = parsedDone;
+    parsedDone.forEach(createDoneList);
+}
+if(savedTodoList){
+    const parsedTodos = JSON.parse(savedTodoList);
+    todos = parsedTodos;
+    parsedTodos.forEach(todoListup);
+}
+
+//폼 제출 시 할 일 추가
+todoContainer.addEventListener('submit', addTodo);
diff --git a/gang/Week1/todo/style.css b/gang/Week1/todo/style.css
@@ -0,0 +1,72 @@
+#container {
+    width: 600px;
+    margin: 100px auto;
+    padding: 20px;
+    border-radius: 10px;
+    background: white;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+
+#add_form {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+}
+
+/*할 일 & 완료 중앙 정렬*/
+#input{
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+/* 할 일 & 완료 리스트 */
+#list {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+/* 리스트 스타일 */
+.listline{
+    display: flex;  
+    justify-content: space-between;  /* 양쪽 정렬 */
+    align-items: center;
+    background-color: #f8f9fa;
+    padding: 10px;
+    border-radius: 10px;
+    margin: 5px 0;
+    width: 250px; /* 원하는 크기로 조절 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+/* 리스트 배치*/
+#ongoing_list{
+    flex: 1;
+    text-align: center;
+}
+#done_list{
+    flex: 1;
+    text-align: center;
+}
+
+/* 버튼 스타일 */
+.greenbtn {
+    background: green;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.redbtn {
+    background: red;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
diff --git a/gang/Week1/todo/tsconfig.json b/gang/Week1/todo/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 // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+  }
+}
diff --git a/gang/Week2/dark_mode/dark_mode/.gitignore b/gang/Week2/dark_mode/dark_mode/.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?