item

들어가기
각각의 item의 detail page
그리고 상품 upload page
pages/items/[id].tsx 와 upload.tsx 두개의 page로 구성된다.

1. pages/items/[id].tsx

import type { NextPage } from 'next'
import Button from '../../components/button'
import Layout from '../../components/layout'

const ItemDetail: NextPage = () => {
  return (
    <Layout canGoBack>
      <div className="px-4 py-10">
        <div>
          <div className="h-96 bg-slate-400" />
          <div className="flex cursor-pointer py-3 border-b items-center space-x-3">
            <div className="w-12 h-12 rounded-full bg-fuchsia-300" />
            <div>
              <p className="text-sm font-medium text-gray-700">Steve Jebs</p>
              <p className="rext-xs font-medium">View profile &rarr;</p>
            </div>
          </div>
          <div className="mt-10 ">
            <h1 className="text-3xl font-bold text-gray-900">Galaxy S50</h1>
            <p className="text-3xl mt-3 ">$140</p>
            <p className="text-base my-6 text-gray-800">
              My money&apos;s in that office, right? If she start giving me some
              bullshit about it ain&apos;t there, and we got to go someplace
              else and get it, I&apos;m gonna shoot you in the head then and
              there. Then I&apos;m gonna shoot that bitch in the kneecaps, find
              out where my goddamn money is. She gonna tell me too. Hey, look at
              me when I&apos;m talking to you, motherfucker. You listen: we go
              in there, and that ni**a Winston or anybody else is in there, you
              the first motherfucker to get shot. You understand?
            </p>
            <div className="flex items-center justify-between">
              <Button large text="Talk to seller" />
              <button className="p-3 flex items-center justify-center hover:text-orange-500">
                <svg
                  className="h-6 w-6 "
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  aria-hidden="true"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div className="mt-6">
          <h2 className="text-2xl font-bold text-gray-800">Similar items</h2>
          <div className="mt-5 grid grid-cols-3 gap-4">
            {[1, 2, 3, 4, 5, 6].map((_, i) => (
              <div key={i}>
                <div className="h-36 w-full bg-slate-400" />
                <h3>Galaxy S60</h3>
                <p className="text-sm font-medium text-gray-900">$6</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  )
}

export default ItemDetail

2. pages/items/upload

import type { NextPage } from 'next'
import Button from '../../components/button'
import Input from '../../components/input'
import Layout from '../../components/layout'
import TextArea from '../../components/textarea'

const Upload: NextPage = () => {
  return (
    <Layout canGoBack title="Upload Product">
      <form className="px-4 space-y-5 py-10">
        <div>
          <label className="w-full cursor-pointer text-gray-600 hover:border-orange-500 hover:text-orange-500 flex items-center justify-center border-2 border-dashed border-gray-300 h-48 rounded-md">
            <svg
              className="h-12 w-12"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 48 48"
              aria-hidden="true"
            >
              <path
                d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                strokeWidth={2}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            <input className="hidden" type="file" /> ///fileUpload시 hidden으로 처리
          </label>
        </div>
        <div className="my-5">
          <Input required label="Name" name="name" type="text" /> ///name input
          <Input
            required
            label="Price"
            placeholder="0.00"
            name="price"
            tepe="text"
            kind="price"
          /> ///Price input
          <TextArea name="description" label="Description" /> ///textArea component import

          <Button text="Upload item" />
        </div>
      </form>
    </Layout>
  )
}
export default Upload