[FE] feat: 형광펜 메뉴 및 툴팁 구현

frontend/src/components/highlight/components/EditSwitchButton/style.ts

@@ -17,7 +17,7 @@ export const EditSwitchButton = styled.button<EditorSwitchProps>`
 `;
 
 export const Circle = styled.div<EditorSwitchProps>`
-  transform: translateX(${({ $isEditable }) => ($isEditable ? 0 : '1.5rem')});
+  transform: translateX(${({ $isEditable }) => ($isEditable ? '1.5rem' : 0)});
 
   width: 1rem;
   height: 1rem;

frontend/src/components/highlight/components/EditorLineBlock/index.tsx

@@ -2,9 +2,6 @@ import { EDITOR_LINE_CLASS_NAME } from '@/constants';
 import { EditorLine, HighlightRange } from '@/types';
 
 import Syntax from '../Syntax';
-
-import * as S from './style';
-
 interface EditorLineBlockProps {
   line: EditorLine;
   lineIndex: number;
@@ -62,9 +59,9 @@ const EditorLineBlock = ({ line, lineIndex }: EditorLineBlockProps) => {
   };
 
   return (
-    <S.EditorLineBlock className={EDITOR_LINE_CLASS_NAME} data-index={lineIndex}>
+    <p className={EDITOR_LINE_CLASS_NAME} data-index={lineIndex}>
       {renderSentenceList()}
-    </S.EditorLineBlock>
+    </p>
   );
 };
 

frontend/src/components/highlight/components/HighlightButton/index.tsx

@@ -1,49 +1,30 @@
 import EraserIcon from '@/assets/eraser.svg';
 import HighlighterIcon from '@/assets/highlighter.svg';
 import TrashIcon from '@/assets/trash.svg';
-import {
-  HIGHLIGHT__TOGGLE_BUTTON_CLASS_NAME,
-  HIGHLIGHT_BUTTON_SIZE,
-  HIGHLIGHT_REMOVER_CLASS_NAME,
-  SR_ONLY,
-} from '@/constants';
-import { Position } from '@/types';
+import { SR_ONLY } from '@/constants';
 
 import * as S from './style';
 
 interface DragHighlightAddButtonProps {
-  position: Position;
   addHighlightByDrag: () => void;
 }
 
-const DragHighlightAddButton = ({ addHighlightByDrag, position }: DragHighlightAddButtonProps) => {
+const DragHighlightAddButton = ({ addHighlightByDrag }: DragHighlightAddButtonProps) => {
   return (
-    <S.Button
-      className={HIGHLIGHT__TOGGLE_BUTTON_CLASS_NAME}
-      onClick={addHighlightByDrag}
-      $position={position}
-      $width={HIGHLIGHT_BUTTON_SIZE.width.buttonWidthColor}
-    >
+    <S.Button onClick={addHighlightByDrag}>
       <span className={SR_ONLY}>하이라이트 추가 버튼</span>
       <S.ButtonIcon src={HighlighterIcon} alt="" />
-      <S.Color aria-label="하이라이트 색상" />
     </S.Button>
   );
 };
 
 interface DragHighlightRemoveButtonProps {
   removeHighlightByDrag: () => void;
-  position: Position;
 }
 
-const DragHighlightRemoveButton = ({ removeHighlightByDrag, position }: DragHighlightRemoveButtonProps) => {
+const DragHighlightRemoveButton = ({ removeHighlightByDrag }: DragHighlightRemoveButtonProps) => {
   return (
-    <S.Button
-      className={HIGHLIGHT__TOGGLE_BUTTON_CLASS_NAME}
-      onClick={removeHighlightByDrag}
-      $position={position}
-      $width={HIGHLIGHT_BUTTON_SIZE.width.basic}
-    >
+    <S.Button onClick={removeHighlightByDrag}>
       <span className={SR_ONLY}>하이라이트 삭제 버튼</span>
       <S.ButtonIcon src={EraserIcon} alt="" />
     </S.Button>
@@ -52,20 +33,11 @@ const DragHighlightRemoveButton = ({ removeHighlightByDrag, position }: DragHigh
 
 interface LongPressHighlightRemoveButtonProps {
   removeHighlightByLongPress: () => void;
-  position: Position;
 }
 
-const LongPressHighlightRemoveButton = ({
-  removeHighlightByLongPress,
-  position,
-}: LongPressHighlightRemoveButtonProps) => {
+const LongPressHighlightRemoveButton = ({ removeHighlightByLongPress }: LongPressHighlightRemoveButtonProps) => {
   return (
-    <S.Button
-      className={HIGHLIGHT_REMOVER_CLASS_NAME}
-      onClick={removeHighlightByLongPress}
-      $position={position}
-      $width={HIGHLIGHT_BUTTON_SIZE.width.basic}
-    >
+    <S.Button onClick={removeHighlightByLongPress}>
       <span className={SR_ONLY}>하이라이트 삭제 버튼</span>
       <S.ButtonIcon src={TrashIcon} alt="" />
     </S.Button>

frontend/src/components/highlight/components/HighlightButton/style.ts

@@ -1,38 +1,22 @@
 import styled from '@emotion/styled';
 
-import { HIGHLIGHT_BUTTON_SIZE } from '@/constants';
-import { Position } from '@/types';
-
-export const Button = styled.button<{ $position: Position; $width: number }>`
-  position: absolute;
-  top: ${(props) => props.$position.top};
-  left: ${(props) => props.$position.left};
+import { HIGHLIGHT_BUTTON_WIDTH } from '@/constants';
 
