사진 셀렉트

+import { useState } from "react";
 import styled from "styled-components";
 import styled from "styled-components";
 
 
 const Image = () => {
 const Image = () => {
+  const [file, setFile] = useState(undefined);
+  const [previewURL, setPreviewURL] = useState("");
+
+  //   const uploadImage = (file) => {
+  //     if (!file) {
+  //       return;
+  //     }
+  //   };
+
+  const selectImg = (e) => {
+    const reader = new FileReader();
+    const targetFile = e.target.files[0];
+    setFile(targetFile);
+    // uploadImage(targetFile);
+
+    reader.onloadend = () => {
+      setPreviewURL(reader.result);
+    };
+
+    reader.readAsDataURL(targetFile);
+  };
+
   return (
   return (
     <Container>
     <Container>
-      <ImgBox />
+      <ImgBox>
+        {file === undefined ? (
+          <>
+            <BlankBox />
+            <div>Click to add a photo</div>
+            <input
+              type="file"
+              style={{
+                marginTop: "5px",
+                position: "absolute",
+                zIndex: 0,
+                width: "90%",
+                height: "100%",
+                border: "none",
+                cursor: "pointer",
+                outline: "none",
+              }}
+              onChange={selectImg}
+            />
+          </>
+        ) : (
+          <img
+            alt={""}
+            style={{ objectFit: "cover", display: "flex", margin: "0 auto" }}
+            src={previewURL}
+          />
+        )}
+      </ImgBox>
       <Menu />
       <Menu />
     </Container>
     </Container>
   );
   );
@@ -26,12 +76,17 @@ const Container = styled.div`
   justify-content: center;
   justify-content: center;
 `;
 `;
 const ImgBox = styled.div`
 const ImgBox = styled.div`
+  position: relative;
   width: 40rem;
   width: 40rem;
   height: 30rem;
   height: 30rem;
   background-color: white;
   background-color: white;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
   border-radius: 2rem;
   border-radius: 2rem;
   margin-top: 2rem;
   margin-top: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
 `;
 `;
 
 
 const Box = styled.div`
 const Box = styled.div`
@@ -42,5 +97,13 @@ const Box = styled.div`
   background-color: white;
   background-color: white;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
 `;
 `;
+const BlankBox = styled.div`
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  width: 90%;
+  height: 50px;
+  background-color: white;
+`;
 
 
 export default Image;
 export default Image;