From 470ec479633343cf31e798395e4273367c1c3bb4 Mon Sep 17 00:00:00 2001 From: jangyonghan Date: Tue, 13 Aug 2024 10:49:13 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/types/comment.d.ts | 10 ++++++++++ components/BestComment.tsx | 18 ++++-------------- ...Card.module.css => CommentCards.module.css} | 0 .../{CommentCard.tsx => CommentCards.tsx} | 18 ++++-------------- components/SearchForm.module.css | 12 ++++++++++++ components/SearchForm.tsx | 4 ++++ pages/Boards.tsx | 16 +++------------- pages/comment/[id].tsx | 14 +++----------- pages/index.tsx | 14 -------------- pages/search.tsx | 14 ++------------ 10 files changed, 42 insertions(+), 78 deletions(-) create mode 100644 api/types/comment.d.ts rename components/{CommentCard.module.css => CommentCards.module.css} (100%) rename components/{CommentCard.tsx => CommentCards.tsx} (76%) 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.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/CommentCard.tsx b/components/CommentCards.tsx similarity index 76% rename from components/CommentCard.tsx rename to components/CommentCards.tsx index 9bc2d5c86..8fbfb15de 100644 --- a/components/CommentCard.tsx +++ b/components/CommentCards.tsx @@ -1,24 +1,14 @@ -import style from "@/components/CommentCard.module.css"; +import style from "@/components/CommentCards.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; -} +import { Comment } from "@/api/types/comment"; interface CommentProps { comments: Comment[]; showBest?: boolean; } -const CommentCard: React.FC = ({ +const CommentCards: React.FC = ({ comments, showBest = false, }) => { @@ -49,4 +39,4 @@ const CommentCard: React.FC = ({ ); }; -export default CommentCard; +export default CommentCards; diff --git a/components/SearchForm.module.css b/components/SearchForm.module.css index 035d48850..f10398612 100644 --- a/components/SearchForm.module.css +++ b/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); +} diff --git a/components/SearchForm.tsx b/components/SearchForm.tsx index 16e7edd1c..5e60bb2b7 100644 --- a/components/SearchForm.tsx +++ b/components/SearchForm.tsx @@ -26,7 +26,11 @@ const SearchForm = ({ initalValue = "" }) => {

게시글

+ { const [comment, setCommen] = useState([]); @@ -34,7 +24,7 @@ const Board = () => {
  • - +
    • ); diff --git a/pages/comment/[id].tsx b/pages/comment/[id].tsx index e7d23a867..80af543b2 100644 --- a/pages/comment/[id].tsx +++ b/pages/comment/[id].tsx @@ -1,25 +1,17 @@ import axios from "axios"; import { useEffect, useState } from "react"; import { useRouter } from "next/router"; - -interface comment { - images: string; - nickname: string; - id: number; - name: string; - content: string; - createdAt: string; -} +import type { Comment } from "@/api/types/comment"; export default function Comment() { - const [comment, setComment] = useState(null); + const [comment, setComment] = useState(null); const router = useRouter(); const { id } = router.query; async function getComment(postId: string | string[] | undefined) { if (!postId) return; const res = await axios.get(`/comments/${postId}`); - const nextComment = res.data; + const nextComment: Comment[] = res.data; setComment(nextComment); } diff --git a/pages/index.tsx b/pages/index.tsx index 4ecb5ce7b..f7fee7607 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,18 +1,4 @@ -import CommentCard from "@/components/CommentCard"; import HomePage from "@/pages/HomePage"; -import axios from "@/lib/axios"; -import { useEffect, useState } from "react"; - -interface Comment { - updateAt: string; - createdAt: string; - likeCount: number; - image: string; - content: string; - title: string; - nickname: string; - id: number; -} export default function Home() { return ( diff --git a/pages/search.tsx b/pages/search.tsx index 0ff99b5ce..87a8444de 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -3,18 +3,8 @@ import { useRouter } from "next/router"; import BestComment from "@/components/BestComment"; import SearchFrom from "@/components/SearchForm"; import axios from "@/lib/axios"; -import CommentCard from "@/components/CommentCard"; - -interface Comment { - updateAt: string; - createdAt: string; - likeCount: number; - image: string; - content: string; - title: string; - nickname: string; - id: number; -} +import CommentCard from "@/components/CommentCards"; +import { Comment } from "@/api/types/comment"; const Search = () => { const [comment, setComment] = useState([]); From 5fd4022ae042a0e2e7bfec1670f0c8beff8f3f00 Mon Sep 17 00:00:00 2001 From: jangyonghan Date: Fri, 16 Aug 2024 17:44:46 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=EC=8A=A4=ED=94=84=EB=A6=B0=ED=8A=B8=2010?= =?UTF-8?q?=20=EB=AF=B8=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/types/articleApi.tsx | 13 +++ components/CommentCards.tsx | 2 +- components/FileInput.module.css | 18 ++++ components/FileInput.tsx | 63 ++++++++++++++ components/Header.tsx | 2 +- components/SearchForm.tsx | 5 +- package-lock.json | 25 ++++++ package.json | 1 + pages/_app.tsx | 9 +- pages/addboards.tsx | 111 +++++++++++++++++++++++++ pages/boards/[id].tsx | 54 ++++++++++++ pages/{Boards.tsx => boards/index.tsx} | 26 +++--- 12 files changed, 314 insertions(+), 15 deletions(-) create mode 100644 api/types/articleApi.tsx create mode 100644 components/FileInput.module.css create mode 100644 components/FileInput.tsx create mode 100644 pages/addboards.tsx create mode 100644 pages/boards/[id].tsx rename pages/{Boards.tsx => boards/index.tsx} (58%) diff --git a/api/types/articleApi.tsx b/api/types/articleApi.tsx new file mode 100644 index 000000000..5ad159d13 --- /dev/null +++ b/api/types/articleApi.tsx @@ -0,0 +1,13 @@ +import axios from "axios"; + +const API_URL = "https://learn.codeit.kr/api/film-reviews"; + +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/components/CommentCards.tsx b/components/CommentCards.tsx index 8fbfb15de..8c1b69084 100644 --- a/components/CommentCards.tsx +++ b/components/CommentCards.tsx @@ -15,7 +15,7 @@ const CommentCards: React.FC = ({ return ( <> {comments.map((comments) => ( -
    +
    {showBest && }

    {comments.content}

    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 = () => {