리액트 심화 과정 - 3강 /write 페이지에서 파이어베이스로 이미지 업로드하고 이미지 미리보기 영역 만들기

image-community/src/pages/PostWrite.js

@@ -12,6 +12,7 @@ const PostWrite = (props) => {
   const changeContents = (e) => {
     setContents(e.target.value);
   };
+  const preview = useSelector((state) => state.image.preview);
 
   if (!is_login) {
     return (
@@ -45,7 +46,10 @@ const PostWrite = (props) => {
           </Text>
         </Grid>
 
-        <Image shape="rectangle" />
+        <Image
+          shape="rectangle"
+          src={preview ? preview : "https://via.placeholder.com/400x300"}
+        />
       </Grid>
 
       <Grid padding="16px">

image-community/src/redux/configureStore.js

@@ -5,12 +5,14 @@ import { connectRouter } from "connected-react-router";
 
 import User from "./modules/user";
 import Post from "./modules/post";
+import Image from "./modules/image";
 
 export const history = createBrowserHistory();
 
 const rootReducer = combineReducers({
   user: User,
   post: Post,
+  image: Image,
   router: connectRouter(history),
 });
 

image-community/src/redux/modules/image.js

@@ -0,0 +1,60 @@
+import { createAction, handleActions } from "redux-actions";
+import { produce } from "immer";
+import { storage } from "../../shared/firebase";
+
+// initial state
+const initialState = {
+  image_url: "",
+  uploading: false,
+  preview: null,
+};
+
+// actions
+const UPLOADING = "UPLOADING";
+const UPLOAD_IMAGE = "UPLOAD_IMAGE";
+const SET_PREVIEW = "SET_PREVIEW";
+
+// action creators
+const uploading = createAction(UPLOADING, (uploading) => ({ uploading }));
+const uploadImage = createAction(UPLOAD_IMAGE, (image_url) => ({ image_url }));
+const setPreview = createAction(SET_PREVIEW, (preview) => ({ preview }));
+
+// middleware actions
+const uploadImageFB = (image) => {
+  return function (dispatch, getState, { history }) {
+    dispatch(uploading(true));
+    const _upload = storage.ref(`images/${image.name}`).put(image);
+
+    _upload.then((snapshot) => {
+      snapshot.ref.getDownloadURL().then((image_url) => {
+        dispatch(uploadImage(image_url));
+      });
+    });
+  };
+};
+
+// reducer using handle actions, immer
+export default handleActions(
+  {
+    [UPLOADING]: (state, action) =>
+      produce(state, (draft) => {
+        draft.uploading = action.payload.uploading;
+      }),
+    [UPLOAD_IMAGE]: (state, action) =>
+      produce(state, (draft) => {
+        draft.image_url = action.payload.image_url;
+        draft.uploading = false;
+      }),
+    [SET_PREVIEW]: (state, action) =>
+      produce(state, (draft) => {
+        draft.preview = action.payload.preview;
+      }),
+  },
+  initialState
+);
+
+const actionCreators = {
+  uploadImageFB,
+  setPreview,
+};
+export { actionCreators };

image-community/src/shared/Upload.js

@@ -1,9 +1,34 @@
 import React from "react";
+import { Button } from "../elements";
+import { actionCreators as imageActions } from "../redux/modules/image";
+import { useDispatch, useSelector } from "react-redux";
 
 const Upload = (props) => {
+  const dispatch = useDispatch();
+  const fileInput = React.useRef();
+  const selectFile = (e) => {
+    const reader = new FileReader();
+    const file = fileInput.current.files[0];
+    reader.readAsDataURL(file);
+    reader.onloadend = () => {
+      dispatch(imageActions.setPreview(reader.result));
+    };
+  };
+  const uploadFB = () => {
+    let image = fileInput.current.files[0];
+    dispatch(imageActions.uploadImageFB(image));
+  };
+  const is_uploading = useSelector((state) => state.image.uploading);
+
   return (
     <React.Fragment>
-      <input type="file" />
+      <input
+        type="file"
+        onChange={selectFile}
+        ref={fileInput}
+        disabled={is_uploading}
+      />
+      <Button _onClick={uploadFB}>업로드 하긔</Button>
     </React.Fragment>
   );
 };

image-community/src/shared/firebase.js

@@ -1,6 +1,7 @@
 import firebase from "firebase/app";
 import "firebase/auth";
 import "firebase/firestore";
+import "firebase/storage";
 
 const firebaseConfig = {
   apiKey: "AIzaSyB7jyeMM1j2DcPl02FK8_mIq-Hn8MXL9Oo",
@@ -17,5 +18,6 @@ firebase.initializeApp(firebaseConfig);
 const auth = firebase.auth();
 const firestore = firebase.firestore();
 const apiKey = firebaseConfig.apiKey;
+const storage = firebase.storage();
 
-export { auth, apiKey, firestore };
+export { auth, apiKey, firestore, storage };