Next.js 이동규 sprint5

middleware.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import { NextRequest } from 'next/server';
+import { ACCESS_TOKEN } from './src/api/apiType';
+
+export function middleware(request: NextRequest) {
+  const jwt = request.cookies.get(ACCESS_TOKEN);
+
+  if (jwt && request.nextUrl.pathname === '/login') {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+  if (!jwt && request.nextUrl.pathname === '/addboard') {
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/login', '/addboard'],
+};
+

next.config.js

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

package.json

@@ -11,12 +11,14 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@hookform/error-message": "^2.0.1",
     "@types/js-cookie": "^3.0.6",
     "axios": "^1.7.2",
     "js-cookie": "^3.0.5",
     "next": "13.5.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hook-form": "^7.52.1"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",

pages/_app.tsx

@@ -5,7 +5,7 @@ import '../styles/Reset.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <Header isLogin={false}>
+    <Header>
       <Component {...pageProps} />
     </Header>
   );

pages/board/[id].tsx

@@ -0,0 +1,31 @@
+import { articleType } from '@/src/api/apiType';
+import { GetServerSideProps } from 'next';
+import { AxiosError } from 'axios';
+import React from 'react';
+import { getArticle } from '@/src/api/api';
+import { useRouter } from 'next/router';
+import Board from '@/src/components/Board';
+interface articleProps {
+  article: articleType;
+}
+const board: React.FC<articleProps> = ({ article }) => {
+  return <Board article={article} />;
+};
+
+export const getServerSideProps: GetServerSideProps<articleProps> = async (
+  context
+) => {
+  const { id } = context.query;
+
+  try {
+    const article = await getArticle(id as string);
+    return {
+      props: { article },
+    };
+  } catch (error) {
+    const err = error as AxiosError;
+    throw err;
+  }
+};
+export default board;
+

pages/boards.tsx

@@ -1,6 +1,6 @@
 import BestPostsContainer from '@/src/components/BestPostsContainer';
 import TotalPosts from '@/src/components/TotalPosts';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import style from '../styles/BoardFrame.module.css';
 import { GetServerSideProps } from 'next';
 import { AxiosError } from 'axios';
@@ -18,8 +18,9 @@ const boards: React.FC<bestPosts> = ({ bestPosts }) => {
     </div>
   );
 };
+
 export const getServerSideProps: GetServerSideProps<bestPosts> = async () => {
-  const URL = 'page=1&pageSize=3&orderBy=like';
+  const URL = `page=1&pageSize=3&orderBy=like`;
   try {
     const bestPosts = await getBestPosts(URL);
     return {

pages/index.tsx

@@ -1,5 +1,117 @@
 import React from 'react';
-export default function Home() {
-  return <></>;
-}
+import schoolPanda from '@/src/img/schoolPanda.png';
+import hotItem from '@/src/img/hotIem.png';
+import search from '@/src/img/search.png';
+import bottomImage from '@/src/img/bottomImage.png';
+import registerImage from '@/src/img/registerImage.png';
+import instagramIcon from '@/src/img/instagram.png';
+import facebookIcon from '@/src/img/facebook.png';
+import twitterIcon from '@/src/img/twitter.png';
+import youtubeIcon from '@/src/img/youtube.png';
+import style from '@/styles/Main.module.css';
+import Link from 'next/link';
+
+const MainPage = () => {
+  return (
+    <>
+      <main className={style.mainFrame}>
+        <div className={style['card']}>
+          <div className={style['box']}>
+            <h1>
+              일상의 모든 물건을 <br />
+              거래해보세요
+            </h1>
+            <Link href={'/items'}>구경하러 가기</Link>
+          </div>
+          <img src={schoolPanda.src} alt='가방팬더' />
+        </div>
+        <div className={style['section']}>
+          <div className={style['confirmBox']}>
+            <img src={hotItem.src} alt='인기상품' />
+            <div className={style['specific']}>
+              <h1>
+                인기 상품을 <br />
+                확인해 보세요
+              </h1>
+              <p>
+                가장 HOT한 중고거래 물품을
+                <br />
+                판다 마켓에서 확인해 보세요
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className={style['section']}>
+          <div className={style['searchBox']}>
+            <div className={style['specific2']}>
+              <h1>
+                구매를 원하는
+                <br />
+                상품을 검색하세요
+              </h1>
+              <p>
+                구매하고 싶은 물품은 검색해서
+                <br />
+                쉽게 찾아보세요
+              </p>
+            </div>
+            <img src={search.src} alt='검색' />
+          </div>
+        </div>
+        <div className={style['section']}>
+          <div className={style['registerBox']}>
+            <img src={registerImage.src} alt='등록이미지' />
+            <div className={style['specific3']}>
+              <h1>
+                판매를 원하는 <br />
+                상품을 등록하세요
+              </h1>
+              <p>
+                어떤 물건이든 판매하고 싶은 상품을
+                <br />
+                쉽게 등록하세요
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className={style['bottomCard']}>
+          <h2>
+            믿을 수 있는
+            <br />
+            판다마켓 중고거래
+          </h2>
+          <img src={bottomImage.src} alt='가방들고있는판다들' />
+        </div>
+      </main>
+
+      <footer className={style.footerFrame}>
+        <div className={style['tag']}>
+          <div className={style['mark']}>
+            <p className={style['codeit']}>@codeit - 2024</p>
+            <div className={style['privacy-container']}>
+              <p className={style['privacy']}>Privacy Policy</p>
+              <p className={style['faq']}>FAQ</p>
+            </div>
+          </div>
+          <div className={style['social']}>
+            <a>
+              <img src={facebookIcon.src} />
+            </a>
+            <a>
+              <img src={twitterIcon.src} />
+            </a>
+            <a>
+              <img src={youtubeIcon.src} />
+            </a>
+            <a>
+              <img src={instagramIcon.src} />
+            </a>
+          </div>
+        </div>
+      </footer>
+    </>
+  );
+};
+
+export default MainPage;
 

pages/login.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import LoginFormContainer from '@/src/components/LoginFormContainer';
+
+const LoginPage = () => {
+  return <LoginFormContainer />;
+};
+
+export default LoginPage;
+

pages/signUp.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import SignUpContainer from '@/src/components/SignUpContainer';
+
+const SignUpPage = () => {
+  return <SignUpContainer />;
+};
+
+export default SignUpPage;
+