Merge pull request #732 from greenyun2/Next.js-최윤석-sprint10

[최윤석] Sprint10

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

README.md

@@ -16,9 +16,9 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 

components/BestPostArticles.module.css

@@ -0,0 +1,117 @@
+.bestItem {
+  padding: 0 1.5rem 1rem 1.5rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  background-color: #f9fafb;
+}
+
+.badge {
+  width: 102px;
+  height: 30px;
+
+  display: flex;
+  justify-content: center;
+
+  background-color: #3692ff;
+  border-radius: 0 0 32px 32px;
+}
+
+.badgeWrap {
+  width: 54px;
+  height: 24px;
+
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.badgeWrap span {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+
+  color: #fff;
+}
+
+.bestUserContents {
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.bestTitle {
+  max-width: 256px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 2rem;
+
+  color: #1f2937;
+}
+
+.userProductImg {
+  width: 71px;
+  height: 71px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+}
+
+.productImg {
+  width: 3rem;
+  height: auto;
+}
+
+.bestUserInfoWrap {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.bestUserInfo {
+  width: auto;
+  height: 17px;
+
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16.71px;
+
+  color: #4b5563;
+}
+
+.bestUserCount {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.likeCount {
+  color: #6b7280;
+}
+
+.bestUserDate {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16.71px;
+
+  color: #4b5563;
+}

components/BestPostArticles.tsx

@@ -0,0 +1,51 @@
+import styles from "./BestPostArticles.module.css";
+import Image from "next/image";
+import medal from "@/public/ic_medal.png";
+import heartIcon from "@/public/ic_heart.png";
+
+export default function BestPostArticles({
+  title,
+  image,
+  likeCount,
+  updatedAt,
+  writer,
+}) {
+  return (
+    <li className={styles.bestItem}>
+      <div className={styles.badge}>
+        <div className={styles.badgeWrap}>
+          <Image src={medal} width={16} height={16} alt='메달 아이콘' />
+          <span>Best</span>
+        </div>
+      </div>
+      <div className={styles.bestUserContents}>
+        <h1 className={styles.bestTitle}>{title}</h1>
+        {image ? (
+          <div className={styles.userProductImg}>
+            <Image
+              className={styles.productImg}
+              width={48}
+              height={44.57}
+              src={image}
+              alt='상품 이미지'
+            />
+          </div>
+        ) : null}
+      </div>
+      <div className={styles.bestUserInfoWrap}>
+        <div className={styles.bestUserInfo}>
+          <span>{writer.nickname}</span>
+          <div className={styles.bestUserCount}>
+            <Image src={heartIcon} width={16} height={16} alt='하트 아이콘' />
+            <span className={styles.likeCount}>{likeCount}</span>
+          </div>
+        </div>
+        <div className={styles.bestUserDate}>
+          <span>{new Date(updatedAt).getFullYear()}</span>
+          <span>. {new Date(updatedAt).getMonth() + 1}</span>
+          <span>. {new Date(updatedAt).getDay()}</span>
+        </div>
+      </div>
+    </li>
+  );
+}

components/BestPostSection.module.css

@@ -0,0 +1,27 @@
+.bestPost {
+  width: 1200px;
+  height: 217px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.bestPostTitle {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 23.87px;
+
+  color: #111827;
+}
+
+.bestItems {
+  width: 100%;
+  height: 169px;
+
+  display: grid;
+  grid-template-rows: 169px;
+  grid-template-columns: repeat(3, 384px);
+
+  gap: 24px;
+}

components/BestPostSection.tsx

@@ -0,0 +1,33 @@
+import styles from "./BestPostSection.module.css";
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
+import BestPostArticles from "./BestPostArticles";
+
+export default function BestPostSection() {
+  const [bestArticles, setBestArticles] = useState([]);
+
+  useEffect(() => {
+    async function getBestArticles() {
+      try {
+        const res = await axios.get("articles?page=1&pageSize=3&orderBy=like");
+        const nextArticles = res.data.list ?? [];
+        setBestArticles(nextArticles);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    getBestArticles();
+  }, []);
+
+  return (
+    <section className={styles.bestPost}>
+      <h1 className={styles.bestPostTitle}>베스트 게시글</h1>
+      <ul className={styles.bestItems}>
+        {bestArticles.map((item) => (
+          <BestPostArticles key={item.id} {...item} />
+        ))}
+      </ul>
+    </section>
+  );
+}

components/Button.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import styles from "./Button.module.css";
+
+interface ButtonProps {
+  children: ReactNode;
+}
+
+export default function Button({ children }: ButtonProps) {
+  return <button>{children}</button>;
+}

components/Header.module.css

@@ -0,0 +1,103 @@
+.header {
+  width: 100%;
+  height: 70px;
+
+  border-bottom: 1px solid #dfdfdf;
+  background-color: #fff;
+
+  margin-bottom: 24px;
+}
+
+.nav {
+  max-width: 1920px;
+  height: 100%;
+
+  margin: 0 12.5rem;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menus {
+  display: flex;
+  align-items: center;
+  gap: 2.9375rem;
+}
+
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title h1 {
+  margin-left: 0.537rem;
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 2.1625rem;
+
+  color: #3692ff;
+}
+
+.links {
+  display: flex;
+  align-items: center;
+}
+
+.link {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.3425rem;
+
+  color: #4b5563;
+}
+
+.link:nth-child(1) {
+  color: #3692ff;
+  margin-right: 1.875rem;
+}
+
+@media screen and (max-width: 376px) {
+  .header {
+    max-width: 376px;
+  }
+
+  .nav {
+    width: calc(100% - (2 * 1rem));
+    margin: 0 1rem;
+  }
+
+  .menus {
+    gap: 0.5rem;
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .title h1 {
+    margin-left: 0;
+    font-size: 1.2625rem;
+    line-height: 1.7rem;
+  }
+
+  .link:nth-child(1) {
+    margin-right: 0.5rem;
+  }
+}
+
+@media screen and (max-width: 745px) {
+  .header {
+    max-width: 744px;
+  }
+
+  .nav {
+    width: calc(100% - (2 * 1.5rem));
+    margin: 0 1.5rem;
+  }
+
+  .menus {
+    gap: 1.25rem;
+  }
+}