[우재현] Sprint10

api/article.api.tsx

@@ -1,4 +1,4 @@
-import { ArticleList } from "@/types/Article.type";
+import { Article, ArticleList } from "@/types/Article.type";
 import axios from "./axios";
 
 interface GetArticleListParams {
@@ -27,5 +27,33 @@ async function getArticleList({
   return response.data;
 }
 
-export { getArticleList };
+async function getArticle({ id }: { id: number }): Promise<Article> {
+  const response = await axios.get(`/articles/${id}`);
+  return response.data;
+}
+
+interface PostArticle {
+  image?: string | undefined;
+  content: string;
+  title: string;
+}
+
+async function postArticle({
+  image,
+  content,
+  title,
+}: PostArticle): Promise<Article> {
+  const response = await axios({
+    method: "post",
+    url: "/articles",
+    data: {
+      content,
+      title,
+      image,
+    },
+  });
+  return response.data;
+}
+
+export { getArticleList, getArticle, postArticle };
 export type { GetArticleListParams, OrderBy };

api/auth.api.tsx

@@ -0,0 +1,68 @@
+import { User } from "@/types/User.type";
+import axios from "./axios";
+
+interface SignUpParams {
+  email: string;
+  nickname: string;
+  password: string;
+  passwordConfirmation: string;
+}
+
+interface SignInParams {
+  email: string;
+  password: string;
+}
+
+interface AuthResponse {
+  accessToken: string;
+  refreshToken: string;
+  user: User;
+}
+
+async function postSignUp({
+  email,
+  nickname,
+  password,
+  passwordConfirmation,
+}: SignUpParams): Promise<AuthResponse> {
+  const response = await axios({
+    method: "post",
+    url: "/auth/signUp",
+    data: {
+      email,
+      nickname,
+      password,
+      passwordConfirmation,
+    },
+  });
+  return response.data;
+}
+
+async function postSignIn({
+  email,
+  password,
+}: SignInParams): Promise<AuthResponse> {
+  const response = await axios({
+    method: "post",
+    url: "/auth/signIn",
+    data: {
+      email,
+      password,
+    },
+  });
+  return response.data;
+}
+
+async function postRefresh(refreshToken: string) {
+  const response = await axios({
+    method: "post",
+    url: "/auth/refresh-token",
+    data: {
+      refreshToken,
+    },
+  });
+  return response.data;
+}
+
+export { postSignUp, postSignIn, postRefresh };
+export type { SignUpParams, SignInParams, AuthResponse };

api/axios.tsx

@@ -0,0 +1,27 @@
+import axios from "axios";
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+const instance = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+let interceptorId: any;
+
+export const setInstanceHeaders = (token?: string) => {
+  const value = token ? `Bearer ${token}` : undefined;
+  // 기존 인터셉터 제거
+  if (interceptorId !== undefined) {
+    instance.interceptors.request.eject(interceptorId);
+  }
+
+  // 새로운 인터셉터 추가
+  interceptorId = instance.interceptors.request.use((config) => {
+    config.headers["Authorization"] = value;
+    return config;
+  });
+};
+export default instance;

api/comment.api.tsx

@@ -0,0 +1,43 @@
+import axios from "./axios";
+
+interface GetCommentListByArticleId {
+  articleId: number;
+  limit: number;
+  cursor?: number;
+}
+
+async function getCommentListByArticleId({
+  articleId,
+  limit,
+  cursor,
+}: GetCommentListByArticleId) {
+  const response = await axios.get(`/articles/${articleId}/comments`, {
+    params: {
+      limit,
+      cursor,
+    },
+  });
+  return response.data;
+}
+
+interface PostCommentByArticleId {
+  articleId: number;
+  content: string;
+}
+
+async function postCommentByArticleId({
+  articleId,
+  content,
+}: PostCommentByArticleId) {
+  const response = await axios({
+    method: "post",
+    url: `/articles/${articleId}/comments`,
+    data: {
+      content,
+    },
+  });
+  return response.data;
+}
+
+export { getCommentListByArticleId, postCommentByArticleId };
+export type { GetCommentListByArticleId, PostCommentByArticleId };

api/image.api.tsx

@@ -0,0 +1,10 @@
+import axios from "./axios";
+
+async function postImage(file: File): Promise<string> {
+  const response = await axios.post("/images/upload", {
+    data: { image: file },
+  });
+  return response.data.url;
+}
+
+export { postImage };

components/BestPostBoard.tsx

@@ -1,18 +1,17 @@
 import { Article, ArticleList } from "@/types/Article.type";
 import styles from "./BestPostBoard.module.css";
 import Image from "next/image";
-import formatDate from "../lib/formatDate";
+import formatDate from "@/lib/formatDate";
 import { useDeviceType } from "@/contexts/DeviceTypeContext";
-import { useState } from "react";
+import ImageSafe from "./ImageSafe";
+import Link from "next/link";
 
 const PAGE_SIZE = {
   desktop: 3,
   tablet: 2,
   mobile: 1,
 };
 
-const IMAGE_PLACEHOLDER = "/images/landscape-placeholder.svg";
-
 export default function BestPostBoard({ articles }: { articles: ArticleList }) {
   const deviceType = useDeviceType();
 
@@ -22,8 +21,8 @@ export default function BestPostBoard({ articles }: { articles: ArticleList }) {
         <h2 className={styles.BoardTitle}>베스트 게시글</h2>
       </header>
       <div className={styles.PostItemList}>
-        {articles.list.map((article, i) => {
-          if (i < PAGE_SIZE[deviceType]) {
+        {articles.list.map((article, postIndex) => {
+          if (postIndex < PAGE_SIZE[deviceType]) {
             return <PostItem key={article.id} article={article} />;
           }
         })}
@@ -33,12 +32,10 @@ export default function BestPostBoard({ articles }: { articles: ArticleList }) {
 }
 
 function PostItem({ article }: { article: Article }) {
-  const [imgSrc, setImgSrc] = useState(article.image || IMAGE_PLACEHOLDER);
-
   const createdAt = formatDate(article.createdAt);
 
   return (
-    <div className={styles.Item}>
+    <Link className={styles.Item} href={`/board/${article.id}`}>
       <div className={styles.badge}>
         <div className={styles.medal}>
           <Image fill src="/images/ic_medal.svg" alt="베스트" />
@@ -48,15 +45,7 @@ function PostItem({ article }: { article: Article }) {
       <div className={styles.main}>
         <h3 className={styles.title}>{article.title}</h3>
         <div className={styles.preview}>
-          <Image
-            fill
-            src={article.image}
-            alt={article.title}
-            style={{
-              objectFit: "cover",
-            }}
-            onError={() => setImgSrc(IMAGE_PLACEHOLDER)}
-          />
+          <ImageSafe src={article.image} alt={article.title} />
         </div>
       </div>
       <div className={styles.util}>
@@ -69,6 +58,6 @@ function PostItem({ article }: { article: Article }) {
         </div>
         <span>{createdAt}</span>
       </div>
-    </div>
+    </Link>
   );
 }

components/Container.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export default function Container({ children }: { children: ReactNode }) {
+  return <div className="container">{children}</div>;
+}

components/ImageSafe.tsx

@@ -1,4 +1,3 @@
-import getConfig from "next/config";
 import Image from "next/image";
 import { useState, useEffect } from "react";
 
@@ -13,16 +12,12 @@ export default function ImageSafe({ src, alt }: { src: string; alt: string }) {
         const res = await fetch(
           "/api/check-image?url=" + encodeURIComponent(src)
         );
-        console.log(res);
         if (res.ok) {
           setImageSrc(src);
         } else {
-          console.error("Image source not configured in next.config.js");
-          console.log(res);
           setImageSrc(IMAGE_PLACEHOLDER);
         }
       } catch (error) {
-        console.error("Error checking image configuration:", error);
         setImageSrc(IMAGE_PLACEHOLDER);
       }
     };

components/Navigation.module.css

@@ -22,8 +22,10 @@
   gap: 10px;
 }
 
-.logo .icon {
+.logoIcon {
+  position: relative;
   width: 40px;
+  height: 40px;
 }
 
 .logo .text {
@@ -56,6 +58,11 @@
 .tabList .tab.current {
   color: var(--blue);
 }
+.profileIcon {
+  position: relative;
+  width: 40px;
+  height: 40px;
+}
 
 @media screen and (min-width: 1600px) {
   .Navigation {

components/Navigation.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import styles from "./Navigation.module.css";
 import Link from "next/link";
 
@@ -17,11 +18,10 @@ function Navigation() {
     <nav className={styles.Navigation}>
       <div className={styles.wrap}>
         <Link href="/" className={styles.logo}>
-          <img
-            className={styles.icon}
-            src="./images/ic_logo.svg"
-            alt="판다마켓 아이콘 로고"
-          />
+          <div className={styles.logoIcon}>
+            <Image fill src="./images/ic_logo.svg" alt="판다마켓 아이콘 로고" />
+          </div>
+
           <span className={styles.text}>판다마켓</span>
         </Link>
         <ul className={styles.tabList}>
@@ -31,8 +31,10 @@ function Navigation() {
             </li>
           ))}
         </ul>
-        <Link className={styles.profile} href="/">
-          <img src="/images/profile.svg" alt="유저 프로필" />
+        <Link className={styles.profile} href="/signin">
+          <div className={styles.profileIcon}>
+            <Image fill src="/images/profile.svg" alt="유저 프로필" />
+          </div>
         </Link>
       </div>
     </nav>