Merge pull request #44 from EndlessCreation/hotFix/issue-41

Feat : Tim 실시간 업로드 구현
EndlessCreation · Nov 27, 2021 · bd1014e · bd1014e
2 parents 585d98e + 5d3243d
commit bd1014e
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 40 deletions.
diff --git a/src/components/TIMView/TIM.jsx b/src/components/TIMView/TIM.jsx
@@ -3,18 +3,17 @@ import styled, { css } from 'styled-components';
 import { MdEdit } from 'react-icons/md';
 import { BsFillTrashFill, BsImages } from 'react-icons/bs';
 
-const TIM = ({ post, onDeletePost, onEditPost }) => {
-  const {
-    id,
-    content,
-    createAt,
-    image,
-    isFavorite,
-    tagName,
-    tagColor,
-    keywordName,
-    keywordColor,
-  } = post;
+const TIM = ({
+  post,
+  tagName,
+  tagColor,
+  keywordName,
+  keywordColor,
+  onDeletePost,
+  onEditPost,
+}) => {
+  const { id, content, createAt, image, isFavorite } = post;
+
   const slicedDate = createAt.toString().slice(0, 10);
   const [editMode, setEditMode] = useState(false);
   const initForm = {
@@ -31,7 +30,7 @@ const TIM = ({ post, onDeletePost, onEditPost }) => {
     if (editMode === true) {
       let result = window.confirm('수정하시겠습니까?');
       if (result) {
-        console.log(form);
+        console.log(post);
         const formData = new FormData();
         formData.append('file', form.image);
         formData.append('content', form.content);
@@ -40,6 +39,15 @@ const TIM = ({ post, onDeletePost, onEditPost }) => {
         formData.append('keyword', keywordName);
         formData.append('tag_color', tagColor);
         formData.append('keyword_color', keywordColor);
+
+        for (let key of formData.keys()) {
+          console.log(key);
+        }
+
+        /* value 확인하기 */
+        for (let value of formData.values()) {
+          console.log(value);
+        }
         onEditPost(formData);
       }
       setEditMode(false);

diff --git a/src/components/TIMView/TIMView.jsx b/src/components/TIMView/TIMView.jsx
@@ -54,7 +54,9 @@ const TIMView = ({
                 key={post.id}
                 post={post}
                 tagName={tagName}
+                tagColor={tagColor}
                 keywordName={keywordName}
+                keywordColor={keywordColor}
                 onDeletePost={onDeletePost}
                 onEditPost={onEditPost}
               />

diff --git a/src/components/common/Header.jsx b/src/components/common/Header.jsx
@@ -25,11 +25,11 @@ const Header = ({ user, onLogout, pathname }) => {
               <AiOutlineUnorderedList size="30" />
             </HeaderMenuButton>
           ) : (
-            <StyledLink to="/">
+            <HeaderMenuButton onClick={() => history.push('/')}>
               <FaHome size="30" />
-            </StyledLink>
+            </HeaderMenuButton>
           )}
-          <SearchContainer />
+          <SearchContainer pathname={pathname} />
           <NavWrapper>
             <HeaderMenuButton onClick={onLogout}>
               <Icon src={exitIconSrc} size={30} />

diff --git a/src/components/postview/GridView.jsx b/src/components/postview/GridView.jsx
@@ -4,6 +4,7 @@ import { IoIosArrowDown } from 'react-icons/io';
 import { Link } from 'react-router-dom';
 
 const GridView = ({ user, tags }) => {
+  console.log(tags);
   if (!tags) return <div>loading...</div>;
 
   return (
@@ -58,16 +59,19 @@ const GridItem = styled.li`
   border-radius: 20px;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
   background: ${({ tagColor, theme }) => {
-    return theme.component[tagColor][3];
+    console.log(tagColor);
+    return tagColor !== 'undefined' ? theme.component[tagColor][3] : '#FAFCF9';
   }};
   & > header {
     display: flex;
     height: 60px;
     justify-content: center;
     align-items: center;
     background-color: ${({ tagColor, theme }) => {
-      console.log(theme.component[tagColor][1]);
-      return theme.component[tagColor][1];
+      console.log(theme.component[tagColor]);
+      return tagColor !== 'undefined'
+        ? theme.component[tagColor][1]
+        : '#FAFCF9';
     }};
     font-size: 28px;
     font-weight: bold;

diff --git a/src/containters/KeywordContainer.jsx b/src/containters/KeywordContainer.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { withRouter } from 'react-router';
+import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
 import Keyword from '../components/Keyword';
 import { filterPostInTag, getPostInTag } from '../modules/post';
 
@@ -10,13 +11,23 @@ const KeywordContainer = ({ match }) => {
     postInTag: post.postInTag,
     loading: loading,
   }));
+  const reloaded = useSelector(({ reload }) => reload);
+  const history = useHistory();
   const dispatch = useDispatch();
   const { tagId } = match.params;
 
   useEffect(() => {
     dispatch(getPostInTag(tagId));
   }, [dispatch, tagId]);
 
+  useEffect(() => {
+    if (reloaded) {
+      if (reloaded.keyword === true) {
+        dispatch(getPostInTag(tagId));
+      }
+    }
+  }, [reloaded]);
+
   const onFilteringDate = (startDate, endDate) => {
     const startDateToISO = new Date(startDate);
     const endDateToISO = new Date(

diff --git a/src/containters/MainInputContainer.jsx b/src/containters/MainInputContainer.jsx
@@ -6,11 +6,14 @@ import { createPost } from '../modules/post';
 import { reloadAction } from '../modules/reload';
 import theme from '../styles/theme';
 import { randomIndex } from '../lib/util/randomIndex';
+import { useLocation } from 'react-router-dom/cjs/react-router-dom.min';
 
 const MainInputContainer = () => {
   const { user } = useSelector(({ user }) => ({
     user: user.user,
   }));
+  const { pathname } = useLocation();
+
   const dispatch = useDispatch();
   const [image, setImage] = useState(null);
   const [tag, setTag] = useState('');
@@ -22,6 +25,8 @@ const MainInputContainer = () => {
     (color) => color !== 'gray' && color !== 'grey',
   );
 
+  // console.log(pathname.split('/')[1]);
+
   const onSubmit = (e) => {
     e.preventDefault();
 
@@ -41,8 +46,20 @@ const MainInputContainer = () => {
       formData.append('keyword', keyword);
       formData.append('keyword_color', keyword_color);
 
+      // console.log(formData);
+      /* key 확인하기 */
+      for (let key of formData.keys()) {
+        console.log(key);
+      }
+
+      /* value 확인하기 */
+      for (let value of formData.values()) {
+        console.log(value);
+      }
+
       dispatch(createPost(formData));
       dispatch(reloadAction('timLog'));
+      dispatch(reloadAction(pathname.split('/')[1]));
 
       inputRef.current.value = '';
       setImage(null);
@@ -58,7 +75,7 @@ const MainInputContainer = () => {
     }
   };
   const onKeyUp = (e) => {
-    console.log(tag, keyword);
+    // console.log(tag, keyword);
 
     const { value } = e.target;
     if (value !== '') {

diff --git a/src/containters/SearchContainer.jsx b/src/containters/SearchContainer.jsx
@@ -5,12 +5,11 @@ import _ from 'lodash';
 import Search from '../components/search/Search';
 import { useEffect } from 'react';
 
-const SearchContainer = (props) => {
+const SearchContainer = () => {
   // const [searchState, setSearchState] = useState();
   const [isOpenned, setIsOpenned] = useState();
   const [searchValue, setSearchValue] = useState();
   const [searchingData, setSearchingData] = useState();
-  const dispatch = useDispatch();
 
   const sendContent = async (Query) => {
     if (Query === 0) return;

diff --git a/src/containters/TIMViewContainer.jsx b/src/containters/TIMViewContainer.jsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { withRouter } from 'react-router';
 import TIMView from '../components/TIMView/TIMView';
 import { deletePost, editPost, getPostInKeyword } from '../modules/post';
+import { reloadAction } from '../modules/reload';
 
 // 특정 키워드(keywordId) 안에 있는 tim 불러와야 함
 const TIMViewContainer = ({ match, location }) => {
@@ -13,6 +14,8 @@ const TIMViewContainer = ({ match, location }) => {
     deletePostSuccess: post.deletePostSuccess,
   }));
 
+  const reloaded = useSelector(({ reload }) => reload);
+
   const dispatch = useDispatch();
   const { tagId, keywordId } = match.params;
   const {
@@ -28,31 +31,30 @@ const TIMViewContainer = ({ match, location }) => {
     let result = window.confirm('해당 TIM을 삭제하시겠습니까?');
     if (result) {
       dispatch(deletePost(post_id));
+      dispatch(reloadAction('tim'));
+
       // 삭제하자마자 리렌더링 하게 하려면?
     } else return;
   };
   const onEditPost = (formData) => {
     dispatch(editPost(formData));
+    dispatch(reloadAction('tim'));
+
     // 수정하자마자 리렌더링 하게 하려면?
   };
 
   useEffect(() => {
     dispatch(getPostInKeyword(keywordId));
-  }, [dispatch, keywordId, tagId]);
+  }, [dispatch, keywordId]);
 
-  // console.log(match, location);
+  useEffect(() => {
+    if (reloaded) {
+      if (reloaded.tim === true) {
+        dispatch(getPostInKeyword(keywordId));
+      }
+    }
+  }, [reloaded]);
 
-  // console.log(user, postInKeyword);
-  console.log(
-    user,
-    postList,
-    tagName,
-    tagColor,
-    keywordName,
-    keywordColor,
-    onEditPost,
-    onDeletePost,
-  );
   if (postList.length === 0) return <>loading</>;
   if (postList)
     return (

diff --git a/src/containters/common/HeaderContainer.jsx b/src/containters/common/HeaderContainer.jsx
@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router';
-import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
+import { useLocation, useHistory } from 'react-router';
 
 import Header from '../../components/common/Header';
 import { initAuth } from '../../modules/auth';
@@ -24,7 +23,7 @@ const HeaderContainer = () => {
     const userCheck = async () => {
       try {
         const a = await getUser();
-        console.log(a);
+        // console.log(a);
       } catch (e) {
         dispatch(initAuth());
         alert('로그인이 필요합니다');

diff --git a/src/containters/postview/GridViewContainer.jsx b/src/containters/postview/GridViewContainer.jsx
@@ -10,6 +10,7 @@ const GridViewContainer = () => {
     user: user.user,
     tags: tagkeyword.tags,
   }));
+  const reloaded = useSelector(({ reload }) => reload);
 
   const tagItems = {};
 
@@ -22,6 +23,14 @@ const GridViewContainer = () => {
     dispatch(check());
   }, [dispatch]);
 
+  useEffect(() => {
+    if (reloaded) {
+      if (reloaded.tag === true) {
+        dispatch(getTag());
+      }
+    }
+  }, [reloaded]);
+
   return <GridView user={user} tags={tags} />;
 };
 

diff --git a/src/containters/status/TIMLogContainer.jsx b/src/containters/status/TIMLogContainer.jsx
@@ -37,6 +37,10 @@ const TIMLogContainer = ({ type }) => {
   useEffect(() => {
     if (reloaded) {
       if (reloaded.timLog === true) {
+        console.log('fsdfsdfsdfdsfds');
+        console.log('fsdfsdfsdfdsfds');
+        console.log('fsdfsdfsdfdsfds');
+        console.log('fsdfsdfsdfdsfds');
         LogContainerfetch();
       }
     }

diff --git a/src/modules/reload.js b/src/modules/reload.js
@@ -27,7 +27,7 @@ function* reRenderSaga({ payload }) {
 
 //모니터링 사가
 export function* reloadSaga() {
-  yield takeLatest(RELOAD_START, reRenderSaga);
+  yield takeEvery(RELOAD_START, reRenderSaga);
 }
 
 //리듀서

diff --git a/src/styles/utilStyle.js b/src/styles/utilStyle.js
@@ -15,7 +15,7 @@ export const Input = styled.input`
   line-height: 1.25rem;
   ::placeholder {
     font-family: Roboto;
-    font-size: 1.3vw;
+    font-size: 1rem;
     font-style: normal;
     font-weight: 400;
     line-height: 16px;