[김광호] sprint9

components/AllItemsSction.tsx

@@ -38,7 +38,6 @@ interface AllItemsResponse {
 }
 
 function AllItem({ item }: { item: AllItemProps }) {
-
   return (
     <div className={style.AllItem}>
       <Link href={`/items/${item.id}`}>
@@ -56,14 +55,15 @@ function AllItem({ item }: { item: AllItemProps }) {
   );
 }
 
+const option = {"recent" : "최신순", "favorite" : "좋아요순"};
+
 function AllItemsSection() {
   const [alltItemsList, setAllItemsList] = useState<AllItemProps[]>([]);
   const [itemCount, setItemCount] = useState<number>(getWidth());
   const [order, setOrder] = useState<string>("recent");
   const [poninter, setPoninter] = useState<number>(1);
   const [title, setTitle] = useState<string>("전체 상품");
   const [pageSize, setPageSize] = useState<number>(0);
-  const option = {"recent" : "최신순", "favorite" : "좋아요순"};
   const AllItemsLoad = async (ItemCount: number, Order: string) => {
     const response: AllItemsResponse = await CallItemSearch(poninter, ItemCount, Order);
     setAllItemsList(response.list);

components/BestItemsSection.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import favicon from "@/assets/images/logo/favoriteIcon.svg";
 import { CallItemSearch } from "@/pages/api/CallAPI";
-import style from "@/assets/BestItemsSection.module.css";
+import style from "@/styles/BestItemsSection.module.css";
 import Link from "next/link";
 import Image from "next/image";
 

components/Bestarticles.tsx

@@ -1,36 +1,67 @@
 import style from "@/styles/BestArticles.module.scss";
+import Image from "next/image";
+import BestImage from "@/assets/images/logo/img_badge.svg";
+import BlackImg from "@/assets/images/home/blankimg.jpg";
+import favoriteIcon from "@/assets/images/logo/favoriteIcon.svg";
+import DateFomet from "@/utils/DateFormet";
 
 interface ArticlesProps {
+  id: number;
+  title: string;
+  content: string;
+  image: string | null;
+  likeCount: number;
+  createdAt: string;
+  updatedAt: string;
+  writer: {
     id: number;
-    title: string;
-    content: string;
-    image: File | null;
-    likeCount: number;
-    createAt: Date;
-    updateAt: Date;
-    writer: {
-      id: number;
-      nickname: string;
-    };
-  }
-
+    nickname: string;
+  };
+}
 
-function BestArticles(articlesList: ArticlesProps[]) {
+function Article({ item }: {item : ArticlesProps} ) {
   return (
-    <div className={style.bestarticleslayer}>
-      <p>베스트 게시글</p>
-      <div></div>
-      <div>
-        <div>
-          <p>게시글</p>
-          <button>글쓰기</button>
+    <div className={style.articleData}>
+      <div className={style.articleDescription}>
+        <p className={style.articleTitle}>{item.title}</p>
+        {item.image ? (
+          <div className={style.articleImg}>
+            <Image src={item.image} alt="게시글 사진" fill />
+          </div>
+        ) : (
           <div>
-            <input></input>
+            <Image
+              src={BlackImg}
+              alt="빈 이미지"
+              className={style.blankImage}
+            />
           </div>
-        </div>
+        )}
+      </div>
+      <div className={style.articleInfo}>
         <div>
-
+          <p>{item.writer.nickname}</p>
+          <Image src={favoriteIcon} alt="하트아이콘" width={16} height={16} />
+          <p>{item.likeCount}</p>
         </div>
+        <p>{DateFomet(item.updatedAt)}</p>
+      </div>
+    </div>
+  );
+}
+
+
+function BestArticles({ datalist }: { datalist: ArticlesProps[] }) {
+  return (
+    <div className={style.bestArticleLayer}>
+      <p className={style.bestArtitlceTitle}>베스트 게시글</p>
+      <div className={style.bestArticleList}>
+        {datalist.map((item) => (
+          <div className={style.bestArticle}>
+            <Image className={style.bestIcon} src={BestImage} alt="베스트 아이콘" width={102} height={30} />
+            <Article item={item} key={item.id} />
+          </div>
+        ))}
       </div>
     </div>
   );

components/Recentarticles/Recentarticles.module.scss

@@ -0,0 +1,62 @@
+.recentArticlesLayer {
+    margin: 0 auto;
+    background-color: white;
+    .dataLayer {
+        background-color: #FCFCFC;
+        margin-bottom: 24px;
+        .articleData {
+            .articleDescription {
+              display: flex;
+              gap: 8px;
+              justify-content: space-between;
+              margin-bottom: 18px;
+              .articleTitle {
+                font-size: 20px;
+                font-weight: 600;
+                line-height: 32px;
+                color: #1f2937;
+                margin-right: 8px;
+              }
+              .articleImg {
+                width: 72px;
+                height: 72px;
+                border-radius: 6px;
+                background-color: white;
+                border: solid 1px var(--cool-Gray200);
+                position: relative;
+              }
+              .blankImage {
+                width: 72px;
+                height: 72px;
+                background-color: black;
+              }
+            }
+            .articleInfo {
+              display: flex;
+              justify-content: space-between;
+
+              .userIcon {
+                margin-right: 8px;
+              }
+
+              p {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 24px;
+                color: #4b5563;
+              }
+              div {
+                display: flex;
+                align-items: center;
+                p {
+                  margin-right: 8px;
+                }
+                img {
+                  margin-right: 4px;
+                }
+              }
+            }
+          }
+
+    }
+}

components/Recentarticles/Recentarticles.tsx

@@ -0,0 +1,68 @@
+import style from "./Recentarticles.module.scss"
+import favoriteIcon from "@/assets/images/logo/favoriteIcon.svg";
+import BlackImg from "@/assets/images/home/blankimg.jpg";
+import DateFomet from "@/utils/DateFormet";
+import Image from "next/image";
+import MaskIcon from "@/assets/images/home/maskicon.png"
+
+interface ArticlesProps {
+  id: number;
+  title: string;
+  content: string;
+  image: string | null;
+  likeCount: number;
+  createdAt: string;
+  updatedAt: string;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+}
+
+function Article({ item }: {item : ArticlesProps }) {
+  return (
+    <div className={style.articleData}>
+      <div className={style.articleDescription}>
+        <p className={style.articleTitle}>{item.title}</p>
+        {item.image ? (
+          <div className={style.articleImg}>
+            <Image src={item.image} alt="게시글 사진" fill />
+          </div>
+        ) : (
+          <div>
+            <Image
+              src={BlackImg}
+              alt="빈 이미지"
+              className={style.blankImage}
+            />
+          </div>
+        )}
+      </div>
+      <div className={style.articleInfo}>
+        <div>         
+          <Image className={style.userIcon} src={MaskIcon} alt="유저아이콘" width={24} height={24}/>
+          <p>{item.writer.nickname}</p>
+          <p>{DateFomet(item.updatedAt)}</p>
+        </div>
+        <div>
+          <Image src={favoriteIcon} alt="하트아이콘" width={16} height={16} />
+          <p>{item.likeCount}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Recentarticles({ datalist } : {datalist: ArticlesProps[]}) {
+    return (
+      <div className={style.recentArticlesLayer}>
+        {datalist.map((item) => (
+          <div className={style.dataLayer}>
+            <Article item={item} key={item.id} />
+          </div>
+        ))}
+      </div>
+    )
+}
+
+export default Recentarticles;

hook/useDevice.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { DeviceType, getDevice } from "@/utils/widthUtil";
+
+const useDevice = () => {
+  const [mode, setMode] = useState<DeviceType>("desktop");
+
+  useEffect(() => {
+    const ReCount = () => {
+      const device = getDevice();
+      setMode(device);
+    };
+
+    window.addEventListener("resize", ReCount);
+
+    // 초기화
+    ReCount();
+
+    return () => {
+      window.removeEventListener("resize", ReCount);
+    };
+  }, []);
+
+  return {
+    mode,
+  };
+};
+
+export default useDevice;