Error...
;
@@ -38,6 +46,7 @@ const HomePage = () => {
return (
+ {/* 정렬 버튼 */}
- {/* setSearch(e.target.value)}
- /> */}
+
);
diff --git a/week07/chulee-53/mission01/src/pages/LoginPage.tsx b/week08/chulee-53/mission01/src/pages/LoginPage.tsx
similarity index 100%
rename from week07/chulee-53/mission01/src/pages/LoginPage.tsx
rename to week08/chulee-53/mission01/src/pages/LoginPage.tsx
diff --git a/week07/chulee-53/mission01/src/pages/LpDetailPage.tsx b/week08/chulee-53/mission01/src/pages/LpDetailPage.tsx
similarity index 100%
rename from week07/chulee-53/mission01/src/pages/LpDetailPage.tsx
rename to week08/chulee-53/mission01/src/pages/LpDetailPage.tsx
diff --git a/week07/chulee-53/mission01/src/pages/MyPage.tsx b/week08/chulee-53/mission01/src/pages/MyPage.tsx
similarity index 100%
rename from week07/chulee-53/mission01/src/pages/MyPage.tsx
rename to week08/chulee-53/mission01/src/pages/MyPage.tsx
diff --git a/week07/chulee-53/mission01/src/pages/NotFoundPage.tsx b/week08/chulee-53/mission01/src/pages/NotFoundPage.tsx
similarity index 100%
rename from week07/chulee-53/mission01/src/pages/NotFoundPage.tsx
rename to week08/chulee-53/mission01/src/pages/NotFoundPage.tsx
diff --git a/week07/chulee-53/mission01/src/pages/SignupPage.tsx b/week08/chulee-53/mission01/src/pages/SignupPage.tsx
similarity index 100%
rename from week07/chulee-53/mission01/src/pages/SignupPage.tsx
rename to week08/chulee-53/mission01/src/pages/SignupPage.tsx
diff --git a/week07/chulee-53/mission01/src/types/auth.ts b/week08/chulee-53/mission01/src/types/auth.ts
similarity index 100%
rename from week07/chulee-53/mission01/src/types/auth.ts
rename to week08/chulee-53/mission01/src/types/auth.ts
diff --git a/week07/chulee-53/mission01/src/types/comment.ts b/week08/chulee-53/mission01/src/types/comment.ts
similarity index 100%
rename from week07/chulee-53/mission01/src/types/comment.ts
rename to week08/chulee-53/mission01/src/types/comment.ts
diff --git a/week07/chulee-53/mission01/src/types/common.ts b/week08/chulee-53/mission01/src/types/common.ts
similarity index 100%
rename from week07/chulee-53/mission01/src/types/common.ts
rename to week08/chulee-53/mission01/src/types/common.ts
diff --git a/week07/chulee-53/mission01/src/types/lp.ts b/week08/chulee-53/mission01/src/types/lp.ts
similarity index 100%
rename from week07/chulee-53/mission01/src/types/lp.ts
rename to week08/chulee-53/mission01/src/types/lp.ts
diff --git a/week07/chulee-53/mission01/src/utils/validate.ts b/week08/chulee-53/mission01/src/utils/validate.ts
similarity index 100%
rename from week07/chulee-53/mission01/src/utils/validate.ts
rename to week08/chulee-53/mission01/src/utils/validate.ts
diff --git a/week07/chulee-53/mission01/src/vite-env.d.ts b/week08/chulee-53/mission01/src/vite-env.d.ts
similarity index 100%
rename from week07/chulee-53/mission01/src/vite-env.d.ts
rename to week08/chulee-53/mission01/src/vite-env.d.ts
diff --git a/week07/chulee-53/mission01/tsconfig.app.json b/week08/chulee-53/mission01/tsconfig.app.json
similarity index 100%
rename from week07/chulee-53/mission01/tsconfig.app.json
rename to week08/chulee-53/mission01/tsconfig.app.json
diff --git a/week07/chulee-53/mission01/tsconfig.json b/week08/chulee-53/mission01/tsconfig.json
similarity index 100%
rename from week07/chulee-53/mission01/tsconfig.json
rename to week08/chulee-53/mission01/tsconfig.json
diff --git a/week07/chulee-53/mission01/tsconfig.node.json b/week08/chulee-53/mission01/tsconfig.node.json
similarity index 100%
rename from week07/chulee-53/mission01/tsconfig.node.json
rename to week08/chulee-53/mission01/tsconfig.node.json
diff --git a/week07/chulee-53/mission01/vite.config.ts b/week08/chulee-53/mission01/vite.config.ts
similarity index 100%
rename from week07/chulee-53/mission01/vite.config.ts
rename to week08/chulee-53/mission01/vite.config.ts
diff --git a/week09/chulee-53/practice01/src/App.tsx b/week09/chulee-53/practice01/src/App.tsx
new file mode 100644
index 00000000..aa4e4bdf
--- /dev/null
+++ b/week09/chulee-53/practice01/src/App.tsx
@@ -0,0 +1,11 @@
+import "./App.css";
+import UseReducerCompany from "./UseRedecerPage.tsx/UseReducerCompany";
+import UseReducerPage from "./UseRedecerPage.tsx/UseReducerPage";
+
+export default function App() {
+ return (
+ <>
+
{isPending &&
+
+ {/* 무한 스크롤 트리거 */}
+
+ );
+}
diff --git a/week09/chulee-53/practice01/src/UseRedecerPage.tsx/UseReducerPage.tsx b/week09/chulee-53/practice01/src/UseRedecerPage.tsx/UseReducerPage.tsx
new file mode 100644
index 00000000..c9783628
--- /dev/null
+++ b/week09/chulee-53/practice01/src/UseRedecerPage.tsx/UseReducerPage.tsx
@@ -0,0 +1,97 @@
+import { useReducer, useState } from "react";
+
+// 1. state에 대한 interface
+interface IState {
+ counter: number;
+}
+
+// 2. reducer에 대한 interface
+interface IAction {
+ type: "INCREASE" | "DECREASE" | "RESET_TO_ZERO";
+ payload: number;
+}
+
+function reducer(state: IState, action: IAction) {
+ const { type, payload } = action;
+
+ switch (type) {
+ case "INCREASE": {
+ return {
+ ...state,
+ counter: state.counter + payload,
+ };
+ }
+ case "DECREASE": {
+ return {
+ ...state,
+ counter: state.counter - payload,
+ };
+ }
+ case "RESET_TO_ZERO": {
+ return {
+ ...state,
+ counter: (state.counter = payload),
+ };
+ }
+
+ default:
+ return state;
+ }
+}
+
+export default function UseReducerPage() {
+ // 1. useState
+ const [count, setCount] = useState(0);
+
+ // 2. useReducer
+ const [state, dispatch] = useReducer(reducer, {
+ counter: 0,
+ });
+
+ const handleIncrease = () => {
+ setCount(count + 1);
+ };
+ return (
+ {state.department}
+ {state.error &&{state.error}
} + + + + + +
+
+ );
+}
diff --git a/week10/chulee-53/mission01/.gitignore b/week10/chulee-53/mission01/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/week10/chulee-53/mission01/.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/week10/chulee-53/mission01/README.md b/week10/chulee-53/mission01/README.md
new file mode 100644
index 00000000..d2e77611
--- /dev/null
+++ b/week10/chulee-53/mission01/README.md
@@ -0,0 +1,73 @@
+# 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) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## 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 defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+
+ // 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,
+
+ // Other configs...
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
+
+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 defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+ // Enable lint rules for React
+ reactX.configs['recommended-typescript'],
+ // Enable lint rules for React DOM
+ reactDom.configs.recommended,
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
diff --git a/week10/chulee-53/mission01/eslint.config.js b/week10/chulee-53/mission01/eslint.config.js
new file mode 100644
index 00000000..5e6b472f
--- /dev/null
+++ b/week10/chulee-53/mission01/eslint.config.js
@@ -0,0 +1,23 @@
+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'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ js.configs.recommended,
+ tseslint.configs.recommended,
+ reactHooks.configs.flat.recommended,
+ reactRefresh.configs.vite,
+ ],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ },
+])
diff --git a/week10/chulee-53/mission01/index.html b/week10/chulee-53/mission01/index.html
new file mode 100644
index 00000000..04df5f79
--- /dev/null
+++ b/week10/chulee-53/mission01/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+ useState
+useState훅 사용: {count}
+ +
+
+ useReducer
+useReducer훅 사용: {state.counter}
+ + + +{error}
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/week10/chulee-53/mission01/src/apis/axiosClient.ts b/week10/chulee-53/mission01/src/apis/axiosClient.ts
new file mode 100644
index 00000000..3e4625d2
--- /dev/null
+++ b/week10/chulee-53/mission01/src/apis/axiosClient.ts
@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export const axiosClient = axios.create({
+ baseURL: "https://api.themoviedb.org/3",
+ headers: {
+ Authorization: `Bearer ${import.meta.env.VITE_TMDB_TOKEN}`,
+ },
+});
diff --git a/week10/chulee-53/mission01/src/assets/react.svg b/week10/chulee-53/mission01/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/week10/chulee-53/mission01/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/week10/chulee-53/mission01/src/components/Input.tsx b/week10/chulee-53/mission01/src/components/Input.tsx
new file mode 100644
index 00000000..1e6fd0de
--- /dev/null
+++ b/week10/chulee-53/mission01/src/components/Input.tsx
@@ -0,0 +1,22 @@
+interface InputProps {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ className?: string;
+}
+
+export const Input = ({
+ value,
+ onChange,
+ placeholder = "영화 제목을 입력하세요.",
+ className,
+}: InputProps) => {
+ return (
+ onChange(e.target.value)}
+ />
+ );
+};
diff --git a/week10/chulee-53/mission01/src/components/LanguageSelector.tsx b/week10/chulee-53/mission01/src/components/LanguageSelector.tsx
new file mode 100644
index 00000000..9e7ad43b
--- /dev/null
+++ b/week10/chulee-53/mission01/src/components/LanguageSelector.tsx
@@ -0,0 +1,34 @@
+interface LanguageOptions {
+ value: string;
+ label: string;
+}
+
+interface LanguageSelectorProps {
+ value: string;
+ onChange: (value: string) => void;
+ options: LanguageOptions[];
+ className?: string;
+}
+
+const LanguageSelector = ({
+ value,
+ onChange,
+ options,
+ className = "",
+}: LanguageSelectorProps) => {
+ return (
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/week10/chulee-53/mission01/src/components/MovieCard.tsx b/week10/chulee-53/mission01/src/components/MovieCard.tsx
new file mode 100644
index 00000000..7a602b18
--- /dev/null
+++ b/week10/chulee-53/mission01/src/components/MovieCard.tsx
@@ -0,0 +1,62 @@
+import { useCallback, useState } from "react";
+import type { Movie } from "../types/movie";
+import MovieModal from "./MovieModal";
+
+interface MovieCardProps {
+ movie: Movie;
+}
+
+const MovieCard = ({ movie }: MovieCardProps) => {
+ const imageBaseUrl = "https://images.tmdb.org/t/p/w500";
+ const fallbackImageImage =
+ "https://cdn.shopify.com/s/files/1/1796/6745/products/PlaceholderImage-ProductPhoto_f5f4ba2b-15bb-43b1-8b17-44dc32ca7c58.png?v=1676399038";
+
+ const [isOpenModal, setOpenModal] = useState로딩 중 입니다...
+ ) : (
+
+
+
+ );
+};
+
+export default MovieCard;
diff --git a/week10/chulee-53/mission01/src/components/MovieFilter.tsx b/week10/chulee-53/mission01/src/components/MovieFilter.tsx
new file mode 100644
index 00000000..b3242a2c
--- /dev/null
+++ b/week10/chulee-53/mission01/src/components/MovieFilter.tsx
@@ -0,0 +1,80 @@
+import { memo, useState } from "react";
+import type { MovieFilters } from "../types/movie";
+import { Input } from "./Input";
+import { SelectBox } from "./SelectBox";
+import LanguageSelector from "./LanguageSelector";
+import { LANGUAGE_OPTIONS } from "../constants/movie";
+
+interface MovieFilterProps {
+ onChange: (filter: MovieFilters) => void;
+}
+
+const MovieFilter = ({ onChange }: MovieFilterProps) => {
+ console.log("리렌더링, Movie Filter");
+ const [query, setQuery] = useState
+ 
+
+
+
+ {movie.vote_average.toFixed(1)}
+
+
+
+ + {movie.title} +
++ {movie.release_date} | {movie.original_language.toUpperCase()} +
++ {movie.overview.length > 100 + ? `${movie.overview.slice(0, 100)}...` + : movie.overview} +
+
+
+ );
+ }
+ return (
+ 검색 결과가 없습니다.
+
+ {movies.map((movie) => (
+
+ );
+};
+
+export default MovieList;
diff --git a/week10/chulee-53/mission01/src/components/MovieModal.tsx b/week10/chulee-53/mission01/src/components/MovieModal.tsx
new file mode 100644
index 00000000..249276a0
--- /dev/null
+++ b/week10/chulee-53/mission01/src/components/MovieModal.tsx
@@ -0,0 +1,111 @@
+import type { Movie } from "../types/movie";
+
+interface MovieModalProps {
+ movie: Movie;
+ onClickToggleModal: () => void;
+}
+
+const MovieModal = ({ movie, onClickToggleModal }: MovieModalProps) => {
+ const popularityPercent = Math.round((movie.vote_average / 10) * 100);
+
+ return (
+
+
+ );
+};
+
+export default MovieModal;
diff --git a/week10/chulee-53/mission01/src/components/SelectBox.tsx b/week10/chulee-53/mission01/src/components/SelectBox.tsx
new file mode 100644
index 00000000..0a057005
--- /dev/null
+++ b/week10/chulee-53/mission01/src/components/SelectBox.tsx
@@ -0,0 +1,30 @@
+interface SelectBoxProps {
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+ label: string;
+ id?: string;
+ className?: string;
+}
+
+export const SelectBox = ({
+ checked,
+ onChange,
+ label,
+ id = "checkbox",
+ className,
+}: SelectBoxProps) => {
+ return (
+
+
+
+ {movie.backdrop_path && (
+ 
+ )}
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ {movie.title}
+{movie.original_title}
+
+
+
+ {/* Poster */}
+ 
+
+
+
+
+
+
+
+
+ {movie.vote_average.toFixed(1)}
+
+
+ ({movie.vote_count} 평가)
+
+
+
+
+
+
+ 개봉일
+{movie.release_date || "정보 없음"}
+
+
+
+ + 인기도 +
+
+
+
+
+
+
+ + 줄거리 +
++ {movie.overview || "등록된 줄거리 정보가 없습니다."} +
+
+
+
+
+
+ onChange(e.target.checked)}
+ className="size-4 rounded border-gray-300 bg-gray-200 text-blue-600 focus:ring-blue-500"
+ />
+
+
+ );
+};
diff --git a/week10/chulee-53/mission01/src/constants/movie.ts b/week10/chulee-53/mission01/src/constants/movie.ts
new file mode 100644
index 00000000..82374746
--- /dev/null
+++ b/week10/chulee-53/mission01/src/constants/movie.ts
@@ -0,0 +1,5 @@
+export const LANGUAGE_OPTIONS = [
+ { value: "ko-KR", label: "한국어" },
+ { value: "en-US", label: "English" },
+ { value: "ja-JP", label: "日本語" },
+];
diff --git a/week10/chulee-53/mission01/src/hooks/useFetch.ts b/week10/chulee-53/mission01/src/hooks/useFetch.ts
new file mode 100644
index 00000000..95e44564
--- /dev/null
+++ b/week10/chulee-53/mission01/src/hooks/useFetch.ts
@@ -0,0 +1,36 @@
+import type { AxiosRequestConfig } from "axios";
+import { useEffect, useState } from "react";
+import { axiosClient } from "../apis/axiosClient";
+
+const useFetch =
+
+ );
+}
+
+export default App;
diff --git a/week10/chulee-53/mission02/src/Pages/HomePage.tsx b/week10/chulee-53/mission02/src/Pages/HomePage.tsx
new file mode 100644
index 00000000..5461de95
--- /dev/null
+++ b/week10/chulee-53/mission02/src/Pages/HomePage.tsx
@@ -0,0 +1,47 @@
+import { useCallback, useMemo, useState } from "react";
+import MovieFilter from "../components/MovieFilter";
+import MovieList from "../components/MovieList";
+import useFetch from "../hooks/useFetch";
+import type { MovieFilters, MovieResponse } from "../types/movie";
+
+export default function HomePage() {
+ const [filters, setFilters] = useState{error}
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/week10/chulee-53/mission02/src/Pages/MovieDetailPage.tsx b/week10/chulee-53/mission02/src/Pages/MovieDetailPage.tsx
new file mode 100644
index 00000000..b859c5cb
--- /dev/null
+++ b/week10/chulee-53/mission02/src/Pages/MovieDetailPage.tsx
@@ -0,0 +1,14 @@
+import { useParams } from "react-router-dom";
+
+export default function MovieDetailPage() {
+ const { id } = useParams<{ id: string }>();
+
+ console.log(id);
+ return (
+ 로딩 중 입니다...
+ ) : (
+
+ 영화 상세 페이지입니다
+
+ );
+}
diff --git a/week10/chulee-53/mission02/src/apis/axiosClient.ts b/week10/chulee-53/mission02/src/apis/axiosClient.ts
new file mode 100644
index 00000000..3e4625d2
--- /dev/null
+++ b/week10/chulee-53/mission02/src/apis/axiosClient.ts
@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export const axiosClient = axios.create({
+ baseURL: "https://api.themoviedb.org/3",
+ headers: {
+ Authorization: `Bearer ${import.meta.env.VITE_TMDB_TOKEN}`,
+ },
+});
diff --git a/week10/chulee-53/mission02/src/assets/react.svg b/week10/chulee-53/mission02/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/week10/chulee-53/mission02/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/week10/chulee-53/mission02/src/components/Input.tsx b/week10/chulee-53/mission02/src/components/Input.tsx
new file mode 100644
index 00000000..1e6fd0de
--- /dev/null
+++ b/week10/chulee-53/mission02/src/components/Input.tsx
@@ -0,0 +1,22 @@
+interface InputProps {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ className?: string;
+}
+
+export const Input = ({
+ value,
+ onChange,
+ placeholder = "영화 제목을 입력하세요.",
+ className,
+}: InputProps) => {
+ return (
+ onChange(e.target.value)}
+ />
+ );
+};
diff --git a/week10/chulee-53/mission02/src/components/LanguageSelector.tsx b/week10/chulee-53/mission02/src/components/LanguageSelector.tsx
new file mode 100644
index 00000000..9e7ad43b
--- /dev/null
+++ b/week10/chulee-53/mission02/src/components/LanguageSelector.tsx
@@ -0,0 +1,34 @@
+interface LanguageOptions {
+ value: string;
+ label: string;
+}
+
+interface LanguageSelectorProps {
+ value: string;
+ onChange: (value: string) => void;
+ options: LanguageOptions[];
+ className?: string;
+}
+
+const LanguageSelector = ({
+ value,
+ onChange,
+ options,
+ className = "",
+}: LanguageSelectorProps) => {
+ return (
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/week10/chulee-53/mission02/src/components/MovieCard.tsx b/week10/chulee-53/mission02/src/components/MovieCard.tsx
new file mode 100644
index 00000000..7a602b18
--- /dev/null
+++ b/week10/chulee-53/mission02/src/components/MovieCard.tsx
@@ -0,0 +1,62 @@
+import { useCallback, useState } from "react";
+import type { Movie } from "../types/movie";
+import MovieModal from "./MovieModal";
+
+interface MovieCardProps {
+ movie: Movie;
+}
+
+const MovieCard = ({ movie }: MovieCardProps) => {
+ const imageBaseUrl = "https://images.tmdb.org/t/p/w500";
+ const fallbackImageImage =
+ "https://cdn.shopify.com/s/files/1/1796/6745/products/PlaceholderImage-ProductPhoto_f5f4ba2b-15bb-43b1-8b17-44dc32ca7c58.png?v=1676399038";
+
+ const [isOpenModal, setOpenModal] = useState어썸 화이팅
+{id}번 영화 상세 페이지를 패칭해옵니다.
+
+
+
+ );
+};
+
+export default MovieCard;
diff --git a/week10/chulee-53/mission02/src/components/MovieFilter.tsx b/week10/chulee-53/mission02/src/components/MovieFilter.tsx
new file mode 100644
index 00000000..b3242a2c
--- /dev/null
+++ b/week10/chulee-53/mission02/src/components/MovieFilter.tsx
@@ -0,0 +1,80 @@
+import { memo, useState } from "react";
+import type { MovieFilters } from "../types/movie";
+import { Input } from "./Input";
+import { SelectBox } from "./SelectBox";
+import LanguageSelector from "./LanguageSelector";
+import { LANGUAGE_OPTIONS } from "../constants/movie";
+
+interface MovieFilterProps {
+ onChange: (filter: MovieFilters) => void;
+}
+
+const MovieFilter = ({ onChange }: MovieFilterProps) => {
+ console.log("리렌더링, Movie Filter");
+ const [query, setQuery] = useState
+
+
+
+
+ {movie.vote_average.toFixed(1)}
+
+
+
+ + {movie.title} +
++ {movie.release_date} | {movie.original_language.toUpperCase()} +
++ {movie.overview.length > 100 + ? `${movie.overview.slice(0, 100)}...` + : movie.overview} +
+
+
+ );
+ }
+ return (
+ 검색 결과가 없습니다.
+
+ {movies.map((movie) => (
+
+ );
+};
+
+export default MovieList;
diff --git a/week10/chulee-53/mission02/src/components/MovieModal.tsx b/week10/chulee-53/mission02/src/components/MovieModal.tsx
new file mode 100644
index 00000000..249276a0
--- /dev/null
+++ b/week10/chulee-53/mission02/src/components/MovieModal.tsx
@@ -0,0 +1,111 @@
+import type { Movie } from "../types/movie";
+
+interface MovieModalProps {
+ movie: Movie;
+ onClickToggleModal: () => void;
+}
+
+const MovieModal = ({ movie, onClickToggleModal }: MovieModalProps) => {
+ const popularityPercent = Math.round((movie.vote_average / 10) * 100);
+
+ return (
+
+
+ );
+};
+
+export default MovieModal;
diff --git a/week10/chulee-53/mission02/src/components/SelectBox.tsx b/week10/chulee-53/mission02/src/components/SelectBox.tsx
new file mode 100644
index 00000000..0a057005
--- /dev/null
+++ b/week10/chulee-53/mission02/src/components/SelectBox.tsx
@@ -0,0 +1,30 @@
+interface SelectBoxProps {
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+ label: string;
+ id?: string;
+ className?: string;
+}
+
+export const SelectBox = ({
+ checked,
+ onChange,
+ label,
+ id = "checkbox",
+ className,
+}: SelectBoxProps) => {
+ return (
+
+
+
+ {movie.backdrop_path && (
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ {movie.title}
+{movie.original_title}
+
+
+
+ {/* Poster */}
+
+
+
+
+
+
+
+
+
+ {movie.vote_average.toFixed(1)}
+
+
+ ({movie.vote_count} 평가)
+
+
+
+
+
+
+ 개봉일
+{movie.release_date || "정보 없음"}
+
+
+
+ + 인기도 +
+
+
+
+
+
+
+ + 줄거리 +
++ {movie.overview || "등록된 줄거리 정보가 없습니다."} +
+
+
+
+
+
+ onChange(e.target.checked)}
+ className="size-4 rounded border-gray-300 bg-gray-200 text-blue-600 focus:ring-blue-500"
+ />
+
+
+ );
+};
diff --git a/week10/chulee-53/mission02/src/constants/movie.ts b/week10/chulee-53/mission02/src/constants/movie.ts
new file mode 100644
index 00000000..82374746
--- /dev/null
+++ b/week10/chulee-53/mission02/src/constants/movie.ts
@@ -0,0 +1,5 @@
+export const LANGUAGE_OPTIONS = [
+ { value: "ko-KR", label: "한국어" },
+ { value: "en-US", label: "English" },
+ { value: "ja-JP", label: "日本語" },
+];
diff --git a/week10/chulee-53/mission02/src/hooks/useFetch.ts b/week10/chulee-53/mission02/src/hooks/useFetch.ts
new file mode 100644
index 00000000..95e44564
--- /dev/null
+++ b/week10/chulee-53/mission02/src/hooks/useFetch.ts
@@ -0,0 +1,36 @@
+import type { AxiosRequestConfig } from "axios";
+import { useEffect, useState } from "react";
+import { axiosClient } from "../apis/axiosClient";
+
+const useFetch =
+
+ );
+}
diff --git a/week10/chulee-53/practice01/tsconfig.app.json b/week10/chulee-53/practice01/tsconfig.app.json
new file mode 100644
index 00000000..a9b5a59c
--- /dev/null
+++ b/week10/chulee-53/practice01/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/week10/chulee-53/practice01/tsconfig.json b/week10/chulee-53/practice01/tsconfig.json
new file mode 100644
index 00000000..1ffef600
--- /dev/null
+++ b/week10/chulee-53/practice01/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/week10/chulee-53/practice01/tsconfig.node.json b/week10/chulee-53/practice01/tsconfig.node.json
new file mode 100644
index 00000000..8a67f62f
--- /dev/null
+++ b/week10/chulee-53/practice01/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/week10/chulee-53/practice01/vite.config.ts b/week10/chulee-53/practice01/vite.config.ts
new file mode 100644
index 00000000..573459fa
--- /dev/null
+++ b/week10/chulee-53/practice01/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+});
diff --git a/week10/chulee-53/practice02/.gitignore b/week10/chulee-53/practice02/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/week10/chulee-53/practice02/.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/week10/chulee-53/practice02/README.md b/week10/chulee-53/practice02/README.md
new file mode 100644
index 00000000..d2e77611
--- /dev/null
+++ b/week10/chulee-53/practice02/README.md
@@ -0,0 +1,73 @@
+# 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) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## 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 defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+
+ // 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,
+
+ // Other configs...
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
+
+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 defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+ // Enable lint rules for React
+ reactX.configs['recommended-typescript'],
+ // Enable lint rules for React DOM
+ reactDom.configs.recommended,
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
diff --git a/week10/chulee-53/practice02/eslint.config.js b/week10/chulee-53/practice02/eslint.config.js
new file mode 100644
index 00000000..5e6b472f
--- /dev/null
+++ b/week10/chulee-53/practice02/eslint.config.js
@@ -0,0 +1,23 @@
+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'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ js.configs.recommended,
+ tseslint.configs.recommended,
+ reactHooks.configs.flat.recommended,
+ reactRefresh.configs.vite,
+ ],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ },
+])
diff --git a/week10/chulee-53/practice02/index.html b/week10/chulee-53/practice02/index.html
new file mode 100644
index 00000000..facdc7c6
--- /dev/null
+++ b/week10/chulee-53/practice02/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ 같이 배우는 리액트 useCallback편
+Count : {count}
+Text: {text}
+
+
+ );
+}
diff --git a/week10/chulee-53/practice02/src/useMemo/components/TextInput.tsx b/week10/chulee-53/practice02/src/useMemo/components/TextInput.tsx
new file mode 100644
index 00000000..dc35351e
--- /dev/null
+++ b/week10/chulee-53/practice02/src/useMemo/components/TextInput.tsx
@@ -0,0 +1,19 @@
+import { memo } from "react";
+
+interface ITextInput {
+ onChange: (text: string) => void;
+}
+
+const TextInput = ({ onChange }: ITextInput) => {
+ console.log("TextInput redered");
+
+ return (
+ onChange(e.target.value)}
+ />
+ );
+};
+
+export default memo(TextInput);
diff --git a/week10/chulee-53/practice02/src/useMemo/utils/math.ts b/week10/chulee-53/practice02/src/useMemo/utils/math.ts
new file mode 100644
index 00000000..78ea303d
--- /dev/null
+++ b/week10/chulee-53/practice02/src/useMemo/utils/math.ts
@@ -0,0 +1,19 @@
+export const isPrime = (num: number): boolean => {
+ if (num < 2) return false;
+
+ for (let i = 2; i < num; i++) {
+ if (num % i === 0) return false;
+ }
+
+ return true;
+};
+
+export const findPrimeNumbers = (max: number): number[] => {
+ const primeNumbers = [];
+
+ for (let i = 2; i <= max; i++) {
+ if (isPrime(i)) primeNumbers.push(i);
+ }
+
+ return primeNumbers;
+};
diff --git a/week10/chulee-53/practice02/tsconfig.app.json b/week10/chulee-53/practice02/tsconfig.app.json
new file mode 100644
index 00000000..a9b5a59c
--- /dev/null
+++ b/week10/chulee-53/practice02/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/week10/chulee-53/practice02/tsconfig.json b/week10/chulee-53/practice02/tsconfig.json
new file mode 100644
index 00000000..1ffef600
--- /dev/null
+++ b/week10/chulee-53/practice02/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/week10/chulee-53/practice02/tsconfig.node.json b/week10/chulee-53/practice02/tsconfig.node.json
new file mode 100644
index 00000000..8a67f62f
--- /dev/null
+++ b/week10/chulee-53/practice02/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/week10/chulee-53/practice02/vite.config.ts b/week10/chulee-53/practice02/vite.config.ts
new file mode 100644
index 00000000..573459fa
--- /dev/null
+++ b/week10/chulee-53/practice02/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+});
같이 배우는 리액트: useMemo편
+ + +소수 리스트
+
+ {primes.map((prime) => (
+
+
+
+ {prime}
+ ))}
+