import React, { useState } from 'react'
import Header from './components/Header';
import './style/Main.css';
require('dotenv').config();

export default function Main() {
    const [imgBase64, setImgBase64] = useState("");
    const [img, setImage] = useState(null);
    const handleChangeFile = (event) => {
        let reader = new FileReader();
        reader.onloadend = () => {
            const base64 = reader.result;
            if (base64) {
                setImgBase64(base64.toString());
            }
        }
        if (event.target.files[0]) {
            reader.readAsDataURL(event.target.files[0]); // 1. 파일을 읽어 버퍼에 저장합니다.
            setImage(event.target.files[0]); // 파일 상태 업데이트
          }
    }
    return (
        <div>
            <Header/>
            <span>This is Main Page</span>
            <div className="Image-Preview-Container" style={{"backgroundColor": "#efefef", "width":"400px", "height": "400px"}}>
            <img className="Image-Preview" alt="preview"src={imgBase64}></img>
            </div>
            <div className="Image_input">
                <input type="file" name="file" onChange={handleChangeFile}/>
                <button type="button" onClick={null}/>
            </div>
        </div>
    )
}