Mission 5 박한별

jsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@pages/*": ["src/pages/*"],
+      "@components/*": ["src/components/*"],
+      "@common/*": ["src/components/common/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@api/*": ["src/api/*"],
+      "@sb/*": ["src/supabase/*"],
+      "@sbCtx/*": ["src/supabase/context/*"],
+      "@utils/*": ["src/utilities/*"]
+    }
+  },
+  "include": ["src"]
+}

package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@supabase/supabase-js": "^2.81.1",
+    "@supabase/supabase-js": "^2.84.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.9.4",

src/App.jsx

@@ -6,14 +6,13 @@ import {
   SearchResults,
   LoginPage,
   SignupPage,
-} from "./pages";
-import Layout from "./components/Layout";
-
-import { useSupabaseAuth } from "./supabase";
-import { UserContext } from "./supabase/context/UserContext";
-
-import OAuthCallback from "./components/OAuthCallback";
+  MyPage,
+} from "@pages";
+import Layout from "@components/Layout";
+import OAuthCallback from "@components/OAuthCallback";
 
+import { useSupabaseAuth } from "@sb";
+import { UserContext } from "@sbCtx/UserContext";
 export default function App() {
   const { getUserInfo } = useSupabaseAuth();
   const { setUser } = useContext(UserContext);
@@ -34,6 +33,7 @@ export default function App() {
         <Route index element={<Home />} />
         <Route path="details/:id" element={<MovieDetail />} />
         <Route path="search" element={<SearchResults />} />
+        <Route path="mypage" element={<MyPage />} />
       </Route>
 
       <Route path="/login" element={<LoginPage />} />

src/api/tmdb.js

@@ -8,19 +8,19 @@ const options = {
   },
 };
 
+//인기 영화 가져오기
 export async function fetchPopularMovies(page = 1) {
   try {
     const res = await fetch(
-      `${BASE_URL}/movie/popular?language=kr-KO&page=${page}`,
+      `${BASE_URL}/movie/popular?language=ko-KR&page=${page}`,
       options
     );
 
-    if (!res.ok) {
-      throw new Error("TMDB API 요청 실패");
-    }
+    if (!res.ok) throw new Error("TMDB popular API 요청 실패");
 
     const data = await res.json();
 
+    //성인영화 제외
     const filteredResults = data.results.filter(
       (movie) => movie.adult === false
     );
@@ -32,22 +32,28 @@ export async function fetchPopularMovies(page = 1) {
   }
 }
 
+//영화 상세 정보
 export async function fetchMovieDetails(id) {
-  const res = await fetch(`${BASE_URL}/movie/${id}`, {
+  const res = await fetch(`${BASE_URL}/movie/${id}?language=ko-KR`, {
     headers: {
       accept: "application/json",
       Authorization: `Bearer ${import.meta.env.VITE_TMDB_ACCESS_TOKEN}`,
     },
   });
+
+  if (!res.ok) throw new Error("TMDB detail API 요청 실패");
+
   return await res.json();
 }
+
+//영화 검색
 export async function searchMovies(query) {
   if (!query) return [];
 
   const res = await fetch(
     `${BASE_URL}/search/movie?query=${encodeURIComponent(
       query
-    )}language=ko-KR&page=1`,
+    )}&language=ko-KR&page=1`,
     {
       headers: {
         accept: "application/json",
@@ -56,6 +62,8 @@ export async function searchMovies(query) {
     }
   );
 
+  if (!res.ok) throw new Error("TMDB search API 요청 실패");
+
   const data = await res.json();
   return data.results || [];
 }

src/components/Layout.jsx

@@ -1,5 +1,5 @@
 import { Outlet } from "react-router-dom";
-import NavBar from "./NavBar";
+import NavBar from "@components/NavBar";
 
 export default function Layout() {
   return (

src/components/MovieCard.jsx

@@ -1,30 +1,56 @@
+import { useNavigate } from "react-router-dom";
+import { useUser } from "@sbCtx/UserContext";
+import { useBookmarks } from "@/context/BookmarkContext";
+import { Button } from ".";
+
 const baseUrl = "https://image.tmdb.org/t/p/w500";
 
-export default function MovieCard({
-  title,
-  poster_path,
-  vote_average,
-  size = "md",
-}) {
-  const sizeClass = size === "sm" ? "w-40" : size === "md" ? "w-52" : "w-64";
+export default function MovieCard({ id, title, poster_path, vote_average }) {
+  const navigate = useNavigate();
+  const { user } = useUser();
+  const { toggleBookmark, isBookmarked } = useBookmarks();
+
+  const handleBookmark = (e) => {
+    e.stopPropagation();
+
+    if (!user) {
+      alert("로그인이 필요합니다!");
+      return;
+    }
+
+    toggleBookmark({ id, title, poster_path, vote_average });
+  };
+
   return (
-    <>
-      <div
-        className={`${sizeClass} bg-white shadow-md hover:shadow-xl rounded-lg
-        overflow-hidden cursor-pointer transform hover:scale-105 transition duration-300`}
+    <div
+      className="relative cursor-pointer group"
+      onClick={() => navigate(`/details/${id}`)}
+    >
+      {/* 이미지 */}
+      <img
+        src={`${baseUrl}${poster_path}`}
+        alt={title}
+        className="rounded-lg shadow-md w-full group-hover:opacity-90 transition"
+      />
+
+      {/* 평점 */}
+      <span className="absolute bottom-2 left-2 bg-black/70 text-white text-sm px-2 py-1 rounded">
+        ⭐ {vote_average}
+      </span>
+
+      {/* ✅ 북마크 버튼 */}
+      <Button
+        onClick={handleBookmark}
+        className={`absolute top-2 right-2 px-2 py-1 rounded-full text-sm font-bold transition
+          ${
+            isBookmarked(id)
+              ? "bg-yellow-400 text-black"
+              : "bg-white/80 text-gray-700"
+          }
+        `}
       >
