Merge branch 'main' into develop

kdt-8-4 · Dec 4, 2023 · ebb1a6c · ebb1a6c
2 parents 8d62d41 + 31b047a
commit ebb1a6c
Show file tree

Hide file tree

Showing 12 changed files with 141 additions and 42 deletions.
diff --git a/src/app/detail/edit/page.tsx b/src/app/detail/edit/page.tsx
@@ -79,7 +79,8 @@ export default function EditDetail(): JSX.Element {
   const [editBoardId, setEditBoardId] = useRecoilState(editBoardIdState);
   const [selectedImages, setSelectedImages] = useState<File[]>([]);
   const [initialImages, setInitialImages] = useState<Image[]>([]);
-  const [deleteImageUrls, setDeleteImageUrls] = useState<string[]>([]);
+  // const [deleteImageUrls, setDeleteImageUrls] = useState<string[]>([]);
+  const [deleteImageIds, setDeleteImageIds] = useState<number[]>([]);
   const [content, setContent] = useState<string>("");
   const [hashtags, setHashtags] = useState<string[]>([]);
   const [selectedCategories, setSelectedCategories] = useState<
@@ -118,8 +119,11 @@ export default function EditDetail(): JSX.Element {
     setSelectedImages(files ? Array.from(files) : []);
   }, []);
 
-  const handleDeleteImage = (imageUrl: string) => {
-    setDeleteImageUrls((prevUrls) => [...prevUrls, imageUrl]);
+  // const handleDeleteImage = (imageUrl: string) => {
+  //   setDeleteImageUrls((prevUrls) => [...prevUrls, imageUrl]);
+  // };
+  const handleDeleteImage = (imageId: number) => {
+    setDeleteImageIds((prevIds) => [...prevIds, imageId]);
   };
 
   const handleContent = (text: string) => {
@@ -161,8 +165,7 @@ export default function EditDetail(): JSX.Element {
         hashTag: hashtags,
         category: allSelectedSubCategories,
         content: content,
-        temperature: usetemp, 
-        weatherIcon: `https://openweathermap.org/img/wn/${icon}.png`,
+        deletedImages: deleteImageIds,
       };
 
       formData.append("board", JSON.stringify(boardData));
@@ -174,7 +177,24 @@ export default function EditDetail(): JSX.Element {
       //   formData.append("deletedImages", imageUrl);
       // });
 
-      formData.append("deletedImages", JSON.stringify(deleteImageUrls));
+      // formData.append("deletedImages", JSON.stringify(deleteImageUrls));
+      // formData.append("deletedImages", JSON.stringify(deleteImageIds)); // 결과값: "[20, 10]"
+
+      // formData.append(
+      //   "deletedImages",
+      //   JSON.stringify(deleteImageIds.map(String)),
+      // ); // 결과값: "["20", "10"]"
+      // console.log("deleteImages", JSON.stringify(deleteImageIds.map(String)));
+
+      if (allImages.length === 0) {
+        alert("이미지를 추가해주세요!");
+        return;
+      }
+
+      if (content.trim() === "") {
+        alert("글을 작성해주세요!");
+        return;
+      }
 
       const response = await axios({
         method: "PATCH",
@@ -186,6 +206,11 @@ export default function EditDetail(): JSX.Element {
         },
       });
 
+      //** formData 키:값 출력
+      for (let [key, value] of formData.entries()) {
+        console.log(`${key}: ${value}`);
+      }
+
       console.log(response.data); // 서버 응답 확인
       alert("게시물 수정 완료!");
       window.location.href = "/detail";
@@ -207,13 +232,15 @@ export default function EditDetail(): JSX.Element {
               window.history.back();
             }}
           />
-          <Image
-            className="logo"
-            src="/images/logo2.svg"
-            alt="옷늘날씨"
-            width={150}
-            height={90}
-          />
+          <div className="img_wrap">
+            <Image
+              className="logo"
+              src="/images/logo2.svg"
+              alt="옷늘날씨"
+              width={150}
+              height={90}
+            />
+          </div>
           <button type="button" id="btn_complete" onClick={handleComplete}>
             완료
           </button>

diff --git a/src/app/detail/page.tsx b/src/app/detail/page.tsx
@@ -40,7 +40,7 @@ export default function Detail(): JSX.Element {
   const [comment, setComment] = useState<boardCommentType[]>([]);
 
   const router = useRouter();
-
+  console.log(router);
   const accessToken = Cookies.get("accessToken");
   console.log("accessToken 값: ", accessToken);
 
@@ -88,7 +88,7 @@ export default function Detail(): JSX.Element {
     }; 
 
     fetchData();
-  }, [localBoardId, setLocalBoardId]);
+  }, [localBoardId]);
 
   const handleClick = () => {
     router.push("/");

diff --git a/src/app/feed/page.tsx b/src/app/feed/page.tsx
@@ -51,4 +51,4 @@ export default function Feed(){
         </div>
     {/* </RecoilRoot> */}
     </>)
-}
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,6 +5,7 @@ import axios from "axios";
 import "@/style/main.scss";
 // import { GetServerSideProps } from "next";
 import Image from "next/image";
