Merge pull request #117 from just-codingbaby/next-정해찬-sprint8

[정해찬] sprint 8

.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+._.DS_Store
+**/.DS_Store
+**/._.DS_Store
+
+pandamarket/
+.vscode/
+next_sprint/node_modules/

next_sprint/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

next_sprint/.gitignore

@@ -0,0 +1,40 @@
+# 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*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next_sprint/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.

next_sprint/components/Button.js

@@ -0,0 +1,11 @@
+
+export default function Button({ children, handleClick, disabled = false}) {
+  return (
+    <>
+      <button onClick={handleClick} disabled={disabled}
+      className={`${ disabled ? "bg-gray-400" : "bg-custom_blue"} w-[88px] h-[42px] rounded-lg px-[23px] py-3 text-base font-semibold leading-[19.09px] text-white`}>
+        {children}
+      </button>
+    </>
+  );
+}

next_sprint/components/DropDown.js

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import Image from "next/image";
+
+export default function DropDown({
+  handleOptionClick,
+  sortOption,
+  selectedOption,
+  isOpen,
+  setIsOpen,
+  isKebab,
+}) {
+  const toggleOpen = () => setIsOpen((prev) => !prev);
+
+  return (
+    <div className="relative w-40">
+      {isKebab ? (
+        <button onClick={toggleOpen} className="pl-[155px]">
+          <Image src="/img/btn_dropDown.png" width={3} height={13} alt="드롭다운 케밥 아이콘" />
+        </button>
+      ) : (
+        <button
+          onClick={toggleOpen}
+          className="w-full text-left px-4 py-2 border rounded-lg bg-white focus:outline-none"
+        >
+          {selectedOption}
+        </button>
+      )}
+
+      {!isKebab && (
+        <Image
+        src="/img/drop_arrow.png"
+        alt="drop-arrow"
+        width={15.7}
+        height={14.2}
+        className="absolute right-5 top-4"
+      />
+      )}
+
+      {isOpen && (
+        <ul className="absolute left-0 mt-1 w-full border rounded-lg bg-white shadow-md z-10">
+          <li
+            className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+            onClick={() => handleOptionClick(sortOption[0])}
+          >
+            {sortOption[0]}
+          </li>
+          <li
+            className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+            onClick={() => handleOptionClick(sortOption[1])}
+          >
+            {sortOption[1]}
+          </li>
+        </ul>
+      )}
+    </div>
+  );
+}

next_sprint/components/Footer.js

@@ -0,0 +1,28 @@
+export default function Footer() {
+  return (
+    <footer className="flex bg-custom_coolGray900 h-40 mt-auto justify-around">
+      <p className="text-gray-400 mt-8">©codeit - 2024</p>
+      <div className="flex space-x-6 mt-8">
+        <p className="text-gray-200">Privacy Policy</p>
+        <p className="text-gray-200">FAQ</p>
+      </div>
+      <div className="flex gap-3 mt-8">
+        <a href="http://facebook.com" rel="noopener noreferrer" target="_blank" className="social_box">
+          <img src="/img/facebook.png" alt="facebook" />
+        </a>
+
+        <a href="http://twitter.com" rel="noopener noreferrer" target="_blank" className="social_box">
+          <img src="/img/twitter.png" alt="twitter" />
+        </a>
+
+        <a href="http://youtube.com" rel="noopener noreferrer" target="_blank" className="social_box">
+          <img src="/img/youtube.png" alt="youtube" />
+        </a>
+
+        <a href="http://instagram.com" rel="noopener noreferrer" target="_blank" className="social_box">
+          <img src="/img/insta.png" alt="instagram" />
+        </a>
+      </div>
+    </footer>
+  );
+}

next_sprint/components/Header.js

@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Link from "next/link";
+import Button from "./Button";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export default function Header() {
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push('/login');
+  }
+
+  return (
+    <>
+      <header className="flex fixed w-full flex-wrap items-center px-4 lg:px-[200px] sm:px-6 h-[70px] border-b-[1px] bg-white z-[1000]">
+        <Link href="/" >
+          <Image src="/img/panda_logo.png" alt="logo" width={153} height={51} />
+        </Link>
+
+        <div className="flex space-x-8 ml-[8%]" >
+          <Link href="/community/community" className={`${router.pathname.includes('/community')?'text-custom_blue':'text-primary'} 
+                font-bold text-lg`}>
+            자유게시판
+          </Link>
+          <Link href="/market" className={`${router.pathname==='/market'?'text-custom_blue':'text-primary'}
+                font-bold text-lg`}>
+            중고마켓
+          </Link>
+        </div>
+
+        <div className="ml-auto">
+          <Button handleClick={handleClick}>로그인</Button>
+        </div>
+      </header>
+    </>
+  );
+}

next_sprint/jsconfig.json

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

next_sprint/next.config.mjs

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