Merge pull request #291 from MELATONIN99/Next-염성진-sprint10

[염성진] Sprint10
codeit-bootcamp-frontend · Aug 19, 2024 · 9f9362f · 9f9362f
2 parents 81e565b + d9b842d
commit 9f9362f
Show file tree

Hide file tree

Showing 18 changed files with 1,027 additions and 41 deletions.
diff --git a/next.config.js b/next.config.js
@@ -2,7 +2,11 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ["sprint-fe-project.s3.ap-northeast-2.amazonaws.com"],
+    domains: [
+      "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+      "images.samsung.com",
+      "example.com",
+    ],
   },
 };
 

diff --git a/public/images/logo/gary_no_comment.png b/public/images/logo/gary_no_comment.png
diff --git a/src/components/BestBoards.tsx b/src/components/BestBoards.tsx
@@ -1,6 +1,7 @@
 import S from "@/components/BestBoards.module.css";
 import axios from "@/pages/api/axios";
 import Image from "next/image";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 interface Item {
@@ -23,6 +24,10 @@ interface BestItemProps {
 
 function Product(item: Item) {
   const { id, title, content, image, likeCount, createdAt, updatedAt, writer } = item;
+  const router = useRouter();
+  const onImgClick = (id: number) => {
+    router.push(`/board/${id}`);
+  };
 
   function formatDate(dateString: string): string {
     const date = new Date(dateString);
@@ -41,7 +46,7 @@ function Product(item: Item) {
   const formattedCreatedAtDate = formatDate(createdAt);
 
   return (
-    <div className={S.itemCardContainer}>
+    <div className={S.itemCardContainer} onClick={() => onImgClick(id)}>
       <div className={S.bestClip}>
         <Image
           width={16}
@@ -55,7 +60,12 @@ function Product(item: Item) {
         <div className={S.infoTop}>
           <div className={S.title}>{title}</div>
           <div className={S.image}>
-            <Image fill src={image} className={S.image} alt="아이템 이미지" />
+            <Image
+              fill
+              src={image || `/images/icon/ic_null_user_profile_image.png`}
+              className={S.image}
+              alt="아이템 이미지"
+            />
           </div>
         </div>
         <div className={S.infoBottom}>
@@ -83,7 +93,7 @@ function BestBoards() {
   const [isLoading, setIsLoading] = useState(true);
 
   async function getBestBoards() {
-    const res = await axios.get("articles?page=1&pageSize=1&orderBy=like");
+    const res = await axios.get("articles?page=1&pageSize=3&orderBy=like");
     const nextProduct = res.data;
     setProduct(nextProduct);
   }

diff --git a/src/components/BestItem.tsx b/src/components/BestItem.tsx
@@ -29,15 +29,9 @@ function BestItems({ item }: BestItemsProps) {
   };
 
   return (
-    <div className={S.bestItemBox}>
+    <div className={S.bestItemBox} onClick={() => onImgClick(id)}>
       <div className={S.BestItemImgBox}>
-        <Image
-          className={S.bestItemImg}
-          src={images[0]}
-          alt={name}
-          onClick={() => onImgClick(id)}
-          fill
-        />
+        <Image className={S.bestItemImg} src={images[0]} alt={name} fill />
       </div>
       <div className={S.bestItemTitle}>{name}</div>
       <div className={S.bestItemPrice}>{won}원</div>

diff --git a/src/components/DetailBoard.module.css b/src/components/DetailBoard.module.css
@@ -0,0 +1,91 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: left;
+  margin-bottom: 32px;
+}
+.ProductInfoContainer {
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--gray200);
+}
+.titleContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.title {
+  width: 100%;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--gray800);
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+.info {
+  display: flex;
+  align-items: center;
+  margin: 16px 0px;
+}
+.writerNickName {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gray600);
+  margin: 0 2px 0 16px;
+}
+.createdAt {
+  height: 100%;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--gray400);
+  margin-right: 16px;
+}
+.favoriteContainer {
+  border-left: 1px solid var(--gray200);
+}
+.favoriteBox {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 12px;
+  border-radius: 35px;
+  border: 1px solid var(--gray200);
+  margin-left: 16px;
+}
+.content {
+  width: 100%;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--gray800);
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+@media screen and (max-width: 1199px) and (min-width: 768px) {
+  .main {
+    margin-bottom: 40px;
+  }
+  .createdAt {
+    margin-right: 32px;
+  }
+  .favoriteBox {
+    margin-left: 32px;
+  }
+  .writerNickName {
+    margin-right: 16px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .main {
+    margin-bottom: 32px;
+  }
+  .createdAt {
+    margin-right: 32px;
+  }
+  .favoriteBox {
+    margin-left: 32px;
+  }
+  .writerNickName {
+    margin-right: 8px;
+  }
+}
diff --git a/src/components/DetailBoard.tsx b/src/components/DetailBoard.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import S from "@/components/DetailBoard.module.css";
+import axios from "@/pages/api/axios";
+import Image from "next/image";
+
+interface ProductType {
+  id: number;
+  title: string;
+  content: string;
+  likeCount: number;
+  createdAt: string;
+  writer: {
+    id: number;
+    nickname: string;
+  };
+}
+
+function Product() {
+  const [product, setProduct] = useState<ProductType>();
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+  const id = Number(router.query["id"]);
+
+  // 작성한 시간 변환 함수
+  function formatDate(dateString: string): string {
+    const date = new Date(dateString);
+    const options: Intl.DateTimeFormatOptions = {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    };
+    const formattedDate = date
+      .toLocaleDateString("ko-KR", options)
+      .replace(/\s+/g, "")
+      .replace(/\//g, ".");
+
+    return formattedDate.endsWith(".") ? formattedDate.slice(0, -1) : formattedDate;
+  }
+
+  // 게시판 데이터 가져오기
+  async function getProduct(id: number) {
+    try {
+      const res = await axios.get(`/articles/${id}`);
+      const nextProduct = res.data;
+      setProduct(nextProduct);
+    } catch (error) {
+      console.error(`유효하지 않은 주소입니다.`);
+      router.replace(`/board`);
+    }
+  }
+
+  useEffect(() => {
+    getProduct(id);
+    setLoading(false);
+  }, [id]);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+  if (!product) {
+    return <div>No data</div>;
+  }
+
+  const { title, content, likeCount, createdAt, writer } = product;
+  return (
+    <main className={S.main}>
+      <div className={S.ProductInfoContainer}>
+        <div className={S.titleContainer}>
+          <h2 className={S.title}>{title}</h2>
+          <Image
+            src="/images/icon/btn_icon/ic_kebab_menu.png"
+            alt="게시글 수정 아이콘"
+            width={24}
+            height={24}
+          />
+        </div>
+        <div>
+          <div className={S.info}>
+            <Image
+              src="/images/icon/ic_null_user_profile_image.png"
+              alt="사용자 프로필 이미지"
+              width={40}
+              height={40}
+            />
+            <div className={S.writerNickName}>{writer.nickname}</div>
+            <div className={S.createdAt}>{formatDate(createdAt)}</div>
+            <div className={S.favoriteContainer}>
+              <div className={S.favoriteBox}>
+                <Image
+                  src="/images/icon/btn_icon/ic_favorite.png"
+                  alt="좋아요 하트 아이콘"
+                  width={24}
+                  height={24}
+                />
+                {likeCount}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={S.content}>{content}</div>
+    </main>
+  );
+}
+
+export default Product;