[윤진우] sprint7

src/App.jsx

@@ -2,8 +2,10 @@ import "./App.css";
 import "./base.css";
 import { Routes, Route } from "react-router-dom";
 import Home from "./pages/Home/Home";
-import Login from "./pages/Login/Login";
+import LoginPage from "./pages/Login/LoginPage";
+import SignupPage from "./pages/Login/SignupPage";
 import Market from "./pages/Market/Market";
+import Product from "./pages/Product/Product";
 import Community from "./pages/Community/Community";
 import AddItem from "./pages/AddItem/AddItem";
 import NotFound from "./pages/NotFound/NotFound";
@@ -12,9 +14,10 @@ function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/login" element={<Login type="login" />} />
-      <Route path="/signup" element={<Login type="signup" />} />
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/signup" element={<SignupPage />} />
       <Route path="/items" element={<Market />} />
+      <Route path="/items/:id" element={<Product />} />
       <Route path="/boards" element={<Community />} />
       <Route path="/additem" element={<AddItem />} />
       <Route path="*" element={<NotFound />} />

src/api/getComments.js

@@ -0,0 +1,7 @@
+export async function getComments({ id, limit = 8 }) {
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/products/${id}/comments?limit=${limit}`
+  );
+  const body = await response.json();
+  return body;
+}

src/api/getProduct.js

@@ -0,0 +1,7 @@
+export async function getProduct({ id }) {
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/products/${id}`
+  );
+  const body = await response.json();
+  return body;
+}

src/base.css

@@ -18,6 +18,10 @@
   box-sizing: border-box;
 }
 
+h1,
+h2,
+h3,
+h4,
 html,
 body,
 div,

src/components/Header.css

@@ -38,6 +38,15 @@
   border: none;
 }
 
+.Header .login-button:hover {
+  background-color: var(--blue200);
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  transform: translateY(2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
 .Header .header-left .link-section .active {
   color: var(--blue100);
 }

src/hooks/useEmailValidator.jsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+export function useEmailValidator(initial = "") {
+  const [email, setEmail] = useState(initial);
+  const [touched, setTouched] = useState(false);
+
+  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  const hasError = touched && !isValid;
+
+  return {
+    email,
+    setEmail,
+    hasError,
+    isValid,
+    onChange: (e) => setEmail(e.target.value),
+    onBlur: () => setTouched(true),
+  };
+}

src/hooks/usePasswordInput.jsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+export function usePasswordInput(initial = "") {
+  const [value, setValue] = useState(initial);
+  const [touched, setTouched] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  const hasError = touched && value.length < 8;
+
+  return {
+    value,
+    setValue,
+    touched,
+    visible,
+    hasError,
+    toggleVisible: () => setVisible((v) => !v),
+    onChange: (e) => setValue(e.target.value),
+    onBlur: () => setTouched(true),
+  };
+}

src/pages/AddItem/AddItem.css

@@ -6,15 +6,15 @@
   gap: 24px;
 }
 
-.register {
+.add-item .register {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 20px;
   font-weight: 700;
 }
 
-.register button {
+.add-item .register button {
   padding: 12px 23px;
   background-color: var(--blue100);
   color: var(--gray100);
@@ -24,12 +24,21 @@
   font-weight: 600;
 }
 
-.register button:disabled {
+.add-item .register button:disabled {
   background-color: var(--gray400);
   cursor: not-allowed;
 }
 
-.info-section {
+.add-item .register button:not(:disabled):hover {
+  background-color: var(--blue200);
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  transform: translateY(2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.add-item .info-section {
   display: flex;
   flex-direction: column;
   gap: 32px;
@@ -38,26 +47,26 @@
   line-height: 26px;
 }
 
-.info-section.size-down {
+.add-item .info-section.size-down {
   gap: 24px;
 }
 
-.image-section,
-.name-section,
-.description-section,
-.price-section,
-.tag-section {
+.add-item .image-section,
+.add-item .name-section,
+.add-item .description-section,
+.add-item .price-section,
+.add-item .tag-section {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
-.upload-section {
+.add-item .upload-section {
   display: flex;
   gap: 24px;
 }
 
-.upload-button {
+.add-item .upload-button {
   width: 282px;
   height: 282px;
   display: flex;
@@ -68,43 +77,43 @@
   cursor: pointer;
 }
 
-.image-upload {
+.add-item .image-upload {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
 }
 
-.image-upload span {
+.add-item .image-upload span {
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
   color: var(--gray400);
 }
 
-.image-uploaded {
+.add-item .image-uploaded {
   width: 282px;
   height: 282px;
   border-radius: 12px;
   overflow: hidden;
   position: relative;
 }
 
-.image-uploaded img {
+.add-item .image-uploaded img {
   width: 100%;
   height: 100%;
 }
 
-.image-uploaded .delete-button {
+.add-item .image-uploaded .delete-button {
   position: absolute;
   top: 12px;
   right: 12px;
 }
 
-.name-input,
-.description-input,
-.price-input,
-.tag-input {
+.add-item .name-input,
+.add-item .description-input,
+.add-item .price-input,
+.add-item .tag-input {
   height: 56px;
   padding: 16px 24px;
   border-radius: 12px;
@@ -115,25 +124,25 @@
   line-height: 26px;
 }
 
-.description-input {
+.add-item .description-input {
   height: 282px;
   resize: none;
   letter-spacing: -0.7px; /* textarea와 input의 간격 차이 때문에 추가 */
 }
 
-.show-tag {
+.add-item .show-tag {
   display: flex;
   flex-direction: column;
   gap: 14px;
 }
 
-.tag-list ul {
+.add-item .tag-list ul {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
 }
 
-.tag-list li {
+.add-item .tag-list li {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -146,7 +155,7 @@
   font-weight: 400;
 }
 
-.delete-button {
+.add-item .delete-button {
   background-image: url(../../assets/images/button_x.svg);
   width: 20px;
   height: 20px;
@@ -157,13 +166,13 @@
   background-color: transparent;
 }
 
-.error-message {
+.add-item .error-message {
   color: var(--red);
   font-size: 16px;
   font-weight: 400;
 }
 
-.hidden {
+.add-item .hidden {
   display: none;
 }
 
@@ -178,16 +187,16 @@
     margin: 16px 24px;
   }
 
-  .info-section {
+  .add-item .info-section {
     gap: 24px;
   }
 
-  .upload-section {
+  .add-item .upload-section {
     gap: 10px;
   }
 
-  .upload-button,
-  .image-uploaded {
+  .add-item .upload-button,
+  .add-item .image-uploaded {
     width: 168px;
     height: 168px;
   }