diff --git a/api/types/articleApi.tsx b/api/types/articleApi.tsx new file mode 100644 index 000000000..3b57acae9 --- /dev/null +++ b/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; + } +}; diff --git a/api/types/comment.d.ts b/api/types/comment.d.ts new file mode 100644 index 000000000..d0ba71853 --- /dev/null +++ b/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; +} diff --git a/components/BestComment.tsx b/components/BestComment.tsx index ab09c653d..2b095f37b 100644 --- a/components/BestComment.tsx +++ b/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 (

베트스 게시글

-
+
+
); }; diff --git a/components/CommentCard.tsx b/components/CommentCard.tsx deleted file mode 100644 index 9bc2d5c86..000000000 --- a/components/CommentCard.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import style from "@/components/CommentCard.module.css"; -import Best from "@/image/icons/ic_best.svg"; -import Heart from "@/image/icons/ic_heart.svg"; - -interface Comment { - updateAt: string; - createdAt: string; - likeCount: number; - image: string; - content: string; - title: string; - nickname: string; - id: number; -} - -interface CommentProps { - comments: Comment[]; - showBest?: boolean; -} - -const CommentCard: React.FC = ({ - comments, - showBest = false, -}) => { - return ( - <> - {comments.map((comments) => ( -
- {showBest && } -
-

{comments.content}

- {comments.title} -
-
-
- {comments.nickname} - - {comments.likeCount} -
-

{comments.createdAt}

-
-
- ))} - - ); -}; - -export default CommentCard; diff --git a/components/CommentCard.module.css b/components/CommentCards.module.css similarity index 100% rename from components/CommentCard.module.css rename to components/CommentCards.module.css diff --git a/components/CommentCards.tsx b/components/CommentCards.tsx new file mode 100644 index 000000000..5d3ac8cd5 --- /dev/null +++ b/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 = ({ + comments, + showBest = false, +}) => { + return ( + <> + {comments.map((comments) => ( + +
+ {showBest && } +
+

{comments.content}

+ {comments.title} +
+
+
+ {comments.nickname} + + {comments.likeCount} +
+

{comments.createdAt}

+
+
+ + ))} + + ); +}; + +export default CommentCards; diff --git a/components/FileInput.module.css b/components/FileInput.module.css new file mode 100644 index 000000000..2269d4882 --- /dev/null +++ b/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; +} diff --git a/components/FileInput.tsx b/components/FileInput.tsx new file mode 100644 index 000000000..9c1c8c9aa --- /dev/null +++ b/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(); + const inputRef = useRef(null); + + const handleChange = (e: ChangeEvent) => { + 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 ( +
+ + {value && ( + <> + + + + )} +
+ ); +} + +export default FileInput; diff --git a/components/Header.tsx b/components/Header.tsx index 66c5a183d..b930516ad 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -15,7 +15,7 @@ const Header = () => {