Study/Node&React_youtube

[노드/리액트 유튜브] #3~4. 비디오 업로드 FORM 만들기

이지이즤 2022. 2. 13. 15:23
728x90

**본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 유튜브 클론 강의를 참고하여 작성하였습니다.**

 

 

1. 업로드 페이지 만들기
2. 업로드 페이지 route 만들기
3. 업로드 페이지 header tap 만들기

4. form template 만들기 : antdesign 사용
5. drop-zone 만들기
// VideoUploadPage.js

import React from 'react';
import { Typography, Button, Form, message, Input, Icon } from 'antd';
import Dropzone from 'react-dropzone';

const { TextArea } = Input;
const { Title } = Typography;

function VideoUploadPage(){
    return(
        <div style={{ maxWidth: '700px', margin:'2rem auto'}}>
            <div style={{ testAlign:'center', marginBottom: '2rem'}}>
                <Title level={2}>Upload Video</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',
                        alignItems: 'center', justifyContent: 'center', display: 'flex'}} {...getRootProps()}>
                            <input {...getInputProps()} />
                            <Icon type="plus" style={{ fontSize:'3rem'}} />
                        </div>
                    )}
                    </Dropzone>

                    {/* Thumbnail */}
                    <div>
                        <img src alt />
                    </div>
                </div>
                <br />
                <br />
                <label>Title</label>
                <Input
                    onChange
                    value
                />
                <br />
                <br />
                <label>Description</label>
                <TextArea
                    onChange
                    value
                />
                <br />
                <br />

                <select onChange>
                    <option key value></option>
                </select>
                <br />
                <br />
                <select onChange>
                    <option keyvalue></option>
                </select>
                <br />
                <br />
                <Button type="primary" size="large" onClick>
                    Submit
                </Button>
            </Form>
        </div>
    )
}

export default VideoUploadPage

6. map, onchange func 만들기

 

결과물

 

728x90