+export const Button = styled.button`
   display: flex;
-  gap: 0.8rem;
+  align-items: center;
+  justify-content: center;
 
-  width: ${(props) => `${props.$width / 10}rem`};
-  height: ${() => `${HIGHLIGHT_BUTTON_SIZE.height / 10}rem`};
-  padding: 0.5rem 0.8rem;
+  width: ${`${HIGHLIGHT_BUTTON_WIDTH / 10}rem`};
+  padding: 0.5rem;
 
-  background-color: ${({ theme }) => theme.colors.white};
   border-radius: ${({ theme }) => theme.borderRadius.basic};
-  -webkit-box-shadow: 0 0 ${() => `${HIGHLIGHT_BUTTON_SIZE.shadow / 10}rem`} -0.2rem #343434b8;
-  box-shadow: 0 0 ${() => `${HIGHLIGHT_BUTTON_SIZE.shadow / 10}rem`} -0.2rem #343434b8;
 
   &:hover {
-    background-color: ${({ theme }) => theme.colors.palePurple};
+    background-color: ${({ theme }) => theme.colors.lightPurple};
   }
 `;
-
 export const ButtonIcon = styled.img`
-  width: 1.5rem;
-  height: 1.5rem;
-`;
-
-export const Color = styled.div`
-  width: 1.5rem;
-  height: 1.5rem;
-  background-color: ${({ theme }) => theme.colors.primary};
-  border-radius: 50%;
+  width: 1.6rem;
+  height: 1.6rem;
 `;

frontend/src/components/highlight/components/HighlightEditor/hooks/index.ts

@@ -1,7 +1,7 @@
 export { default as useHighlight } from './useHighlight';
-export { default as useDragHighlightButtonPosition } from './useDragHighlightButtonPosition';
+export { default as useDragHighlightButtonPosition } from './useDragHighlightPosition';
 export { default as useCheckHighlight } from './useCheckHighlight';
-export { default as useLongPressHighlightButtonPosition } from './useLongPressHighlightButtonPosition';
+export { default as useLongPressHighlightButtonPosition } from './useLongPressHighlightPosition';
 export { default as useLongPress } from './useLongPress';
 export { default as useMutateHighlight } from './useMutateHighlight';
 export { default as useEditableState } from './useEditableState';

frontend/src/components/highlight/components/HighlightEditor/hooks/useCheckHighlight.ts

@@ -3,16 +3,28 @@ import { useState } from 'react';
 import { HIGHLIGHT_SPAN_CLASS_NAME, SYNTAX_BASIC_CLASS_NAME } from '@/constants';
 import { SelectionInfo } from '@/utils';
 
+export type HighlightArea = 'full' | 'partial' | 'none';
+
 const useCheckHighlight = () => {
-  const [isAddingHighlight, setIsAddingHighlight] = useState(false);
+  const [highlightArea, setHighlightArea] = useState<HighlightArea>('none');
 
   const checkHighlight = (info: SelectionInfo) => {
     const selectedAllSpanList = getAllSpanInSelection(info.selection);
-    const isNoneHighlight = selectedAllSpanList.some((span) => !span.classList.contains(HIGHLIGHT_SPAN_CLASS_NAME));
+    let highlightedSpanLength = 0;
+
+    selectedAllSpanList.forEach((span) => {
+      if (span.classList.contains(HIGHLIGHT_SPAN_CLASS_NAME)) highlightedSpanLength += 1;
+    });
+
+    const newHighlightArea: HighlightArea = highlightedSpanLength
+      ? selectedAllSpanList.length === highlightedSpanLength
+        ? 'full'
+        : 'partial'
+      : 'none';
 
-    setIsAddingHighlight(isNoneHighlight);
+    setHighlightArea(newHighlightArea);
 
-    return isNoneHighlight;
+    return newHighlightArea;
   };
 
   const getAllSpanInSelection = (selection: Selection) => {
@@ -23,7 +35,7 @@ const useCheckHighlight = () => {
   };
 
   return {
-    isAddingHighlight,
+    highlightArea,
     checkHighlight,
   };
 };