Next 엄성민

.github/pull-request-template.md

@@ -3,7 +3,7 @@
 ### 기본
 
 - [x]
-- []
+- [테스트]
 - []
 
 ### 심화

.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

api/index.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+const baseURL = "http://localhost:3100";
+
+const client = axios.create({
+  baseURL,
+});
+
+const getArticle = async () => {
+  const url = "/article";
+  const response = await client.get(url);
+  const data = response.data;
+  return data;
+};
+
+const getProduct = async () => {
+  const url = "/products";
+  const response = await client.get(url);
+  const data = response.data;
+  return data;
+};
+
+const api = {
+  getArticle,
+  getProduct,
+};
+
+export default api;

app/(root)/_components/Footer.jsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import React from "react";
+import icFacebook from "@/assets/svg/ic_facebook.svg";
+import icInstagram from "@/assets/svg/ic_instagram.svg";
+import icYoutube from "@/assets/svg/ic_youtube.svg";
+import icTwitter from "@/assets/svg/ic_twitter.svg";
+import Image from "next/image";
+function Footer() {
+  return (
+    <div className="relative translate-y-full h-[160px] bg-black flex justify-center">
+      <div className="flex justify-between max-w-[1120px] w-full mt-8 ">
+        <p className="text-[#9CA3AF]">©codeit - 2024 </p>
+
+        <span className="flex text-[#E5E7EB] gap-[30px]">
+          <Link className="" href="/">
+            Privacy Policy
+          </Link>
+          <Link className="" href="/">
+            FAQ
+          </Link>
+        </span>
+        <span className="flex gap-3">
+          <a className="" href="https://www.facebook.com/">
+            <Image src={icFacebook} alt="facebookIcon" />
+          </a>
+          <a className="icon" href="https://www.twitter.com/">
+            <Image src={icTwitter} alt="twitterIcon" />
+          </a>
+          <a className="icon" href="https://www.youtube.com/">
+            <Image src={icYoutube} alt="youtubeIcon" />
+          </a>
+          <a className="icon" href="https://www.instagram.com/">
+            <Image src={icInstagram} alt="instagramIcon" />
+          </a>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;

app/(root)/_components/Header.jsx

@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import Logo from "@/assets/svg/pandaLogo.svg";
+import Button from "@/components/Button";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+function Header() {
+  const pathName = usePathname();
+  const showMenu = pathName === "/" ? false : true;
+  return (
+    <header className="flex justify-between items-center  w-full min-w-max h-[70px] px-[200px] border-b border-[#DFDFDF] sticky box-border top-0 z-10">
+      <div className="flex items-center  text-nowrap">
+        <Link className="mr-4 " href="/">
+          <Image
+            src={Logo.src}
+            width={153}
+            height={51}
+            alt="logo"
+            className="object-contain"
+          />
+        </Link>
+        {showMenu && (
+          <>
+            <Link
+              className={`px-[15px] py-[21px] text-[18px] ${
+                pathName === "/freeBoard" ? "text-Blue" : "text-[#4B5563]"
+              } font-bold`}
+              href="/freeBoard"
+            >
+              자유게시판
+            </Link>
+            <Link
+              className={`px-[15px] py-[21px] text-[18px] ${
+                pathName === "/market" ? "text-Blue" : "text-[#4B5563]"
+              } font-bold`}
+              href="/market"
+            >
+              중고마켓
+            </Link>
+          </>
+        )}
+      </div>
+
+      <Button
+        color="blue"
+        className="px-[23px] py-[23px] rounded-lg w-[128px] h-[48px] "
+      >
+        로그인
+      </Button>
+    </header>
+  );
+}
+
+export default Header;

app/(root)/freeBoard/_components/BestArticle.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+function BestArticle({ article }) {
+  return (
+    <div className="w-[384px] h-[169px] flex flex-col bg-[#F9FAFB] rounded-lg px-6 gap-[10px]">
+      <div className="bg-Blue w-[102px] rounded-b-2xl px-6 py-[2px]">Best</div>
+      <div className="text-[20px] font-semibold">{article.title}</div>
+      <div>{article.createdAt}</div>
+    </div>
+  );
+}
+
+export default BestArticle;

app/(root)/freeBoard/_components/BestArticles.jsx

@@ -0,0 +1,17 @@
+"use client";
+
+import BestArticle from "./BestArticle";
+
+const NUMBER = 3;
+function BestArticles({ data }) {
+  const BestArticlesData = data.slice(0, NUMBER);
+  return (
+    <div className="flex gap-6">
+      {BestArticlesData.map((article) => {
+        return <BestArticle key={article.id} article={article}></BestArticle>;
+      })}
+    </div>
+  );
+}
+
+export default BestArticles;

app/(root)/freeBoard/page.jsx

@@ -0,0 +1,16 @@
+import api from "@/api";
+import React from "react";
+import BestArticles from "./_components/BestArticles";
+
+async function freeBorad() {
+  const data = await api.getArticle();
+
+  return (
+    <div>
+      <div>베스트 게시글</div>
+      <BestArticles data={data} />
+    </div>
+  );
+}
+
+export default freeBorad;

app/(root)/layout.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Header from "./_components/Header";
+import { basicFont } from "@/assets/fonts";
+import Footer from "./_components/Footer";
+function Rootlayout({ children }) {
+  return (
+    <div>
+      <div className={`min-h-screen pb-[160px]${basicFont.className}`}>
+        <Header />
+        {children}
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default Rootlayout;

app/(root)/market/page.jsx

@@ -0,0 +1,9 @@
+import api from "@/api";
+import React from "react";
+
+function page() {
+
+  return <div>page</div>;
+}
+
+export default page;

app/(root)/page.jsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div></div>;
+}

app/globals.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: "Pretendard Variable", sans-serif;
+  margin: 0;
+  padding: 0;
+}

app/layout.js

@@ -0,0 +1,9 @@
+import "./globals.css";
+
+export default function HTMLLayout({ children }) {
+  return (
+    <html lang="kr">
+      <body>{children}</body>
+    </html>
+  );
+}

assets/fonts/index.js

@@ -0,0 +1,5 @@
+import localFont from "next/font/local";
+
+export const basicFont = localFont({
+  src: "PretendardVariable.woff2",
+});

components/Button.jsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import React from "react";
+
+function Button({ children, color = "blue", className, ...props }) {
+  const buttonColor = clsx({
+    "bg-Blue text-white": color === "blue",
+  });
+
+  return (
+    <button
+      className={clsx(
+        "flex items-center justify-center",
+        className,
+        buttonColor
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Button;

eslint.config.mjs

@@ -0,0 +1,14 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends("next/core-web-vitals")];
+
+export default eslintConfig;

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;