Merge pull request #297 from jangyonghan/Next-장용한-sprint10

[장용한] Sprint10

api/types/articleApi.tsx

@@ -0,0 +1,13 @@
+import axios from "axios";
+
+const API_URL = "https://panda-market-api.vercel.app";
+
+export const postArticle = async (body: FormData) => {
+  try {
+    const response = await axios.post(API_URL, body);
+    return response.data;
+  } catch (error) {
+    console.error("Error posting board:", error);
+    throw error;
+  }
+};

api/types/comment.d.ts

@@ -0,0 +1,10 @@
+export interface Comment {
+  updateAt?: string;
+  createdAt: string;
+  likeCount: number;
+  image: string;
+  content: string;
+  title: string;
+  nickname: string;
+  id?: number;
+}

components/BestComment.tsx

@@ -1,18 +1,8 @@
 import { useEffect, useState } from "react";
-import CommentCard from "./CommentCard";
+import CommentCard from "./CommentCards";
 import axios from "@/lib/axios";
 import style from "@/components/BestComment.module.css";
-
-interface Comment {
-  updateAt: string;
-  createdAt: string;
-  likeCount: number;
-  image: string;
-  content: string;
-  title: string;
-  nickname: string;
-  id: number;
-}
+import { Comment } from "@/api/types/comment";
 
 interface CommentList {
   list: Comment[];
@@ -56,11 +46,11 @@ const BestComment = () => {
   return (
     <div className={style.bestCommentContainer}>
       <h1 className={style.sectionTitle}>베트스 게시글</h1>
-      <div className={style.bestCommentsCard}>
+      <ul className={style.bestCommentsCard}>
         <li>
           <CommentCard comments={comment} showBest={true} />
         </li>
-      </div>
+      </ul>
     </div>
   );
 };

components/CommentCards.tsx

@@ -0,0 +1,45 @@
+import style from "@/components/CommentCards.module.css";
+import Best from "@/image/icons/ic_best.svg";
+import Heart from "@/image/icons/ic_heart.svg";
+import { Comment } from "@/api/types/comment";
+import Link from "next/link";
+
+interface CommentProps {
+  comments: Comment[];
+  showBest?: boolean;
+}
+
+const CommentCards: React.FC<CommentProps> = ({
+  comments,
+  showBest = false,
+}) => {
+  return (
+    <>
+      {comments.map((comments) => (
+        <Link href={`/boards/${comments.id}`}>
+          <div key={comments.id} className={style.cardcontainer}>
+            {showBest && <Best className={style.besticon} />}
+            <div className={style.sectioncontent}>
+              <p className={style.commentcontent}>{comments.content}</p>
+              <img
+                src={comments.image}
+                alt={comments.title}
+                className={style.commentimage}
+              />
+            </div>
+            <div className={style.commentmetacontainer}>
+              <div className={style.commentmeta}>
+                <span>{comments.nickname}</span>
+                <Heart />
+                <span>{comments.likeCount}</span>
+              </div>
+              <p>{comments.createdAt}</p>
+            </div>
+          </div>
+        </Link>
+      ))}
+    </>
+  );
+};
+
+export default CommentCards;

components/FileInput.module.css

@@ -0,0 +1,18 @@
+.fileInputcontainer {
+  position: relative;
+}
+
+.button {
+  position: absolute;
+  background-color: transparent;
+  border: none;
+  left: 240px;
+  top: 8px;
+  cursor: pointer;
+}
+
+.inputImage {
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+}

components/FileInput.tsx

@@ -0,0 +1,63 @@
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import style from "./FileInput.module.css";
+import Xbutton from "@/image/icons/ic_X.svg";
+
+interface FileInputProps {
+  id: string;
+  name: string;
+  value: File | null;
+  onChange: (name: string, file: File | null) => void;
+}
+
+function FileInput({ name, value, onChange }: FileInputProps) {
+  const [preview, setPreview] = useState<string>();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const nextValue =
+      e.target.files && e.target.files.length > 0 ? e.target.files[0] : null;
+    onChange(name, nextValue);
+  };
+
+  const handleClearClick = () => {
+    const inputNode = inputRef.current;
+    if (!inputNode) return;
+
+    inputNode.value = "";
+    onChange(name, null);
+  };
+
+  useEffect(() => {
+    if (!value) return;
+
+    const nextPreview = URL.createObjectURL(value);
+    setPreview(nextPreview);
+
+    return () => {
+      setPreview(undefined);
+      URL.revokeObjectURL(nextPreview);
+    };
+  }, [value]);
+
+  return (
+    <div className={style.fileInputcontainer}>
+      <input
+        id="imgFile"
+        type="file"
+        accept="image/png, image/jpeg"
+        onChange={handleChange}
+        ref={inputRef}
+      />
+      {value && (
+        <>
+          <button onClick={handleClearClick} className={style.button}>
+            <Xbutton alt="취소버튼" />
+          </button>
+          <img src={preview} alt="" className={style.inputImage} />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default FileInput;

components/Header.tsx

@@ -15,7 +15,7 @@ const Header = () => {
         </Link>
         <nav>
           <ul className={style.headusedmarket}>
-            <Link href="/Boards">
+            <Link href="/boards">
               <li className={style.usedmarket}>자유게시판</li>
             </Link>
             <li className={style.usedmarket}>

components/SearchForm.module.css

@@ -1,3 +1,15 @@
 .commentcontiner {
   margin-top: 40px;
 }
+
+.sronly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  border: 0;
+  clip: rect(0 0 0 0);
+}

components/SearchForm.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent, FormEvent, useEffect, useState } from "react";
 import DropDown from "./DropDown";
 import style from "@/components/SearchForm.module.css";
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 const SearchForm = ({ initalValue = "" }) => {
   const router = useRouter();
@@ -24,9 +25,15 @@ const SearchForm = ({ initalValue = "" }) => {
     <>
       <div className={style.commentcontiner}>
         <h1>게시글</h1>
-        <button>글쓰기</button>
+        <Link href={"/addboards"}>
+          <button>글쓰기</button>
+        </Link>
         <form onSubmit={handleSubmit}>
+          <label htmlFor="search" className={style.sronly}>
+            게시글 검색
+          </label>
           <input
+            id="search"
             name="keyword"
             value={value}
             placeholder="검색할 상품을 입력해주세요"

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.51.23",
     "axios": "^1.7.3",
     "next": "13.5.6",
     "react": "^18",