onClick(movie)}
+ className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transform transition-transform hover:scale-105 hover:shadow-xl"
+ >
+ })
+
+ );
+}
+
+export default memo(MovieCard);
\ No newline at end of file
diff --git a/Coco/Week10/mission1/src/components/MovieList.tsx b/Coco/Week10/mission1/src/components/MovieList.tsx
new file mode 100644
index 00000000..3a2abc8a
--- /dev/null
+++ b/Coco/Week10/mission1/src/components/MovieList.tsx
@@ -0,0 +1,27 @@
+import { Movie } from '../types/movie.types';
+import MovieCard from './MovieCard';
+
+interface MovieListProps {
+ movies: Movie[];
+ onMovieClick: (movie: Movie) => void;
+}
+
+function MovieList({ movies, onMovieClick }: MovieListProps) {
+ if (movies.length === 0) {
+ return (
+
+
+ {movie.title}
+
+ ⭐ {movie.vote_average.toFixed(1)}
+ {movie.release_date?.split('-')[0] || 'N/A'}
+
+
+ 검색 결과가 없습니다
+
+ );
+ }
+
+ return (
+
+ {movies.map((movie) => (
+
+ );
+}
+
+export default MovieList;
\ No newline at end of file
diff --git a/Coco/Week10/mission1/src/components/MovieModal.tsx b/Coco/Week10/mission1/src/components/MovieModal.tsx
new file mode 100644
index 00000000..f37011a6
--- /dev/null
+++ b/Coco/Week10/mission1/src/components/MovieModal.tsx
@@ -0,0 +1,86 @@
+import { Movie } from '../types/movie.types';
+import { getImageUrl } from '../api/movieApi';
+
+interface MovieModalProps {
+ movie: Movie | null;
+ onClose: () => void;
+}
+
+function MovieModal({ movie, onClose }: MovieModalProps) {
+ if (!movie) return null;
+
+ const handleIMDbSearch = () => {
+ const searchUrl = `https://www.imdb.com/find?q=${encodeURIComponent(movie.title)}`;
+ window.open(searchUrl, '_blank');
+ };
+
+ return (
+ <>
+ {/* 오버레이 */}
+
+
+ {/* 모달 */}
+
+
+
+ );
+}
+
+export default MovieModal;
\ No newline at end of file
diff --git a/Coco/Week10/mission1/src/components/MovieSearch.tsx b/Coco/Week10/mission1/src/components/MovieSearch.tsx
new file mode 100644
index 00000000..f8bb4d8f
--- /dev/null
+++ b/Coco/Week10/mission1/src/components/MovieSearch.tsx
@@ -0,0 +1,81 @@
+import { useState, FormEvent } from 'react';
+import { LanguageOption } from '../types/movie.types';
+
+interface MovieSearchProps {
+ onSearch: (query: string, includeAdult: boolean, language: LanguageOption) => void;
+ loading: boolean;
+}
+
+function MovieSearch({ onSearch, loading }: MovieSearchProps) {
+ const [query, setQuery] = useState('');
+ const [includeAdult, setIncludeAdult] = useState(false);
+ const [language, setLanguage] = useState
+ {/* 포스터 */}
+
+
+ 
+
+
+
+ {/* 정보 */}
+
+
+ {movie.title}
+ {movie.original_title !== movie.title && ( +{movie.original_title}
+ )} + +
+
+ ⭐ {movie.vote_average.toFixed(1)}
+
+ 📅 {movie.release_date || 'N/A'}
+ 🗳️ {movie.vote_count.toLocaleString()} votes
+
+
+
+
+
+ 줄거리
++ {movie.overview || '줄거리 정보가 없습니다.'} +
+
+
+
+
+
+
+
+ );
+ }
+
+ if (error || !movie) {
+ return (
+
+
+ );
+ }
+
+ const handleIMDbSearch = () => {
+ const searchUrl = `https://www.imdb.com/find?q=${encodeURIComponent(movie.title)}`;
+ window.open(searchUrl, '_blank');
+ };
+
+ return (
+
+
+ {error || '영화를 찾을 수 없습니다.'}
+ +
+ {/* 헤더 */}
+
+ );
+}
+
+export default MovieDetailPage;
\ No newline at end of file
diff --git a/Coco/Week10/mission1/src/pages/NotfoundPage.tsx b/Coco/Week10/mission1/src/pages/NotfoundPage.tsx
new file mode 100644
index 00000000..6897a098
--- /dev/null
+++ b/Coco/Week10/mission1/src/pages/NotfoundPage.tsx
@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+
+function NotFoundPage() {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+ {/* 배경 이미지 */}
+
+
+
+
+
+
+
+
+ {/* 영화 정보 */}
+
+
+
+ {/* 포스터 */}
+ 
+
+ {/* 정보 */}
+
+
+ {/* 줄거리 */}
+
+
+ {movie.title}
+ {movie.original_title !== movie.title && ( +{movie.original_title}
+ )} + +
+ ⭐ {movie.vote_average.toFixed(1)}
+ 📅 {movie.release_date}
+ 🗳️ {movie.vote_count.toLocaleString()} votes
+
+
+
+
+
+ 줄거리
++ {movie.overview || '줄거리 정보가 없습니다.'} +
+
+
+ );
+}
+
+export default NotFoundPage;
\ No newline at end of file
diff --git a/Coco/Week10/mission1/src/pages/SearchPage.tsx b/Coco/Week10/mission1/src/pages/SearchPage.tsx
new file mode 100644
index 00000000..2f539aa4
--- /dev/null
+++ b/Coco/Week10/mission1/src/pages/SearchPage.tsx
@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+import { Movie, LanguageOption } from '../types/movie.types';
+import { getPopularMovies, searchMovies } from '../api/movieApi';
+import MovieSearch from '../components/MovieSearch';
+import MovieList from '../components/MovieList';
+import MovieModal from '../components/MovieModal';
+
+function SearchPage() {
+ const [movies, setMovies] = useState
+
+ 404
+페이지를 찾을 수 없습니다
+ +
+
+ );
+}
+
+export default SearchPage;
\ No newline at end of file
diff --git a/Coco/Week10/mission1/src/types/movie.types.ts b/Coco/Week10/mission1/src/types/movie.types.ts
new file mode 100644
index 00000000..1a32aacb
--- /dev/null
+++ b/Coco/Week10/mission1/src/types/movie.types.ts
@@ -0,0 +1,22 @@
+export interface Movie {
+ id: number;
+ title: string;
+ original_title: string;
+ poster_path: string | null;
+ backdrop_path: string | null;
+ overview: string;
+ release_date: string;
+ vote_average: number;
+ vote_count: number;
+ adult: boolean;
+ genre_ids: number[];
+ original_language: string;
+}
+
+export interface SearchParams {
+ query: string;
+ includeAdult: boolean;
+ language: string;
+}
+
+export type LanguageOption = 'ko-KR' | 'en-US' | 'ja-JP';
diff --git a/Coco/Week10/mission1/src/vite-env.d.ts b/Coco/Week10/mission1/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/Coco/Week10/mission1/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+ setSelectedMovie(null)} />
+
+ 🎬 영화 검색
+ +
+ {error}
+
+ )}
+
+ {loading ? (
+
+
+
+ ) : (
+ <>
+ 로딩 중...
++ {movies.length > 0 ? `총 ${movies.length}개의 영화` : '검색 결과가 없습니다'} +
+
+
+ );
+}
\ No newline at end of file
diff --git a/Coco/Week9/Zustand/src/components/CartContainer.tsx b/Coco/Week9/Zustand/src/components/CartContainer.tsx
new file mode 100644
index 00000000..da71d4d8
--- /dev/null
+++ b/Coco/Week9/Zustand/src/components/CartContainer.tsx
@@ -0,0 +1,79 @@
+import { useEffect } from 'react';
+import { usePlaylistStore } from '../store/usePlaylistStore';
+import CartItem from './CartItem';
+import Modal from './Modal';
+
+const CartContainer = () => {
+ // Zustand store에서 필요한 상태와 액션 가져오기
+ const { cartItems, amount, total, openModal, calculateTotals } = usePlaylistStore();
+
+ // 컴포넌트 마운트 시 총액 계산
+ useEffect(() => {
+ calculateTotals();
+ }, [calculateTotals]);
+
+ if (cartItems.length === 0) {
+ return (
+ Use Reducer Page
+Count: {count}
+ +
+
+ );
+ }
+
+ return (
+ <>
+ {/* Modal 컴포넌트 */}
+
+
+
+
+ 🛒
+ + 장바구니가 비어있습니다 +
+음반을 추가해보세요!
+
+
+
+ );
+};
+
+export default CartContainer;
\ No newline at end of file
diff --git a/Coco/Week9/Zustand/src/components/CartItem.tsx b/Coco/Week9/Zustand/src/components/CartItem.tsx
new file mode 100644
index 00000000..bbe77043
--- /dev/null
+++ b/Coco/Week9/Zustand/src/components/CartItem.tsx
@@ -0,0 +1,65 @@
+import { CartItem as CartItemType } from '../types/cart.types';
+import { usePlaylistStore } from '../store/usePlaylistStore';
+
+interface CartItemProps {
+ item: CartItemType;
+}
+
+const CartItem = ({ item }: CartItemProps) => {
+ // Zustand store에서 액션만 가져오기
+ const { increase, decrease, removeItem } = usePlaylistStore();
+
+ const priceNumber: number = Number(item.price);
+
+ return (
+
+
+
+
+
+ + UMC PlayList +
+당신이 선택한 음반
+
+ {cartItems.map((item) => (
+
+
+
+
+
+
+
+ {/* 장바구니 비우기 버튼 */}
+
+
+ 총 수량
+ {amount}개
+
+
+ 총 금액
+
+ ₩{total.toLocaleString()}
+
+
+
+ 
{
+ e.currentTarget.src = 'https://via.placeholder.com/100?text=No+Image';
+ }}
+ />
+
+
+ );
+};
+
+export default CartItem;
\ No newline at end of file
diff --git a/Coco/Week9/Zustand/src/components/Modal.tsx b/Coco/Week9/Zustand/src/components/Modal.tsx
new file mode 100644
index 00000000..613d1bbb
--- /dev/null
+++ b/Coco/Week9/Zustand/src/components/Modal.tsx
@@ -0,0 +1,64 @@
+import { usePlaylistStore } from '../store/usePlaylistStore';
+
+const Modal = () => {
+ // Zustand store에서 필요한 상태와 액션 가져오기
+ const { isModalOpen, closeModal, clearCart } = usePlaylistStore();
+
+ // 모달이 열려있지 않으면 아무것도 렌더링하지 않음
+ if (!isModalOpen) return null;
+
+ // "아니요" 버튼 클릭
+ const handleCancel = () => {
+ closeModal();
+ };
+
+ // "네" 버튼 클릭
+ const handleConfirm = () => {
+ clearCart(); // 장바구니 비우기
+ closeModal(); // 모달 닫기
+ };
+
+ return (
+ <>
+ {/* 오버레이 배경 */}
+
+
+ {/* 모달 창 */}
+
+
+
+ {item.title}
+{item.singer}
++ ₩{priceNumber.toLocaleString()} +
+
+
+
+
+ {item.amount}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Modal;
\ No newline at end of file
diff --git a/Coco/Week9/Zustand/src/index.css b/Coco/Week9/Zustand/src/index.css
new file mode 100644
index 00000000..60492d30
--- /dev/null
+++ b/Coco/Week9/Zustand/src/index.css
@@ -0,0 +1,4 @@
+/* src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/Coco/Week9/Zustand/src/main.tsx b/Coco/Week9/Zustand/src/main.tsx
new file mode 100644
index 00000000..47077cd3
--- /dev/null
+++ b/Coco/Week9/Zustand/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+// Redux Provider 제거
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ {/* 모달 헤더 */}
+
+
+
+
+ {/* 모달 버튼 */}
+ 🗑️
+ + 장바구니를 비우시겠습니까? +
++ 모든 음반이 장바구니에서 삭제됩니다. +
+
+
+
+
+