+import BestItem from "@/component/BestItem";
 
 interface MainPageProps {
   accessToken?: string;
@@ -45,7 +46,7 @@ export default function Mainpage() {
       </header>
       <section className="main">
         <MainWeather />
-        <div>오늘 날씨에 손이 가는 아이템 추천</div>
+        <BestItem />
         <div>좋아요 많은 순 게시물의 이미지 가지고 오기</div>
       </section>
       <Menubar />

diff --git a/src/app/upload/page.tsx b/src/app/upload/page.tsx
@@ -18,6 +18,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 export default function Upload(): JSX.Element {
+  const [isUploading, setIsUploading] = useState(false);
   const [selectedImages, setSelectedImages] = useState<File[]>([]);
   const [content, setContent] = useState<string>("");
   const [hashtags, setHashtags] = useState<string[]>([]);
@@ -82,6 +83,10 @@ export default function Upload(): JSX.Element {
       alert("글을 작성해주세요!");
       return;
     }
+    if (isUploading) {
+      return;
+    }
+    setIsUploading(true);
 
     try {
       const allSelectedSubCategories = Object.values(selectedCategories).reduce(
@@ -119,6 +124,8 @@ export default function Upload(): JSX.Element {
     } catch (error) {
       console.error(error);
     }
+
+    setIsUploading(false);
   };
 
   console.log("로그인 토큰 존재 확인", logincheck);
@@ -147,7 +154,11 @@ export default function Upload(): JSX.Element {
                   height={90}
                 />
               </div>
-              <button type="button" id="btn_complete" onClick={handleComplete}>
+              <button
+                type="button"
+                id="btn_complete"
+                onClick={handleComplete}
+                disabled={isUploading}>
                 완료
               </button>
             </div>

diff --git a/src/component/BestItem.tsx b/src/component/BestItem.tsx
@@ -1,15 +1,40 @@
 import axios from "axios";
+import { useEffect, useState } from "react";
+import "@/style/bestItem.scss";
 
-//현재 최저, 최고온도에 따른 가장 많이쓰인 카테고리 탑5
-async function getTop5() {
-  try {
-    const result = await axios({
-      method: "GET",
-      url: "https://www.jerneithe.site/category/tops?temp_min=8&temp_max=10",
-    });
-
-    console.log(result.data);
-  } catch (err) {
-    console.log(err);
-  }
+interface Category {
+  _id: string;
+  count: number;
+}
+
+export default function BestItem() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  //현재 최저, 최고온도에 따른 가장 많이쓰인 카테고리 탑5
+  useEffect(() => {
+    async function getTop5() {
+      try {
+        const response = await axios({
+          method: "GET",
+          url: "https://www.jerneithe.site/category/tops?temp_min=0&temp_max=30",
+        });
+
+        setCategories(response.data.result);
+        console.log(response.data.result);
+      } catch (err) {
+        console.error(err);
+      }
+    }
+
+    getTop5();
+  }, []);
+
+  return (
+    <div className="categoryTop5">
+      {categories.map((category, index) => (
+        <button className="category_btn" key={index}>
+          {category._id}
+        </button>
+      ))}
+    </div>
+  );
 }
diff --git a/src/component/CategoryDetail.tsx b/src/component/CategoryDetail.tsx
@@ -7,7 +7,7 @@ const CategoryDetail: React.FC<CategoryDetailProps> = ({ category }) => {
     <div className="pl-3 w-full mb-20">
       {category.map((subCategory, index) => (
         <button
-          className="rounded-md border border-main text-main px-1 py-1 text-sm font-medium mt-5 mr-5"
+          className="rounded-md border border-main text-main px-1 py-1 text-sm font-medium mt-5 mr-2"
           key={index}>
           {subCategory}
         </button>

diff --git a/src/component/ContentDetail.tsx b/src/component/ContentDetail.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import "../style/_util.scss";
+import { useRouter } from "next/navigation";
 
 interface ContentDetailProps {
   content: string;
@@ -12,6 +13,7 @@ const ContentDetail = ({
 }: ContentDetailProps): JSX.Element => {
   const [expanded, setExpanded] = useState(false); // 더 보기 상태를 저장하는 상태 변수
   const [showButton, setShowButton] = useState(false); // "더 보기" 버튼을 표시할지 여부를 저장하는 상태 변수
+  const router = useRouter();
 
   useEffect(() => {
     // 컴포넌트가 마운트되었을 때 실행되는 효과
@@ -29,6 +31,11 @@ const ContentDetail = ({
     setExpanded(!expanded); // "더 보기" 버튼을 클릭할 때마다 상태를 변경하여 글을 확장 또는 축소
   };
 
+  const handleHashTagClick = (hashTag: string) => {
+    console.log("Clicked hashtag:", hashTag);
+    // router.push(`/feed?hashtag=${hashTag}`);
+  };
+
   const extractAndStyleHashtags = (content: string) => {
     const hashTagRegex = /#[^\s#]+/g;
     const splitContent = content.split(hashTagRegex);
@@ -68,10 +75,6 @@ const ContentDetail = ({
     return result;
   };
 
-  const handleHashTagClick = (hashTag: string) => {
-    console.log("Clicked hashtag:", hashTag);
-  };
-
   return (
     <div
       className="content-detail w-full p-3"

diff --git a/src/component/ImageUpload.tsx b/src/component/ImageUpload.tsx
@@ -9,7 +9,8 @@ interface Image {
 interface ImageUploadProps {
   onImagesSelected: (files: File[] | null) => void;
   initialImages: Image[];
-  onDeleteImage?: (imageUrl: string) => void;
+  // onDeleteImage?: (imageUrl: string) => void;
+  onDeleteImage?: (imageId: number) => void;
 }
 
 const ImageUpload: React.FC<ImageUploadProps> = ({
@@ -19,7 +20,6 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
 }: ImageUploadProps) => {
   const [selectedImages, setSelectedImages] = useState<File[]>([]);
   const [existingImages, setExistingImages] = useState<Image[]>(initialImages);
-  const [deletedImages, setDeletedImages] = useState<string[]>([]); // 추가된 상태
 
   useEffect(() => {
     setExistingImages(initialImages);
@@ -34,9 +34,9 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
     console.log("existingImages", existingImages);
   }, [existingImages]);
 
-  useEffect(()=>{
+  useEffect(() => {
     console.log("onImageSelect");
-  }, [onImagesSelected])
+  }, [onImagesSelected]);
 
   const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
     const files: FileList | null = event.target.files;
@@ -65,12 +65,13 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
     }
   };
 
-  const removeExistingImage = (index: number, url: string) => {
+  // const removeExistingImage = (index: number, url: string) => {
+  const removeExistingImage = (index: number, id: number) => {
     if (existingImages) {
       const newImages = [...existingImages];
       newImages.splice(index, 1);
       setExistingImages(newImages);
-      onDeleteImage(url); // 상위 컴포넌트에 삭제된 이미지의 URL 전달
+      onDeleteImage(id); // 상위 컴포넌트에 삭제된 이미지의 URL 전달
     }
   };
 
@@ -82,7 +83,8 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
             <div key={index} className="image-preview">
               <img src={image.imageUrl} alt={`Image ${index}`} />
               <button
-                onClick={() => removeExistingImage(index, image.imageUrl)}>
+                // onClick={() => removeExistingImage(index, image.imageUrl)}>
+                onClick={() => removeExistingImage(index, image.imageId)}>
                 ❌
               </button>
             </div>

diff --git a/src/component/Like.tsx b/src/component/Like.tsx
@@ -51,6 +51,7 @@ export default function Like({
           src="/images/like.svg"
           alt="like"
           className="cursor-pointer"
+          style={{ marginRight: "3px" }}
           width={20}
           height={20}
           onClick={handleLikeClick}
@@ -62,6 +63,7 @@ export default function Like({
           width={20}
           height={20}
           className="cursor-pointer"
+          style={{ marginRight: "3px" }}
           onClick={handleLikeClick}
         />
       )}

diff --git a/src/style/bestItem.scss b/src/style/bestItem.scss
@@ -0,0 +1,20 @@
+@import "_util.scss";
+
+.categoryTop5 {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.category_btn {
+  border-radius: 20px;
+  padding: 2px 7px;
+  font-size: 13px;
+  font-weight: 500;
+  margin-top: 5px;
+  margin-right: 5px;
+  border: 1px solid $color-main;
+  color: $color-main;
+}
diff --git a/src/style/main.scss b/src/style/main.scss
@@ -34,3 +34,11 @@ header {
     }
   }
 }
+
+.main {
+  width: 95%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,4 +51,4 @@ export default function Feed(){ @@
             </div>
         {/* </RecoilRoot> */}
         </>)
-    }
+    }