diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index 021681f4..00000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import '@/styles/globals.css' -import type { AppProps } from 'next/app' - -export default function App({ Component, pageProps }: AppProps) { - return -} diff --git a/pages/_document.tsx b/pages/_document.tsx deleted file mode 100644 index 54e8bf3e..00000000 --- a/pages/_document.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Html, Head, Main, NextScript } from 'next/document' - -export default function Document() { - return ( - - - -
- - - - ) -} diff --git a/pages/api/hello.ts b/pages/api/hello.ts deleted file mode 100644 index f8bcc7e5..00000000 --- a/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' - -type Data = { - name: string -} - -export default function handler( - req: NextApiRequest, - res: NextApiResponse -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/pages/index.tsx b/pages/index.tsx deleted file mode 100644 index 02c4dee0..00000000 --- a/pages/index.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import Head from 'next/head' -import Image from 'next/image' -import { Inter } from 'next/font/google' -import styles from '@/styles/Home.module.css' - -const inter = Inter({ subsets: ['latin'] }) - -export default function Home() { - return ( - <> - - Create Next App - - - - -
-
-

- Get started by editing  - pages/index.tsx -

- -
- -
- Next.js Logo -
- - -
- - ) -} diff --git a/public/empty_Icon.svg b/public/empty_Icon.svg new file mode 100644 index 00000000..dbac5014 --- /dev/null +++ b/public/empty_Icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/addboard/page.tsx b/src/app/addboard/page.tsx new file mode 100644 index 00000000..ff29ca34 --- /dev/null +++ b/src/app/addboard/page.tsx @@ -0,0 +1,50 @@ +"use client"; +import AddImage from "@/components/AddImage"; +import InputText from "@/components/InputText"; +import TextArea from "@/components/TextArea"; +import React, { useEffect, useState } from "react"; + +const Page = () => { + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + const [disable, setDisable] = useState(true); + const [buttonColor, setButtonColor] = useState("#9CA3AF"); + + useEffect(() => { + if (title && content !== "") { + setButtonColor("#3692FF"); + setDisable(false); + } else { + setButtonColor("#9CA3AF"); + setDisable(true); + } + }, [title, content]); + + return ( +
+
+ 게시글 쓰기 + +
+ +
+ +
+ +
+ +
+ +
+
+ ); +}; +export default AddComment; diff --git a/src/components/AddImage.tsx b/src/components/AddImage.tsx new file mode 100644 index 00000000..8d1b0a8b --- /dev/null +++ b/src/components/AddImage.tsx @@ -0,0 +1,68 @@ +"use client"; +import { IoIosClose } from "react-icons/io"; +import React, { useEffect, useState } from "react"; +import { GoPlus } from "react-icons/go"; + +type Props = {}; + +const AddImage = (props: Props) => { + const [preview, setPreview] = useState(null); + + const handleFileChange = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + const fileURL = URL.createObjectURL(file); + setPreview(fileURL); + } + }; + + const handleCancel = () => { + setPreview(null); + if (preview) { + URL.revokeObjectURL(preview); + } + }; + + return ( +
+ 이미지 +
+ + + {preview && ( +
+ preview + +
+ )} + + +
+
+ ); +}; + +export default AddImage; diff --git a/src/components/Article.tsx b/src/components/Article.tsx index a55f79f6..f05b23d5 100644 --- a/src/components/Article.tsx +++ b/src/components/Article.tsx @@ -1,24 +1,13 @@ +import { Articles } from "@/types/article"; import Image from "next/image"; import React from "react"; import { IoMdHeartEmpty } from "react-icons/io"; -interface Articles { - article: { - id: number; - title: string; - content: string; - image: string; - likeCount: number; - createdAt: string; - updatedAt: string; - writer: { - nickname: string; - id: number; - }; - }; +interface Article { + article: Articles; } -const Article = ({ article }: Articles) => { +const Article = ({ article }: Article) => { const formattedDate = new Date(article.createdAt) .toLocaleDateString("ko-KR", { year: "numeric", diff --git a/src/components/BestArticle.tsx b/src/components/BestArticle.tsx index fc973b51..f54dea98 100644 --- a/src/components/BestArticle.tsx +++ b/src/components/BestArticle.tsx @@ -1,31 +1,20 @@ +import { Articles } from "@/types/article"; import Image from "next/image"; import React from "react"; import { IoMdHeartEmpty } from "react-icons/io"; type Props = { - article: { - id: number; - title: string; - content: string; - image: string; - likeCount: number; - createdAt: string; - updatedAt: string; - writer: { - nickname: string; - id: number; - }; - }; + article: Articles; }; const BestArticle = ({ article }: Props) => { - const formattedDate = new Date(article.createdAt) - .toLocaleDateString("ko-KR", { - year: "numeric", - month: "2-digit", - day: "2-digit", - }) - .replace(/\.$/, ""); + const formattedDate = new Date(article.createdAt) + .toLocaleDateString("ko-KR", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }) + .replace(/\.$/, ""); return (
diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx new file mode 100644 index 00000000..a1571b9e --- /dev/null +++ b/src/components/Comment.tsx @@ -0,0 +1,47 @@ +import { CommentType } from "@/types/comment"; +import Image from "next/image"; +import React from "react"; +import { BsThreeDotsVertical } from "react-icons/bs"; + +type Props = { + comment: CommentType; +}; + +const Comment = ({ comment }: Props) => { + const formattedDateForComment = comment?.createdAt + ? new Date(comment.createdAt) + .toLocaleDateString("ko-KR", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }) + .replace(/\.$/, "") + : ""; + + return ( +
+
+ + {comment.content} + + +
+ +
+
+ profile +
+
+ + {comment.writer.nickname} + + + {formattedDateForComment} + +
+
+
+ ); +}; + +export default Comment; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 03ed38b0..a51c49b6 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,22 +1,27 @@ import Image from "next/image"; +import Link from "next/link"; import React from "react"; const Header = () => { return ( <> -
+
- logo + + logo + - - 판다마켓 - + + + 판다마켓 + + 자유게시판 diff --git a/src/components/InputText.tsx b/src/components/InputText.tsx new file mode 100644 index 00000000..abf3cfef --- /dev/null +++ b/src/components/InputText.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +type Props = { + setTitle: React.Dispatch>; +}; + +const InputText = ({ setTitle }: Props) => { + const handleChange = (e: React.ChangeEvent) => { + setTitle(e.target.value); + }; + + return ( +
+ + +
+ ); +}; + +export default InputText; diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx new file mode 100644 index 00000000..a80c7e7d --- /dev/null +++ b/src/components/Loading.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { motion } from "framer-motion"; + +type Props = {}; + +const Loading = (props: Props) => { + return ( +
+ + + +
+ ); +}; + +export default Loading; diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx new file mode 100644 index 00000000..ef76eb3c --- /dev/null +++ b/src/components/TextArea.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +type Props = { + setContent: React.Dispatch>; +}; + +const TextArea = ({ setContent }: Props) => { + const handleChange = (e: React.ChangeEvent) => { + setContent(e.target.value); + }; + + return ( +
+ +