[양재영] sprint7

vite-project/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.11.0",
+    "dayjs": "^1.11.18",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-responsive": "^10.0.1",
@@ -22,10 +23,13 @@
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
     "vite": "^6.3.5"
   }
 }

vite-project/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

vite-project/src/App.jsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import Nav from "./components/Nav";
 import ItemsPage from "./pages/ItemsPage/ItemsPage";
 import AddItemPage from "./pages/AddItemPage/AddItemPage";
+import ItemDetailPage from "./pages/ItemDetailPage/ItemDetailPage";
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
         <Route path="/" element={<Navigate to="/items" />} />
         <Route path="/items" element={<ItemsPage />} />
         <Route path="/additem" element={<AddItemPage />} />
+        <Route path="/items/:productId" element={<ItemDetailPage />} />
       </Routes>
     </BrowserRouter>
   );

vite-project/src/api.jsx

@@ -14,3 +14,34 @@ export async function getProducts({
     throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
   }
 }
+
+export async function getProductDetails(productId) {
+  try {
+    const response = await instance.get(`/products/${productId}`);
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
+  }
+}
+
+export async function getProductComments(productId, limit = 5, cursor) {
+  try {
+    const params = { limit };
+    if (cursor) params.cursor = cursor;
+    const response = await instance.get(`/products/${productId}/comments`, {
+      params,
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
+  }
+}
+
+export async function postProducts(body) {
+  try {
+    const response = await instance.post("/products/", body);
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 등록하는데 실패했습니다 : ${error.message}`);
+  }
+}

vite-project/src/axiosInstance.jsx

@@ -9,23 +9,26 @@ const instance = axios.create({
   },
 });
 
+export const ERROR_STATUSCODE_MESSAGES = {
+  401: "인증이 필요합니다. 로그인 해주세요.",
+  403: "접근 권한이 없습니다.",
+  404: "요청하신 리소스를 찾을 수 없습니다.",
+  500: "서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.",
+};
+
 instance.interceptors.response.use(
   (response) => {
     return response;
   },
   (error) => {
     if (error.response) {
       const status = error.response.status;
-
-      if (status === 401) {
-        alert("인증이 필요합니다. 로그인 해주세요.");
-      } else if (status === 500) {
-        alert("서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
-      }
+      alert(
+        ERROR_STATUSCODE_MESSAGES[status] || "알 수 없는 오류가 발생했습니다."
+      );
     } else {
       alert("네트워크 오류가 발생했습니다.");
     }
-
     return Promise.reject(error);
   }
 );

vite-project/src/components/SelectDropdown.jsx

@@ -1,15 +1,15 @@
 import { useEffect, useRef, useState } from "react";
 import selectIcon from "../assets/ic-sort.svg";
 
+const options = [
+  { label: "최신순", value: "recent" },
+  { label: "좋아요순", value: "favorite" },
+];
+
 export default function SelectDropdown({ onChange, value }) {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
-  const options = [
-    { label: "최신순", value: "recent" },
-    { label: "좋아요순", value: "favorite" },
-  ];
-
   const selected = options.find((opt) => opt.value === value);
 
   const handleSelect = (option) => {
@@ -32,6 +32,7 @@ export default function SelectDropdown({ onChange, value }) {
       <div ref={dropdownRef} className="select-dropdown">
         <div className="selected-option" onClick={() => setIsOpen(!isOpen)}>
           <img src={selectIcon} alt="드롭다운 아이콘" />
+          <span>{selected ? selected.label : "선택"}</span>
         </div>
 
         {isOpen && (

vite-project/src/index.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    /* Apply Pretendard font */
+    @apply font-pretendard;
+  }
+}

vite-project/src/main.jsx

@@ -1,5 +1,6 @@
 import App from "./App";
 import ReactDOM from "react-dom/client";
+import "./index.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);

vite-project/src/pages/AddItemPage/AddItemPage.jsx

@@ -7,6 +7,8 @@ import ProductAddInt from "./ProductAddInt.jsx";
 import ProductAddPrice from "./ProductAddPrice.jsx";
 import ProductAddTag from "./ProductAddTag.jsx";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { postProducts } from "../../api.jsx";
 
 const FormContainer = Styled.form`
     display: flex;
@@ -22,8 +24,11 @@ function AddItemPage() {
     description: "",
     price: "",
     tags: [],
+    images: null,
   });
 
+  const navigate = useNavigate();
+
   const handleChange = (field, value) => {
     setFormValues((prev) => ({ ...prev, [field]: value }));
   };
@@ -34,11 +39,17 @@ function AddItemPage() {
     formValues.price.trim() !== "" &&
     formValues.tags.length > 0;
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     if (!isFormValid) return;
 
-    console.log("등록 데이터:", formValues); //submit 확인용
+    try {
+      const newItem = { ...formValues, price: Number(formValues.price) };
+      const response = await postProducts(newItem);
+      navigate("/items");
+    } catch (error) {
+      console.error("상품 등록 실패", error.message);
+    }
   };
 
   return (

vite-project/src/pages/AddItemPage/ProductAddImg.jsx

@@ -71,20 +71,20 @@ export default function ProductAddImg() {
   const inputRef = useRef();
 
   const handleFileChange = (e) => {
-    const file = e.target.files[0];
+    const file = e.target.files?.[0];
     if (!file) return;
 
-    if (previewImg) {
-      SetShowError(true);
-      inputRef.current.value = "";
+    if (!file.type.startsWith("image/")) {
+      SetShowError("이미지 파일만 업로드할 수 있습니다.");
+      e.target.value = "";
       return;
     }
-
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setPreviewImg(reader.result);
-    };
-    reader.readAsDataURL(file);
+    SetShowError(null);
+    inputRef.current = file;
+    if (previewImg) URL.revokeObjectURL(previewImg);
+    const url = URL.createObjectURL(file);
+    setPreviewImg(url);
+    e.target.value = "";
   };
 
   const handleClearClick = () => {

vite-project/src/pages/AddItemPage/ProducutAddHeader.jsx

@@ -16,13 +16,18 @@ const ProductAddHeaderButton = styled.button`
   font-weight: 600;
   font-size: 1.6rem;
   color: var(--gray-100);
-  background-color: ${({ disabled }) =>
-    disabled ? "var(--gray-400)" : "var(--blue)"};
   border-radius: 0.8rem;
   width: 7.4rem;
   height: 4.2rem;
   border: 0.1rem solid var(--gray-400);
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  &:enabled {
+    background-color: var(--blue);
+    cursor: pointer;
+  }
+  &:disabled {
+    background-color: var(--gray-400);
+    cursor: not-allowed;
+  }
 `;
 
 export default function ProductAddHeader({ isFormValid }) {