feat: 형광펜 모드 on/off 표시 메세지 추가 (#823)

woowacourse-teams · Oct 11, 2024 · 0b2f228 · 0b2f228
1 parent 1f02630
commit 0b2f228
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 3 deletions.
diff --git a/frontend/src/assets/grayHighlighter.svg b/frontend/src/assets/grayHighlighter.svg
diff --git a/frontend/src/assets/primaryHighlighter.svg b/frontend/src/assets/primaryHighlighter.svg
diff --git a/frontend/src/components/highlight/EditSwitchButton/style.ts b/frontend/src/components/highlight/EditSwitchButton/style.ts
@@ -6,7 +6,8 @@ interface EditorSwitchProps {
 export const EditSwitchButton = styled.button<EditorSwitchProps>`
   cursor: pointer;
 
-  width: 4rem;
+  width: 3.5rem;
+  height: 2rem;
   padding: 0.5rem;
 
   background-color: ${({ theme, $isEditable }) => ($isEditable ? theme.colors.primary : theme.colors.gray)};
@@ -18,8 +19,8 @@ export const EditSwitchButton = styled.button<EditorSwitchProps>`
 export const Circle = styled.div<EditorSwitchProps>`
   transform: translateX(${({ $isEditable }) => ($isEditable ? 0 : '1.5rem')});
 
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1rem;
+  height: 1rem;
 
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: 50%;

diff --git a/frontend/src/components/highlight/HighlightEditor/index.tsx b/frontend/src/components/highlight/HighlightEditor/index.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
+import GrayHighlighterIcon from '@/assets/grayHighlighter.svg';
+import PrimaryHighlighterIcon from '@/assets/primaryHighlighter.svg';
 import {
   EDITOR_ANSWER_CLASS_NAME,
   EDITOR_LINE_CLASS_NAME,
@@ -22,6 +24,16 @@ import HighlightToggleButtonContainer from '../HighlightToggleButtonContainer';
 
 import * as S from './style';
 
+const MODE_ICON = {
+  on: {
+    icon: PrimaryHighlighterIcon,
+    alt: '형광펜 기능 켜짐',
+  },
+  off: {
+    icon: GrayHighlighterIcon,
+    alt: '형광펜 기능 꺼짐',
+  },
+};
 interface HighlightEditorProps {
   questionId: number;
   answerList: ReviewAnswerResponseData[];
@@ -94,6 +106,11 @@ const HighlightEditor = ({ questionId, answerList }: HighlightEditorProps) => {
   return (
     <S.HighlightEditorContainer ref={editorRef}>
       <S.SwitchButtonWrapper>
+        <S.HighlightText $isEditable={isEditable}>형광펜</S.HighlightText>
+        <S.SwitchModIcon
+          src={MODE_ICON[isEditable ? 'on' : 'off'].icon}
+          alt={MODE_ICON[isEditable ? 'on' : 'off'].alt}
+        />
         <EditSwitchButton isEditable={isEditable} handleEditToggleButton={handleEditToggleButton} />
       </S.SwitchButtonWrapper>
       {[...editorAnswerMap.values()].map(({ answerId, answerIndex, lineList }) => (

diff --git a/frontend/src/components/highlight/HighlightEditor/style.ts b/frontend/src/components/highlight/HighlightEditor/style.ts
@@ -12,7 +12,20 @@ export const HighlightEditorContainer = styled.div`
 
 export const SwitchButtonWrapper = styled.div`
   display: flex;
+  gap: 0.5rem;
+  align-items: center;
   justify-content: end;
+
   width: 100%;
   margin-bottom: 1rem;
 `;
+
+export const SwitchModIcon = styled.img`
+  width: 1.6rem;
+  height: 1.6rem;
+`;
+
+export const HighlightText = styled.span<{ $isEditable: boolean }>`
+  display: inline-block;
+  color: ${({ $isEditable, theme }) => ($isEditable ? theme.colors.primary : theme.colors.gray)};
+`;