feat: Add image input

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>
+      <ImageInput
-      {/* TODO: upload photo */}
+        id={'photo-input'}
-      <input
+        multiple
-        type="file"
+        onChange={handleChange}
-        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);
-        }}
       />
-      {photos && <ImageViewer images={photos} />}
+      <Spacer height={32} />
+      {photos.length > 0 && <ImageViewer images={photos} />}
       <ButtonArea>
         <Button
           secondary

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;
 `;