feat: lineComment react-md-editor 적용 가능 한지 테스트

Related to 라인 코멘트, react md editor에 되는지 테스트 #307

fe/src/components/block/Content/CreateQuestion.tsx

@@ -1,14 +1,119 @@
 import styled from 'styled-components';
 import DefaultInput from '../Search/DefaultInput';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import MarkdownEditor from '@uiw/react-md-editor';
+import MDEditor from '@uiw/react-md-editor';
+import { Popover } from '@page/PopOver';
 
 const CreateQuestion = () => {
+  const [target, setTarget] = useState<HTMLElement | null>(null);
+  const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
+  const [temp, setTemp] = useState<string[]>([]);
+  const [type, setType] = useState<NodeType>();
+  const [id, setId] = useState<string | null>(null);
+  const testRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setTarget(document.getElementById('wrapper'));
+  }, []);
+
+  const handleShareMeClick = () => {
+    console.log('hello');
+    const { anchorNode, focusNode, anchorOffset, focusOffset } = window.getSelection() as Selection;
+    const startNode = anchorNode.parentElement;
+    const endNode = focusNode.parentElement;
+
+    if (startNode && endNode) {
+      const startIndex = Array.from(startNode.childNodes).indexOf(anchorNode);
+      const endIndex = Array.from(endNode.childNodes).indexOf(focusNode);
+      setSelectedIndices([startIndex + anchorOffset, endIndex + focusOffset]);
+
+      const wrapperElement = testRef.current;
+
+      setType(
+        startNode.nodeType === anchorNode.nodeType ? anchorNode.nodeType : startNode.nodeType,
+      );
+      setId(
+        startNode.nodeName !== anchorNode.nodeName
+          ? anchorNode?.parentNode?.nodeName
+          : anchorNode.nodeName,
+      );
+
+      if (wrapperElement && id) {
+        const textNodes = Array.from(wrapperElement.childNodes).filter(
+          (node) => node.nodeName === id,
+        );
+        setTemp(
+          textNodes.map((node) => {
+            const text = node.textContent || '';
+            const start = anchorOffset;
+            const end = focusOffset;
+            console.log(start, end);
+            return text.substring(start, end);
+          }),
+        );
+      }
+    }
+  };
+
+  useEffect(() => {
+    console.log('ID updated:', id);
+    const { anchorOffset, focusOffset } = window.getSelection() as Selection;
+    if (id) {
+      const wrapperElement = testRef.current;
+      setType(wrapperElement?.nodeType);
+      if (wrapperElement) {
+        const textNodes = Array.from(wrapperElement.childNodes).filter((node) => node.id === id);
+        setTemp(
+          textNodes.map((node) => {
+            const text = node.textContent || '';
+            const start = anchorOffset;
+            const end = focusOffset;
+            return text.substring(start, end);
+          }),
+        );
+      }
+    }
+  }, [id]);
+
+  const handleItemClicked = (id: string) => {
+    const node = document.getElementById(id);
+    if (node) {
+      node.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
   const ref = useRef<HTMLInputElement>(null);
+  const str = `
+### Preview Markdown
+
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-preview-markdown-vrucl?fontsize=14&hidenavigation=1&theme=dark)
+
+import React from "react";
+import ReactDOM from "react-dom";
+import MDEditor from '@uiw/react-md-editor';
+
+export default function App() {
+  return (
+    <div className="container">
+      <MDEditor.Markdown source="Hello Markdown!" />
+    </div>
+  );
+}
+`;
+  const [markdown, setMarkdown] = useState(str);
+
+  const handleMarkdownChange = (value: string | undefined) => {
+    if (value) {
+      setMarkdown(value);
+      console.log(value);
+    }
+  };
 
   useEffect(() => {}, [ref?.current?.value]);
+
   return (
     <>
-      <TitleWrapper>
+      <TitleWrapper ref={testRef} id="wrapper">
         <DefaultInput
           type="text"
           height={40}
@@ -18,6 +123,20 @@ const CreateQuestion = () => {
           placeholder="제목을 입력해주세요"
           padding="0 0.5rem 0.5rem 0.5rem"
         />
+        {/* <MarkdownEditor height={'90%'} value={markdown} onChange={handleMarkdownChange} /> */}
+        <MDEditor.Markdown source={markdown} />
+        {temp.map((text, index) => (
+          <h1
+            key={index}
+            onClick={() => {
+              console.log('move');
+              handleItemClicked(id!);
+            }}
+          >
+            {text}
+          </h1>
+        ))}
+        <Popover target={target} onClick={handleShareMeClick} />
       </TitleWrapper>
     </>
   );

fe/src/page/Common.tsx

@@ -24,9 +24,10 @@ const Common = () => {
   const [selectedContent, setSelectedContent] = useState<React.ReactNode | null>('');
   const { tabType, setTabType } = useTabStore();
   useEffect(() => {
-    if (pathname.startsWith('/newQuestion')) {
-      setSelectedContent(Content.createQuestion);
+    if (pathname.startsWith('/createQuestion')) {
+      setSelectedContent(Content.CreateQuestion);
     } else if (tabType != null) {
+      console.log(tabType);
       setSelectedContent(Content[pathname.replace('/', '')]);
       const tabTypeFromPath = pathname.replace('/', '') as TabType;
       setTabType(tabTypeFromPath);

fe/src/routes/router.tsx

@@ -7,7 +7,6 @@ import GridTemplate from '@components/layout/GridTemplate';
 import Main from '@page/Main';
 import RegisterEmail from '@page/RegisterEmail';
 import AccountLinking from '@page/AccountLinking';
-import MarkdownEditor from '@page/MarkdownEditor';
 import LineComment from '@page/LineComment';
 
 const Router = () => {
@@ -20,8 +19,8 @@ const Router = () => {
         '/Review',
         '/Setting',
         '/Request',
-        '/newQuestion',
-        '/newReview',
+        '/CreateQuestion',
+        '/CreateReview',
         '/*',
       ].map((path) => (
         <Route key={path} element={<GridTemplate />}>
@@ -39,7 +38,6 @@ const Router = () => {
       {/* 나중에 Common 안에 넣어주기 */}
       <Route path="/registeremail" element={<RegisterEmail />} />
       <Route path="/accountlinking" element={<AccountLinking />} />
-      <Route path="/MarkdownEditor" element={<MarkdownEditor />} />
       <Route path="/linecomment" element={<LineComment />} />
     </Routes>
   );

fe/src/store/useTabStore.ts

@@ -1,7 +1,14 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
-export type TabType = 'Question' | 'Review' | 'Request' | 'Setting' | null;
+export type TabType =
+  | 'Question'
+  | 'Review'
+  | 'Request'
+  | 'Setting'
+  | 'CreateQuestion'
+  | 'CreateReview'
+  | null;
 export type QuestionTabType = 'myQuestion' | 'questionDrafts' | null; //내 질문 - 임시보관 - 빈 선택지
 export type ReviewTabType = 'myReview' | 'reviewDrafts' | null; //내 리뷰 - 임시보관 - 빈 선택지
 export type DefaultTabType =