Merge pull request #53 from DreamIn-Developer/feature/#40-UploadWorks…

…Page ✨ Upload 페이지 이미지 미리보기 구현
DreamIn-Developer · May 19, 2022 · 6434b07 · 6434b07
2 parents 658e84d + 060e551
commit 6434b07
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 51 deletions.
diff --git a/components/Upload/Register/Register.style.ts b/components/Upload/Register/Register.style.ts
@@ -9,6 +9,12 @@ export const Wrapper = styled.div`
   overflow: scroll;
 `;
 
+export const ImageContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const RegisterSubInfo = styled.p`
   margin-bottom: 24px;
   text-align: center;

diff --git a/components/Upload/Register/index.tsx b/components/Upload/Register/index.tsx
@@ -1,39 +1,72 @@
 import * as S from './Register.style';
 import ImageUploadWrapper from 'components/common/ImageUploadWrapper';
-import useImageHandle from 'hooks/useImageHandle';
 import Image from 'next/image';
+import { useRef, useState } from 'react';
+import { default_profile } from 'constants/imgUrl';
 
 const contents = ['image', 'edit', 'video'];
 
 const Register = () => {
+  const [imgFile, setImgFile] = useState(null);
+  const inputOpenImageRef = useRef(null);
+
+  const handleChangeFile = (e) => {
+    const file = e.target.files[0];
+
+    // 로컬에 미리보기 렌더링
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = (e) => {
+      setImgFile(e.target.result);
+    };
+  };
+
+  const handleOpenImageRef = () => {
+    inputOpenImageRef.current.click();
+  };
+
   return (
     <S.Wrapper>
-      <div>
-        <S.RegisterSubInfo>컨텐츠를 등록해주세요!</S.RegisterSubInfo>
-        <S.RegisterButtonWrapper>
-          {contents.map((content) => {
-            console.log(contents);
-            return (
-              <ImageUploadWrapper name="works" key={content}>
-                <S.RegisterButton onClick={() => useImageHandle}>
-                  <Image
-                    alt={content}
-                    src={
-                      content === 'image'
-                        ? '/images/icon-upload_image.svg'
-                        : content === 'edit'
-                        ? '/images/icon-upload_edit.svg'
-                        : '/images/icon-upload_video.svg'
-                    }
-                    width="20px"
-                    height="20px"
-                  />
-                </S.RegisterButton>
-              </ImageUploadWrapper>
-            );
-          })}
-        </S.RegisterButtonWrapper>
-      </div>
+      {imgFile ? (
+        <S.ImageContainer>
+          <Image src={imgFile ? imgFile : default_profile} width="300" height="300" />
+        </S.ImageContainer>
+      ) : (
+        <>
+          <S.RegisterSubInfo>컨텐츠를 등록해주세요!</S.RegisterSubInfo>
+          <S.RegisterButtonWrapper>
+            {contents.map((content) => {
+              return (
+                <ImageUploadWrapper name="works" key={content}>
+                  <S.RegisterButton onClick={handleOpenImageRef}>
+                    <Image
+                      alt={content}
+                      src={
+                        content === 'image'
+                          ? '/images/icon-upload_image.svg'
+                          : content === 'edit'
+                          ? '/images/icon-upload_edit.svg'
+                          : '/images/icon-upload_video.svg'
+                      }
+                      width="20px"
+                      height="20px"
+                    />
+                    <div style={{ display: 'none' }}>
+                      <input
+                        type="file"
+                        name="imgFile"
+                        id="imgFile"
+                        onChange={(e) => handleChangeFile(e)}
+                        ref={inputOpenImageRef}
+                      />
+                    </div>
+                  </S.RegisterButton>
+                </ImageUploadWrapper>
+              );
+            })}
+          </S.RegisterButtonWrapper>
+        </>
+      )}
       <S.UploadButton>업로드 하기</S.UploadButton>
     </S.Wrapper>
   );

diff --git a/components/common/ImageUploadWrapper/index.tsx b/components/common/ImageUploadWrapper/index.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import * as S from './ImageUploadWrapper.style';
 import useImageHandle from 'hooks/useImageHandle';
 
@@ -10,11 +9,6 @@ export interface ImageUploadPropsType {
 const ImageUploadWrapper = ({ children, name }: ImageUploadPropsType) => {
   const { storeImage } = useImageHandle(name);
 
-  useEffect(() => {
-    console.log(name);
-    console.log(storeImage);
-  }, [name]);
-
   return (
     <>
       <S.ProfileLabel htmlFor="file-input">{children}</S.ProfileLabel>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,12 +15,13 @@
     "aws-sdk": "^2.1122.0",
     "axios": "^0.26.1",
     "chromatic": "^6.5.3",
-    "dotenv": "^16.0.0",
+    "dotenv": "^16.0.1",
     "dotenv-load": "^2.0.0",
     "dotenv-webpack": "^7.1.0",
     "next": "12.1.0",
     "next-env": "^1.1.1",
     "react": "17.0.2",
+    "react-aws-s3": "^1.5.0",
     "react-dom": "17.0.2",
     "react-icons": "^4.3.1",
     "react-query": "^3.38.0",
@@ -30,6 +31,7 @@
     "styled-reset": "^4.3.4",
     "typescript": "4.6.2",
     "url-loader": "^4.1.1",
+    "uuid": "^8.3.2",
     "webpack": "^5.69.1"
   },
   "devDependencies": {