Merge pull request #373 from boostcampwm-2022/feature/#354-image-click

인기 태그 레이아웃 수정 및 줄 수 탭 기능 추가

client/src/App.scss

@@ -15,11 +15,6 @@
 @import "@/styles/global-style";
 @import "@/styles/theme";
 
-* {
-  padding: 0;
-  margin: 0;
-}
-
 html,
 body {
   height: 100%;

client/src/components/main/CodeEditor/CodeEditor.tsx

@@ -7,9 +7,9 @@ import CodeViewer from "@/components/main/CodeViewer/CodeViewer";
 import "./CodeEditor.scss";
 
 const CodeEditor = (): JSX.Element => {
-  const { code, handleCodeChange, language, lineCount } = useCodeEditor();
   const { lineRef, textRef, preRef, handleScrollChange } = useEditorScroll();
-
+  const { code, language, lineCount, handleCodeChange, handleKeyDown } =
+    useCodeEditor(textRef);
   useEffect(() => {
     textRef.current?.focus();
   }, []);
@@ -25,6 +25,7 @@ const CodeEditor = (): JSX.Element => {
         ref={textRef}
         onScroll={handleScrollChange}
         onChange={handleCodeChange}
+        onKeyDown={handleKeyDown}
         value={code}
         className="code__textarea"
         autoComplete="false"

client/src/components/main/Modal/ReviewModal/ReviewModal.tsx

@@ -24,7 +24,7 @@ const ReviewModal = ({
     <div className="review-modal">
       <div className="review-modal__code">
         <div className="review-modal__code--lines" ref={lineRef}>
-          {Array.from(Array(getLineCount(code) + 1).keys())
+          {Array.from(Array(getLineCount(code)).keys())
             .slice(1)
             .join("\n")}
         </div>

client/src/hooks/useCodeEditor.ts

@@ -1,4 +1,11 @@
-import { ChangeEvent, useCallback, useEffect, useState } from "react";
+import {
+  ChangeEvent,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useState,
+  RefObject,
+} from "react";
 import domtoimage from "dom-to-image";
 
 import { ONE_SNAPSHOT_LINE_COUNT } from "@/constants/code";
@@ -10,10 +17,13 @@ interface UseCodeEditor {
   code: string;
   language: string;
   handleCodeChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  handleKeyDown: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
   lineCount: number;
 }
 
-const useCodeEditor = (): UseCodeEditor => {
+const useCodeEditor = (
+  textAreaRef: RefObject<HTMLTextAreaElement>
+): UseCodeEditor => {
   const { code, setCode, language, images, setImages, removeImage } =
     useCodeEditorStore((state) => ({
       code: state.code,
@@ -25,6 +35,22 @@ const useCodeEditor = (): UseCodeEditor => {
     }));
   const [lineCount, setLineCount] = useState(0);
 
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (e.key === "Tab") {
+      if (textAreaRef.current !== null) {
+        e.preventDefault();
+        const start = textAreaRef.current.selectionStart;
+        const end = textAreaRef.current.selectionEnd;
+        const value = code.substring(0, start) + "  " + code.substring(end);
+        textAreaRef.current.value = value;
+        textAreaRef.current.selectionStart = textAreaRef.current.selectionEnd =
+          end + 2 - (end - start);
+        /* 커서가 뒤로 먼저 가지 않기 위해 value 먼저 변경하고 setCode 실행합니다. */
+        setCode(value);
+      }
+    }
+  };
+
   const handleCodeChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       setCode(e.target.value);
@@ -86,6 +112,7 @@ const useCodeEditor = (): UseCodeEditor => {
     handleCodeChange,
     language,
     lineCount,
+    handleKeyDown,
   };
 };