[FEAT]: 괄호 닫기 기능 구현

Author: Seol-JY

client/src/components/Editor.jsx

@@ -21,12 +21,15 @@ export default function Editor({
   const [textSplit, setTextSplit] = useState([]);
   const [isEventMode, setIsEventMode] = useState(false);
 
+  // 백스페이스로 인해 괄호 닫기 지워지지 않는 현상 해결
+  const [deletionMode, setDeletionMode] = useState(false);
+
   // 이벤트 모드 체크를 위한 useEffect 추가
-  useEffect(() => {
-    const queryParams = new URLSearchParams(window.location.search);
-    const eventParam = queryParams.get("event");
-    setIsEventMode(eventParam?.toLowerCase() === "bisc");
-  }, []);
+  // useEffect(() => {
+  //   const queryParams = new URLSearchParams(window.location.search);
+  //   const eventParam = queryParams.get("event");
+  //   setIsEventMode(eventParam?.toLowerCase() === "bisc");
+  // }, []);
 
   useEffect(() => {
     setTextSplit(getFilecontents(file).content);
@@ -54,11 +57,15 @@ export default function Editor({
   }, [userInput]);
 
   const userInputTabHandler = (event) => {
-    if (isEventMode && (event.key === "Backspace" || event.key === "Delete")) {
-      event.preventDefault();
+    setDeletionMode(false);
+    // if (isEventMode && (event.key === "Backspace" || event.key === "Delete")) {
+    //   event.preventDefault();
+    //   return;
+    // }
+    if (event.key === "Backspace") {
+      setDeletionMode(true);
       return;
     }
-
     // todo: 조건식 최적화
     if (event.key === "Escape") {
       setUseAutoComplete(false);
@@ -171,6 +178,7 @@ export default function Editor({
         file={file}
         setFileLength={setFileLength}
         daynight={daynight}
+        deletionMode={deletionMode}
       />
     </div>
   ) : (

client/src/components/Text.jsx

@@ -8,8 +8,10 @@ import AutoCompletion from "./AutoCompletion";
 
 function Text(props) {
   //const colormap = file.colormap
+  const bracketClosed = [")", "}", "]", '"', "'", "`"];
   const [textSplit, setTextSplit] = useState([]);
   const [themeColor, setThemeColor] = useState("");
+  const [quotePositions, setQuotePositions] = useState([]); // 짝수 번째 따옴표 위치 기록
   let wrong = 0,
     correct = 0,
     space = 0;
@@ -26,6 +28,45 @@ function Text(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [textSplit]);
 
+  useEffect(() => {
+    const content = getFilecontents(props.file).content;
+    setTextSplit(content);
+
+    // 따옴표 위치 미리 계산
+    const positions = [];
+    let quoteCount = 0;
+    for (let i = 0; i < content.length; i++) {
+      if (['"', "'", "`"].includes(content[i])) {
+        quoteCount++;
+        if (quoteCount % 2 === 0) {
+          positions.push(i); // 짝수 번째 따옴표 위치 기록
+        }
+      }
+    }
+    setQuotePositions(positions);
+  }, [props.file]);
+
+  // 자동 괄호 입력 로직
+  useEffect(() => {
+    if (props.deletionMode) return; // 삭제 모드인 경우 실행하지 않음
+
+    const currentIndex = user.length;
+    const nextChar = textSplit[currentIndex]; // 다음에 입력할 위치의 문자
+
+    if (bracketClosed.includes(nextChar)) {
+      // 닫히는 괄호인 경우
+      if (['"', "'", "`"].includes(nextChar)) {
+        // 따옴표인 경우, 짝수 번째 위치인지 확인
+        if (quotePositions.includes(currentIndex)) {
+          props.setUserInput(user + nextChar);
+        }
+      } else {
+        // 다른 닫히는 괄호인 경우 자동으로 입력
+        props.setUserInput(user + nextChar);
+      }
+    }
+  }, [user, textSplit, quotePositions]); // user, textSplit, quotePositions가 변경될 때마다 실행
+
   useEffect(() => {
     if (props.daynight % 2 === 1) setThemeColor("#585858");
     else setThemeColor("#BEBEBE");