[김영주] sprint7

.github/pull_request_template.md

@@ -6,41 +6,58 @@
 
 ### 기본
 
-- [x] 상품 등록 페이지 주소는 “/additem” 입니다.
-- [x] 페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
-- [x] 상품 이미지는 최대 한개 업로드가 가능합니다.
-- [x] 각 input의 placeholder 값을 정확히 입력해주세요.
-- [x] 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
-- [x] API를 통한 상품 등록은 추후 미션에서 적용합니다.
-
-### 심화
-
-- [x] 이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
-- [x] 추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.
+### 상품 상세
+
+- [x] 상품 상세 페이지 주소는 “/items/{productId}” 입니다.
+- [x] response 로 받은 아래의 데이터로 화면을 구현합니다- favoriteCount : 하트 개수
+- images : 상품 이미지
+- tags : 상품 태그
+- name : 상품 이름
+- description : 상품 설명
+- [x] 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다
+
+### 상품 문의 댓글
+
+- [x] 문의하기에 내용을 입력하면 등록 버튼의 색상은 “3692FF”로 변합니다.
+- [x] response 로 받은 아래의 데이터로 화면을 구현합니다
+- image : 작성자 이미지
+- nickname : 작성자 닉네임
+- content : 작성자가 남긴 문구
+- description : 상품 설명
+- updatedAt : 문의글 마지막 업데이트 시간
 
 ## 주요 변경사항
 
 design
 
-- 타블렛, 모바일 사이즈 미디어 쿼리 적용
-- 피그마 시안과 다른 디자인 부분(폰트, pageNavBar) 수정
+- Items 페이지, 아이템 요소의 기본 이미지 추가
+- ItemInfo 페이지, 피그마 시안의 디자인 적용
 
-fix
+refactor
 
-- 특정 페이지를 렌더링하지 않는 오류 개선
+- Items 페이지, util 함수 분리
+- constatns.jsx 생성, 데이터 초기 값 분리
+- 데이터 패칭 용도 useFetch 커스텀 훅 생성 및 적용
+- AddItemDetails 컴포넌트에 htmlFor 속성 추가
+- AddItemTags 컴포넌트에서 tag 배열 index 값 -> id 값 변경
+- ItemDetails, ItemTags 컴포넌트 분리
 
 rename
 
-- 폴더 구조 및 컴포넌트 재정리
+- mediaquery.css 파일 삭제, 미디어쿼리 디자인 각 페이지의 CSS 파일에 병합
+- 네이밍 App.jsx -> Router.jsx
+- 네이밍 ItemDetials, ItemTags -> AddItemDetails, ...
 
-factor
+feat
 
-- AddItem 페이지 요구사항 기능 구현
+- ItemInfo 페이지, 기본 요구사항 구현
+- Items 페이지, 페이지네이션 추가
 
 ## 스크린샷
 
 ![image](이미지url)
 
 ## 멘토에게
 
--
+- 멘토링 시간에 말씀하셨던 커스텀 훅을 하나 만들어봤습니다.
+- 테일윈드 CSS와 다른 커스텀 훅은 다음 미션에 차차 적용해보겠습니다!

src/App.jsx → src/Router.jsx

@@ -5,10 +5,12 @@ import Main from "./components/common/Main";
 import Home from "./pages/Home";
 import SignIn from "./pages/SignIn";
 import Items from "./pages/Items";
+import ItemInfo from "./pages/ItemInfo";
 import AddItem from "./pages/AddItem";
 import Community from "./pages/Community";
+import NotFound from "./pages/NotFound";
 
