+ 
+
+ );
+};
+
+export default CartItem;
diff --git a/ozoo/Week9/src/components/CartList.tsx b/ozoo/Week9/src/components/CartList.tsx
new file mode 100644
index 00000000..274f16e5
--- /dev/null
+++ b/ozoo/Week9/src/components/CartList.tsx
@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import type { RootState } from "../app/store";
+import CartItem from "./CartItem";
+import { clearCart, calculateTotals } from "../features/cart/cartSlice";
+import { openModal } from "../features/modal/modalSlice";
+
+const CartList = () => {
+ const items = useSelector((state: RootState) => state.cart.items);
+ const totalQuantity = useSelector(
+ (state: RootState) => state.cart.totalQuantity
+ );
+ const totalAmount = useSelector((state: RootState) => state.cart.totalAmount);
+ const dispatch = useDispatch();
+
+ useEffect(() => {
+ dispatch(calculateTotals());
+ }, [items]);
+
+ return (
+
+
+ {item.title}
+{item.singer}
+ ₩{item.price} +
+
+ {item.amount}
+
+
+
+ {items.map((item) => (
+
+ );
+};
+
+export default CartList;
diff --git a/ozoo/Week9/src/components/ConfirmModal.tsx b/ozoo/Week9/src/components/ConfirmModal.tsx
new file mode 100644
index 00000000..cab4d5f7
--- /dev/null
+++ b/ozoo/Week9/src/components/ConfirmModal.tsx
@@ -0,0 +1,39 @@
+// components/ConfirmModal.tsx
+import { useDispatch, useSelector } from "react-redux";
+import type { RootState } from "../app/store";
+import { closeModal } from "../features/modal/modalSlice";
+import { clearCart } from "../features/cart/cartSlice";
+
+const ConfirmModal = () => {
+ const dispatch = useDispatch();
+ const isOpen = useSelector((state: RootState) => state.modal.isOpen);
+
+ if (!isOpen) return null;
+
+ return (
+
+
+ 총 수량: {totalQuantity}개
++ 총 금액: ₩{totalAmount.toLocaleString()} +
+
+
+
+
+
+ );
+};
+
+export default ConfirmModal;
diff --git a/ozoo/Week9/src/components/Header.tsx b/ozoo/Week9/src/components/Header.tsx
new file mode 100644
index 00000000..5d90f8cf
--- /dev/null
+++ b/ozoo/Week9/src/components/Header.tsx
@@ -0,0 +1,27 @@
+import { useSelector } from "react-redux";
+import type { RootState } from "../app/store";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+ const totalCount = useSelector((state: RootState) =>
+ state.cart.items.reduce((sum, item) => sum + item.amount, 0)
+ );
+
+ return (
+
+
+ 정말 삭제하시겠습니까?
+
+
+
+
+
+
+ YoungJu 장바구니
+ +
+
+ );
+};
+
+export default CartPage;
diff --git a/ozoo/Week9/src/types/cart.ts b/ozoo/Week9/src/types/cart.ts
new file mode 100644
index 00000000..c4e95548
--- /dev/null
+++ b/ozoo/Week9/src/types/cart.ts
@@ -0,0 +1,9 @@
+// src/types/cart.ts
+export interface CartItem {
+ id: string;
+ title: string;
+ singer: string;
+ price: string;
+ img: string;
+ amount: number;
+}
diff --git a/ozoo/Week9/src/vite-env.d.ts b/ozoo/Week9/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/ozoo/Week9/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+
+
\ No newline at end of file
diff --git a/ozoo/week1/ToDoLIst/src/script.ts b/ozoo/week1/ToDoLIst/src/script.ts
new file mode 100644
index 00000000..ec7d3770
--- /dev/null
+++ b/ozoo/week1/ToDoLIst/src/script.ts
@@ -0,0 +1,98 @@
+// HTML 요소 가져오기
+const todoInput = document.querySelector('#todo-input') as HTMLInputElement;
+const todoForm = document.querySelector('#todo-form') as HTMLFormElement;
+const todoList = document.querySelector('#todo-list') as HTMLUListElement;
+const doneList = document.querySelector('#done-list') as HTMLUListElement;
+
+// 할 일 타입 정의
+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): void => {
+ const li = createTodoElement(todo, true);
+ doneList.appendChild(li);
+ });
+};
+
+// 입력값 가져오기
+const getTodoText = (): string => {
+ return todoInput.value.trim();
+};
+
+// 할 일 추가
+const addTodo = (text: string): void => {
+ todos.push({ id: Date.now(), text });
+ todoInput.value = '';
+ renderTasks();
+};
+
+// 할 일 완료 처리
+const completeTodo = (todo: Todo): void => {
+ todos = todos.filter((t) => t.id !== todo.id);
+ doneTasks.push(todo);
+ renderTasks();
+};
+
+// 완료된 할 일 삭제
+const deleteTodo = (todo: Todo): void => {
+ doneTasks = doneTasks.filter((t) => t.id !== todo.id);
+ renderTasks();
+};
+
+// 할 일 리스트 요소 생성
+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__button');
+
+ if (isDone) {
+ button.textContent = '삭제';
+ button.style.backgroundColor = "#dc3545";
+ } else {
+ button.textContent = '완료';
+ button.style.backgroundColor = "#28a745";
+ }
+
+ button.addEventListener('click', () => {
+ if (isDone) {
+ deleteTodo(todo);
+ } else {
+ completeTodo(todo);
+ }
+ });
+
+ li.appendChild(button);
+ return li;
+};
+
+// 폼 이벤트 리스너 추가
+if (todoForm) {
+ todoForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const text = getTodoText();
+ if (text) {
+ addTodo(text);
+ }
+ });
+}
+
+// 초기 렌더링
+renderTasks();
\ No newline at end of file
diff --git a/ozoo/week1/ToDoLIst/styles.css b/ozoo/week1/ToDoLIst/styles.css
new file mode 100644
index 00000000..c097edfb
--- /dev/null
+++ b/ozoo/week1/ToDoLIst/styles.css
@@ -0,0 +1,143 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body {
+ font-family: 'Roboto', sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f7f7f7;
+}
+
+.todo-container {
+ width: 350px;
+ padding: 20px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+.todo-container__header {
+ margin-bottom: 16px;
+ font-size: 24px;
+}
+
+.todo-container__form {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 20px;
+}
+
+.todo-container__input {
+ flex: 1;
+ padding: 8px;
+ width: 60%;
+ border: 1px solid #ccc;
+ border-radius: 6px;
+ font-size: 14px;
+}
+
+.todo-container__button {
+ padding: 8px 12px;
+ background-color: green;
+ color: white;
+ border: none;
+ cursor: pointer;
+ border-radius: 6px;
+ transition: background-color 0.3s ease;
+}
+
+.todo-container__button:hover {
+ background-color: #218838;
+}
+
+.render-container {
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+}
+
+
+.render-container__section {
+ width: 100%;
+ text-align: left;
+}
+
+.render-container__title {
+ font-size: 18px;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: center;
+}
+.render-container__item{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ background: #f9f9f9;
+ padding: 8px;
+ margin-bottom: 6px;
+ width: 100%;
+ border-bottom: 1px solid #ddd;
+ border-radius: 6px;
+
+}
+.render-container__item-text {
+ flex: 1;
+}
+
+.render-container__button {
+ background-color: #dc3545;
+ color: white;
+ border: none;
+ padding: 6px 10px;
+ cursor: pointer;
+ border-radius: 6px;
+ font-size: 12px;
+ transition: background-color 0.3s ease;
+}
+
+ul {
+ list-style: none;
+ padding: 0;
+}
+
+li {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #f0f0f0;
+ padding: 10px;
+ margin: 5px 0;
+ border-radius: 5px;
+}
+
+.complete-btn {
+ background-color: #28a745;
+ color: white;
+ padding: 5px;
+ border: none;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.complete-btn:hover {
+ background-color: #218838;
+}
+
+.delete-btn {
+ background-color: #dc3545;
+ color: white;
+ padding: 5px;
+ border: none;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.delete-btn:hover {
+ background-color: #c82333;
+}
\ No newline at end of file
diff --git a/ozoo/week1/ToDoLIst/tsconfig.json b/ozoo/week1/ToDoLIst/tsconfig.json
new file mode 100644
index 00000000..eda7b318
--- /dev/null
+++ b/ozoo/week1/ToDoLIst/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "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 // 인덱스 접근 시 체크되지 않은 경우 에러 발생
+ }
+ }
+
\ No newline at end of file
YOUNGJU TODO
+ +
+
+
+
+ 할 일
+
+
+