diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index f1975a8..a56d6c4 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -15,12 +15,26 @@ const Home = () => { const [isOpen, setIsOpen] = useAtom(modalState); const [isSecondOpen, setIsSecond] = useState(false); const [sizeState, setSizeState] = useState([true, false, false]); + const [imgSrc, setImgSrc] = useState(null); const size = ["S", "M", "L"]; const handleEnroll = () => { // TODO: 등록 api 연결하기 }; + const onUpload = (e) => { + const file = e.target.files[0]; + const reader = new FileReader(); + reader.readAsDataURL(file); + + return new Promise((resolve) => { + reader.onload = () => { + setImgSrc(reader.result || null); + resolve(); + }; + }); + }; + return ( <> @@ -79,9 +93,36 @@ const Home = () => {
자동으로 입력해요! - - - + {imgSrc !== null ? ( + <> + + 영수증 사진 + + + + onUpload(e)} + id="file" + /> + + + ) : ( + + + onUpload(e)} + id="file" + /> + + )} )} @@ -206,6 +247,15 @@ const ImageUploadBox = styled.div` justify-content: center; align-items: center; margin: 1rem auto; + input[type="file"] { + position: absolute; + width: 0; + height: 0; + padding: 0; + overflow: hidden; + border: 0; + } + overflow: hidden; `; const InfoBox = styled.div` @@ -259,4 +309,26 @@ const DiaryHeaderBox = styled.div` align-items: center; `; +const CustomFileInput = styled.div` + display: flex; + justify-content: center; + margin: auto; + color: ${COLORS.mainColor}; + margin-bottom: 10px; + margin-top: -10px; + input[type="file"] { + position: absolute; + width: 0; + height: 0; + padding: 0; + overflow: hidden; + border: 0; + } + + label { + text-decoration: underline; + text-underline-position: under; + } +`; + export default Home; diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx index aea4b91..036b324 100644 --- a/src/pages/MyPage.jsx +++ b/src/pages/MyPage.jsx @@ -20,7 +20,7 @@ const MyPage = () => { 닉네임 - +