From 036bad06c4b1d398094ac0f4250f344613b432c7 Mon Sep 17 00:00:00 2001
From: SuJin <kimsujin001127@gmail.com>
Date: Thu, 11 Jan 2024 22:28:44 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=82=AC=EC=A7=84=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EB=93=B1=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home.jsx | 78 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 75 insertions(+), 3 deletions(-)

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 (
     <>
       <PageContainer>
@@ -79,9 +93,36 @@ const Home = () => {
               <br />
               자동으로 입력해요!
             </ExplainBox>
-            <ImageUploadBox>
-              <Icon icon="solar:camera-bold" width="28" />
-            </ImageUploadBox>
+            {imgSrc !== null ? (
+              <>
+                <ImageUploadBox>
+                  <img width={"100%"} src={imgSrc} alt="영수증 사진" />
+                </ImageUploadBox>
+                <CustomFileInput>
+                  <label for="file">재선택</label>
+                  <input
+                    accept="image/*"
+                    multiple
+                    type="file"
+                    onChange={(e) => onUpload(e)}
+                    id="file"
+                  />
+                </CustomFileInput>
+              </>
+            ) : (
+              <ImageUploadBox>
+                <label for="file">
+                  <Icon icon="solar:camera-bold" width="28" />
+                </label>
+                <input
+                  accept="image/*"
+                  multiple
+                  type="file"
+                  onChange={(e) => onUpload(e)}
+                  id="file"
+                />
+              </ImageUploadBox>
+            )}
           </Modal>
         </>
       )}
@@ -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;

From 40b12ed947e009eca3d2f06b037d8e1f16a591e7 Mon Sep 17 00:00:00 2001
From: SuJin <kimsujin001127@gmail.com>
Date: Thu, 11 Jan 2024 22:29:19 +0900
Subject: [PATCH 2/2] =?UTF-8?q?style:=20=EC=83=89=EC=83=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 = () => {
               <b>닉네임</b> 님
             </NickNameTxt>
             <NickNameEdit>
-              <Icon icon="ic:baseline-edit" color="##7FBB76" />
+              <Icon icon="ic:baseline-edit" color="#7FBB76" />
             </NickNameEdit>
           </NickNameBox>
         </ProfileBox>