[mission4] 4단계 미션 구현 - 정선영/4팀

client/.env

@@ -1 +1,3 @@
-VITE_TMDB_API_TOKEN=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmN2QxNTEwM2ZmZDQzNjM3ZjhmOWRmZmRhNTUxMDc3NCIsIm5iZiI6MTc1MzMzNTI5NS4yODEsInN1YiI6IjY4ODFjNWZmNzMwYWI1NzJiNjhhNWI3MiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.iPnxox81mfYE7WQi43fNlk98a4-wllYkXAb_VIF6Ybw
+VITE_TMDB_API_TOKEN=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmN2QxNTEwM2ZmZDQzNjM3ZjhmOWRmZmRhNTUxMDc3NCIsIm5iZiI6MTc1MzMzNTI5NS4yODEsInN1YiI6IjY4ODFjNWZmNzMwYWI1NzJiNjhhNWI3MiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.iPnxox81mfYE7WQi43fNlk98a4-wllYkXAb_VIF6Ybw
+VITE_SUPABASE_PROJECT_URL=https://rdyysusxqebzlgqhvhaq.supabase.co
+VITE_SUPABASE_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJkeXlzdXN4cWViemxncWh2aGFxIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM3NzM3NDgsImV4cCI6MjA2OTM0OTc0OH0.EjmD5PzwG10IgHwocJMcOdv7V9uiUXyucFx7M5RkDBI

client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.53.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",

client/src/App.css

@@ -1,22 +1,16 @@
-/* App.css */
-
 body, html {
   margin: 0;
   padding: 0;
   height: 100%;
-  overflow: hidden;
 }
 
 .layout-container {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  overflow: hidden; 
 }
 
 .content {
   flex: 1;
-  overflow-y: auto; 
+  overflow-y: auto;
 }
-
-

client/src/App.jsx

@@ -1,20 +1,28 @@
-// src/App.jsx
-import { useState } from "react";
+import { useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
 import Layout from "./components/Layout";
 import MovieDetail from "./components/MovieDetail";
 import Home from "./pages/Home";
 import SearchResult from "./pages/SearchResult";
+import SignUp from "./pages/SignUp";
+import Login from "./pages/Login";
+import useSupabaseAuth from "./supabase/useSupabaseAuth";
 
 function App() {
-  const [query, setQuery] = useState("");
+  const { getUserInfo } = useSupabaseAuth();
+
+  useEffect(() => {
+    getUserInfo();
+  }, []);
 
   return (
     <Routes>
-      <Route path="/" element={<Layout onSearch={setQuery} />}> {/* 여기 onSearch 전달 */}
+      <Route path="/" element={<Layout onSearch={() => {}} />}>
         <Route index element={<Home />} />
         <Route path="movie/:id" element={<MovieDetail />} />
         <Route path="search" element={<SearchResult />} />
+        <Route path="signup" element={<SignUp />} />
+        <Route path="login" element={<Login />} />
       </Route>
     </Routes>
   );

client/src/components/FormInput.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+function FormInput({ label, type, name, value, onChange, error, ...rest }) {
+  return (
+    <div style={{ marginBottom: "1.2rem" }}>
+      <label style={{ display: "block", fontWeight: 600, marginBottom: 5 }}>
+        {label}
+      </label>
+      <input
+        style={{
+          width: "100%",
+          padding: "8px",
+          borderRadius: "5px",
+          border: "1px solid #ccc",
+          fontSize: "1rem",
+        }}
+        type={type}
+        name={name}
+        value={value}
+        onChange={onChange}
+        autoComplete="off"
+        {...rest}
+      />
+      {error && (
+        <div style={{ color: "#e74c3c", marginTop: 3, fontSize: "0.97rem" }}>
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default FormInput;

client/src/components/MovieCard.jsx

@@ -1,4 +1,3 @@
-// src/components/MovieCard.jsx
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import "./MovieCard.css";
@@ -15,11 +14,11 @@ const MovieCard = ({ id, title, poster_path, vote_average, rank }) => {
     : "https://via.placeholder.com/500x750?text=No+Image";
 
   return (
-    <div className="movie-card" onClick={handleClick} style={{ cursor: "pointer" }}>
+    <div className="movie-card" onClick={handleClick}>
       {rank && <span className="movie-rank">#{rank}</span>}
       <img src={imageUrl} alt={title} className="movie-poster" />
       <h3 className="movie-title" title={title}>{title}</h3>
-      <span className="movie-score">⭐ {vote_average.toFixed(1)}</span>
+      <span className="movie-score">⭐ {vote_average?.toFixed(1)}</span>
     </div>
   );
 };

client/src/components/MovieList.jsx

@@ -3,7 +3,13 @@ import MovieCard from "./MovieCard";
 import "./MovieList.css";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 
-const MovieList = ({ fetchUrl, title, showRank, itemsPerPage = 4, rows = 1 }) => {
+const MovieList = ({
+  fetchUrl,
+  title,
+  showRank,
+  itemsPerPage = 4,
+  rows = 1,
+}) => {
   const [movies, setMovies] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const API_TOKEN = import.meta.env.VITE_TMDB_API_TOKEN;
@@ -40,7 +46,6 @@ const MovieList = ({ fetchUrl, title, showRank, itemsPerPage = 4, rows = 1 }) =>
 
   const dotCount = Math.ceil(movies.length / itemsPerPage);
 
-
   return (
     <div className={`movie-list-container${title === "🎬 인기 영화" ? " popular" : ""}`}>
       {title && <h2 className="movie-list-title">{title}</h2>}