From 85dae1f8008d5651d81764e4fd2ca55664fd407e Mon Sep 17 00:00:00 2001 From: "z1top159@gmail.com" Date: Mon, 2 Dec 2024 14:57:08 +0900 Subject: [PATCH 01/14] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AllArticles.tsx | 2 +- pages/addboard.tsx | 1 - types/commontypes.ts | 8 ++++---- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/components/AllArticles.tsx b/components/AllArticles.tsx index 945d7d4ad..14fad3a15 100644 --- a/components/AllArticles.tsx +++ b/components/AllArticles.tsx @@ -25,7 +25,7 @@ export default function AllArticles() { const data = await getArticles({ orderBy: sortOrder, - page: page, + page, pageSize: 10, keyword: keyword, }); diff --git a/pages/addboard.tsx b/pages/addboard.tsx index 5bb5afe94..bda5774dd 100644 --- a/pages/addboard.tsx +++ b/pages/addboard.tsx @@ -34,7 +34,6 @@ export default function AddBoard() { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - console.log("Form submitted:", values); setValues(INITIAL_VALUES); }; diff --git a/types/commontypes.ts b/types/commontypes.ts index a52e49e97..7d8aceb19 100644 --- a/types/commontypes.ts +++ b/types/commontypes.ts @@ -1,13 +1,13 @@ export interface GetProductsParams { page?: number; pageSize?: number; - keyword?: string | undefined; + keyword?: string; orderBy?: string; } export interface GetProductCommentsParams { limit?: number; - cursor?: string | undefined; + cursor?: string; } // 상품 타입 정의 @@ -69,7 +69,7 @@ export interface GetCommentsResponse { export interface GetArticlesParams { page?: number; pageSize?: number; - keyword?: string | undefined; + keyword?: string; orderBy?: string; } @@ -113,7 +113,7 @@ export interface ImageInputProps { className?: string; name: string; value: File | null; - initialPreview?: string | undefined; + initialPreview?: string; onChange: (name: string, file: File | null) => void; } From 97dc7a2d525c7ea4825eefbf4d79b8228ceeeeef Mon Sep 17 00:00:00 2001 From: "z1top159@gmail.com" Date: Mon, 2 Dec 2024 16:42:42 +0900 Subject: [PATCH 02/14] =?UTF-8?q?refactor:=20=EC=83=81=ED=92=88=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88?= =?UTF-8?q?=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AddItem.tsx | 181 ++++++++++++++++++++++++++++++++++++ pages/additem.tsx | 32 +++++++ pages/api/hello.ts | 13 --- pages/items/[productId].tsx | 3 +- styles/additem.module.css | 158 +++++++++++++++++++++++++++++++ types/commontypes.ts | 33 +++++++ 6 files changed, 406 insertions(+), 14 deletions(-) create mode 100644 components/AddItem.tsx delete mode 100644 pages/api/hello.ts create mode 100644 styles/additem.module.css diff --git a/components/AddItem.tsx b/components/AddItem.tsx new file mode 100644 index 000000000..dd24d458c --- /dev/null +++ b/components/AddItem.tsx @@ -0,0 +1,181 @@ +import { useState } from "react"; +import ImgInput from "@/components/ImageInput"; +import resetImg from "@/public/svgs/ic_X.svg"; +import { useRouter } from "next/router"; +import { AddItemFormProps } from "@/types/commontypes"; +import Image from "next/image"; +import styles from "@/styles/additem.module.css"; + +const INITIAL_VALUE = { + name: "", + favorite: 0, + content: "", + price: "", + imgFile: null, + tags: [], +}; + +export default function AddItemForm({ + initialValues = INITIAL_VALUE, + initialPreview, + onSubmit, + onSubmitSuccess, +}: AddItemFormProps) { + const router = useRouter(); + const [values, setValues] = useState(initialValues); + const [submittingError, setSubmittingError] = useState(null); + const [tagInput, setTagInput] = useState(""); + + // 유효성 검사 + const isValidForm = + values.name && values.content && values.price && values.tags.length > 0; + + const handleChange = (name: string, value: any) => { + setValues((prevValues) => ({ + ...prevValues, + [name]: value, + })); + }; + + const handleInputChange = ( + e: React.ChangeEvent + ) => { + const { name, value } = e.target; + handleChange(name, value); + }; + + const handleFileChange = (name: string, file: File | null) => { + handleChange(name, file); + }; + + const handleTagInputChange = (e: React.ChangeEvent) => { + setTagInput(e.target.value); + }; + + const handleTagAdd = () => { + if (tagInput.trim() && !values.tags.includes(tagInput.trim())) { + handleChange("tags", [...values.tags, tagInput.trim()]); + setTagInput(""); + } + }; + + const handleTagKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + e.preventDefault(); + handleTagAdd(); + } + }; + + const handleTagRemove = (tagToRemove: string) => { + handleChange( + "tags", + values.tags.filter((tag) => tag !== tagToRemove) + ); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + const formData = new FormData(); + formData.append("name", values.name); + formData.append("favorite", values.favorite.toString()); + formData.append("content", values.content); + formData.append("price", values.price); + if (values.imgFile) formData.append("imgFile", values.imgFile); + formData.append("tags", JSON.stringify(values.tags)); + + const result = await onSubmit(formData); + if (!result) return; + + const { review } = result; + setValues(INITIAL_VALUE); + onSubmitSuccess(review); + + router.push("/items"); + }; + + return ( +
+
+
상품 등록하기
+ +
+
+
+
상품 이미지
+ +
+
+
상품명
+ +
+
+
상품 소개
+