1. 추가 버튼 생성하기

2. 추가할 폼 컴포넌트 만들기 (프론트)
3. 업로드한 데이터 확인하기 (백)

1. 추가 버튼 생성하기

app > (tabs) > products > page.tsx

return (
        <div>
            <ProductList initialProducts={initialProducts}/>
            <Link
                href="/products/add"
                className="bg-orange-500 flex items-center justify-center rounded-full size-16 fixed bottom-24 right-8 text-white transition-colors hover:bg-orange-400"
            >
                <PlusIcon className="size-10" />
            </Link>
        </div>
    )

2. ‘products/add’ 페이지 추가

app > products > add > page.tsx

"use client";

import { useState } from "react";
import Button from "../../../components/button";
import Input from "../../../components/input";
import { PhotoIcon } from "@heroicons/react/24/solid";
import { uploadProduct } from "./actions";

export default function AddProduct() {
    const [preview, setPreview] = useState("");
    const onImageChange = (event:React.ChangeEvent<HTMLInputElement>) => {   
        const {
            target: {files},
        } = event;
        if(!files) return;
        const file = files[0];
        const urll = URL.createObjectURL(file); // URL을 생성하는 브라우저 API -> URL은 이 파일이 업로드된 메모리를 참조        
        setPreview(urll);
    }
    return (
        <div>
            <form action={uploadProduct} className="p-5 flex flex-col gap-5">
                <label
                htmlFor="photo"
                className="border-2 aspect-square flex items-center justify-center flex-col text-neutral-300 border-neutral-300 rounded-md border-dashed cursor-pointer bg-center bg-cover"
                // 미리보기
                style={{
                    backgroundImage: `url(${preview})`
                }} 
                >
                {preview === "" ? (
                    <>
                    <PhotoIcon className="w-20" />
                    <div className="text-neutral-400 text-sm">사진을 추가해주세요.</div>
                    </>
                ) : null}
                </label>
                <input
                onChange={onImageChange}
                type="file"
                id="photo"
                name="photo"
                accept="image/*"
                className="hidden"
                />
                <Input name="title" required placeholder="제목" type="text" />
                <Input name="price" type="number" required placeholder="가격" />
                <Input
                name="description"
                type="text"
                required
                placeholder="자세한 설명"
                />
                <Button text="작성 완료" />
            </form>
        </div>
    )
}

3. 데이터 확인

app > products > add > actions.ts

"use server"

export async function uploadProduct(formData:FormData) {
    const data = {
        Photo: formData.get("Photo"),
        title: formData.get("title"),
        price: formData.get("price"),
        description: formData.get("description"),
    }

    console.log(data);
}

받아올 데이터 속성들 선언 후,

콘솔로 찍어보기