+ {movies.map((m) => (
+
+
+
+ );
+}
+
+export default React.memo(MovieModal);
diff --git a/mission/chapter10-1/src/components/SearchBar.tsx b/mission/chapter10-1/src/components/SearchBar.tsx
new file mode 100644
index 00000000..efa8e84f
--- /dev/null
+++ b/mission/chapter10-1/src/components/SearchBar.tsx
@@ -0,0 +1,69 @@
+import type { FormEvent } from "react";
+import React from "react";
+
+type Props = {
+ query: string;
+ includeAdult: boolean;
+ language: "ko-KR" | "en-US" | "ja-JP";
+ onChangeQuery: (v: string) => void;
+ onChangeIncludeAdult: (v: boolean) => void;
+ onChangeLanguage: (v: "ko-KR" | "en-US" | "ja-JP") => void;
+ onSubmit: () => void;
+};
+
+function SearchBar({
+ query,
+ includeAdult,
+ language,
+ onChangeQuery,
+ onChangeIncludeAdult,
+ onChangeLanguage,
+ onSubmit,
+}: Props) {
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ onSubmit();
+ };
+
+ return (
+ e.stopPropagation()}
+ >
+ {posterUrl ? (
+ 
+ ) : (
+
+
+ No Image
+
+ )}
+
+
+
+
+
+
+ {movie.title}
+
+ ⭐ {movie.vote_average?.toFixed?.(1) ?? movie.vote_average} · 개봉일: {movie.release_date || "—"}
+
+ + {movie.overview || "줄거리 정보가 없습니다."} +
+ +
+
+ IMDb에서 검색하기
+
+
+
+
+
+ {isLoading &&
+
+ {movies.length > 0 &&
+ );
+}
diff --git a/mission/chapter10-1/src/types/movie.ts b/mission/chapter10-1/src/types/movie.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/mission/chapter10-1/src/useSidebar.ts b/mission/chapter10-1/src/useSidebar.ts
new file mode 100644
index 00000000..721cbb32
--- /dev/null
+++ b/mission/chapter10-1/src/useSidebar.ts
@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useSidebar() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const open = useCallback(() => setIsOpen(true), []);
+ const close = useCallback(() => setIsOpen(false), []);
+ const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+
+ // 🔥 ESC 키로 닫기
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ close();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [close]);
+
+ // 🔥 사이드바 열렸을 때 배경 스크롤 방지
+ useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "";
+ }
+
+ // 컴포넌트 언마운트 시에도 원상복구
+ return () => {
+ document.body.style.overflow = "";
+ };
+ }, [isOpen]);
+
+ return {
+ isOpen,
+ open,
+ close,
+ toggle,
+ };
+}
diff --git a/mission/chapter10-1/tsconfig.app.json b/mission/chapter10-1/tsconfig.app.json
new file mode 100644
index 00000000..a9b5a59c
--- /dev/null
+++ b/mission/chapter10-1/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/mission/chapter10-1/tsconfig.json b/mission/chapter10-1/tsconfig.json
new file mode 100644
index 00000000..af648687
--- /dev/null
+++ b/mission/chapter10-1/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ],
+ "compilerOptions": {
+ "types": ["vite-plugin-svgr/client"]
+ },
+ "include": ["svg.d.ts"]
+}
diff --git a/mission/chapter10-1/tsconfig.node.json b/mission/chapter10-1/tsconfig.node.json
new file mode 100644
index 00000000..3694a517
--- /dev/null
+++ b/mission/chapter10-1/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/mission/chapter10-1/vite-env.d.ts b/mission/chapter10-1/vite-env.d.ts
new file mode 100644
index 00000000..b1f45c78
--- /dev/null
+++ b/mission/chapter10-1/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// 로딩중...
}
+ {error && {error}
}
+ {!isLoading && !error && movies.length === 0 && (
+ 검색 결과가 없습니다.
+ )}
+
+
+ );
+}
diff --git a/practice/chapter10/my-app/src/PrimeSieve.tsx b/practice/chapter10/my-app/src/PrimeSieve.tsx
new file mode 100644
index 00000000..a9218d8b
--- /dev/null
+++ b/practice/chapter10/my-app/src/PrimeSieve.tsx
@@ -0,0 +1,46 @@
+import { useMemo, useState } from "react";
+function getPrimes(limit: number): number[] {
+ const isPrime = Array(limit + 1).fill(true);
+ isPrime[0] = false;
+ isPrime[1] = false;
+
+ for (let i = 2; i * i <= limit; i++) {
+ if (isPrime[i]) {
+ for (let j = i * i; j <= limit; j += i) {
+ isPrime[j] = false;
+ }
+ }
+ }
+
+ return isPrime
+ .map((v, i) => (v ? i : null))
+ .filter((v): v is number => v !== null);
+}
+
+export default function PrimeSieve() {
+ const [limit, setLimit] = useState(10000);
+ const [count, setCount] = useState(0); // unrelated state
+
+ const primes = useMemo(() => {
+ console.log("소수 계산 실행!");
+ return getPrimes(limit);
+ }, [limit]);
+
+ return (
+ count: {count}
+ + +
+
+ );
+}
diff --git a/practice/chapter10/my-app/src/UseCallbackPage.tsx b/practice/chapter10/my-app/src/UseCallbackPage.tsx
new file mode 100644
index 00000000..4644ca3a
--- /dev/null
+++ b/practice/chapter10/my-app/src/UseCallbackPage.tsx
@@ -0,0 +1,7 @@
+export default function UseCallbackPage() {
+ return (
+ 에라토스테네스의 체
+ + setLimit(Number(e.target.value))} + /> + +소수 개수: {primes.length}
+ + +
+
+ );
+}
\ No newline at end of file
diff --git a/practice/chapter10/my-app/src/assets/react.svg b/practice/chapter10/my-app/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/practice/chapter10/my-app/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/practice/chapter10/my-app/src/index.css b/practice/chapter10/my-app/src/index.css
new file mode 100644
index 00000000..08a3ac9e
--- /dev/null
+++ b/practice/chapter10/my-app/src/index.css
@@ -0,0 +1,68 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/practice/chapter10/my-app/src/main.tsx b/practice/chapter10/my-app/src/main.tsx
new file mode 100644
index 00000000..bef5202a
--- /dev/null
+++ b/practice/chapter10/my-app/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(
+