index.tsx(tailwind), enter.tsx, _app.tsx

들어가기
웹에 접속했을 떄, 화면에 뜨는 맨처음 페이지,
팔 물건들의 나열임.
모두다 pages에 들어가는 파일들이다,

index.tsx

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

const Home: NextPage = () => {
  return (
    <Layout title="Home" hasTabBar>
      <div className="flex flex-col space-y-5 py-10 mb-10">
        {[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map((_, i) => (
          <Item
            key={i}
            id={i}
            title="iPhone 12"
            price={99}
            comments={3}
            hearts={3}
          ></Item>  ///Item component를 map으로 여러개 뿌리는 방법을 잘 봐 놓는다!!!
                    ///반드시 key와 id가 들어가야 함.
        ))}
        <FloatingButton href='/items/upload'> ///FloatingButton component 
                                               ///가운데 모양부분은 children으로
                                               ///받는다.
                                               ///clikc시 upload page로 이동시킴
          <svg
            className="h-12 w-15"
            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="M12 6v6m0 0v6m0-6h6m-6 0H6"
            />
          </svg>
        </FloatingButton>
      </div>
    </Layout>
  )
}

export default Home

2. enter.tsx

import { useState } from 'react'
import type { NextPage } from 'next'
import Input from '../components/input'
import Button from '../components/button'

function cls(...classnames: string[]) {
  return classnames.join('')
}

export function Enter() {
  const [method, setMethod] = useState<'email' | 'phone'>('email')
  const onEmailClick = () => setMethod('email')
  const onPhoneClick = () => setMethod('phone')
  ///login방법을 email, phone두가지 방법으로 하기 위해서
  ///useState로 email, phone 두 state를 만들어 놓음.

  return (
    <div className="mt-16">
      <h3 className="text-3xl font-bold text-center">Enter to Apple Market</h3>
      <div className="mt-16">
        <div className="flex flex-col items-center">
          <h5 className="text-sm text-gray-500 font-medium">Enter using:</h5>
          <div className="grid grid-cols-2 gap-10 mt-8 border-b w-full pb-2">
            <button
              className={cls(
                'pb-4 font-medium border-b-2',
                method === 'email'
                  ? ' border-red-500  text-red-500'
                  : ' border-transparent hover:text-gray-400 '
              )}
              onClick={onEmailClick}
            >
              Email
            </button> ///클릭이 됬을떄(method) 색깔이 빨간색이 되어있게 함.
            
            <button
              className={cls(
                'pb-4 border-b-2 font-medium',
                method === 'phone'
                  ? ' border-red-500 text-red-500'
                  : ' border-transparent hover:text-gray-400 '
              )}
              onClick={onPhoneClick}
            >
              Phone
            </button>   ///클릭이 됬을떄(method) 색깔이 빨간색이 되어있게 함.
          </div>
        </div>
        <form className="flex flex-col mt-8 space-y-4 mx-5">
          {method === 'email' ? (
            <Input name="email" label="Email address" type="email" required />
          ) : null} 
          ///method가 email일때, 보여지는 화면 설정!!
          ///Input component를 사용함
          
          {method === 'phone' ? (
            <Input
              name="phone"
              label="phone number"
              type="number"
              kind="phone"
              required
            />
          ) : null}
          ///methid가 phone 일떄 ,Input component 설정. 
          
          {method === 'email' ? <Button text={'Get login link'} /> : null}
          {method === 'phone' ? (
            <Button text={'Get one-time password'} />
          ) : null}
        </form>
        
        <div className="mt-6 relative">
          <div className="absolute w-full border-t border-gray-300" />
          <div className="relative -top-8 flex items-center justify-center">
            <span className="mt-5 bg-white text-gray-500 px-2">
              Or Enter With
            </span>  ///밑에 줄긋기 되는 부분, 자주사용되는 부분이니 유심히 봐 놓는다.
          </div>
        </div>
      </div>
    </div>
  )
}

export default Enter

3. _app.tsx

가장 기본이 되는 tsx파일임.

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div className='w-full max-w-lg mx-auto'> ///최대 크기를 lg로 잡아놓음
                                              ///mx-auto는 가운데 정렬임.
      <Component {...pageProps} />
    </div>
  )
}

export default MyApp