-        <div className="w-full aspect-[2/3]">
-          <img
-            src={poster_path ? `${baseUrl}${poster_path}` : "/placeholder.png"}
-            alt={title}
-            className="w-full h-72 object-cover"
-          />
-        </div>
-        <div className="p-4 flex flex-col justify-between h-28">
-          <h2 className="text-base font-semibold mb-1">{title}</h2>
-          <p className="text-sm text-gray-500">⭐ {vote_average}</p>
-        </div>
-      </div>
-    </>
+        {isBookmarked(id) ? "★" : "☆"}
+      </Button>
+    </div>
   );
 }

src/components/NavBar.jsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useContext } from "react";
-import useDebounce from "../hooks/useDebounce";
+import useDebounce from "@hooks/useDebounce";
 import { Link, useNavigate } from "react-router-dom";
-import { UserContext } from "../supabase/context/UserContext";
-import { useSupabaseAuth } from "../supabase";
-import { Button } from "@/components";
+import { UserContext } from "@sbCtx/UserContext";
+import { useSupabaseAuth } from "@sb";
+import Button from "@common/Button";
 
 export default function NavBar() {
   const [search, setSearch] = useState("");
@@ -75,6 +75,7 @@ export default function NavBar() {
                     <Link
                       to="/mypage"
                       className="block px-4 py-2 hover:bg-gray-100"
+                      onClick={() => setShowMenu(false)}
                     >
                       마이페이지
                     </Link>

src/components/OAuthCallback.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useContext } from "react";
-import { useSupabaseAuth } from "../supabase";
+import { useSupabaseAuth } from "@sb";
 import { useNavigate } from "react-router-dom";
-import { UserContext } from "@/supabase/context/UserContext";
+import { UserContext } from "@sbCtx/UserContext";
 
 export default function OAuthCallback() {
   const { handleOAuthCallback } = useSupabaseAuth();
@@ -21,7 +21,7 @@ export default function OAuthCallback() {
 
   return (
     <div className="flex justify-center items-center min-h-screen">
-      소셜 로그인 처리 중입니다...
+      로그인 처리 중입니다...
     </div>
   );
 }

src/components/index.js

@@ -1,3 +1,4 @@
 export { default as Button } from "./common/Button";
 export { default as InputField } from "./common/InputField";
 export { default as NavBar } from "./NavBar";
+export { default as MovieCard } from "./MovieCard";

src/context/BookmarkContext.jsx

@@ -0,0 +1,44 @@
+import { createContext, useContext, useState, useEffect } from "react";
+
+export const BookmarkContext = createContext();
+
+export function BookmarkProvider({ children }) {
+  const [bookmarks, setBookmarks] = useState([]);
+
+  // localStorage에서 복원
+  useEffect(() => {
+    const saved = localStorage.getItem("bookmarks");
+    if (saved) setBookmarks(JSON.parse(saved));
+  }, []);
+
+  // 저장
+  useEffect(() => {
+    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
+  }, [bookmarks]);
+
+  const toggleBookmark = (movie) => {
+    setBookmarks((prev) => {
+      const exists = prev.some((m) => m.id === movie.id);
+      if (exists) {
+        return prev.filter((m) => m.id !== movie.id);
+      }
+      return [...prev, movie];
+    });
+  };
+
+  const removeBookmark = (id) => {
+    setBookmarks((prev) => prev.filter((m) => m.id !== id));
+  };
+
+  const isBookmarked = (id) => bookmarks.some((m) => m.id === id);
+
+  return (
+    <BookmarkContext.Provider
+      value={{ bookmarks, toggleBookmark, isBookmarked, removeBookmark }}
+    >
+      {children}
+    </BookmarkContext.Provider>
+  );
+}
+
+export const useBookmarks = () => useContext(BookmarkContext);