React Image Uploader

//------------------------------ MODULE -------------------------------------
import { useState, useRef } from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { Title, Motion } from "component";
import {apiCall} from "lib";
import AvatarEditor from 'react-avatar-editor';

//------------------------------ CSS ----------------------------------------
const StyledAuth = styled.div`
    grid-template-rows: 5% 85%;
    overflow: hidden;
`;
const StyledContent = styled.div`
    margin:8%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 2fr 8fr 1fr;
    grid-row-gap:2%;
`;
const StyledTitle = styled.div`
    grid-column: 1 / span 3;
    justify-content:left;
    align-content:flex-end;
    font-size:0.7em;
`;
const StyledInputBox = styled.div`
    grid-column: 1 / span 3;
    border-radius:0.5em;
    border: solid 1px #aaa;
    padding: 1%;    
    align-content:center;
    grid-template-columns: 12fr 2fr;
    height:60%;
`;
const StyledInput = styled.input`
`;
const StyledToggle1 = styled.div`
    align-items:center;
    ${(props) => props.gender == 1 ? 
        'background:#E73737; color:white; border: solid 0.1em #E73737;' :
        'background:white; color:#888; border: solid 0.1em #aaa;'
    }
    width:70%;
    font-size:0.8em;
    border-radius:0.5em;
`;
const StyledToggle2 = styled.div`
    align-items:center;
    ${(props) => props.gender == 2 ? 
        'background:#E73737; color:white; border: solid 0.1em #E73737;' :
        'background:white; color:#888; border: solid 0.1em #aaa;'
    }    
    width:70%;
    font-size:0.8em;
    border-radius:0.5em;
`;
const StyledUploadTitle = styled.div`
    grid-column: 1 / span 2;
    justify-content:start;
    font-size:0.7em;
    margin-bottom:3%;
    height:50%;
    align-self:center;
`
const StyledButton = styled.div`
    justify-self:right;
    align-content:center;
    color:white;
    background:#E73737;
    width:70%;
    font-size:0.8em;
    border-radius:0.5em;
    height:50%;
    align-self:center;
`;
const StyledImgBox = styled.div`
    grid-column: 1 / span 3;
    justify-content:center;
    align-content:center;
    padding:2%;
    height:80%;
`;
const StyledImg = styled.img`
    justify-self:center;
    align-self:center;
    border-radius:100%;
`;
const StyledSubmit = styled.div`
    grid-column: 1 / span 3;
    background:#E73737;
    align-content:center;
    color:white;
    font-size:0.8em;
    border-radius:0.5em;
`;

//------------------------------ COMPONENT ----------------------------------
const Auth = () => {
    //init
    const navigate = useNavigate();
    const imgInput = useRef();

    //state
    const [name, setName] = useState(null);
    const [birth, setBirth] = useState(null);
    const [gender, setGender] = useState(null);
    const [imgName, setImgName] = useState(null);
    
    //func
    const passLevel = () => {
        navigate('/Welcome');
    }

    const onImgInputBtnClick = (e) => {
        e.preventDefault();
        imgInput.current.click();
    }

    const onImgChange = async(e) => {
        setImgName(e.target.files[0]);
        /*
        const formData = new FormData();
        formData.append('tmpImg', e.target.files[0]);
        const params = {
            test : '123',
        }
        const result = await apiCall.post("/Join", formData );
        if(result.data) setImgName(result.data);   
        */
    }

    //render
    return (
        <>
        <Motion>
        <StyledAuth>
        <Title text="회원정보 입력"/>
        <StyledContent>
            <StyledTitle>사용자 이름 *</StyledTitle>            
            <StyledInputBox><StyledInput onChange={(e) => setName(e.target.value)}/></StyledInputBox>
            <StyledTitle>생년월일 *</StyledTitle>            
            <StyledInputBox><StyledInput onChange={(e) => setBirth(e.target.value)}/></StyledInputBox>            
            <StyledTitle>성별 *</StyledTitle>
            <StyledToggle1 gender={gender} onClick={()=>setGender(1)}>남자</StyledToggle1>
            <StyledToggle2 gender={gender} onClick={()=>setGender(2)}>여자</StyledToggle2>
            <StyledUploadTitle>사진 *</StyledUploadTitle>

            <input style= ref={imgInput} type='file' accept='image/*' onChange={onImgChange} />

            <StyledButton onClick={onImgInputBtnClick}>사진 업로드</StyledButton>
            <StyledImgBox>
            
                {imgName ? 
                    <>
                    <div>test</div>
                    <AvatarEditor
                        image={imgName}
                        width={150}
                        height={150}
                        border={0}
                        color={['255, 255, 255, 0.6']} // RGBA
                        scale={1.2}
                        rotate={0}
                    />
                    </> : null                
                }

            </StyledImgBox>
            <StyledSubmit onClick={passLevel}>회원가입 완료하기</StyledSubmit>
        </StyledContent>                 
        </StyledAuth>
        </Motion>
        </>
    );
}

export default Auth;