[문주영] Sprint6

package.json

@@ -10,8 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^7.5.0"
   },
   "devDependencies": {

src/App.jsx

@@ -0,0 +1,33 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import Index from './pages/Index.jsx';
+import Items from './pages/Items.jsx';
+import AddItem from './pages/AddItem.jsx';
+import Auth from './pages/Auth.jsx';
+import Login from './pages/Login.jsx';
+import Signup from './pages/Signup.jsx';
+import './reset.css';
+import './color.css';
+
+function App() {
+  return (
+    <HelmetProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route index element={<Index />} />
+
+          <Route path="items" element={<Items />} />
+
+          <Route path="additem" element={<AddItem />} />
+
+          <Route element={<Auth />}>
+            <Route path="login" element={<Login />} />
+            <Route path="signup" element={<Signup />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </HelmetProvider>
+  );
+}
+
+export default App;

src/color.css

@@ -1,5 +1,7 @@
 :root {
-    --blue: #3692FF;
+    --blue100: #3692FF;
+    --blue200: #1967D6;
+    --blue300: #1251AA;
     --red: #F74747;
     --gray900: #111827;
     --gray800: #1F2937;

src/components/AuthInput.css

@@ -0,0 +1,40 @@
+.auth-input-box * {
+    border: none;
+}
+
+.auth-input-box input {
+    margin-bottom: 24px;
+}
+
+.auth-input-box input.wrong {
+    margin-bottom: 8px;
+    border: solid 1px var(--red);
+}
+
+.auth-input-box input.correct {
+    border: solid 1px var(--blue100);
+}
+
+.auth-input-box .wrong-message {
+    margin: 8px 16px 18px;
+    color: var(--red);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.auth-input-box.password {
+    position: relative;
+}
+
+.auth-input-box.password .eye-btn {
+    width: 24px;
+    padding: 0;
+    position: absolute;
+    top: 58px;
+    right: 24px;
+}
+
+.auth-input-box.password .eye-btn img {
+    width: 100%;
+}