From ca849f43c4ce0a61e3373b2c524988ab4b84a3c1 Mon Sep 17 00:00:00 2001 From: krokerdile Date: Mon, 5 Feb 2024 11:08:32 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20Markdown=20Editor=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20Related=20to=20Code=20Comment=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=20#260?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/routes/router.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/fe/src/routes/router.tsx b/fe/src/routes/router.tsx index e2823686..d6cf0b41 100644 --- a/fe/src/routes/router.tsx +++ b/fe/src/routes/router.tsx @@ -7,6 +7,7 @@ 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'; const Router = () => { return ( @@ -37,6 +38,7 @@ const Router = () => { {/* 나중에 Common 안에 넣어주기 */} } /> } /> + } /> ); }; From 46359998263845acb7e036cd0959d56fccdb1ddc Mon Sep 17 00:00:00 2001 From: krokerdile Date: Mon, 5 Feb 2024 11:09:47 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20MarkdownEditor=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20-=20markdown=20=EB=B6=80=EB=B6=84=EC=97=90=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=20=EB=B6=80=EB=B6=84=EB=A7=8C=20?= =?UTF-8?q?=EB=84=A3=EA=B3=A0=20=EC=9E=88=EC=97=88=EB=8D=98=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95=20-=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EB=84=A3=EC=97=88=EC=9D=84=20=EB=95=8C=20'=20=20'=20=EC=8A=A4?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EB=91=90=EC=B9=B8=20=EB=8D=94=20?= =?UTF-8?q?=EB=84=A3=EC=96=B4=EC=A3=BC=EB=8D=98=20=EA=B1=B0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=99=84=EB=A3=8C=20-=20=EA=B7=BC=EB=8D=B0=20?= =?UTF-8?q?=EC=B2=AB=20=ED=81=B4=EB=A6=AD=20=ED=96=88=EC=9D=84=20=EB=95=8C?= =?UTF-8?q?=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=8B=A4=ED=96=89=EC=9D=B4=20?= =?UTF-8?q?=EC=95=88=EB=90=A8=20Related=20to=20Code=20Comment=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20#260?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/page/MarkdownEditor.tsx | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/fe/src/page/MarkdownEditor.tsx b/fe/src/page/MarkdownEditor.tsx index b02a3aa2..e31581f4 100644 --- a/fe/src/page/MarkdownEditor.tsx +++ b/fe/src/page/MarkdownEditor.tsx @@ -10,19 +10,22 @@ const MarkdownEditor = () => { console.log(hello); \`\`\` `); - const [selectedLine, setSelectedLine] = useState(null); + const [selectedLine, setSelectedLine] = useState(); const [editorContent, setEditorContent] = useState(''); + const [originLines, setOriginLines] = useState([]); const handleLineClick = (lineNumber) => { console.log(`Clicked on line ${lineNumber}`); const codeBlock = markdown.split('```')[1].trim(); - const lines = codeBlock.split('\n'); + setOriginLines(codeBlock.split('\n')); + console.log(originLines); setSelectedLine(lineNumber); - setEditorContent(lines[lineNumber]); + setEditorContent(originLines[lineNumber]); + console.log(selectedLine); }; const handleEditorClose = () => { - setSelectedLine(null); + setSelectedLine(undefined); }; const handleEditorChange = (e) => { @@ -34,12 +37,19 @@ const MarkdownEditor = () => { const codeBlockEnd = markdown.lastIndexOf('```'); const start = markdown.substring(0, codeBlockStart + 3); const end = markdown.substring(codeBlockEnd); - + console.log(codeBlockStart, codeBlockEnd); + console.log(start, end); const lines = editorContent.split('\n'); - const updatedCodeBlock = lines.map((line) => ` ${line}`).join('\n'); - console.log(lines, updatedCodeBlock); + const updatedCodeBlock = lines.map((line) => `${line}`).join('\n'); + console.log('lines', lines, 'updateCodeBlock', updatedCodeBlock); + console.log(markdown); + const copiedLines = [...originLines]; + console.log(copiedLines); + copiedLines[selectedLine!] = updatedCodeBlock; + console.log(copiedLines); + console.log(copiedLines.join('\n')); + setMarkdown(`${start}${copiedLines.join('\n')}\n${end}`); - setMarkdown(`${start}\n${updatedCodeBlock}\n${end}`); handleEditorClose(); }; From 8268f39706faeb6a93311ea1e75c3e2b62229400 Mon Sep 17 00:00:00 2001 From: Klomachenko Date: Mon, 5 Feb 2024 11:13:13 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20event=20handling=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0=20Description:=20setSelectedLine?= =?UTF-8?q?,=20setEditorContent=EA=B0=80=20=EB=91=90=20=EC=A4=84=EC=9D=B4?= =?UTF-8?q?=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=A3=A8=ED=94=84=EB=A5=BC=20?= =?UTF-8?q?=ED=86=B5=ED=95=B4=20=EB=B9=84=EB=8F=99=EA=B8=B0=EC=A0=81?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=B2=98=EB=A6=AC=EB=90=98=EB=AF=80?= =?UTF-8?q?=EB=A1=9C,=20=ED=95=B4=EB=8B=B9=20=EB=AC=B8=EC=A0=9C=EA=B0=80?= =?UTF-8?q?=20=EB=B0=9C=EC=83=9D=ED=95=98=EC=98=80=EC=9D=8C,=20useEffect?= =?UTF-8?q?=EB=A5=BC=20=ED=86=B5=ED=95=B4=20=ED=95=B4=EA=B2=B0=20Related?= =?UTF-8?q?=20to=20#260?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/page/MarkdownEditor.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/fe/src/page/MarkdownEditor.tsx b/fe/src/page/MarkdownEditor.tsx index e31581f4..b5c4d9c4 100644 --- a/fe/src/page/MarkdownEditor.tsx +++ b/fe/src/page/MarkdownEditor.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import ReactMarkdown from 'react-markdown'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism'; @@ -18,12 +18,16 @@ const MarkdownEditor = () => { console.log(`Clicked on line ${lineNumber}`); const codeBlock = markdown.split('```')[1].trim(); setOriginLines(codeBlock.split('\n')); - console.log(originLines); setSelectedLine(lineNumber); - setEditorContent(originLines[lineNumber]); - console.log(selectedLine); }; + useEffect(() => { + // This will run every time selectedLine changes + if (selectedLine !== undefined) { + setEditorContent(originLines[selectedLine]); + } + }, [selectedLine, originLines]); + const handleEditorClose = () => { setSelectedLine(undefined); }; From d539523c418b9877dd04f0c88e34b1c5df2067ff Mon Sep 17 00:00:00 2001 From: Klomachenko Date: Mon, 5 Feb 2024 22:40:33 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EC=A0=80=EC=9E=A5,=20=EB=8B=AB?= =?UTF-8?q?=EA=B8=B0=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/page/MarkdownEditor.tsx | 46 ++++++++++++++++++++++------------ 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/fe/src/page/MarkdownEditor.tsx b/fe/src/page/MarkdownEditor.tsx index b5c4d9c4..b346f027 100644 --- a/fe/src/page/MarkdownEditor.tsx +++ b/fe/src/page/MarkdownEditor.tsx @@ -16,42 +16,53 @@ const MarkdownEditor = () => { const handleLineClick = (lineNumber) => { console.log(`Clicked on line ${lineNumber}`); + + // 현재 Markdown 텍스트에서 코드 블록을 추출하고 각 라인을 배열로 저장 const codeBlock = markdown.split('```')[1].trim(); setOriginLines(codeBlock.split('\n')); + + // 선택된 라인 번호를 상태에 저장하여 나중에 사용할 수 있도록 함 setSelectedLine(lineNumber); + + // 코드 라인을 클릭하면 code_review div를 보이도록 설정 + document.getElementById('code_review').style.display = 'block'; }; useEffect(() => { - // This will run every time selectedLine changes + // selectedLine, originLines중 하나라도 변경될 때마다 실행 if (selectedLine !== undefined) { + // 현재 선택된 라인에 해당하는 내용을 originLines 배열에서 가져와 editorContent 상태를 업데이트 setEditorContent(originLines[selectedLine]); } }, [selectedLine, originLines]); + // 에디터를 닫을 때 선택라인을 초기화 const handleEditorClose = () => { setSelectedLine(undefined); + // 에디터를 닫을 때 code_review div를 숨기도록 설정 + document.getElementById('code_review').style.display = 'none'; }; + // 에디터 콘텐츠를 현재 에디터의 내용으로 업데이트 const handleEditorChange = (e) => { setEditorContent(e.target.value); }; const handleEditorSave = () => { + // 기존 코드 블록의 시작과 끝 위치를 찾음 const codeBlockStart = markdown.indexOf('```'); const codeBlockEnd = markdown.lastIndexOf('```'); + // 코드 블록 앞과 뒤의 내용을 추출 const start = markdown.substring(0, codeBlockStart + 3); const end = markdown.substring(codeBlockEnd); - console.log(codeBlockStart, codeBlockEnd); - console.log(start, end); + // 코드 블록을 줄별로 분리하여 배열로 만듦 const lines = editorContent.split('\n'); + // 각 줄을 문자열로 가공 const updatedCodeBlock = lines.map((line) => `${line}`).join('\n'); - console.log('lines', lines, 'updateCodeBlock', updatedCodeBlock); - console.log(markdown); + // 기존 코드내용 복사하여, 수정된 코드 블록으로 업데이트 const copiedLines = [...originLines]; - console.log(copiedLines); copiedLines[selectedLine!] = updatedCodeBlock; - console.log(copiedLines); - console.log(copiedLines.join('\n')); + // 기존 Markdown의 코드 블록 부분을 수정된 내용으로 업데이트 setMarkdown(`${start}${copiedLines.join('\n')}\n${end}`); handleEditorClose(); @@ -63,7 +74,7 @@ const MarkdownEditor = () => { value={markdown} onChange={(e) => setMarkdown(e.target.value)} rows={10} - style={{ width: '100%' }} + style={{ width: '900px', height: '250px' }} />
{ {markdown}
+ {selectedLine !== null && ( -
+

Selected Line Editor

- +