-function App() {
+function Router() {
   return (
     <BrowserRouter>
       <Header />
@@ -17,12 +19,14 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/SignIn" element={<SignIn />} />
           <Route path="/Items" element={<Items />} />
+          <Route path="/Items/:productId" element={<ItemInfo />} />
           <Route path="/AddItem" element={<AddItem />} />
           <Route path="/Community" element={<Community />} />
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </Main>
     </BrowserRouter>
   );
 }
 
-export default App;
+export default Router;

src/components/AddItem/ItemDetails.jsx → src/components/AddItem/AddItemDetails.jsx

@@ -1,50 +1,61 @@
 import React from "react";
-import ItemTags from "./ItemTags";
 
-function ItemDetails({ details, onDetailsChange, onTagsChange }) {
+function AddItemDetails({ details, setDetails }) {
+  const handleDetailsChange = (e) => {
+    const { name, value } = e.target;
+    setDetails((prevDetails) => ({
+      ...prevDetails,
+      [name]: value,
+    }));
+  };
+
   return (
     <section className="item-details">
       <div className="item-detail-container">
-        <label className="section-title">상품명</label>
+        <label htmlFor="itemName" className="section-title">
+          상품명
+        </label>
         <input
           className="item-detail-input"
           type="text"
           id="itemName"
           name="itemName"
           placeholder="상품명을 입력해주세요"
           value={details.itemName}
-          onChange={onDetailsChange}
+          onChange={handleDetailsChange}
         />
       </div>
 
       <div className="item-detail-container">
-        <label className="section-title">상품 소개</label>
+        <label htmlFor="itemDesciption" className="section-title">
+          상품 소개
+        </label>
         <textarea
           className="item-detail-input"
           id="itemDescription"
           name="itemDescription"
           placeholder="상품 소개를 입력해주세요"
           value={details.itemDescription}
-          onChange={onDetailsChange}
+          onChange={handleDetailsChange}
         />
       </div>
 
       <div className="item-detail-container">
-        <label className="section-title">판매가격</label>
+        <label htmlFor="itemPrice" className="section-title">
+          판매가격
+        </label>
         <input
           className="item-detail-input"
-          type="number"
+          type="text"
           id="itemPrice"
           name="itemPrice"
           placeholder="판매 가격을 입력해주세요"
           value={details.itemPrice}
-          onChange={onDetailsChange}
+          onChange={handleDetailsChange}
         />
       </div>
-
-      <ItemTags tags={details.itemTags} onTagsChange={onTagsChange} />
     </section>
   );
 }
 
-export default ItemDetails;
+export default AddItemDetails;

src/components/AddItem/ItemImageUpload.jsx → src/components/AddItem/AddItemImage.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 
-function ItemImageUpload({ image, onImageChange }) {
+function AddItemImage({ image, onImageChange }) {
   const [previewImgUrl, setPreviewImgUrl] = useState(null);
   const inputRef = useRef(null);
 
@@ -67,4 +67,4 @@ function ItemImageUpload({ image, onImageChange }) {
   );
 }
 
-export default ItemImageUpload;
+export default AddItemImage;

src/components/AddItem/ItemTags.jsx → src/components/AddItem/AddItemTags.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 
-function ItemTags({ tags, onTagsChange }) {
+function AddItemTags({ initialTags }) {
+  const [tags, setTags] = useState(initialTags);
   const [tagInput, setTagInput] = useState("");
 
   const handleInputChange = (e) => {
@@ -10,13 +11,13 @@ function ItemTags({ tags, onTagsChange }) {
   const handleAddTag = (e) => {
     if (e.key === "Enter" && tagInput.trim()) {
       e.preventDefault();
-      onTagsChange([...tags, tagInput.trim()]);
+      setTags([...tags, { id: Date.now(), value: tagInput.trim() }]);
       setTagInput("");
     }
   };
 
-  const handleRemoveTag = (index) => {
-    onTagsChange(tags.filter((element, i) => i !== index));
+  const handleRemoveTag = (id) => {
+    setTags(tags.filter((tag) => tag.id !== id));
   };
 
   return (
@@ -31,12 +32,12 @@ function ItemTags({ tags, onTagsChange }) {
         onKeyDown={handleAddTag}
       />
       <ul className="tags">
-        {tags.map((tag, index) => (
-          <li key={index} className="tag-item">
-            {tag}
+        {tags.map((tag) => (
+          <li key={tag.id} className="tag-item">
+            {tag.value}
             <button
               className="ic-delete-gray"
-              onClick={() => handleRemoveTag(index)}
+              onClick={() => handleRemoveTag(tag.id)}
             />
           </li>
         ))}
@@ -45,4 +46,4 @@ function ItemTags({ tags, onTagsChange }) {
   );
 }
 
-export default ItemTags;
+export default AddItemTags;