[윤예지] Sprint10

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_ACCESS_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NDkzLCJzY29wZSI6ImFjY2VzcyIsImlhdCI6MTczMzU2NzgwMywiZXhwIjoxNzMzNTY5NjAzLCJpc3MiOiJzcC1wYW5kYS1tYXJrZXQifQ.15l2pH_P-kh0tMemBn521wnFwugH38QssNljRzNa3Qo"

api/commentApi.ts

@@ -0,0 +1,59 @@
+import axios, { AxiosResponse } from 'axios';
+import axiosInstance from './axios';
+
+interface GetCommentResultResponse {
+  list: Comment[];
+  nextCursor: string;
+}
+
+interface CreateCommentResultResponse {}
+
+// -- Comment API
+export const getComment = async (
+  productId: number,
+  params: {},
+): Promise<AxiosResponse<GetCommentResultResponse>> => {
+  try {
+    return await axiosInstance.get(`/products/${productId}/comments`, {
+      params: {
+        productId: productId,
+        limit: 10,
+        cursor: null,
+        ...params,
+      },
+    });
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error('Axios Error:', error.response?.data || error.message);
+      throw new Error('데이터를 불러오는도중 에러가 발생했습니다.');
+    } else {
+      console.error('Unknown Error:', error);
+      throw new Error('기타 에러입니다.');
+    }
+  }
+};
+
+export const createComments = async (
+  productId: number,
+  content: { content: string },
+) => {
+  try {
+    return await axiosInstance.post(
+      `/products/${productId}/comments`,
+      content,
+      {
+        headers: {
+          Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
+        },
+      },
+    );
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error('Axios Error:', error.response?.data || error.message);
+      throw new Error('데이터를 불러오는도중 에러가 발생했습니다.');
+    } else {
+      console.error('Unknown Error:', error);
+      throw new Error('기타 에러입니다.');
+    }
+  }
+};

api/imageApi.ts

@@ -0,0 +1,34 @@
+import axios, { AxiosResponse } from 'axios';
+import axiosInstance from './axios';
+
+interface UploadImageResponse {
+  url: string;
+}
+
+export const uploadImage = async (
+  file: File,
+): Promise<UploadImageResponse | undefined> => {
+  const formData = new FormData();
+  formData.append('image', file);
+
+  try {
+    const response: AxiosResponse = await axiosInstance.post(
+      '/images/upload',
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
+        },
+      },
+    );
+    console.log('파일 업로드 성공:', response.data);
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      console.error('파일 업로드 실패:', error.response?.data || error.message);
+    } else {
+      console.error('알 수 없는 오류 발생:', error);
+    }
+  }
+};

api/productApi.ts

@@ -1,32 +1,30 @@
-import { AxiosResponse } from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import axiosInstance from './axios';
+import { Product } from '@/components/Card';
+import { Comment } from '@/components/Comment';
 
 export type OrderType = 'recent' | 'favorite';
 
