Redux 수정

components/CommonUI/Header.tsx

@@ -9,6 +9,7 @@ import { breakpoints } from '../../lib/styles/responsive';
 import { getLoginModal } from '../../store/modules/loginUI';
 import LoginContainer from '../../containers/Login/LoginContainer';
 import { loginPopup, logoutFn } from '../../lib/Utils/utils';
+import Maybe from '../Maybe/Maybe';
 
 type HeaderProps = {
   onLoginModal: () => void;
@@ -32,16 +33,6 @@ const Header = ({ onLoginModal, handleToggle, toggle, isLogged }: HeaderProps) =
                 <span>About</span>
               </a>
             </Link>
-            <Link href={ROUTES.write}>
-              <a>
-                <span>GitHub</span>
-              </a>
-            </Link>
-            <Link href={ROUTES.about}>
-              <a>
-                <span>Facebook</span>
-              </a>
-            </Link>
           </SmallNav>
           <Hamburger toggle={toggle} onToggle={handleToggle} />
           <nav className="nav">
@@ -50,11 +41,15 @@ const Header = ({ onLoginModal, handleToggle, toggle, isLogged }: HeaderProps) =
                 <span>About</span>
               </a>
             </Link>
-            <Link href={ROUTES.write}>
-              <a>
-                <span>write</span>
-              </a>
-            </Link>
+            <Maybe isVisible={isLogged}>
+              <>
+                <Link href={ROUTES.write}>
+                  <a>
+                    write
+                  </a>
+                </Link>
+              </>
+            </Maybe>
           </nav>
         </div>
       </Wrapper>

components/Posts/Post/Post.tsx

@@ -23,7 +23,7 @@ export default function Post({ title, preContent, date, onClick, imgUrl, tagArr
 			</div>
 			<div className="li-article">
 				<div className="post-info">
-					<h3 className="title" onClick={onClick}>
+					<h3 className="title">
 						{title}
 					</h3>
 					<Maybe isVisible={tagArr}>
@@ -39,6 +39,7 @@ export default function Post({ title, preContent, date, onClick, imgUrl, tagArr
 
 const WrpperProps = (props) => (
 	<li
+		onClick={props.onClick}
 		css={css`
 			border-radius: 4px;
 			box-shadow: 0px 4px 8px 8px rgba(0, 0, 0, 0.05);

components/Posts/PostsLayout.tsx

@@ -42,10 +42,12 @@ const PostsLayout = ({ getInitList }: PostLayoutProps) => {
       throw e;
     }
   }, [dispatch])
+  console.log(getInitList);
+  console.log(postsList);
 
-  useEffect(() => {
-    reqGetPostsList();  
-  }, []);
+  // useEffect(() => {
+  //   reqGetPostsList();  
+  // }, []);
   return (
     <Layout breakpoints={breakpoints}>
       <h1>Development(전체글)</h1>

components/Write/Preview.tsx

@@ -10,18 +10,24 @@ interface PreviewProps {
 }
 export default function Preview({ inputValue, mdRef, onChange }: PreviewProps) {
   const converter = new showdown.Converter();
-
+  console.log(inputValue);
   const html = converter.makeHtml(inputValue);
   useEffect(() => {
     onChange(html);
   }, [html]);
 
 
-  return <Wrapper ref={mdRef}>
-    <div className='markdown-body' dangerouslySetInnerHTML={{ __html: html }}>
+  return (
+    <>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
+			<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css" />
+      <script>hljs.initHighlightingOnLoad();</script>  
+      <Wrapper ref={mdRef}>
+        <div className='markdown-body' dangerouslySetInnerHTML={{ __html: html }}>
 
-    </div>
-  </Wrapper>;
+        </div>
+      </Wrapper>
+  </>);
 }
 
 const Wrapper = styled.div`

containers/Edit/EditContainer.tsx

@@ -4,14 +4,15 @@ import styled from 'styled-components';
 import { useSelector, useDispatch } from 'react-redux';
 import { Editor, Head, Preview } from '../../components/Write';
 import { RootState } from '../../store/modules';
-import { getValue, resetInputValue, setInputValues } from '../../store/modules/postUI';
+import { getValue, resetInputValue, setInputValues, addTagArr } from '../../store/modules/postUI';
 import { ROUTES } from '../../lib/Routes/Routes';
 import { removeExp } from '../../lib/Utils/utils';
 import { AxiosError } from 'axios';
 import { Post, postAsync, putPostAsync } from '../../store/modules/post';
 import { AsyncState } from '../../lib/Utils/asyncUtils';
 import { addPhoto } from '../../lib/Utils/S3';
 import TagAndImg from '../../components/Write/TagAndImg';
+import SubTitleInput from '../../components/Write/SubTItleInput';
 
 type EditContainerProps = {
   postData: AsyncState<Post, AxiosError>;
@@ -33,6 +34,12 @@ const EditContainer = ({ postData, editMode, resId }: EditContainerProps) => {
     dispatch(getValue({ name, value }));
   }, [dispatch]);
 
+  const handleTags = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if(e.keyCode === 188 && postWrite.tag !== ',') {
+      dispatch(addTagArr());
+    }
+  }, [dispatch, postWrite.tag]);
+
   const handleConv = useCallback((html: string) => {
     dispatch(getValue({ name: 'mdValue', value: html}));
   }, [dispatch]);
@@ -49,6 +56,7 @@ const EditContainer = ({ postData, editMode, resId }: EditContainerProps) => {
       imgUrl: postWrite.imgUrl,
       id: postData.data.id,
   		subTitle: postWrite.subTitle,
+      tagArr: postWrite.tagArr,
     }
     //img upload작업  eslint-plugin-react-hook
     console.log(dataForUpload);
@@ -79,33 +87,46 @@ const EditContainer = ({ postData, editMode, resId }: EditContainerProps) => {
   }, [postWrite.inputValue])
 
   useEffect(() => {
-    const { rawContent, contentMd, imgUrl, title, subTitle } = postData.data
+    const { rawContent, contentMd, imgUrl, title, subTitle, tagArr } = postData.data
     dispatch(setInputValues({
       title,
       inputValue: rawContent,
       mdValue:contentMd,
       imgUrl, 
-      subTitle 
+      subTitle,
+      tagArr,
+      tag: '', 
     }));
     return () => {
       dispatch(resetInputValue());
     }
   }, []);
   return (
     <>
-      <Head onUpload={onUpload} postWrite={postWrite} onChange={handleChange} reqImgUpload={reqImgUpload} />
-      <TagAndImg reqGetImgUrl={reqGetImgUrl} />
       <EditBox>
-        <Editor inputValue={postWrite.inputValue} onChange={handleChange} />
+        <EditPart>
+          <Head onUpload={onUpload} postWrite={postWrite} onChange={handleChange} reqImgUpload={reqImgUpload} />
+          <SubTitleInput subTitle={postWrite.subTitle} onChange={handleChange} />
+          <TagAndImg
+            reqGetImgUrl={reqGetImgUrl}
+            tag={postWrite.tag}
+            tagArr={postWrite.tagArr}
+            onChange={handleChange}
+            onAddTag={handleTags}
+          />
+          <Editor inputValue={postWrite.inputValue} onChange={handleChange} />
+        </EditPart>
         <Preview inputValue={postWrite.inputValue} mdRef={mdRef} onChange={handleConv} />
-      </EditBox>
+		  </EditBox>
     </>
   ); 
 }
 
 export default EditContainer;
 const EditBox = styled.div`
-  display: flex;
-  height: 94rem;
-  justify-content: space-between;
+	display: flex;
+	height: 94rem;
+	justify-content: space-between;
 `;
+
+const EditPart = styled.div`width: calc(50% - 1.6rem);`;

lib/Utils/createAsyncSaga.ts

@@ -12,11 +12,12 @@ export default function createAsyncSaga<T1, P1, T2, P2, T3, P3>(
 	promiseCreator: PromiseCreatorFunction<P1, P2>
 ) {
 	return function* saga(action: ReturnType<typeof asyncActionCreator.request>) {
+		console.log('saga');
 		try {
 			const result = isPayloadAction<P1>(action)
-				? yield call(promiseCreator, action.payload)
-				: yield call(promiseCreator);
-			(result);
+			? yield call(promiseCreator, action.payload)
+			: yield call(promiseCreator);
+			console.log('++++++++++++++++++++++++++++++++++++++++++++++++++++++++')
 			yield put(asyncActionCreator.success(result));
 		} catch (e) {
 			yield put(asyncActionCreator.failure(e));

lib/styles/github-markdown.css

@@ -823,7 +823,7 @@
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  background-color: rgb(30, 30, 30);
+  background-color: #f6f8fa;
   border-radius: 3px;
 }