Merge pull request #37 from ha3158987/fe/feature/addIssue

[FE] Editor 기본기능 구현
codesquad-members-2021 · Jun 16, 2021 · c997404 · c997404
2 parents 282cf42 + cd0dc7d
commit c997404
Showing 1 changed file with 58 additions and 24 deletions.
diff --git a/frontend/src/pages/AddIssuePage.tsx b/frontend/src/pages/AddIssuePage.tsx
@@ -1,72 +1,102 @@
 import styled from 'styled-components';
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import ResponsiveLayout from '../components/common/ResponsiveLayout';
 
 const AddIssuePage = () => {
   const [lastPressedKey, setLastPressedKey] = useState<any>();
   const [accumulateLetters, setAccumulateLetters] = useState<any>([]);
   const [textBlock, setTextBlock] = useState<any>({});
+  const $OutputTextBox = useRef<any>()
 
 
   useEffect(() => {
     console.log("textBlock", textBlock);
   })
 
+  useEffect(() => {
+    $OutputTextBox.current.innerHTML = "";
+    accumulateLetters.forEach((block) => {
+      $OutputTextBox.current.insertAdjacentHTML("beforeend", block.tag);
+    });
+
+  }, [accumulateLetters?.slice(-1)[0]])
+
   const inspectLastPressedKey = (curKey) => {
     if (curKey === " " && lastPressedKey === "-") {
-      console.log("잘눌림");
     }
   }
 
-  const createNewTextBlock = () => {
-    const textObj = {
-      tag: '',
-      contents: ''
-    }
-    textObj.contents = accumulateLetters.join('');
-    if (textObj.contents[1] === "Shift" && textObj.contents[0] === '#') {
-      textObj.tag = `<h1>${textObj.contents}</h1>`;
-    }
-    setTextBlock(textObj);
+  const countSharpNum = (str) => {
+    let count = 0;
+    str.split('').forEach(letter => {
+      if (letter === "#") count++;
+    })
+    return count;
   }
 
-  const onKeyDownEvent = (e) => {
+  const createNewTextBlock = (value) => {
+
+    const targetValueArr = value.split('\n').map((targetValue) => {
+      const textObj = {
+        tag: '',
+        contents: ''
+      }
+
+      textObj.contents = targetValue;
+
+      switch (textObj.contents[0]) {
+        case "#" :
+          const num = countSharpNum(textObj.contents);
+          textObj.tag = `<h${num}>${textObj.contents.slice(num)}</h${num}>`;
+          break;
+        case "-" :
+          textObj.tag = `<li>${textObj.contents.slice(1)}</li>`;
+          break;
+        default :
+          textObj.tag = `<p>${textObj.contents}</p>`;
+          break;
+      }
+      return textObj;
+    });
+    setAccumulateLetters(targetValueArr);
+  }
+
+  const handleKeyDownEvent = (e) => {
     console.log("event", e.key, e.key === "Shift");
     const pressedKey = e.key;
 
-    if (pressedKey !== "Shift" && pressedKey !== "Meta" && pressedKey !== "Enter" && pressedKey !== "Backspace") {
-      setAccumulateLetters([...accumulateLetters, pressedKey]);
+    if (pressedKey !== "Shift" && pressedKey !== "Meta" && pressedKey !== "Enter" && pressedKey !== "Backspace" && pressedKey !== "ArrowRight" && pressedKey !== "") {
       if(lastPressedKey) {
         inspectLastPressedKey(pressedKey);
-        //unordered list를 반환해줘야 함.
       }
-      setLastPressedKey(pressedKey);
     }
 
     if (pressedKey === "Enter") {
-      createNewTextBlock();
+      createNewTextBlock(e.target.value);
     }
 
     if (pressedKey === "Backspace") {
 
     }
+    setLastPressedKey(pressedKey);
   }
 
   return (
     <AddIssueLayout>
       <InputLayer>
         <AddIssueTitle>새로운 이슈 작성</AddIssueTitle>
-        <TitleInput type={"text"} placeholder={"제목"}></TitleInput>
+        <TitleInput type={"text"} placeholder={"제목"} />
         <CommentLayer>
           <CommentInput
-            type={"text"}
+            // type={"text"}
             placeholder={"코멘트를 입력하세요"}
-            onKeyDown={(e) => onKeyDownEvent(e)}
+            onKeyDown={handleKeyDownEvent}
           />
-          <CommentOutput>
-            {textBlock.contents}
+          <CommentOutput ref={$OutputTextBox}>
+            {/* {textBlock.contents} */}
           </CommentOutput>
         </CommentLayer>
+        <AddFile type={"file"}/>
       </InputLayer>
     </AddIssueLayout>
   )
@@ -99,7 +129,7 @@ const CommentLayer = styled.div`
   display: flex;
 `
 
-const CommentInput = styled.input`
+const CommentInput = styled.textarea`
   width: 50%;
   height: 34.3rem;
   border-radius: 1.4rem;
@@ -118,4 +148,8 @@ const CommentOutput = styled.div`
   margin-left: 2rem;
 `
 
+const AddFile = styled.input`
+  /* font-size: var(--TitleFontSize); */
+`
+
 export default AddIssuePage;