-export interface Product {
+interface ProductResultResponse {
+  totalCount: number; // 전체 상품 수
+  list: Product[]; // 상품 목록
+}
+
+export interface GetProduct {
   page: number;
   pageSize: number;
-  orderBy: OrderType;
+  orderBy: string;
   keyword?: string;
 }
 
-export interface ProductResult {
-  createdAt: string;
-  favoriteCount: number;
-  ownerNickname: string;
-  ownerId: number;
+export interface CreateProductProps {
+  name: string;
+  description: string;
   images: string[];
   tags: string[];
   price: number;
-  description: string;
-  name: string;
-  id: number;
-}
-
-interface ProductResultResponse {
-  totalCount: number; // 전체 상품 수
-  list: ProductResult[]; // 상품 목록
 }
+// -- Product API
 
 // 상품목록가져오기
 export const getProducts = (
@@ -42,12 +40,28 @@ export const getProducts = (
   });
 };
 
-export const getProductById = (productId: string) => {
-  return axiosInstance.get(`/products/${productId}`);
+export const getProductById = async (productId: number) => {
+  try {
+    return await axiosInstance.get(`/products/${productId}`);
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error('Axios Error:', error.response?.data || error.message);
+      throw new Error('데이터를 불러오는도중 에러가 발생했습니다.');
+    } else {
+      console.error('Unknown Error:', error);
+      throw new Error('기타 에러입니다.');
+    }
+  }
 };
 
-export const createProduct = (productData: Product) => {
-  return axiosInstance.post('/products', productData);
+export const createProduct = (
+  productData: CreateProductProps,
+): Promise<AxiosResponse> => {
+  return axiosInstance.post('/products', productData, {
+    headers: {
+      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
+    },
+  });
 };
 
 export const updateProduct = (

components/Card.tsx

@@ -4,11 +4,23 @@ import Image from 'next/image';
 import styles from './Card.module.css';
 import heartIcon from '@/public/ic_heart.svg';
 import profile from '@/public/profile.svg';
-import { ProductResult } from '@/api/productApi';
 import Link from 'next/link';
 
+export interface Product {
+  createdAt: string;
+  favoriteCount: number;
+  ownerNickname: string;
+  ownerId: number;
+  images: string[];
+  tags: string[];
+  price: number;
+  description: string;
+  name: string;
+  id: number;
+}
+
 interface CardProps {
-  products: ProductResult;
+  products: Product;
 }
 
 const Card: React.FC<CardProps> = ({ products }) => {
@@ -17,8 +29,8 @@ const Card: React.FC<CardProps> = ({ products }) => {
 
   return (
     <>
-      <div className={styles.CardBox}>
-        <Link href={`boards/${id}`}>
+      <Link href={`boards/${id}`}>
+        <div className={styles.CardBox}>
           <div className={styles.CardContent}>
             <div className={styles.bestContentText}>{name}</div>
             <div className={styles.bestContentImage}>
@@ -30,29 +42,29 @@ const Card: React.FC<CardProps> = ({ products }) => {
               ></Image>
             </div>
           </div>
-        </Link>
-        <div className={styles.cardInfo}>
-          <div className={styles.bestContentLeft}>
-            <Image
-              src={profile}
-              width={24}
-              height={24}
-              alt="프로파일이미지"
-            ></Image>
-            <div className={styles.nickName}>{ownerNickname}</div>
-            <div className={styles.date}>{createdAt}</div>
-          </div>
-          <div className={styles.heartCount}>
-            <Image
-              src={heartIcon}
-              width={24}
-              height={24}
-              alt="좋아요버튼"
-            ></Image>
-            <div className={styles.heartCountNum}>{favoriteCount}+</div>
+          <div className={styles.cardInfo}>
+            <div className={styles.bestContentLeft}>
+              <Image
+                src={profile}
+                width={24}
+                height={24}
+                alt="프로파일이미지"
+              ></Image>
+              <div className={styles.nickName}>{ownerNickname}</div>
+              <div className={styles.date}>{createdAt}</div>
+            </div>
+            <div className={styles.heartCount}>
+              <Image
+                src={heartIcon}
+                width={24}
+                height={24}
+                alt="좋아요버튼"
+              ></Image>
+              <div className={styles.heartCountNum}>{favoriteCount}+</div>
+            </div>
           </div>
         </div>
-      </div>
+      </Link>
     </>
   );
 };

components/Comment.module.css

@@ -0,0 +1,44 @@
+.comment {
+  padding-top: 4rem;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #fcfcfc;
+}
+
+.comment-top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.content {
+  font-weight: 400;
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  color: #1f2937;
+}
+
+.comment-bottom {
+  padding: 2.4rem 1.2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.profile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4em;
+}
+
+.nickName {
+  font-weight: 400;
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: #4b5563;
+}
+
+.date {
+  font-weight: 400;
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: #9ca3af;
+}

components/Comment.tsx

@@ -0,0 +1,50 @@
+import Image from 'next/image';
+import React from 'react';
+import profile from '@/public/profile.svg';
+import Iconkebab from '@/public/ic_kebab.svg';
+import styles from './Comment.module.css';
+
+interface Writer {
+  image: string;
+  nickname: string;
+  id: number;
+}
+
+export interface Comment {
+  writer: Writer;
+  updatedAt: string;
+  createdAt: string;
+  content: string;
+  id: number;
+}
+
+export interface CommentProps {
+  comment: Comment;
+}
+
+const Comment: React.FC<CommentProps> = ({ comment }) => {
+  return (
+    <div className={styles.comment}>
+      <div className={styles['comment-top']}>
+        <div className={styles.content}>{comment.content}</div>
+        <Image src={Iconkebab} alt=""></Image>
+      </div>
+      <div className={styles['comment-bottom']}>
+        <div>
+          <Image
+            src={profile}
+            width={24}
+            height={24}
+            alt="프로파일이미지"
+          ></Image>
+        </div>
+        <div className={styles.profile}>
+          <div className={styles.nickName}>{comment.writer.nickname}</div>
+          <div className={styles.date}>{comment.createdAt}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;

components/common/Button.tsx

@@ -1,18 +1,17 @@
 import { ReactNode } from 'react';
 import styles from './Button.module.css';
 
-interface ButtonProps {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: ReactNode;
   addClassName?: string | string[];
   handleClick?: () => void;
-  disabled: boolean;
 }
 
 function Button({
   children,
   addClassName,
   handleClick,
-  disabled,
+  ...props
 }: ButtonProps) {
   const buttonClass = Array.isArray(addClassName)
     ? addClassName.join(' ')
@@ -24,7 +23,7 @@ function Button({
         type="button"
         className={`${styles.button} ${buttonClass}`}
         onClick={handleClick}
-        disabled={disabled}
+        {...props}
       >
         {children}
       </button>