[mission4] 4단계 미션 구현 - 김은빈/5팀

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.50.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.89.2",

src/App.jsx

@@ -5,20 +5,23 @@ import Layout from "./component/Layout";
 import Main from "./component/Main";
 import Search from "./component/Search";
 import Login from "./component/Login";
-import Join from "./component/Join";
+import SignUp from "./component/Signup";
+import { UserProvider } from "./contexts/UserContext";
 
 function App() {
   return (
     <>
-      <Routes>
-        <Route path="/" element={<Layout />}>
-          <Route index element={<Main />} />
-          <Route path="/details/:movieId" element={<Detail />} />
-          <Route path="/search" element={<Search />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/join" element={<Join />} />
-        </Route>
-      </Routes>
+      <UserProvider>
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<Main />} />
+            <Route path="/details/:movieId" element={<Detail />} />
+            <Route path="/search" element={<Search />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/signup" element={<SignUp />} />
+          </Route>
+        </Routes>
+      </UserProvider>
     </>
   );
 }

src/App.scss

@@ -41,6 +41,38 @@ nav {
     border: 1px solid #555555;
     background: #161616;
   }
+
+  .profile {
+    position: relative;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background-color: #5914c7;
+    > div {
+      width: 150px;
+      height: 0px;
+      margin-top: 55px;
+      position: absolute;
+      right: 0;
+      overflow: hidden;
+      transition: 0.5s;
+    }
+    &:hover {
+      > div {
+        height: 200px;
+      }
+    }
+    ul {
+      background-color: $bg-gray;
+      padding: 20px;
+      li {
+        margin: 10px 0;
+        a {
+          background-color: transparent;
+        }
+      }
+    }
+  }
 }
 
 main {
@@ -226,3 +258,14 @@ main {
     }
   }
 }
+
+.error-message {
+  color: red;
+  font-size: 0.8rem;
+  margin-top: 4px;
+}
+
+.input-error {
+  border: 1px solid red;
+  outline: none;
+}

src/component/Input.jsx

@@ -0,0 +1,28 @@
+export default function Input({
+  label,
+  type = "text",
+  name,
+  value,
+  onChange,
+  error,
+  placeholder,
+}) {
+  // 유효성 검사를 위한 value=현재값, onChange=입력된 값을 외부에전달
+  return (
+    <>
+      <div>
+        <label htmlFor={name}>{label}</label>
+        <input
+          id={name}
+          name={name}
+          type={type}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          className={error ? "input-error" : ""}
+        />
+        {error && <p className="error-message">{error}</p>}
+      </div>
+    </>
+  );
+}