setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ 
+
+ );
+}
\ No newline at end of file
diff --git a/Week10/wendy0802/mission/src/components/Navbar.tsx b/Week10/wendy0802/mission/src/components/Navbar.tsx
new file mode 100644
index 00000000..e354ede3
--- /dev/null
+++ b/Week10/wendy0802/mission/src/components/Navbar.tsx
@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+
+const Navbar = () => {
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/Week10/wendy0802/mission/src/components/searchForm.tsx b/Week10/wendy0802/mission/src/components/searchForm.tsx
new file mode 100644
index 00000000..b8ec2627
--- /dev/null
+++ b/Week10/wendy0802/mission/src/components/searchForm.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+interface SearchFormProps {
+ query: string;
+ setQuery: (v: string) => void;
+ language: string;
+ setLanguage: (v: string) => void;
+ includeAdult: boolean;
+ setIncludeAdult: (v: boolean) => void;
+ onSubmit: (e: React.FormEvent) => void;
+}
+
+const SearchForm = ({
+ query,
+ setQuery,
+ language,
+ setLanguage,
+ includeAdult,
+ setIncludeAdult,
+ onSubmit,
+}: SearchFormProps) => (
+
+);
+
+export default SearchForm;
\ No newline at end of file
diff --git a/Week10/wendy0802/mission/src/constants/storage.ts b/Week10/wendy0802/mission/src/constants/storage.ts
new file mode 100644
index 00000000..e9b6e773
--- /dev/null
+++ b/Week10/wendy0802/mission/src/constants/storage.ts
@@ -0,0 +1,6 @@
+
+export const LOCAL_STORAGE_KEY = {
+ accessToken: 'accessToken',
+ refreshToken: 'refreshToken',
+ };
+
\ No newline at end of file
diff --git a/Week10/wendy0802/mission/src/context/AuthContext.tsx b/Week10/wendy0802/mission/src/context/AuthContext.tsx
new file mode 100644
index 00000000..cd7c0a06
--- /dev/null
+++ b/Week10/wendy0802/mission/src/context/AuthContext.tsx
@@ -0,0 +1,97 @@
+import { createContext, useContext, useState, PropsWithChildren } from "react";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+import { loginApi, logoutApi } from "../api/auth";
+import { LOCAL_STORAGE_KEY } from "../constants/storage";
+import { LoginRequest } from "../api/auth";
+
+interface AuthContextType {
+ accessToken: string | null;
+ refreshToken: string | null;
+ login: (signData: LoginRequest) => Promise
+
+ {movie.vote_average?.toFixed(1)}
+
+ {isHovered && (
+
+
+ )}
+ {movie.title}
+{movie.overview}
+
+
+ );
+};
+
+export default MovieModal;
\ No newline at end of file
diff --git a/Week10/wendy0802/mission/src/modal/modalslice.tsx b/Week10/wendy0802/mission/src/modal/modalslice.tsx
new file mode 100644
index 00000000..2d0f8826
--- /dev/null
+++ b/Week10/wendy0802/mission/src/modal/modalslice.tsx
@@ -0,0 +1,44 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+// modalSlice.ts 또는 modalslice.ts
+export interface Movie {
+ backdrop_path: string;
+ title: string;
+ original_title?: string;
+ poster_path: string;
+ vote_average: number;
+ vote_count: number;
+ release_date: string;
+ popularity: number;
+ overview: string;
+ imdb_id?: string;
+}
+
+export interface ModalState {
+ isOpen: boolean;
+ movie: Movie | null;
+}
+
+// 초기 상태
+const initialState: ModalState = {
+ isOpen: false,
+ movie: null,
+};
+
+const modalSlice = createSlice({
+ name: 'modal',
+ initialState,
+ reducers: {
+ openModal: (state, action) => {
+ state.isOpen = true;
+ state.movie = action.payload;
+ },
+ closeModal: (state) => {
+ state.isOpen = false;
+ state.movie = null;
+ },
+ },
+});
+
+export const { openModal, closeModal } = modalSlice.actions;
+export default modalSlice.reducer;
\ No newline at end of file
diff --git a/Week10/wendy0802/mission/src/pages/HomeLayout.tsx b/Week10/wendy0802/mission/src/pages/HomeLayout.tsx
new file mode 100644
index 00000000..cafeb7de
--- /dev/null
+++ b/Week10/wendy0802/mission/src/pages/HomeLayout.tsx
@@ -0,0 +1,16 @@
+
+import Navbar from "../components/Navbar";
+import { Outlet } from "react-router-dom";
+
+const HomeLayout = () => {
+ return (
+ <>
+
+
+
+ {movie.backdrop_path && (
+ 
+ )}
+
+
+
+
+ )}
+
+
+
+
+ {movie.title}
+ {movie.original_title && (
+ {movie.original_title}
+ )}
+
+
+
+ 
+
+
+
+ {movie.vote_average?.toFixed(1)}
+ ({movie.vote_count} 평가)
+
+
+
+
+
+
+
+ 개봉일
+ {movie.release_date}
+
+
+ 인기도
+ {movie.popularity}
+
+
+ 줄거리
+ {movie.overview}
+
+ {movie.imdb_id && (
+
+ IMDb에서 검색
+
+ )}
+
+
+
+ <>
+
+
;
+};
+
+export default HomePage;
\ No newline at end of file
diff --git a/Week10/wendy0802/mission/src/pages/LoadingSpinner.tsx b/Week10/wendy0802/mission/src/pages/LoadingSpinner.tsx
new file mode 100644
index 00000000..9c52557d
--- /dev/null
+++ b/Week10/wendy0802/mission/src/pages/LoadingSpinner.tsx
@@ -0,0 +1,15 @@
+const LoadingSpinner = (): JSX.Element => {
+ return (
+
+
+ );
+};
+
+export default LoadingSpinner;
diff --git a/Week10/wendy0802/mission/src/pages/Login.tsx b/Week10/wendy0802/mission/src/pages/Login.tsx
new file mode 100644
index 00000000..b89d35a3
--- /dev/null
+++ b/Week10/wendy0802/mission/src/pages/Login.tsx
@@ -0,0 +1,166 @@
+import { useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Navbar from "../components/Navbar";
+import { loginApi } from "../api/auth";
+import { useAuth } from "../context/AuthContext";
+import { useEffect, useCallback } from "react";
+import { useLocation } from "react-router-dom";
+
+// 로그인 스키마 정의
+const loginSchema = z.object({
+ email: z.string().email("올바른 이메일 형식이 아닙니다."),
+ password: z.string().min(8, "비밀번호는 8자 이상이어야 합니다."),
+});
+
+type LoginForm = z.infer
+
+
+ 🔵🔵🔵
+
+
+
+ );
+};
+
+export default Login;
diff --git a/Week10/wendy0802/mission/src/pages/MovieDetailPage.tsx b/Week10/wendy0802/mission/src/pages/MovieDetailPage.tsx
new file mode 100644
index 00000000..fed2acc7
--- /dev/null
+++ b/Week10/wendy0802/mission/src/pages/MovieDetailPage.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import axios from "axios";
+import LoadingSpinner from "./LoadingSpinner";
+import NotFoundPage from "./NotFoundPage";
+
+const MovieDetailPage = (): JSX.Element => {
+ const { movieId } = useParams();
+ const [movieDetails, setMovieDetails] = useState
+
+
+
+
+ + 로그인 +
+
+
+ );
+};
+
+export default MovieDetailPage;
diff --git a/Week10/wendy0802/mission/src/pages/MoviePage.tsx b/Week10/wendy0802/mission/src/pages/MoviePage.tsx
new file mode 100644
index 00000000..022acc74
--- /dev/null
+++ b/Week10/wendy0802/mission/src/pages/MoviePage.tsx
@@ -0,0 +1,157 @@
+// pages/MoviePage.tsx
+import { useParams, useNavigate } from "react-router-dom";
+import MovieCard from "../components/MovieCard";
+import LoadingSpinner from "./LoadingSpinner";
+import NotFoundPage from "./NotFoundPage";
+import { useState, useCallback, useMemo } from "react";
+import useFetchMovies from "../hooks/useFecthMovies";
+import SearchForm from "../components/searchForm";
+import { useDispatch } from "react-redux";
+import { openModal } from "../modal/modalslice";
+import MovieModal from "../modal/MovieModal";
+
+export default function MoviePage(): JSX.Element {
+ const [page, setPage] = useState(1);
+ const { category } = useParams<{ category: string }>();
+ const { movies, isPending, isError } = useFetchMovies(category, page);
+ const [query, setQuery] = useState("");
+ const [language, setLanguage] = useState("ko-KR");
+ const [searchResults, setSearchResults] = useState
+
+ 
+
+
+
+
+
+
+
+ {movieDetails.title}
+{releaseYear}
+{runtime}분
+{movieDetails.vote_average}
+{movieDetails.overview}
+
+
+
+
+ 감독
+
+ {movieDetails.credits?.crew
+ ?.filter((member: any) => member.job === "Director")
+ .map(({ id, name, profile_path }: any) => (
+
+
+ 
+
+ ))}
+
+ {name}
+감독
+
+
+ 출연진
+
+ {movieDetails.credits?.cast?.map(
+ ({ id, name, profile_path, character }: any) => (
+
+
+
+
+ )
+ )}
+
+ {name}
+{character}
+
+ {searchResults.map((movie) => (
+ handleCardClick(movie)}
+ />
+ ))}
+
+ ), [searchResults, handleCardClick]);
+
+ if (!category || isError) return + 📜 {category.replace("_", " ")} 📜 +
+ +
+
+ {page} 페이지
+
+
+
+ {query ? (
+ searchLoading ? (
+ 로딩 중...
+ ) : searchError ? (
+ {searchError}
+ ) : searchResults.length > 0 ? (
+ renderedSearchResults // ✅ useMemo로 캐싱된 영화 카드 리스트
+ ) : (
+ 검색 결과가 없습니다.
+ )
+ ) : (
+
+ {isPending && (
+
+ )}
+
+
+
+ )}
+ {movies && movies.length > 0 ? (
+
+ {movies.map((movie) => (
+ navigate(`/movies/now_playing/${movie.id}`)}
+ />
+ ))}
+
+ ) : (
+ 영화 목록이 없습니다.
+ )}
+
+
+ );
+};
+
+export default MyPage;
diff --git a/Week10/wendy0802/mission/src/pages/NotFoundPage.tsx b/Week10/wendy0802/mission/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..e7796827
--- /dev/null
+++ b/Week10/wendy0802/mission/src/pages/NotFoundPage.tsx
@@ -0,0 +1,10 @@
+export default function NotFoundPage(): JSX.Element {
+ return (
+
+
+ 마이페이지
++ 이메일: {email} +
++ 닉네임: {nickname} +
+ +
+
+ );
+ }
+
\ No newline at end of file
diff --git a/Week10/wendy0802/mission/src/pages/NowPlayingPage.tsx b/Week10/wendy0802/mission/src/pages/NowPlayingPage.tsx
new file mode 100644
index 00000000..a351be76
--- /dev/null
+++ b/Week10/wendy0802/mission/src/pages/NowPlayingPage.tsx
@@ -0,0 +1,9 @@
+// NowPlayingPage.tsx
+import { Navigate } from "react-router-dom";
+
+const NowPlayingPage = (): JSX.Element => {
+ return
+ 💥에러 발생💥
+
+
+
+ {/* 뒤로가기 버튼 */}
+
+
+
+
+ );
+};
+
+export default SignUp;
diff --git a/Week10/wendy0802/mission/src/pages/TopRatedPage.tsx b/Week10/wendy0802/mission/src/pages/TopRatedPage.tsx
new file mode 100644
index 00000000..64278586
--- /dev/null
+++ b/Week10/wendy0802/mission/src/pages/TopRatedPage.tsx
@@ -0,0 +1,8 @@
+import { Navigate } from "react-router-dom";
+
+const TopRatedPage = (): JSX.Element => {
+ return 회원가입
+ + {/* 구글 로그인 버튼 */} + + + {/* STEP 1 */} + {step === 1 && ( + + )} + + {/* STEP 2 */} + {step === 2 && ( + + )} + + {/* STEP 3 */} + {step === 3 && ( + + )} +
+
+
+
+
+
+ );
+};
+
+export default ConfirmModal;
\ No newline at end of file
diff --git a/Week9/wendy0802/mission/src/components/Navbar.tsx b/Week9/wendy0802/mission/src/components/Navbar.tsx
new file mode 100644
index 00000000..0b13c74e
--- /dev/null
+++ b/Week9/wendy0802/mission/src/components/Navbar.tsx
@@ -0,0 +1,32 @@
+import { FaShoppingCart } from 'react-icons/fa';
+import { useSelector, useDispatch } from 'react-redux';
+import type { RootState } from '../store/store';
+import { useEffect } from 'react';
+import { calculateTotals } from '../store/cartslice';
+import '../App.css';
+
+const Navbar = () => {
+ const dispatch = useDispatch();
+ const { totalAmount, totalPrice, items } = useSelector((state: RootState) => state.cart);
+
+ useEffect(() => {
+ dispatch(calculateTotals());
+ }, [items, dispatch]);
+
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/Week9/wendy0802/mission/src/components/Playlistitem.tsx b/Week9/wendy0802/mission/src/components/Playlistitem.tsx
new file mode 100644
index 00000000..e5543e2d
--- /dev/null
+++ b/Week9/wendy0802/mission/src/components/Playlistitem.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { increase, decrease, removeItem } from '../store/cartslice';
+import type { CartItem } from '../store/cartslice';
+
+interface PlaylistItemProps {
+ item: CartItem;
+}
+
+const PlaylistItem: React.FC
+
+ 정말 삭제하시겠습니까?
+
+
+
+
+
+ 
+
+ );
+};
+
+export default PlaylistItem;
\ No newline at end of file
diff --git a/Week9/wendy0802/mission/src/constants/cartItems.ts b/Week9/wendy0802/mission/src/constants/cartItems.ts
new file mode 100644
index 00000000..288594b7
--- /dev/null
+++ b/Week9/wendy0802/mission/src/constants/cartItems.ts
@@ -0,0 +1,100 @@
+const cartItems = [
+ {
+ id: 'recB6qcHPxb62YJ75',
+ title: 'Vancouver',
+ singer: 'BIG Naughty (서동현)',
+ price: '25000',
+ img: 'https://image.bugsm.co.kr/album/images/500/40752/4075248.jpg',
+ amount: 1,
+ },
+ {
+ id: 'recdRxBsE14Rr2VuJ',
+ title: 'Empty Island',
+ singer: 'greenblue',
+ price: '18000',
+ img: 'https://f4.bcbits.com/img/a1472100223_10.jpg',
+ amount: 1,
+ },
+ {
+ id: 'recwTo120XST3PIoW',
+ title: 'golden hour',
+ singer: 'JVKE',
+ price: '28000',
+ img: 'https://image.bugsm.co.kr/album/images/200/193874/19387484.jpg?version=20230503022513.0',
+ amount: 1,
+ },
+ {
+ id: 'rec1JZlfCIBOPdcT2',
+ title: 'Home Sweet Home(From "어쩌면 우린 헤어졌는지 모른다")',
+ singer: 'Gogang (고갱)',
+ price: '20000',
+ img: 'https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/8d/d7/0f/8dd70fba-0a8f-b7ce-a2d2-f0d32dad2837/8809912894132.jpg/1200x1200bf-60.jpg',
+ amount: 1,
+ },
+ {
+ id: 'recwTo160XST3PIoW',
+ title: 'Lemon',
+ singer: 'Kenshi Yonezu(켄시 요네즈/米津 玄師)',
+ price: '30000',
+ img: 'https://image.bugsm.co.kr/album/images/200/7222/722272.jpg?version=20220514022202.0',
+ amount: 1,
+ },
+ {
+ id: 'recaBo120XST3PIoW',
+ title: '돌멩이',
+ singer: 'MASYTA (마시따)',
+ price: '12000',
+ img: 'https://image.bugsm.co.kr/album/images/200/3271/327113.jpg?version=20230606014806.0',
+ amount: 1,
+ },
+ {
+ id: 'recqBo123XST3PIoK',
+ title: 'L’Amour, Les Baguettes, Paris',
+ singer: '스텔라 장(Stella Jang)',
+ price: '32000',
+ img: 'https://image.bugsm.co.kr/album/images/200/40660/4066056.jpg?version=20211020003912.0',
+ amount: 1,
+ },
+ {
+ id: 'recqBo133XST3PIoK',
+ title: 'NO PAIN',
+ singer: '실리카겔',
+ price: '22000',
+ img: 'https://image.bugsm.co.kr/album/images/200/40790/4079061.jpg?version=20220826063340.0',
+ amount: 1,
+ },
+ {
+ id: 'recqBo145XST3PIoK',
+ title: '너에게 (feat. HYUN SEO)',
+ singer: 'Halsoon',
+ price: '20000',
+ img: 'https://image.bugsm.co.kr/album/images/200/204634/20463445.jpg?version=20230110013144.0',
+ amount: 1,
+ },
+ {
+ id: 'recqBo129XST3PIoK',
+ title: '널 떠올리는 중이야(Think About You)',
+ singer: 'PATEKO (파테코) , Jayci yucca(제이씨 유카)',
+ price: '25000',
+ img: 'https://image.bugsm.co.kr/album/images/200/40581/4058181.jpg?version=20210726063528.0',
+ amount: 1,
+ },
+ {
+ id: 'rdaqBo129XST3PIoK',
+ title: '끝나지 않은 얘기(feat. 다이나믹 듀오)',
+ singer: '릴러말즈 & TOIL',
+ price: '23000',
+ img: 'https://image.bugsm.co.kr/album/images/200/204692/20469237.jpg?version=20220827004220.0',
+ amount: 1,
+ },
+ {
+ id: 'rdaqBo149XQT3PIoK',
+ title: '각자의 밤',
+ singer: '나상현씨 밴드',
+ price: '21000',
+ img: 'https://image.bugsm.co.kr/album/images/200/202235/20223594.jpg?version=20230904194021.0',
+ amount: 1,
+ },
+ ];
+
+ export default cartItems;
\ No newline at end of file
diff --git a/Week9/wendy0802/.gitkeep b/Week9/wendy0802/mission/src/context/AuthContext.tsx
similarity index 100%
rename from Week9/wendy0802/.gitkeep
rename to Week9/wendy0802/mission/src/context/AuthContext.tsx
diff --git a/Week9/wendy0802/mission/src/context/Cart.tsx b/Week9/wendy0802/mission/src/context/Cart.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/Week9/wendy0802/mission/src/index.css b/Week9/wendy0802/mission/src/index.css
new file mode 100644
index 00000000..f0cd66cc
--- /dev/null
+++ b/Week9/wendy0802/mission/src/index.css
@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "tailwindcss";
\ No newline at end of file
diff --git a/Week9/wendy0802/mission/src/main.tsx b/Week9/wendy0802/mission/src/main.tsx
new file mode 100644
index 00000000..9fa87f78
--- /dev/null
+++ b/Week9/wendy0802/mission/src/main.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { Provider } from 'react-redux';
+import store from './store/store';
+import './index.css';
+import './App.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ {item.title}
+ {item.singer}
+ ₩{Number(item.price).toLocaleString()}
+
+
+
+ {item.amount}
+
+
+
+
+
+ );
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/Week9/wendy0802/mission/src/pages/Playlist.tsx b/Week9/wendy0802/mission/src/pages/Playlist.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/Week9/wendy0802/mission/src/store/cartslice.ts b/Week9/wendy0802/mission/src/store/cartslice.ts
new file mode 100644
index 00000000..e29f7c46
--- /dev/null
+++ b/Week9/wendy0802/mission/src/store/cartslice.ts
@@ -0,0 +1,63 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import cartItems from '../constants/cartItems';
+
+export interface CartItem {
+ id: string;
+ title: string;
+ singer: string;
+ price: string;
+ img: string;
+ amount: number;
+}
+
+interface CartState {
+ items: CartItem[];
+ totalAmount: number;
+ totalPrice: number;
+}
+
+const initialState: CartState = {
+ items: cartItems,
+ totalAmount: 0,
+ totalPrice: 0,
+};
+
+const cartSlice = createSlice({
+ name: 'cart',
+ initialState,
+ reducers: {
+ increase: (state, action: PayloadAction
+
+
+ {items.length === 0 ? (
+
+ 장바구니가 비었습니다.
+ ) : (
+ items.map(item => (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ConfirmModal;
\ No newline at end of file
diff --git a/Week9/wendy0802/mission3/src/components/Navbar.tsx b/Week9/wendy0802/mission3/src/components/Navbar.tsx
new file mode 100644
index 00000000..0b13c74e
--- /dev/null
+++ b/Week9/wendy0802/mission3/src/components/Navbar.tsx
@@ -0,0 +1,32 @@
+import { FaShoppingCart } from 'react-icons/fa';
+import { useSelector, useDispatch } from 'react-redux';
+import type { RootState } from '../store/store';
+import { useEffect } from 'react';
+import { calculateTotals } from '../store/cartslice';
+import '../App.css';
+
+const Navbar = () => {
+ const dispatch = useDispatch();
+ const { totalAmount, totalPrice, items } = useSelector((state: RootState) => state.cart);
+
+ useEffect(() => {
+ dispatch(calculateTotals());
+ }, [items, dispatch]);
+
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/Week9/wendy0802/mission3/src/components/PlayList.tsx b/Week9/wendy0802/mission3/src/components/PlayList.tsx
new file mode 100644
index 00000000..71d5cf48
--- /dev/null
+++ b/Week9/wendy0802/mission3/src/components/PlayList.tsx
@@ -0,0 +1,59 @@
+import { usePlaylistStore } from '../store/playlistStore'
+import { FaPlay, FaPause, FaTrash } from 'react-icons/fa'
+
+const PlayList = () => {
+ const { songs, currentSong, isPlaying, setCurrentSong, removeSong, togglePlay } = usePlaylistStore()
+
+ return (
+
+
+ 정말 삭제하시겠습니까?
+
+
+
+
+
+
+ )
+}
+
+export default PlayList
\ No newline at end of file
diff --git a/Week9/wendy0802/mission3/src/components/Playlistitem.tsx b/Week9/wendy0802/mission3/src/components/Playlistitem.tsx
new file mode 100644
index 00000000..e5543e2d
--- /dev/null
+++ b/Week9/wendy0802/mission3/src/components/Playlistitem.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { increase, decrease, removeItem } from '../store/cartslice';
+import type { CartItem } from '../store/cartslice';
+
+interface PlaylistItemProps {
+ item: CartItem;
+}
+
+const PlaylistItem: React.FC재생 목록
+
+ {songs.map((song) => (
+
+
+
+ ))}
+ {songs.length === 0 && (
+
+
+
+
+
+ {song.title}
+{song.artist}
+
+ {song.duration}
+
+
+ 재생 목록이 비어있습니다.
+ )} +
+
+
+ );
+};
+
+export default PlaylistItem;
\ No newline at end of file
diff --git a/Week9/wendy0802/mission3/src/constants/cartItems.ts b/Week9/wendy0802/mission3/src/constants/cartItems.ts
new file mode 100644
index 00000000..288594b7
--- /dev/null
+++ b/Week9/wendy0802/mission3/src/constants/cartItems.ts
@@ -0,0 +1,100 @@
+const cartItems = [
+ {
+ id: 'recB6qcHPxb62YJ75',
+ title: 'Vancouver',
+ singer: 'BIG Naughty (서동현)',
+ price: '25000',
+ img: 'https://image.bugsm.co.kr/album/images/500/40752/4075248.jpg',
+ amount: 1,
+ },
+ {
+ id: 'recdRxBsE14Rr2VuJ',
+ title: 'Empty Island',
+ singer: 'greenblue',
+ price: '18000',
+ img: 'https://f4.bcbits.com/img/a1472100223_10.jpg',
+ amount: 1,
+ },
+ {
+ id: 'recwTo120XST3PIoW',
+ title: 'golden hour',
+ singer: 'JVKE',
+ price: '28000',
+ img: 'https://image.bugsm.co.kr/album/images/200/193874/19387484.jpg?version=20230503022513.0',
+ amount: 1,
+ },
+ {
+ id: 'rec1JZlfCIBOPdcT2',
+ title: 'Home Sweet Home(From "어쩌면 우린 헤어졌는지 모른다")',
+ singer: 'Gogang (고갱)',
+ price: '20000',
+ img: 'https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/8d/d7/0f/8dd70fba-0a8f-b7ce-a2d2-f0d32dad2837/8809912894132.jpg/1200x1200bf-60.jpg',
+ amount: 1,
+ },
+ {
+ id: 'recwTo160XST3PIoW',
+ title: 'Lemon',
+ singer: 'Kenshi Yonezu(켄시 요네즈/米津 玄師)',
+ price: '30000',
+ img: 'https://image.bugsm.co.kr/album/images/200/7222/722272.jpg?version=20220514022202.0',
+ amount: 1,
+ },
+ {
+ id: 'recaBo120XST3PIoW',
+ title: '돌멩이',
+ singer: 'MASYTA (마시따)',
+ price: '12000',
+ img: 'https://image.bugsm.co.kr/album/images/200/3271/327113.jpg?version=20230606014806.0',
+ amount: 1,
+ },
+ {
+ id: 'recqBo123XST3PIoK',
+ title: 'L’Amour, Les Baguettes, Paris',
+ singer: '스텔라 장(Stella Jang)',
+ price: '32000',
+ img: 'https://image.bugsm.co.kr/album/images/200/40660/4066056.jpg?version=20211020003912.0',
+ amount: 1,
+ },
+ {
+ id: 'recqBo133XST3PIoK',
+ title: 'NO PAIN',
+ singer: '실리카겔',
+ price: '22000',
+ img: 'https://image.bugsm.co.kr/album/images/200/40790/4079061.jpg?version=20220826063340.0',
+ amount: 1,
+ },
+ {
+ id: 'recqBo145XST3PIoK',
+ title: '너에게 (feat. HYUN SEO)',
+ singer: 'Halsoon',
+ price: '20000',
+ img: 'https://image.bugsm.co.kr/album/images/200/204634/20463445.jpg?version=20230110013144.0',
+ amount: 1,
+ },
+ {
+ id: 'recqBo129XST3PIoK',
+ title: '널 떠올리는 중이야(Think About You)',
+ singer: 'PATEKO (파테코) , Jayci yucca(제이씨 유카)',
+ price: '25000',
+ img: 'https://image.bugsm.co.kr/album/images/200/40581/4058181.jpg?version=20210726063528.0',
+ amount: 1,
+ },
+ {
+ id: 'rdaqBo129XST3PIoK',
+ title: '끝나지 않은 얘기(feat. 다이나믹 듀오)',
+ singer: '릴러말즈 & TOIL',
+ price: '23000',
+ img: 'https://image.bugsm.co.kr/album/images/200/204692/20469237.jpg?version=20220827004220.0',
+ amount: 1,
+ },
+ {
+ id: 'rdaqBo149XQT3PIoK',
+ title: '각자의 밤',
+ singer: '나상현씨 밴드',
+ price: '21000',
+ img: 'https://image.bugsm.co.kr/album/images/200/202235/20223594.jpg?version=20230904194021.0',
+ amount: 1,
+ },
+ ];
+
+ export default cartItems;
\ No newline at end of file
diff --git a/Week9/wendy0802/mission3/src/context/AuthContext.tsx b/Week9/wendy0802/mission3/src/context/AuthContext.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/Week9/wendy0802/mission3/src/context/Cart.tsx b/Week9/wendy0802/mission3/src/context/Cart.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/Week9/wendy0802/mission3/src/index.css b/Week9/wendy0802/mission3/src/index.css
new file mode 100644
index 00000000..5043662e
--- /dev/null
+++ b/Week9/wendy0802/mission3/src/index.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ h1 {
+ @apply text-3xl font-bold;
+ }
+}
\ No newline at end of file
diff --git a/Week9/wendy0802/mission3/src/main.tsx b/Week9/wendy0802/mission3/src/main.tsx
new file mode 100644
index 00000000..9fa87f78
--- /dev/null
+++ b/Week9/wendy0802/mission3/src/main.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { Provider } from 'react-redux';
+import store from './store/store';
+import './index.css';
+import './App.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+ {item.title}
+ {item.singer}
+ ₩{Number(item.price).toLocaleString()}
+
+
+
+ {item.amount}
+
+
+
+
+
+ );
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/Week9/wendy0802/mission3/src/pages/Playlist.tsx b/Week9/wendy0802/mission3/src/pages/Playlist.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/Week9/wendy0802/mission3/src/store/cartslice.ts b/Week9/wendy0802/mission3/src/store/cartslice.ts
new file mode 100644
index 00000000..e29f7c46
--- /dev/null
+++ b/Week9/wendy0802/mission3/src/store/cartslice.ts
@@ -0,0 +1,63 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import cartItems from '../constants/cartItems';
+
+export interface CartItem {
+ id: string;
+ title: string;
+ singer: string;
+ price: string;
+ img: string;
+ amount: number;
+}
+
+interface CartState {
+ items: CartItem[];
+ totalAmount: number;
+ totalPrice: number;
+}
+
+const initialState: CartState = {
+ items: cartItems,
+ totalAmount: 0,
+ totalPrice: 0,
+};
+
+const cartSlice = createSlice({
+ name: 'cart',
+ initialState,
+ reducers: {
+ increase: (state, action: PayloadAction
+
+
+ {items.length === 0 ? (
+
+ 장바구니가 비었습니다.
+ ) : (
+ items.map(item => (
+
+
+
+