From a8b0fd0f94736a3100c3b014477b1898c503718a Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 25 Oct 2023 20:01:12 +0900
Subject: [PATCH] feat: Add image input

---
 src/pages/WriteSteps/PhotoStep.jsx | 30 ++++++++++++++++--------------
 src/styles/ImageInput.styles.js    |  3 ++-
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/pages/WriteSteps/PhotoStep.jsx b/src/pages/WriteSteps/PhotoStep.jsx
index 59fab8b..ed773e0 100644
--- a/src/pages/WriteSteps/PhotoStep.jsx
+++ b/src/pages/WriteSteps/PhotoStep.jsx
@@ -1,27 +1,29 @@
 import Button from '../../components/Button';
 import ButtonArea from '../../components/ButtonArea';
+import ImageInput from '../../components/ImageInput';
 import ImageViewer from '../../components/ImageViewer';
+import Spacer from '../../components/Spacer';
 import * as S from '../../styles/WriteSteps.styles';
 
 function PhotoStep({ gotoNextStep, gotoPrevStep, photos, setPhotos }) {
+  const handleChange = ({ target }) => {
+    const { files } = target;
+    const newPhotos = [...photos];
+    Array.from(files).forEach((file) =>
+      newPhotos.push(URL.createObjectURL(file))
+    );
+    setPhotos(newPhotos);
+  };
   return (
     <S.Step>
       <S.Title>휴대폰 사진을 올려주세요</S.Title>
-      <S.HelpText>사진</S.HelpText>
-      {/* TODO: upload photo */}
-      <input
-        type="file"
-        accept="image/jpg, image/png, image/jpeg"
-        onChange={(e) => {
-          const file = e.target.files[0];
-          const reader = new FileReader();
-          reader.onload = () => {
-            setPhotos([...photos, reader.result]);
-          };
-          reader.readAsDataURL(file);
-        }}
+      <ImageInput
+        id={'photo-input'}
+        multiple
+        onChange={handleChange}
       />
-      {photos && <ImageViewer images={photos} />}
+      <Spacer height={32} />
+      {photos.length > 0 && <ImageViewer images={photos} />}
       <ButtonArea>
         <Button
           secondary
diff --git a/src/styles/ImageInput.styles.js b/src/styles/ImageInput.styles.js
index 2b0ca6b..c97d3d5 100644
--- a/src/styles/ImageInput.styles.js
+++ b/src/styles/ImageInput.styles.js
@@ -3,10 +3,11 @@ import styled from 'styled-components';
 export const ImageInput = styled.div`
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 16px;
 `;
 
 export const ImageInputLabel = styled.label`
+  flex-shrink: 0;
   ${({ theme }) => theme.boxShadow};
   cursor: pointer;
 `;