미션8 Next

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,40 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+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.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) 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/pages/building-your-application/routing/api-routes) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.

components/ArticleItem.js

@@ -0,0 +1,44 @@
+import Image from "next/image";
+import styles from "./ArticleItem.module.css";
+import Hearts from "./Hearts";
+import { useRouter } from "next/router";
+import dateFormat from "@/utils/dateFormat";
+
+export default function ArticleItem({ article }) {
+  const router = useRouter();
+  const updatedAt = dateFormat(article.updatedAt);
+
+  return (
+    <div
+      className={styles.article}
+      onClick={() => {
+        router.push(`/article/${article.id}`);
+      }}
+    >
+      <div className={styles.content}>
+        <div className={styles.title}>{article.title}</div>
+        <Image src={"/default.png"} alt="이미지" width={48} height={48} />
+      </div>
+      <div className={styles.info}>
+        <div className={styles.user}>
+          <Image
+            src={"/user-default-img.svg"}
+            className={styles.userImg}
+            alt="이미지"
+            width={24}
+            height={24}
+          />
+          <div className={styles.nickname}>{article.nickname}</div>
+          <div className={styles.updatedAt}>{updatedAt}</div>
+        </div>
+        <Hearts
+          heartId={article.heartId}
+          articleId={article.id}
+          heartCount={article.heart_count}
+          isHearted={article.isHearted}
+          size="middle"
+        />
+      </div>
+    </div>
+  );
+}

components/ArticleItem.module.css

@@ -0,0 +1,104 @@
+.article {
+  width: 100%;
+
+  padding-bottom: 24px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  border-bottom: var(--Cool-Gray-200, #e5e7eb) solid 1px;
+
+  cursor: pointer;
+}
+
+.content {
+  width: 100%;
+
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-self: stretch;
+}
+
+.title {
+  flex-grow: 1;
+
+  color: var(--Cool-Gray-800, #1f2937);
+
+  /* pretendard/xl-20px-semibold */
+  font-family: Pretendard;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 32px; /* 160% */
+}
+
+.info {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+
+  align-items: center;
+}
+
+.userImg {
+  background-color: #d1d5db;
+  border-radius: 50px;
+}
+
+.nickname {
+  color: var(--Secondary-600, #4b5563);
+
+  /* pretendard/md-14px-regular */
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 171.429% */
+}
+
+.updatedAt {
+  color: var(--Secondary-400, #9ca3af);
+
+  /* pretendard/md-14px-regular */
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 171.429% */
+}
+
+.heart {
+  display: flex;
+  flex-direction: row;
+
+  gap: 8px;
+
+  align-items: center;
+}
+
+.heartBtn {
+  width: 24px;
+  height: 24px;
+}
+
+.heartCount {
+  color: var(--Secondary-500, #6b7280);
+
+  /* pretendard/lg-16px-regular */
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 26px; /* 162.5% */
+}

components/ArticleSection.js

@@ -0,0 +1,70 @@
+import CustomButtonSquare from "./CustomButtonSquare";
+import InputBox from "./InputBox";
+import SortOption from "./SortOption";
+import Image from "next/image";
+import ArticleItem from "./ArticleItem";
+import styles from "./ArticleSection.module.css";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { useRouter } from "next/router";
+
+export default function ArticleSection() {
+  const [keyword, setKeyword] = useState("");
+
+  const [articles, setArticles] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    async function getArticles(keyword) {
+      setIsLoading(true);
+      try {
+        const res = await axios.get("http://localhost:5000/article", {
+          params: { keyword, limit: 4 },
+        });
+        setArticles(res.data);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    getArticles(keyword);
+  }, [keyword]);
+
+  let count = 1;
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.header}>
+        <div className={styles.title}>게시글</div>
+        <CustomButtonSquare
+          text="글쓰기"
+          onClick={() => {
+            router.push(`/postArticle?mode=post`);
+          }}
+          valid={true}
+        />
+      </div>
+      <div className={styles.option}>
+        <InputBox
+          keyword={keyword}
+          onChange={setKeyword}
+          placeholder={"검색할 상품을 입력해주세요"}
+        />
+        <SortOption />
+      </div>
+      {!isLoading && (
+        <div className={styles.articleList}>
+          {articles.map((article) => {
+            const key = "a" + count;
+            count += 1;
+            return <ArticleItem key={key} article={article} />;
+          })}
+        </div>
+      )}
+    </div>
+  );
+}