임시로 넣었던 데이터를 db에서 받아와보자

product DB

app > (tabs) > products > page.tsx

import ListProduct from "../../../components/list-product";
import db from "../../../lib/db"

async function getProducts() {
    const products = await db.product.findMany({
        select: {
            title: true,
            price: true,
            created_at: true,
            photo: true,
            id: true
        }
    })
    return products
}

export default async function Products() {
    const products = await getProducts();
    return (
        <div>
            {products.map((product) => (
                <ListProduct key={product.id} {...product} />
            ))}
        </div>
    )
}

List 형태의 product component

component > list-product.tsx

interface ListProductProps{
    title: string;
    price: number;
    created_at: Date;  // type은 string이 아닌 Date
    photo: string;
    id: number;
}
export default function ListProduct({
    title,
    price,
    created_at,
    photo,
    id
} : ListProductProps) {
    return <div/>
}

확인이 되었다면,

prisma studio에 이미지 db추가

• id는 빈 채로 저장해야 에러가 안남 (autoIncrease라서 그런가?)

return 하는 부분에 이미지를 로드

component > list-product.tsx