+
+
+
+
+
+ 
+
+
+ );
+};
+
+export default TodoBefore;
\ No newline at end of file
diff --git a/week2/mission1/src/components/TodoForm.tsx b/week2/mission1/src/components/TodoForm.tsx
new file mode 100644
index 00000000..13746e20
--- /dev/null
+++ b/week2/mission1/src/components/TodoForm.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { useTodo } from '../context/TodoContext'; // 추가
+
+const TodoForm = () => {
+ const [input, setInput] = useStateYONA TODO
+ + + +
+ {/* 할 일 */}
+
+
+
+
+ {/* 완료 */}
+ 할 일
+-
+ {todos.map((todo) => (
+
- + + {todo.text} + + + + ))} +
+
+ 완료
+-
+ {doneTodos.map((todo) => (
+
- + + {todo.text} + + + + ))} +
+
+ );
+};
+
+export default TodoList;
\ No newline at end of file
diff --git a/week2/mission1/src/context/TodoContext.tsx b/week2/mission1/src/context/TodoContext.tsx
new file mode 100644
index 00000000..e3f9f56a
--- /dev/null
+++ b/week2/mission1/src/context/TodoContext.tsx
@@ -0,0 +1,49 @@
+import { createContext, useContext, useState, type PropsWithChildren } from "react";
+import type { 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) => (
+
- + + {todo.text} + + + + ))} +
+
+
+
+
+
);
+}
\ No newline at end of file
diff --git a/week2/mission2/src/useContext/components/ThemeToggleButton.tsx b/week2/mission2/src/useContext/components/ThemeToggleButton.tsx
new file mode 100644
index 00000000..ee223958
--- /dev/null
+++ b/week2/mission2/src/useContext/components/ThemeToggleButton.tsx
@@ -0,0 +1,17 @@
+import {useTheme, THEME } from '../context/ThemeProvider';
+import clsx from 'clsx';
+
+export default function ThemeToggleButton() {
+ const {theme, toggleTheme}=useTheme();
+
+ const isLightMode = theme === THEME.LIGHT;
+
+ return (
+ );
+}
\ No newline at end of file
diff --git a/week2/mission2/src/useContext/context/ThemeProvider.tsx b/week2/mission2/src/useContext/context/ThemeProvider.tsx
new file mode 100644
index 00000000..7c764939
--- /dev/null
+++ b/week2/mission2/src/useContext/context/ThemeProvider.tsx
@@ -0,0 +1,41 @@
+import { createContext, useContext, useState } from "react";
+import type { PropsWithChildren } from "react";
+
+export const THEME = {
+ LIGHT: 'LIGHT',
+ DARK: 'DARK'
+} as const;
+
+type TTheme = typeof THEME[keyof typeof THEME];
+
+interface IThemeContext {
+ theme: TTheme;
+ toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext+ Theme Content +
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim at, ab veritatis aperiam in vero, omnis iste incidunt amet id quibusdam praesentium ipsum corrupti dolorem eaque rem reprehenderit quia culpa? +
+
+ 로딩 중...
+
+ );
+};
\ No newline at end of file
diff --git a/week3/mission/src/components/MovieCard.tsx b/week3/mission/src/components/MovieCard.tsx
new file mode 100644
index 00000000..e17f8ad8
--- /dev/null
+++ b/week3/mission/src/components/MovieCard.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import type {Movie} from '../types/movie';
+import { useNavigate } from 'react-router-dom';
+
+interface MovieCardProps {
+ movie: Movie;
+ category: string;
+}
+
+export default function MovieCard({ movie, category }: MovieCardProps) {
+ const [isHovered, setIsHovered] = useState(false);
+ const navigate = useNavigate();
+
+ const handleClick = () => {
+ navigate(`/movie/${category}/${movie.id}`);
+ };
+
+ return (
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ 
+ {isHovered && (
+
+ );
+}
\ No newline at end of file
diff --git a/week3/mission/src/components/Navbar.tsx b/week3/mission/src/components/Navbar.tsx
new file mode 100644
index 00000000..eeb868bc
--- /dev/null
+++ b/week3/mission/src/components/Navbar.tsx
@@ -0,0 +1,26 @@
+import { NavLink } from "react-router-dom";
+
+const LINKS = [
+ { to: '/', label: '홈' },
+ { to: '/movie/popular', label: '인기 영화' },
+ { to: '/movie/now_playing', label: '상영중' },
+ { to: '/movie/top_rated', label: '평점 높은' },
+ { to: '/movie/upcoming', label: '개봉 예정' },
+];
+
+export const Navbar = () => {
+ return (
+
+ {isHovered && (
+
+
+ )}
+ + {movie.title}
++ {movie.overview}
+
+ {LINKS.map(({to, label}) => (
+
+ isActive ? 'text-[#b2dab1] font-bold' : 'text-gray-500'
+ }>
+ {label}
+
+ ))}
+
+ );
+};
\ No newline at end of file
diff --git a/week3/mission/src/index.css b/week3/mission/src/index.css
new file mode 100644
index 00000000..f173aa4c
--- /dev/null
+++ b/week3/mission/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
\ No newline at end of file
diff --git a/week3/mission/src/main.tsx b/week3/mission/src/main.tsx
new file mode 100644
index 00000000..bef5202a
--- /dev/null
+++ b/week3/mission/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ );
+ }
+
+ if (isError || !movie) {
+ return (
+
+
+ );
+ }
+
+ const director = credits?.crew.find((person) => person.job === 'Director');
+ const topCast = credits?.cast.slice(0, 6) || [];
+
+ // 별점 렌더링 함수
+ const renderStars = (rating: number) => {
+ const fullStars = Math.floor(rating / 2);
+ const hasHalfStar = (rating % 2) >= 1;
+
+ return (
+
+
+ + 영화 정보를 불러올 수 없습니다. +
+다시 시도해주세요.
+ +
+ {[...Array(5)].map((_, i) => (
+
+ ★
+
+ ))}
+
+ );
+ };
+
+ return (
+
+ {/* 배경 이미지 */}
+
+ );
+};
+
+export default MovieDetailPage;
\ No newline at end of file
diff --git a/week3/mission/src/pages/MoviePage.tsx b/week3/mission/src/pages/MoviePage.tsx
new file mode 100644
index 00000000..05c6dce6
--- /dev/null
+++ b/week3/mission/src/pages/MoviePage.tsx
@@ -0,0 +1,88 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+import type { Movie, MovieResponse } from "../types/movie";
+import MovieCard from "../components/MovieCard";
+import { LoadingSpinner } from "../components/LoadingSpinner";
+import { useParams } from "react-router-dom";
+
+export default function MoviePage() {
+ const [movies, setMovies] = useState
+ {movie.backdrop_path ? (
+
+ ) : (
+
+ )}
+
+
+
+ {/* 메인 콘텐츠 */}
+
+ {/* 포스터 + 기본 정보 */}
+
+
+
+
+ {/* 포스터 */}
+
+
+ {/* 감독 정보 */}
+ {director && (
+
+ {movie.poster_path ? (
+ 
+ ) : (
+
+
+ {/* 상세 정보 */}
+
+ ) : (
+
+
+ )}
+ 포스터 없음
+
+ {/* 제목 */}
+
+
+
+
+ {/* 평점 및 기본 정보 */}
+ + {movie.title} +
+ {movie.tagline && ( +"{movie.tagline}"
+ )} +
+
+
+ {/* 그리드 정보 */}
+
+ {renderStars(movie.vote_average)}
+
+
+
+ + {movie.vote_average.toFixed(1)} +
++ ({movie.vote_count.toLocaleString()} 투표) +
+
+
+
+ {/* 장르 */}
+ {movie.genres && movie.genres.length > 0 && (
+
+
+ 개봉일
+{movie.release_date}
+
+
+ 상영시간
+{movie.runtime}분
+
+
+ 예산
++ {movie.budget > 0 ? `$${(movie.budget / 1000000).toFixed(1)}M` : '정보 없음'} +
+
+
+ 수익
++ {movie.revenue > 0 ? `$${(movie.revenue / 1000000).toFixed(1)}M` : '정보 없음'} +
+
+
+ )}
+ 장르
+
+ {movie.genres.map((genre) => (
+
+ {genre.name}
+
+ ))}
+
+
+
+ )}
+
+ {/* 줄거리 */}
+ 감독
+
+
+
+ 👤
+
+ {director.name}
+
+
+
+ {/* 출연진 */}
+ {topCast.length > 0 && (
+ 줄거리
+{movie.overview}
+
+
+ )}
+
+ {/* 추가 제작진 */}
+ {credits && credits.crew.length > 1 && (
+ 주요 출연진
+
+ {topCast.map((actor, index) => (
+
+
+
+ ))}
+
+ {actor.profile_path ? (
+ 
+ ) : (
+
+
+ ) : (
+
+ 👤
+
+ )}
+
+
+ {actor.character}
++ {actor.name} +
+{actor.character}
+
+
+ )}
+ 제작진
+
+ {credits.crew
+ .filter(
+ (person, index, self) =>
+ ['Director', 'Producer', 'Writer', 'Cinematography', 'Music'].includes(
+ person.job
+ ) && self.findIndex((p) => p.id === person.id) === index
+ )
+ .slice(0, 9)
+ .map((person) => (
+
+
+
+ ))}
+
+ 👤
+
+
+
+ {person.name}
+{person.job}
+
+ 에러가 발생했습니다.
+
+ )
+ }
+
+ return(
+ <>
+
+
+ {page} 페이지
+
+
+ {isPending && (
+
+
+ )}
+
+ {!isPending && (
+
+ {movies.map((movie) => (
+
+ )}
+
+
+ )
+
+}
\ No newline at end of file
diff --git a/week3/mission/src/pages/NotFoundPage.tsx b/week3/mission/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..58206aaa
--- /dev/null
+++ b/week3/mission/src/pages/NotFoundPage.tsx
@@ -0,0 +1,3 @@
+export default function NotFoundPage() {
+ return 못찾겠음
;
+}
\ No newline at end of file
diff --git a/week3/mission/src/types/movie.ts b/week3/mission/src/types/movie.ts
new file mode 100644
index 00000000..9574f22f
--- /dev/null
+++ b/week3/mission/src/types/movie.ts
@@ -0,0 +1,59 @@
+export type Movie = {
+adult: boolean;
+backdrop_path: string;
+genre_ids: number[];
+id: number;
+original_language: string;
+original_title: string;
+overview: string;
+popularity: number;
+poster_path: string;
+release_date: string;
+title: string;
+video: boolean;
+vote_average: number;
+vote_count: number;
+};
+
+export type MovieResponse = {
+page: number;
+results: Movie[];
+total_pages: number;
+total_results: number;
+};
+
+// 영화 상세 정보
+export type MovieDetail = Movie & {
+ budget: number;
+ genres: Array<{ id: number; name: string }>;
+ homepage: string;
+ imdb_id: string;
+ revenue: number;
+ runtime: number;
+ status: string;
+ tagline: string;
+};
+
+// 출연진 타입
+export type Cast = {
+ id: number;
+ name: string;
+ character: string;
+ profile_path: string | null;
+ order: number;
+};
+
+// 제작진 타입
+export type Crew = {
+ id: number;
+ name: string;
+ job: string;
+ department: string;
+ profile_path: string | null;
+};
+
+// 크레딧 응답
+export type Credits = {
+ cast: Cast[];
+ crew: Crew[];
+};
\ No newline at end of file
diff --git a/week3/mission/src/vite-env.d.ts b/week3/mission/src/vite-env.d.ts
new file mode 100644
index 00000000..172d15d3
--- /dev/null
+++ b/week3/mission/src/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// UseEffectPage
;
+}
\ No newline at end of file
diff --git a/week3/practice/src/main.tsx b/week3/practice/src/main.tsx
new file mode 100644
index 00000000..30a4c9ea
--- /dev/null
+++ b/week3/practice/src/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/week8/src/main.tsx b/week8/src/main.tsx
new file mode 100644
index 00000000..b765b64d
--- /dev/null
+++ b/week8/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ 돌려돌려LP판
+홈페이지
;
+}
\ No newline at end of file
diff --git a/week8/src/pages/LoginPage.tsx b/week8/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..c662b1e8
--- /dev/null
+++ b/week8/src/pages/LoginPage.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function LoginPage() {
+ const { accessToken } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ // 이미 로그인된 상태(토큰 있음)라면 로그인 창에 못 머물게 홈으로 튕겨냄
+ if (accessToken) {
+ alert('이미 로그인된 상태입니다.');
+ navigate('/', { replace: true });
+ }
+ }, [accessToken, navigate]);
+
+ return (
+
+ {/* ⚠️ 여기에 질문자님이 만들어두신 원래 로그인 화면 UI 디자인 코드(Tailwind 등)가 들어와야 합니다! */}
+
+ );
+}
\ No newline at end of file
diff --git a/week8/src/pages/MyPage.tsx b/week8/src/pages/MyPage.tsx
new file mode 100644
index 00000000..1619a522
--- /dev/null
+++ b/week8/src/pages/MyPage.tsx
@@ -0,0 +1,35 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const MyPage = () => {
+ const { logout } = useAuth();
+ const navigate = useNavigate();
+
+ const handleLogoutClick = async () => {
+ await logout();
+ navigate('/'); // 로그아웃 성공 후 홈으로 이동
+ };
+
+ return (
+ 로그인 페이지
+
+
+ );
+};
+
+export default MyPage;
\ No newline at end of file
diff --git a/week8/src/pages/SignupPage.tsx b/week8/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..23cb7a77
--- /dev/null
+++ b/week8/src/pages/SignupPage.tsx
@@ -0,0 +1,242 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { useAuth } from "../context/AuthContext";
+
+// 1. Zod 스키마 정의 (영상 05:00~07:15 & 정제 매칭)
+const signUpSchema = z.object({
+ email: z.string().email("올바른 이메일 형식을 입력해주세요."),
+ password: z.string().min(6, "비밀번호는 6자 이상이어야 합니다."),
+ passwordCheck: z.string().min(6, "비밀번호 재확인은 필수 입력 항목입니다."),
+ name: z.string().min(1, "닉네임을 입력해주세요!"),
+}).refine((data) => data.password === data.passwordCheck, {
+ message: "비밀번호가 일치하지 않습니다.",
+ path: ["passwordCheck"],
+});
+
+type SignUpFields = z.infer🔒 마이 페이지 (인증된 유저 전용)
+Swagger 문서에서 자물쇠가 걸려있던 회원정보 조회 API 등을 요청할 수 있는 안전한 공간입니다.
+ + +
+
+ {/* 상단 네비 바 */}
+
+ );
+}
\ No newline at end of file
diff --git a/week8/src/types/auth.ts b/week8/src/types/auth.ts
new file mode 100644
index 00000000..ba43090a
--- /dev/null
+++ b/week8/src/types/auth.ts
@@ -0,0 +1,18 @@
+import { type CommonResponse } from "./common";
+
+// 영상 21:15 부분 정의
+export interface RequestSignUpDto {
+ email: string;
+ name: string; // 닉네임 필드
+ password: string;
+}
+
+export interface UserInfoData {
+ id: number;
+ email: string;
+ name: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export type ResponseSignUpDto = CommonResponse
+
+
+
+
+