+
+ );
+};
+
+export default TodoBefore;
\ No newline at end of file
diff --git a/To-do List(TS+React)/src/components/TodoForm.tsx b/To-do List(TS+React)/src/components/TodoForm.tsx
new file mode 100644
index 00000000..22f8330f
--- /dev/null
+++ b/To-do List(TS+React)/src/components/TodoForm.tsx
@@ -0,0 +1,41 @@
+import React, { FormEvent, useState } from 'react';
+import { useTodo } from '../context/TodoContext';
+
+
+interface TodoFormProps {
+ input: string;
+ setInput: (input: string) => void;
+ handleSubmit: (e: React.FormEventYONG TODO
+ +
+
+
+
+ 할 일
+-
+ {todos.map((todo) : any => (
+
- + {todo.text} + + + ))} +
+
+ 완료
+-
+ {doneTodos.map((todo) : any => (
+
- + {todo.text} + + + ))} +
+
+ )
+}
+
+export default TodoList
\ No newline at end of file
diff --git a/To-do List(TS+React)/src/context/TodoContext.tsx b/To-do List(TS+React)/src/context/TodoContext.tsx
new file mode 100644
index 00000000..67c83ae1
--- /dev/null
+++ b/To-do List(TS+React)/src/context/TodoContext.tsx
@@ -0,0 +1,49 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { TTodo } from '../types/todo';
+
+interface ITodoContext {
+ todos: TTodo[];
+ doneTodos: TTodo[];
+ addTodo: (text: string) => void;
+ completeTodo: (todo: TTodo) => void;
+ deleteTodo: (todo: TTodo) => void;
+}
+
+export const TodoContext = createContext{title}
+-
+ {todos?.map((todo) : any => (
+
- + {todo.text} + + + ))} +
+
+
+
+
+
+ );
+}
diff --git a/darkmode/src/06-useContext/ThemeToggleButton.tsx b/darkmode/src/06-useContext/ThemeToggleButton.tsx
new file mode 100644
index 00000000..7f6f3083
--- /dev/null
+++ b/darkmode/src/06-useContext/ThemeToggleButton.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { THEME, useTheme } from './context/ThemeProvider'
+import clsx from 'clsx'
+
+export default function ThemeToggleButton() {
+
+ const{theme, toggleTheme} = useTheme();
+
+ const isLightMode = theme === THEME.LIGHT;
+ return (
+
+ )
+}
diff --git a/darkmode/src/06-useContext/context/ThemeProvider.tsx b/darkmode/src/06-useContext/context/ThemeProvider.tsx
new file mode 100644
index 00000000..9c702b11
--- /dev/null
+++ b/darkmode/src/06-useContext/context/ThemeProvider.tsx
@@ -0,0 +1,42 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+
+export enum THEME {
+ LIGHT = 'LIGHT',
+ DARK = 'DARK',
+}
+
+type TTheme = THEME.LIGHT | THEME.DARK;
+
+interface IThemeContext {
+ theme: TTheme;
+ toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext+ Theme Content +
+
+
+
+
diff --git a/todo-list/src/script.ts b/todo-list/src/script.ts
new file mode 100644
index 00000000..e056ff74
--- /dev/null
+++ b/todo-list/src/script.ts
@@ -0,0 +1,98 @@
+// 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;
+
+// 할 일 및 완료된 작업을 저장할 배열
+type Task = {
+ id: number;
+ text: string;
+};
+
+let todos: Task[] = [];
+let doneTasks: Task[] = [];
+
+// 할 일 텍스트 입력 처리 함수
+const getTodoText = (): string => {
+ return todoInput.value.trim();
+};
+
+// 할 일 추가 함수
+const addTodo = (text: string): void => {
+ todos.push({ id: Date.now(), text });
+ console.log(todos);
+ todoInput.value = '';
+ renderTasks();
+};
+
+// 할 일 상태 변경 (완료로 이동)
+const completeTask = (task: Task): void => {
+ todos = todos.filter((t) => t.id !== task.id);
+ doneTasks.push(task);
+ renderTasks();
+};
+
+// 완료된 할 일 삭제 함수
+const deleteTask = (task: Task): void => {
+ doneTasks = doneTasks.filter((t) => t.id !== task.id);
+ renderTasks();
+};
+
+// 할 일 아이템 생성 함수
+const createTaskElement = (task: Task, isDone: boolean): HTMLLIElement => {
+ const li = document.createElement('li');
+ li.classList.add('render-container__item');
+ li.textContent = task.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', () => {
+ if (isDone) {
+ deleteTask(task);
+ } else {
+ completeTask(task);
+ }
+ });
+
+ li.appendChild(button);
+ return li;
+};
+
+// 할 일 목록 렌더링 함수
+const renderTasks = (): void => {
+ todoList.innerHTML = '';
+ doneList.innerHTML = '';
+
+ todos.forEach((task) => {
+ const li = createTaskElement(task, false);
+ todoList.appendChild(li);
+ });
+
+ doneTasks.forEach((task) => {
+ const li = createTaskElement(task, true);
+ doneList.appendChild(li);
+ });
+};
+
+// 폼 제출 이벤트 리스너
+todoForm.addEventListener('submit', (event: Event) => {
+ event.preventDefault();
+ const text = getTodoText();
+ if (text) {
+ addTodo(text);
+ }
+});
+
+// 초기 렌더링
+renderTasks();
diff --git a/todo-list/style.css b/todo-list/style.css
new file mode 100644
index 00000000..1aec7203
--- /dev/null
+++ b/todo-list/style.css
@@ -0,0 +1,121 @@
+/* ===== 기본 스타일 ===== */
+body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #eef2f3;
+ margin: 0;
+}
+
+/* ===== Todo 컨테이너 ===== */
+.todo-container {
+ background: white;
+ padding: 20px;
+ border-radius: 12px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ 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;
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 6px;
+ font-size: 14px;
+}
+
+.todo-container__button {
+ background-color: #28a745;
+ color: white;
+ border: none;
+ padding: 8px 12px;
+ 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;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.render-container__list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+/* ===== 리스트 아이템 ===== */
+.render-container__item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ padding: 8px;
+ border-bottom: 1px solid #ddd;
+ background: #f9f9f9;
+ border-radius: 6px;
+ margin-bottom: 6px;
+ width: 100%; /* Make sure the item takes full available width */
+}
+
+.render-container__item-text {
+ flex: 1;
+
+ white-space: nowrap; /* Prevent text from wrapping */
+ overflow: hidden; /* Hide any overflow */
+ text-overflow: ellipsis; /* Add '...' when text overflows */
+ display: block; /* Ensure it's treated as a block for the overflow to work */
+}
+
+.render-container__item-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;
+}
+
+.render-container__item-button:hover {
+ background-color: #c82333;
+}
\ No newline at end of file
diff --git a/todo-list/tsconfig.json b/todo-list/tsconfig.json
new file mode 100644
index 00000000..5b9e5f6c
--- /dev/null
+++ b/todo-list/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/week6/.env b/week6/.env
new file mode 100644
index 00000000..42ce2a25
--- /dev/null
+++ b/week6/.env
@@ -0,0 +1,2 @@
+VITE_SERVER_API_URL=http://test2.shop:44003
+
diff --git a/week6/.gitignore b/week6/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/week6/.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/week6/README.md b/week6/README.md
new file mode 100644
index 00000000..40ede56e
--- /dev/null
+++ b/week6/README.md
@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+ extends: [
+ // Remove ...tseslint.configs.recommended and replace with this
+ ...tseslint.configs.recommendedTypeChecked,
+ // Alternatively, use this for stricter rules
+ ...tseslint.configs.strictTypeChecked,
+ // Optionally, add this for stylistic rules
+ ...tseslint.configs.stylisticTypeChecked,
+ ],
+ languageOptions: {
+ // other options...
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+ plugins: {
+ // Add the react-x and react-dom plugins
+ 'react-x': reactX,
+ 'react-dom': reactDom,
+ },
+ rules: {
+ // other rules...
+ // Enable its recommended typescript rules
+ ...reactX.configs['recommended-typescript'].rules,
+ ...reactDom.configs.recommended.rules,
+ },
+})
+```
diff --git a/week6/eslint.config.js b/week6/eslint.config.js
new file mode 100644
index 00000000..092408a9
--- /dev/null
+++ b/week6/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+ { ignores: ['dist'] },
+ {
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ files: ['**/*.{ts,tsx}'],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ plugins: {
+ 'react-hooks': reactHooks,
+ 'react-refresh': reactRefresh,
+ },
+ rules: {
+ ...reactHooks.configs.recommended.rules,
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+ },
+)
diff --git a/week6/index.html b/week6/index.html
new file mode 100644
index 00000000..e4b78eae
--- /dev/null
+++ b/week6/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ YONG TODO
+ +
+
+
+
+ 할 일
+
+
+ 완료
+
+
+
+
+
+
+ );
+}
+export default HomeLayout;
\ No newline at end of file
diff --git a/week6/src/layouts/ProtectedLayout.tsx b/week6/src/layouts/ProtectedLayout.tsx
new file mode 100644
index 00000000..e89edea8
--- /dev/null
+++ b/week6/src/layouts/ProtectedLayout.tsx
@@ -0,0 +1,19 @@
+
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+import { use } from 'react'
+
+
+export const ProtectedLayout = () => {
+ const { accessToken } = useAuth()
+ const location = useLocation()
+
+ if(!accessToken){
+ alert("로그인 후 사용가능합니다.")
+ return
+ home page
+
+ );
+}
+export default HomePage;
\ No newline at end of file
diff --git a/week6/src/pages/LoginPage.tsx b/week6/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..ab21ac6f
--- /dev/null
+++ b/week6/src/pages/LoginPage.tsx
@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import useForm from '../hooks/useForm';
+import { UserSigninInformation, validateSignin } from '../utils/validate';
+import { useNavigate } from 'react-router-dom';
+
+
+
+const LoginPage = () => {
+ const{login,accessToken} = useAuth()
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ if(accessToken){
+ navigate('/')
+ }
+ }, [accessToken, navigate])
+
+
+ const {values, errors,touched, getInputProps} = useForm
+
+ );
+}
+export default LoginPage;
\ No newline at end of file
diff --git a/week6/src/pages/MyPage.tsx b/week6/src/pages/MyPage.tsx
new file mode 100644
index 00000000..4391ec47
--- /dev/null
+++ b/week6/src/pages/MyPage.tsx
@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import { getMyInfo } from '../apis/auth'
+import { useState } from 'react'
+import { ResponseMyInfoDto } from '../types/auth'
+import { useAuth } from '../context/AuthContext'
+import { useNavigate } from 'react-router-dom'
+
+const MyPage = () => {
+ const navigate = useNavigate()
+ const {logout} = useAuth()
+ const [data,setData] = useState
+
+ {errors?.email &&touched?.email &&(
+ {errors.email}
)}
+
+
+ {errors?.password &&touched?.password &&({errors.password}
)}
+
+
+
+
+
+ 
+
+ )
+}
+
+export default MyPage
\ No newline at end of file
diff --git a/week6/src/pages/NotFoundPage.tsx b/week6/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..a5f13852
--- /dev/null
+++ b/week6/src/pages/NotFoundPage.tsx
@@ -0,0 +1,8 @@
+const NotFoundPage = () => {
+ return (
+ {data?.data.name}님 환영합니다.
+{data?.data.email}
+ + +
+ Not found
+
+ );
+}
+export default NotFoundPage;
diff --git a/week6/src/pages/SignupPage.tsx b/week6/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..6d9c389a
--- /dev/null
+++ b/week6/src/pages/SignupPage.tsx
@@ -0,0 +1,95 @@
+import { z } from 'zod'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod';
+import { postSignup } from '../apis/auth';
+
+
+
+const schema = z.object({
+ email: z.string().email({ message: "올바른 이메일 형식이 아닙니다." }),
+ password: z.string()
+ .min(8, { message: "비밀번호는 최소 8자 이상이어야 합니다." })
+ .max(20, { message: "비밀번호는 최대 20자 이하이어야 합니다." }),
+
+ passwordCheck:z.string()
+ .min(8, { message: "비밀번호는 최소 8자 이상이어야 합니다." })
+ .max(20, { message: "비밀번호는 최대 20자 이하이어야 합니다." }),
+ name: z.string().min(1, { message: "이름을 입력해주세요." })
+
+
+}).refine((data)=>data.password === data.passwordCheck,{message:"비밀번호가 일치하지 않습니다.",path:['passwordCheck']})
+
+type FormFields = z.infer
+
+ )
+}
+export default SignupPage
+
+
diff --git a/week6/src/types/auth.ts b/week6/src/types/auth.ts
new file mode 100644
index 00000000..ef2cb4fd
--- /dev/null
+++ b/week6/src/types/auth.ts
@@ -0,0 +1,44 @@
+import { CommonResponse } from './common';
+
+//회원가입 관련
+export type RequestSignupDto = {
+ email: string;
+ password: string;
+ name: string;
+ bio?: string;
+ avatar?: string;
+}
+
+export type ResponseSignupDto = CommonResponse<{
+ id: number;
+ name: string;
+ email: string;
+ bio: string|null;
+ avatar: string|null;
+ createdAt: Date
+ updatedAt: Date
+}>
+
+//로그인 관련
+export type RequestSigninDto = {
+ email: string;
+ password: string;
+}
+
+export type ResponseSigninDto = CommonResponse<{
+ id: number;
+ name: string;
+ accessToken: string;
+ refreshToken: string;
+}>
+
+//내정보 조회
+export type ResponseMyInfoDto = CommonResponse<{
+ id: number;
+ name: string;
+ email: string;
+ bio: string|null;
+ avatar: string|null;
+ createdAt: Date
+ updatedAt: Date
+}>
diff --git a/week6/src/types/common.ts b/week6/src/types/common.ts
new file mode 100644
index 00000000..0a1b1c2d
--- /dev/null
+++ b/week6/src/types/common.ts
@@ -0,0 +1,6 @@
+export type CommonResponse
+
+ {errors?.email && (
+ {errors.email?.message}
)}
+
+
+ {errors?.password && ({errors.password?.message}
)}
+
+
+ {errors?.passwordCheck && ({errors.password?.message}
)}
+
+
+ {errors?.name && ({errors.name?.message}
)}
+
+
+