Live

들어가기
live 방송을 위한 page.
pages/live/index.tsx, [id].tsx, create.tsx로 구성됨.

1. pages/live/index.tsx

import type { NextPage } from 'next'
import Link from 'next/link'
import FloatingButton from '../../components/floating-button'
import Layout from '../../components/layout'

const Live: NextPage = () => {
  return (
    <Layout hasTabBar title="라이브">
      <div className="py-10 divide-y-[1px] space-y-4">
        {[1, 1, 1, 1, 1, 1, 1].map((_, i) => (
          <Link key={i} href={`/live/${i}`}> ///클릭시 각각의 live 방송으로 이동!
          
            <a className="pt-4 block px-4 border-b shadow-lg">
              <div className="w-full rounded-md shadow-lg bg-slate-300 aspect-video" />
              <h3 className="text-gray-700 text-lg mt-2">
                Let&apos;s try potatos
              </h3>
              <h1 className="text-2xl pb-5 mt-2 font-bold text-gray-900">
                Galaxy S50
              </h1>
            </a>
          </Link>
        ))}
        <FloatingButton href='/live/create'> ///Floating Button import!!
                                             /// href입력해줌.
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
            ></path>
          </svg>
        </FloatingButton>
      </div>
    </Layout>
  )
}
export default Live

2. pages/live/[id].tsx

import type { NextPage } from 'next'
import Layout from '../../components/layout'
import Message from '../../components/message'

const Stream: NextPage = () => {
  return (
    <Layout canGoBack>
      <div className="py-10 px-4  space-y-4">
        <div className="w-full rounded-md shadow-sm bg-slate-300 aspect-video" /> ///aspext-video는 바디오 사지으에 맞게 설정됨..
        
        <div className="mt-5">
          <h1 className="text-3xl font-bold text-gray-900">Galaxy S50</h1>
          <span className="text-2xl block mt-3 text-gray-900">$140</span>
          <p className=" my-6 text-gray-700">
            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>
        <div> ///Live Chat부분 코딩!!
          <h2 className="text-2xl font-bold text-gray-900">Live Chat</h2>
          <div className='py-10 pb-18 h-[50vh] overflow-y-scroll px-4 space-y-4'>///overflow-y-scroll 집중해서 볼것!!
          
            <Message message='hi how much are you selling this item?' />
            <Message message='I want 50000' reversed/>
            <Message message='are you crazy?' />
            <Message message='hi how much are you selling this item?' />
            <Message message='I want 50000' reversed/>
            <Message message='are you crazy?' />
            <Message message='hi how much are you selling this item?' />
            <Message message='I want 50000' reversed/>
            <Message message='are you crazy?' />
            <Message message='hi how much are you selling this item?' />
            <Message message='I want 50000' reversed/>
            <Message message='are you crazy?' />
          </div>
          
          ///밑의 대화 입력창 코딩!!!
          <div className="fixed py-2 bg-white  bottom-0 inset-x-0">
            <div className="flex relative max-w-md items-center  w-full mx-auto">
              <input
                type="text"
                className="shadow-sm rounded-full w-full border-gray-300 focus:ring-orange-500 focus:outline-none pr-12 focus:border-orange-500"
              />
              <div className="absolute inset-y-0 flex py-1.5 pr-1.5 right-0">
                <button className="flex focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 items-center bg-orange-500 rounded-full px-3 hover:bg-orange-600 text-sm text-white">
                  &rarr;
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}

export default Stream

3. pages/live/create.tsx

live를 만드는 코딩!!!

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 Create: NextPage = () => {
  return (
    <Layout canGoBack title="Go Live">
      <form className=" space-y-5 py-10 px-4"> ///무조건 form으로 묶음..
        <Input required label="Name" name="name" type="text" />
        ///Input component에는 label, name, type
        
        <Input
          required
          label="Price"
          placeholder="0.00"
          name="price"
          type="text"
          kind="price"
        />
        <TextArea name="description" label="Description" />
		///TextArea에는 name과 label을 prop으로 받음.

        <Button text="Go live!" />
      </form>
    </Layout>
  )
}

export default Create