[김진희] sprint 9

components/BestBoard.jsx

@@ -0,0 +1,41 @@
+import Image from 'next/image';
+import medal from '@/public/ic_medal.svg';
+import heart from '@/public/ic_heart.svg';
+import styles from '@/styles/BestBoard.module.css';
+
+export default function BestBoard({ data = {} }) {
+  const { title, image, updatedAt, likeCount, writer } = data;
+
+  const date = new Date(updatedAt);
+
+  const formattedDate = date.toLocaleDateString({
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  return (
+    <div className={styles.cardContent}>
+      <div className={styles.cardHead}>
+        <Image width={'12'} height={'14'} src={medal} alt="메달" />
+        <div className={styles.cardHeadTitle}>Best</div>
+      </div>
+      <div className={styles.cardBody}>
+        <div className={styles.cardBodyContent}>{title}</div>
+        <div className={styles.cardBodyContentImage}>
+          <Image width={'48'} height={'44'} src={image} alt="게시글 사진" />
+        </div>
+      </div>
+      <div className={styles.cardBottom}>
+        <div className={styles.cardBottomAhead}>
+          <div className={styles.boardUserId}>{writer.nickname}</div>
+          <div className={styles.likeIt}>
+            <Image width={'14'} height={'12'} src={heart} alt="좋아요" />
+            <div className={styles.likeCount}>{likeCount}</div>
+          </div>
+        </div>
+        <div className={styles.bestUploadDate}>{formattedDate}</div>
+      </div>
+    </div>
+  );
+}

components/EntireBoard.jsx

@@ -0,0 +1,43 @@
+import Image from 'next/image';
+import heart from '@/public/ic_heart.svg';
+import profile from '@/public/ic_profile.svg';
+import styles from '@/styles/EntireBoard.module.css';
+
+export default function EntireBoard({ data }) {
+  const { title, image, updatedAt, likeCount, writer } = data;
+  const imageUrl = image || '/default-image.jpg';
+
+  const date = new Date(updatedAt);
+
+  const formattedDate = date.toLocaleDateString({
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  return (
+    <div className={styles.boardListContent}>
+      <div className={styles.listMainContent}>
+        <div className={styles.listMainTitle}>{title}</div>
+        <div className={styles.listMainContentImage}>
+          <Image width={'48'} height={'44'} src={imageUrl} alt="리스트 사진" />
+        </div>
+      </div>
+      <div className={styles.listInfo}>
+        <div className={styles.listInfoAhead}>
+          <div className={styles.listUserInfo}>
+            <Image width={'24'} height={'24'} src={profile} alt="프로필" />
+            <div className={styles.listContentInfo}>
+              <div className={styles.listUserId}>{writer.nickname}</div>
+              <div className={styles.listUploadate}>{formattedDate}</div>
+            </div>
+          </div>
+          <div className={styles.listLikeIt}>
+            <Image width={'14'} height={'12'} src={heart} alt="좋아요" />
+            <div className={styles.listLikeCount}>{likeCount}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/Header.jsx

@@ -0,0 +1,36 @@
+// Header.jsx
+import Image from 'next/image';
+import Link from 'next/link';
+import logo from '@/public/ic_logo.svg';
+import login from '@/public/ic_login.svg';
+import styles from '@/styles/Header.module.css'
+
+function Header() {
+  return (
+    <header className={styles.navBar}>
+      <nav className={styles.navContent}>
+        <div className={styles.logo}>
+          <Image src={logo} alt="로고" />
+          <Link href="/" className={styles.title}>
+            판다마켓
+          </Link>
+        </div>
+        <ul className={styles.tab}>
+          <li className={styles.tabList}>
+            <Link id={styles.boards} href="/boards">
+              자유게시판
+            </Link>
+          </li>
+          <li className={styles.tabList}>
+            <Link id={styles.fleaMarket} href="/items">
+              중고마켓
+            </Link>
+          </li>
+        </ul>
+      </nav>
+      <Image src={login} alt="캐릭터" />
+    </header>
+  );
+}
+
+export default Header;

next.config.js

@@ -1,6 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    unoptimized: true,
+    domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -9,16 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.7.7",
+    "next": "13.5.6",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.6"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "eslint-config-next": "13.5.6",
+    "typescript": "^5"
   }
 }

pages/_app.jsx

@@ -0,0 +1,16 @@
+// import type { AppProps } from 'next/app'
+import Header from '../components/Header';
+import '@/styles/globals.css';
+import '@/styles/Header.module.css';
+import '@/styles/Boards.module.css';
+import '@/styles/BestBoard.module.css';
+import '@/styles/EntireBoard.module.css';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Header />
+      <Component {...pageProps} />
+    </>
+  );
+}

pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang="ko">
       <Head />
       <body>
         <Main />

pages/api/api.js

@@ -0,0 +1,4 @@
+import axios from 'axios';
+const instance = axios.create({ baseURL: `https://panda-market-api.vercel.app` });
+
+export default instance;