1. 비디오 FORM 만들기 -유튜브 클론 코딩

video Page 만들기

위 사진의 진행순서대로 기록

 

1. Components - views - videoUploadPage.js 생성

2. App.js 파일에 라우터 등록 -

<Route exact path="/video/upload" component={Auth(VideoUploadPage, null)} />

 

3 ,4 ,5 ,6 단계 통합 코드 (5. 에서 'npm install react-dropzone --save' 는 client폴더 즉, React에서 다운받아주도록한다.)

videoUploadPage.js ↓

import React, { useState } from 'react'
import { Typography, Button, Form, message, Input, Icon } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import Dropzone from 'react-dropzone'

const { TextArea } = Input
const { Title, Text } = Typography

const PrivateOptions = [
  { value: 0, label: 'Private' },
  { value: 1, label: 'Public' },
]

const CategoryOptions = [
  { value: 0, label: 'Film & Animation' },
  { value: 1, label: 'Autos & Vehicles' },
  { value: 2, label: 'Music' },
  { value: 3, label: 'Pets & Animals' },
]
const VideoUploadPage = () => {
  const [VideoTitle, setVideoTitle] = useState('')
  const [Description, setDescription] = useState('')
  const [Private, setPrivate] = useState(0)
  const [Category, setCategory] = useState('Film & Animation')

  const onTitleChange = (e) => {
    setVideoTitle(e.currentTarget.value)
  }
  const onDescriptionChange = (e) => {
    setDescription(e.currentTarget.value)
  }
  const onPrivateChange = (e) => {
    setPrivate(e.currentTarget.value)
  }
  const onCategoryChange = (e) => {
    setCategory(e.currentTarget.value)
  }
  return (
    <div
      style={{
        maxWidth: '700px',
        margin: '2rem auto',
      }}
    >
      <div
        style={{
          textAlign: 'center',
          marginBottom: '2rem',
        }}
      >
        <Title level={2}>
          <Text keyboard>Upload Video</Text>
        </Title>
      </div>

      <Form onSubmit>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          {/* Drop zone 부분*/}

          <Dropzone onDrop multiple maxSize>
            {({ getRootProps, getInputProps }) => (
              <div
                style={{
                  width: '300px',
                  height: '240px',
                  border: '1px solid lightgray',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                {...getRootProps()}
              >
                <input {...getInputProps()} />
                <PlusOutlined style={{ fontSize: '5rem' }} />
              </div>
            )}
          </Dropzone>
          {/* 썸네일부분 */}
          <div>
            <img src alt />
          </div>
        </div>
        <label>Title</label>
        <Input onChange={onTitleChange} value={VideoTitle} />
        <br />
        <br />
        <label>Description</label>
        <TextArea onChange={onDescriptionChange} value={Description} />
        <br />
        <br />
        <select onChange={onPrivateChange}>
          {PrivateOptions.map((
            item,
            index //map함수는 무조건 key값을 줘야한다.(성능문제)
          ) => (
            <option key={index} value={item.value}>
              {item.label}
            </option>
          ))}
        </select>
        <br />
        <br />
        <select onChange={onCategoryChange}>
          {CategoryOptions.map((
            item,
            index //map함수는 무조건 key값을 줘야한다.(성능문제)
          ) => (
            <option key={index} value={item.value}>
              {item.label}
            </option>
          ))}
        </select>
        <br />
        <br />
        <Button type="primary" size="large" onClick>
          Submit
        </Button>
      </Form>
    </div>
  )
}

export default VideoUploadPage

video/upload 접속결과

 위 코드에 대한 동영상 강의 - John Ahn님 강의