[김성종] Sprint9

api/axiosApi.ts

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const instance = axios.create({
+  // 환경변수 추가 & env.local에 지정
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
+});
+
+export default instance;

components/Boards/AllArticles.module.css

@@ -0,0 +1,90 @@
+.all-articles-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.title-button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-button h2 {
+  font-size: 20px;
+  color: #1f2937;
+}
+
+.input-dropdown {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.all-articles-container ul {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  list-style: none;
+}
+
+.all-articles-container li {
+  background-color: #fcfcfc;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.title {
+  /* width: 256px; */
+  color: #1f2937;
+}
+
+.article-image {
+  background-color: #ffffff;
+}
+
+.title-image {
+  display: flex;
+  /* align-items: center; */
+  justify-content: space-between;
+}
+
+.title-image p {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 17px 0 24px;
+}
+
+.info-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.likes {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 16px;
+  color: #6b7280;
+}
+
+.info span {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.writer {
+  color: #4b5563;
+}
+
+.date {
+  color: #9ca3af;
+}

components/Boards/AllArticles.tsx

@@ -0,0 +1,93 @@
+import Button from "../common/Button";
+import DropDown from "../common/DropDown";
+import Input from "../common/Input";
+import styles from "@/components/boards/AllArticles.module.css";
+import SearchIcon from "@/assets/images/icons/ic_search.svg";
+import Link from "next/link";
+import Image from "next/image";
+import ImageTemplate from "@/assets/images/ui/empty-comments.svg";
+import Heart from "@/assets/images/icons/ic_heart.svg";
+import { format } from "date-fns";
+
+interface Article {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    nickname: string;
+    id: number;
+  };
+  image: string;
+  content: string;
+  title: string;
+  id: number;
+}
+
+type ArticleList = Article[];
+
+export default function AllArticles({ articles }: { articles: ArticleList }) {
+  return (
+    <div className={styles["all-articles-container"]}>
+      <div className={styles["title-button"]}>
+        <h2>게시글</h2>
+        <Button buttonName="글쓰기" />
+      </div>
+      <div className={styles["input-dropdown"]}>
+        <Input
+          placeholder="검색할 상품을 입력해주세요"
+          type="search"
+          className="search"
+          src={SearchIcon}
+          alt="돋보기 아이콘"
+          width={24}
+          height={24}
+        />
+        <DropDown />
+      </div>
+      <ul>
+        {articles.length === 0 ? (
+          <p>게시글이 없습니다.</p>
+        ) : (
+          articles.map((article: Article) => (
+            <li key={article.id}>
+              {/* 베스트 게시글 클릭했을 때 해당 게시글로 이동했으면 좋겠다 싶어서 임의로 경로 설정 */}
+              <Link href={`/articles/${article.id}`}>
+                <div>
+                  <div className={styles["title-image"]}>
+                    <p className={styles.title}>{article.title}</p>
+                    <Image
+                      src={article.image || ImageTemplate}
+                      alt={article.title}
+                      width={72}
+                      height={72}
+                      className={styles["article-image"]}
+                    />
+                  </div>
+                  <div className={styles.info}>
+                    <div className={styles["info-left"]}>
+                      <span className={styles.writer}>
+                        {article.writer.nickname}
+                      </span>
+                      <span className={styles.date}>
+                        {format(article.createdAt, "yyyy. MM. dd")}
+                      </span>
+                    </div>
+                    <div className={styles.likes}>
+                      <Image
+                        src={Heart}
+                        alt="좋아요 버튼"
+                        width={16}
+                        height={16}
+                      />
+                      <span>{article.likeCount}</span>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+}

components/Boards/BestArticles.module.css

@@ -0,0 +1,82 @@
+.best-article-container {
+  display: grid;
+  /* grid-template-columns: repeat(1, 1fr); */
+  gap: 24px;
+  margin-bottom: 40px;
+}
+
+.best-article-container h1 {
+  font-size: 20px;
+  color: #111827;
+}
+
+.best-article-container ul {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  overflow-x: hidden;
+}
+
+.best-article-container li {
+  list-style: none;
+  width: 384px;
+  height: 169px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  padding: 0 24px;
+  background-color: #f9fafb;
+}
+
+.title {
+  width: 256px;
+}
+
+.article-image {
+  border: 1px solid #e5e7eb;
+  background-color: #ffffff;
+}
+
+.title-image {
+  display: flex;
+  align-items: center;
+}
+
+.title-image p {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 26px;
+}
+
+.info-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.likes {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 16px;
+}
+
+.info span {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.info-left span {
+  color: #4b5563;
+}
+
+.date {
+  color: #9ca3af;
+}

components/Boards/BestArticles.tsx

@@ -0,0 +1,76 @@
+import Image from "next/image";
+import Badge from "@/assets/images/ui/img_badge.svg";
+import Link from "next/link";
+import Heart from "@/assets/images/icons/ic_heart.svg";
+import styles from "@/components/Boards/BestArticles.module.css";
+import ImageTemplate from "@/assets/images/ui/empty-comments.svg";
+import { format } from "date-fns";
+
+interface Article {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    nickname: string;
+    id: number;
+  };
+  image: string;
+  content: string;
+  title: string;
+  id: number;
+}
+
+type ArticleList = Article[];
+
+export default function BestArticles({ articles }: { articles: ArticleList }) {
+  console.log(articles);
+  return (
+    <div className={styles["best-article-container"]}>
+      <h1>베스트 게시글</h1>
+      <ul>
+        {articles.length === 0 ? (
+          <p>게시글이 없습니다.</p>
+        ) : (
+          articles.map((article: Article) => (
+            <li key={article.id}>
+              <Image src={Badge} alt="Best Badge" width={102} height={30} />
+              {/* 베스트 게시글 클릭했을 때 해당 게시글로 이동했으면 좋겠다 싶어서 임의로 경로 설정 */}
+              <Link href={`/articles/${article.id}`}>
+                <div>
+                  <div className={styles["title-image"]}>
+                    <p className={styles.title}>{article.title}</p>
+                    <Image
+                      src={article.image || ImageTemplate}
+                      alt={article.title}
+                      width={72}
+                      height={72}
+                      className={styles["article-image"]}
+                    />
+                  </div>
+                  <div className={styles.info}>
+                    <div className={styles["info-left"]}>
+                      <span>{article.writer.nickname}</span>
+                      <div className={styles.likes}>
+                        <Image
+                          src={Heart}
+                          alt="좋아요 버튼"
+                          width={16}
+                          height={16}
+                        />
+                        <span>{article.likeCount}</span>
+                      </div>
+                    </div>
+                    {/* date-fns 라이브러리 활용 */}
+                    <span className={styles.date}>
+                      {format(article.createdAt, "yyyy. MM. dd")}
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+}

components/Layout/Container.module.css

@@ -1,5 +1,6 @@
 .container {
   max-width: 1200px;
-  margin-top: 24px;
-  margin-left: 360px;
+  display: flex;
+  flex-direction: column;
+  margin: 94px 360px;
 }