0506

[삐돌이]

import React,{useState} from "react";

import styled,{css} from "styled-components";

import {MdAdd} from "react-icons/md";

import { useTodoDispatch, useTodoNextId } from "../todoContext";

const InsertFormPositioner = styled.div`

  width: 100%;

  position: absolute;

  bottom: 0;

  left: 0;

`

const InsertForm = styled.form`

  background: #f8f9fa;

  padding-left: 32px;

  padding-top: 32px;

  padding-right: 32px;

  padding-bottom: 72px;

  border-bottom-left-radius:16px;

  border-bottom-right-radius:16px;

  border-top:1px solid #e9ecef;

`;

const Input = styled.input`

  padding:12px;

  borard-radius:4px;

  border:1px solid #dee2e6;

  width:100%;

  outline:none;

  font-size:18px;

  boxsizing:border-box;

`;

const CircleButton = styled.button`

  background: #38d9a9;

  &:hover{

     background: #d2ee31;

  }

  &:active{

    background: #0fa3e8;

  }  

  width: 80px;

  height: 80px;

  display: block;

  align-items: center;

  justify-content: center;

  font-size: 60px;

  position: absolute;

  left: 50%;

  bottom: 0px;

  transform: translate(-50%, 50%);

  color: white;

  border-radius: 50%;

  border: none;

  outline: none;

  transition: 0.125s all ease-in;  

   ${props =>

    props.open &&

    css`

        background: #ff6b6b;

        &:hover {

            background: #ff8787;

        }

        &:active {

            background: #fa5252;

        }

        transform: translate(-50%, 50%) rotate(45deg);

    `}

`;

function TodoCreate(){

    const[open, setOpen]=useState(false);

    const[value ,setValue] = useState('');

    const dispatch = useTodoDispatch();

    const nextId = useTodoNextId();

    const [안내]태그제한으로등록되지않습니다-onToggle = () => setOpen(!open);

    const xxxxonChange = (e) => setValue(e.target.value);//01

    const xxxxonSubmit = (e) => {

        e.preventDefault(); // 새로고침 방지

       dispatch({

        type: 'CREATE',

        todo: {

        id: nextId.current,

        text: value,

        done: false

        }

       });

       setValue('');{/*입력하고 전송하고 input 빈공간으로 설정*/}

       setOpen(false);//할 목록에 추가하는 상태값 설정

       nextId.current += 1;//다음에 추가할 요소의 인덱스값을 설정

    };

    return(

        <>

            {open && (

                <InsertFormPositioner>

                    <InsertForm xxxxonSubmit={xxxxonSubmit} >

                        <Input

                         autoFocus

                         placeholder="할 일을 입력 후, Enter 를 누르세요"

                         xxxxonChange={xxxxonChange}

                         value={value}/>

                    </InsertForm>

                </InsertFormPositioner>

            )}

            <CircleButton xxxxonClick={onToggle} open={open}>

                <MdAdd/>

            </CircleButton>

        </>

    )

}

export default TodoCreate;