[강수민] Sprint12

components/addItem/ImgFileInput.tsx

@@ -25,15 +25,22 @@ function ImgFileInput({
   dispatch,
 }: PropsWithChildren<ImgFileInputProps>) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(images[0]);
   const [showWarn, setShowWarn] = useState(false); // 이미지를 1개 이상 추가하려고 할 때를 위한 state
   const isFilled = images.length > 0;
 
   /**
    * form의 이미지를 저장하고 화면에 추가한 이미지를 렌더링
    * @param {*} path 인코딩된 파일 스트링
    */
-  const setImg = (path?: string) => {
-    dispatch({ type: "SET_IMAGES", payload: path ? [path] : [] });
+  const setImg = (path?: File) => {
+    if (path) {
+      setThumbnailUrl(URL.createObjectURL(path));
+      dispatch({ type: "SET_IMAGES", payload: [path] });
+    } else {
+      setThumbnailUrl(null);
+      dispatch({ type: "SET_IMAGES", payload: [] });
+    }
   };
 
   /**
@@ -52,8 +59,7 @@ function ImgFileInput({
     const files = e.target.files;
     if (files && files[0]) {
       const imgUrl = files[0];
-      const imgPath = URL.createObjectURL(imgUrl);
-      setImg(imgPath);
+      setImg(imgUrl);
 
       if (inputRef.current) inputRef.current.value = "";
     }
@@ -68,13 +74,13 @@ function ImgFileInput({
   };
 
   /**
-   * 컴포넌트 언마운트 시 객체 URL이 있으면 해제
+   * 컴포넌트 언마운트 시 생성한 URL 해제
    */
   useEffect(() => {
     return () => {
-      if (images.length > 0) URL.revokeObjectURL(images[0]);
+      if (thumbnailUrl) URL.revokeObjectURL(thumbnailUrl);
     };
-  }, [images]);
+  }, [thumbnailUrl]);
 
   return (
     <div className='form-input-wrap'>
@@ -100,9 +106,9 @@ function ImgFileInput({
           </span>
           이미지 등록
         </button>
-        {isFilled && (
+        {thumbnailUrl && (
           <div className='thumbnail'>
-            <Image fill src={images[0]} alt='thumbnail' />
+            <Image fill src={thumbnailUrl} alt='thumbnail' />
             <button
               type='button'
               className='btn-delete-thumbnail'

components/common/Header.tsx

@@ -21,7 +21,9 @@ function Header() {
   const handleLogout = () => {
     localStorage.removeItem("accessToken");
     localStorage.removeItem("refreshToken");
+    localStorage.removeItem("userId");
     setHasToken(false);
+    router.push("/");
   };
 
   return (

components/detail/DetailInquiry.tsx

@@ -10,29 +10,35 @@ interface DetailInquiryProps {
   content: string;
   writer: any;
   updatedAt: string;
+  onUpdate: (id: string, updatedContent: string) => void;
+  onDelete: (id: string) => void;
 }
 
-function DetailInquiry({ id, content, writer, updatedAt }: DetailInquiryProps) {
+function DetailInquiry({
+  id,
+  content,
+  writer,
+  updatedAt,
+  onUpdate,
+  onDelete,
+}: DetailInquiryProps) {
   const [isEditing, setIsEditing] = useState(false); // 수정 상태를 할당할 state
   const [comment, setComment] = useState(content); // 문의하기 text를 할당할 state
+  const userId = localStorage.getItem("userId");
 
-  /**
-   * 취소 버튼 클릭 시 comment에 부모에서 받은 content를 할당
-   */
   const handleCancelEdit = () => {
     setIsEditing(false);
     setComment(content);
   };
 
-  /**
-   * save하면 서버에 request 보내고 response 받아서 commnets 업데이트
-   */
   const handleSaveEdit = async () => {
     try {
       const updateData: updateCommentInterface = { content: comment };
-      const response = await updateComment(id, updateData); // Jwt Token 추가 예정
-      const data = await response.json(); // 서버에서 받은 response로 새 댓글 추가하는 기능은 추후 추가
-      console.log(data); // netlify build error 방지 임시 콘솔 추가 - The build failure is due to a linting error
+      const response = await updateComment(id, updateData);
+
+      if (response.ok) {
+        onUpdate(id, comment);
+      }
       setIsEditing(false);
     } catch (error) {
       console.log(error);
@@ -41,7 +47,12 @@ function DetailInquiry({ id, content, writer, updatedAt }: DetailInquiryProps) {
 
   return (
     <div className='content-inquiry'>
-      {!isEditing && <DropDownInquiry setIsEditting={setIsEditing} />}
+      {!isEditing && String(writer.id) === userId && (
+        <DropDownInquiry
+          onEdit={() => setIsEditing(true)}
+          onDelete={() => onDelete(id)}
+        />
+      )}
       <div className='inquiry-comment'>
         {isEditing ? (
           <textarea

components/detail/DetailProduct.tsx

@@ -3,69 +3,212 @@ import { formatDate } from "@/utils/formatDate";
 import ImageProduct from "../items/ImageProduct";
 import ProfileIcon from "../Icons/ProfileIcon";
 import HeartIcon from "../Icons/HeartIcon";
+import DropDownInquiry from "./DropDownInquiry";
+import { FormEvent, useEffect, useReducer, useState } from "react";
+import { useRouter } from "next/router";
+import useModal from "@/hooks/useModal";
+import Modal from "@/components/modal/Modal";
+import ImgFileInput from "../addItem/ImgFileInput";
+import { ProductInputReducer } from "@/reducers/useProductReducer";
+import TextInput from "../addItem/TextInput";
+import Description from "../addItem/Description";
+import PriceInput from "../addItem/PriceInput";
+import TagInput from "../addItem/TagInput";
+import { updateProduct } from "@/pages/api/productApi";
+import queryClient from "@/lib/queryClient";
 
 interface DetailProductProps {
+  id: number;
   name: string;
   description: string;
   images: string[];
   price: number;
   favoriteCount: number;
   tags: string[];
+  ownerId: number;
   ownerNickname: string;
   updatedAt: string;
   isFavorite?: boolean;
+  onDelete: (id: string) => void;
 }
 
 function DetailProduct({
+  id,
   name,
   description,
   images,
   price,
   favoriteCount,
   tags,
+  ownerId,
   ownerNickname,
   updatedAt,
   isFavorite,
+  onDelete,
 }: DetailProductProps) {
+  const router = useRouter();
+  const [isEditing, setIsEditing] = useState(false); // 수정 상태를 할당할 state
+  const userId = localStorage.getItem("userId");
+  const { isOpen, openModal, closeModal } = useModal();
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [originalData, setOriginalData] = useState({
+    images,
+    name,
+    description,
+    price,
+    tags,
+  });
+  const [userInput, dispatch] = useReducer(ProductInputReducer, originalData);
+
+  const {
+    images: u_images,
+    name: u_name,
+    description: u_description,
+    price: u_price,
+    tags: u_tags,
+  } = userInput;
+
+  const handleCloseModal = () => {
+    setIsEditing(false);
+    closeModal();
+    dispatch({ type: "RESET_INPUT", payload: originalData }); // 원래 데이터로 복원
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (isFormValid) {
+      const imageChange = u_images[0] !== originalData.images[0];
+
+      const { id: productId } = await updateProduct({
+        id: String(id),
+        content: userInput,
+        imageChange: imageChange,
+      });
+
+      setOriginalData(userInput);
+      queryClient.invalidateQueries({
+        queryKey: ["product", String(productId)],
+      });
+      queryClient.invalidateQueries({ queryKey: ["products"], exact: false });
+      dispatch({ type: "RESET_INPUT", payload: userInput });
+      setIsEditing(false);
+      closeModal();
+    }
+  };
+
+  useEffect(() => {
+    const isChanged =
+      u_images !== originalData.images ||
+      u_name !== originalData.name ||
+      u_description !== originalData.description ||
+      u_price !== originalData.price ||
+      JSON.stringify(u_tags) !== JSON.stringify(originalData.tags);
+
+    const hasRequiredFields =
+      u_name.trim() !== "" &&
+      u_description.trim() !== "" &&
+      u_price > 0 &&
+      u_tags.length > 0;
+
+    setIsFormValid(isChanged && hasRequiredFields);
+  }, [u_images, u_name, u_description, u_price, u_tags, originalData]);
+
   return (
-    <div className='product-detail-contents'>
-      <ImageProduct images={images} name={name} />
-      <div className='desc-wrap'>
-        <h2 className='detail-name'>{name}</h2>
-        <div className='detail-price'>{formatPriceToKRW(price)}</div>
-        <div className='detail-description-wrap'>
-          <div className='detail-description-title'>상품 소개</div>
-          <p className='detail-description'>{description}</p>
-        </div>
-        <div className='detail-tag-wrap'>
-          <div className='detail-tag-title'>상품 태그</div>
-          <div className='detail-tags'>
-            {tags.map((tag) => (
-              <span key={tag} className='detail-tag'>
-                #{tag}
-              </span>
-            ))}
+    <>
+      <div className='product-detail-contents'>
+        {!isEditing && String(ownerId) === userId && (
+          <DropDownInquiry
+            onEdit={() => {
+              openModal();
+              setIsEditing(true);
+            }}
+            onDelete={() => {
+              onDelete(String(id));
+              router.push("/items");
+            }}
+          />
+        )}
+        <ImageProduct images={images} name={name} />
+        <div className='desc-wrap'>
+          <h2 className='detail-name'>{name}</h2>
+          <div className='detail-price'>{formatPriceToKRW(price)}</div>
+          <div className='detail-description-wrap'>
+            <div className='detail-description-title'>상품 소개</div>
+            <p className='detail-description'>{description}</p>
           </div>
-        </div>
-        <div className='detail-footer'>
-          <div className='owner-wrap'>
-            <div className='owner-icon'>
-              <ProfileIcon />
-            </div>
-            <div className='owner-desc'>
-              <div className='owner-name'>{ownerNickname}</div>
-              <div className='date-update'>{formatDate(updatedAt)}</div>
+          <div className='detail-tag-wrap'>
+            <div className='detail-tag-title'>상품 태그</div>
+            <div className='detail-tags'>
+              {tags.map((tag) => (
+                <span key={tag} className='detail-tag'>
+                  #{tag}
+                </span>
+              ))}
             </div>
           </div>
-          <button className='btn-favorite'>
-            <div>
-              <HeartIcon isFavorite={isFavorite} />
+          <div className='detail-footer'>
+            <div className='owner-wrap'>
+              <div className='owner-icon'>
+                <ProfileIcon />
+              </div>
+              <div className='owner-desc'>
+                <div className='owner-name'>{ownerNickname}</div>
+                <div className='date-update'>{formatDate(updatedAt)}</div>
+              </div>
             </div>
-            <span>{favoriteCount}</span>
-          </button>
+            <button className='btn-favorite'>
+              <div>
+                <HeartIcon isFavorite={isFavorite} />
+              </div>
+              <span>{favoriteCount}</span>
+            </button>
+          </div>
         </div>
       </div>
-    </div>
+      <Modal isOpen={isOpen} closeModal={handleCloseModal}>
+        <form className='edit-product-form' onSubmit={handleSubmit}>
+          <ImgFileInput name='image' images={u_images} dispatch={dispatch}>
+            상품 이미지
+          </ImgFileInput>
+          <TextInput
+            name='name'
+            value={u_name}
+            placeholder='상품명을 입력해주세요'
+            dispatch={dispatch}
+          >
+            상품명
+          </TextInput>
+          <Description
+            name='description'
+            value={u_description}
+            placeholder='상품 소개를 입력해주세요'
+            dispatch={dispatch}
+          >
+            상품 소개
+          </Description>
+          <PriceInput name='price' value={u_price} dispatch={dispatch}>
+            판매가격
+          </PriceInput>
+          <TagInput
+            name='tags'
+            tags={u_tags}
+            placeholder='태그를 입력해주세요'
+            dispatch={dispatch}
+          >
+            태그
+          </TagInput>
+          <div className='button-wrap'>
+            <button type='button' onClick={handleCloseModal}>
+              취소
+            </button>
+            <button type='submit' disabled={!isFormValid}>
+              수정
+            </button>
+          </div>
+        </form>
+      </Modal>
+    </>
   );
 }