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

BadaHertz52 · 2024-10-18T08:02:36Z

resolves [FE] 형광펜 적용/미적용 영역 같이 선택 시, 추가/삭제를 사용자가 선택하게 하고, 형광펜 사용방법 툴팁을 추가한다 #872

🚀 어떤 기능을 구현했나요 ?

기존에 있는 형광펜 버튼들을 모아 놓은 형광펜 메뉴 구현
디바이스의 터치 지원에 따른, 형광펜 사용방법이 담긴 툴팁 구현
글자 선택/드래그 방향 계산 버그 수정
모아보기 페이지 주관식 답변에서 개행별로 마크찍히는 버그 수정

🔥 어떻게 해결했나요 ?

Screen_Recording_20241018_164946_Samsung.Internet.mp4

📝 어떤 부분에 집중해서 리뷰해야 할까요?

시간이 부족해 툴팁 메세지, 디자인을 다 같이 정하지 않고 구현해서 메세지,디자인이 괜찮은 지 봐주세요

📚 참고 자료, 할 말

쑤쑤가 형광펜 API 에러 핸들링인 토스 모달 작업 중이라, 지금 형광펜 리팩토링 작업을 진행하면 충돌 범위가 커서 리팩토링은 추후에 진행할게요
형광펜 웹,모바일 브라우저 오류 제보 받습니다 편하게 이야기해주세요

- 꺼짐 : 버튼 왼쪽 - 켜짐: 버튼 오른쪽

BadaHertz52 · 2024-10-18T08:12:05Z

형광펜 스위치 버튼 디자인 수정

원인 :서버가 내려준 데이터 타입과 클라이언트 타입 불일치

BadaHertz52 · 2024-10-19T10:56:19Z

API 오류 수정

서버에서는 'ranges'로 주고 클라이언트에서는 'rangeList'로 다루는 것에 따른 타입 오류를 수정했어요.
이제 서버에서 내려주는 형광펜 정보 잘 반영됩니다!
해당 오류 수정하면서, 리뷰 모아보기 목 데이터에 형광펜 정보 있게 변경했어요.

🌟형광펜 정보에 따라 주관식 답변을 순차적으로 형광펜 적용 부분/미적용 부분으로 잘라야해서, 형광펜 rangeList는 endIndex를 기준으로 오름차순으로 정렬되어야합니다.

ImxYJL

제보

모바일에서, *까지 포함해서 드래그한 뒤 형광펜을 치거나 삭제를 시도하면 해당 동작이 먹히지 않습니다. 노트북에서는 *를 포함해 드래그하면 형광펜 메뉴가 아예 뜨지 않고요. 지금 * 가 이미지로 들어가 있어서 어떻게 보면 당연한 현상이지만 사용성을 위해서는 *는 드래그할 수 없게 막아버리는 게 좋을 것 같습니다.

(모바일 영상)
https://github.com/user-attachments/assets/42448792-4bde-4725-9c4f-6299061f47cb

리뷰

PR 본문에 리팩토링의 가능성이 나와 있어서 전반적인 흐름...만 읽어봤습니다. (절대 핑계입니다.) RC는 위의 제보에 대해 얘기해보고 싶어서 남겼읍니다

저번 버전도 좋았는데, 드래그한 영역에 체크됐던 내역이 있다면 형광펜과 지우개를 둘 다 보여주는 개선된 UI가 여러 케이스를 커버할 수 있을 것 같아 더 편리해졌네요!

화면 크기별 툴팁 안내 문구가 다른 것도 좋고, 형광펜 on/off쪽 디자인도 펜 모양을 없애니까 더 깔끔해진 것 같아요.

건의

소소한 건의사항으로는, 모바일 환경에서 툴팁을 보면 좁은 width에 많은 글자가 뭉쳐 있다 보니 본문과 툴팁의 구분감이 약한 느낌이 들었어요. 그래서 그림자를 조금 더 진하게 주면 좋을 것 같아요!

또 모바일에서는 텍스트 왼쪽 정렬이 더 예쁠 것 같기도 합니당

ImxYJL · 2024-10-20T04:53:59Z

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 = () => {


이 훅이 단순히 형광펜이 쳐진 영역을 리턴하는 게 아니라 형광펜이 쳐진 영역의 범위를 체크하는 훅이라, 이름에 부가적으로 Range 같은 정보가 들어가면 좋겠...지만 지금도 이해하는 데 어려움은 없습니다ㅎㅎ

ImxYJL · 2024-10-20T04:58:53Z

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

-      $position={position}
-      $width={HIGHLIGHT_BUTTON_SIZE.width.buttonWidthColor}
-    >
+    <S.Button onClick={addHighlightByDrag}>
      <span className={SR_ONLY}>하이라이트 추가 버튼</span>


뒷북이지만 😅 aria-label 등을 사용하는 대신 SR_ONLY 클래스를 별도로 설정한 이유가 궁금해용

당시에 접근성에 대한 합의가 이루어지지 않고 구조상 해당 버튼에 대한 설명이 안에 들어있는게 좋지 않나 생각했어서, 별로도 관리하는 방향으로 진행했어요.
지금은 aria-label만으로 충분하다고 생각해 이를 사용하는 것으로 변경되었어요.

ImxYJL · 2024-10-20T05:04:04Z

frontend/src/types/highlight.ts

@@ -17,12 +17,16 @@ export interface Highlight {
  // 서버에서는 ranges로 줌
  rangeList: HighlightRange[];


서버와 속성명을 맞추지 못한 이유가 있었나욥?

프론트는 배열에 's'를 사용한 복수형을 쓰지 않기로 했지만, 백엔드쪽에서는 복수형을 사용중이라 타입명에서 차이가 나요

부연설명을 하자면, 백엔드에서는 자료구조를 변수명에 담지 않습니다 ㅎㅎ.. str, list와 같은 것을 변수명에 적게 되면 나중에 변수 타입이 달라졌을 때 불일치할 수 있기 때문이예요

설마 했는데 프리코스때 받았던 피드백과 같은 이유였군요ㅋㅋㅋㅋ

ImxYJL · 2024-10-20T05:09:37Z

frontend/src/constants/highlight.ts

+export const HIGHLIGHT_MENU_WIDTH: { [key in HighlightArea | 'longPress']: number } = (() => {
+  return {
+    partial: HIGHLIGHT_BUTTON_WIDTH * 2,
+    none: HIGHLIGHT_BUTTON_WIDTH,
+    full: HIGHLIGHT_BUTTON_WIDTH,
+    longPress: HIGHLIGHT_BUTTON_WIDTH,
+  };
+})();


왜 하이라이트된 영역별로 메뉴 너비를 따로 설정해주고 있지? 싶었는데 케이스에 따라 메뉴에서 보여줘야 하는 요소가 달라져서 그런 거군요ㅋㅋㅋㅋ

ImxYJL · 2024-10-20T05:12:17Z

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

+export const Message = styled.aside`
+  position: absolute;
+  /* HelperIcon과 말풍선 삼각형 높이 */
+  top: calc(1.6rem * 2);


동적인 🔺이었군요

ImxYJL · 2024-10-20T05:13:22Z

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

+          {isTouchDevice() ? (
+            <>
+              <p>글자를 선택해 형광펜을 적용하거나 삭제할 수 있어요</p>
+              <p>형광펜이 적용된 영역은 슬라이드 동작으로 삭제할 수 있어요</p>
+            </>
+          ) : (
+            <>
+              <p>드래그하여 형광펜을 적용하거나 삭제할 수 있어요</p>
+              <p>형광펜이 적용된 영역은 길게 눌러 삭제할 수 있어요</p>
+            </>
+          )}
+        </S.Message>


ImxYJL · 2024-10-20T05:21:54Z

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

+            onMouseMove={clearPressTimer}
+            onTouchMove={handleLongPressLine}
+          >
+            <S.Marker src={DotIcon} alt="점" />


이 * 이미지에 대한 별도의 alt 설명이 필요할까요?

li의 마크와 답변 정렬이 안되는 오류가 있어서 임시방편으로 마크를 대신하는 이미지를 넣었고, 당시에는 답변 항목 구분자로 의미가 있다고 생각했어요.
현재는 마크와 답변 정렬 오류를 해결해, 이미지를 삭제했어요

- 글자 수에서 -1 안 한 부분 있었음

- 초기에 만든 block 변수명이 곳곳에 남아있어...

ImxYJL

수정사항 전부 확인했습니다~~ 툴팁 그림자는 이 정도만 해도 충분할 것 같아요!

soosoo22

처음엔 형광펜으로 색칠된 영역을 꾹 누르면, 삭제할 수 있다는 부분을 사용자가 알 수 있을까? 싶었는데 툴팁으로 형광펜에 대한 설명을 해주니 처음 사용하는 사용자 입장에서 단번에 이해할 수 있겠네요!

색칠하기와 지우기를 같은 라인에 배치한 부분이 정말 좋네요!

chysis

형광펜 메뉴에서 추가/삭제가 동시에 뜨니 확실히 사용하기도 편해졌고, 사용자 입장에서 여러 가지 케이스를 고민하지 않아도 돼서 좋은 것 같아요.

형광펜 오류.webm
로컬에서 실행해보다가 한 가지 버그를 발견해서 제보합니다! 덧칠할 때 순방향이면 영상과 같은 버그가 없지만 역방향일 때만 저러는 것 같아요.

버그는 알려야 할 것 같아서 RC 남깁니다!

chysis · 2024-10-21T09:12:50Z

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

+import { HIGHLIGHT_BUTTON_SIZE } from '@/constants';
+import { Position } from '@/types';
+
+export const Menu = styled.div<{ $position: Position; $width: number }>`


리팩토링 시 style props를 interface로 정의하면 될 것 같아요

chysis · 2024-10-21T09:21:28Z

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

+    <S.TooltipButton onMouseOver={() => setIsOpenMessage(true)} onMouseOut={() => setIsOpenMessage(false)}>
+      <S.HelperIcon src={HelperIcon} alt="도움말 아이콘" />
+      {isOpenMessage && (
+        <S.Message role="tooltip">


role 속성도 함께 챙겨주었네요👍

chysis · 2024-10-21T11:55:01Z

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

-`;
-export const AnswerText = styled.div`
-  margin-left: 8px;
+  margin-left: 0.8rem;


지난 커밋에서 margin-left 값을 0.8rem에서 2rem으로 수정했었는데, 이 브랜치에서 확인해 보니 0.8rem일 때도 너무 달라붙어 있다는 느낌이 안 드네요...!

이 부분이 충돌될 것 같아서 코멘트 남깁니다! 0.8rem도 괜찮으면 이대로 가도 좋을 것 같아요.

▲ 2rem

▲ 0.8rem

저는 답변과 마크가 일렬로 되어있어서 0.8rem도 괜찮은 것 같아서 0.8rem으로 갈게요

chysis · 2024-10-21T11:55:55Z

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

+  &::marker {
+    margin: 0;
+  }


list style 말고도 ::marker 속성을 사용할 수 있군요 :0

chysis

코멘트 확인 부탁해요 :)

BadaHertz52 · 2024-10-21T13:45:56Z

에프이 관련 오류 잡았습니다. 오류 잡으면서 리팩토링하다가 잘못 건드렸네요

…eview-me into fe/feat/872/highlight-area-tooltip

chysis · 2024-10-21T14:05:55Z

오류2.webm
수정 내용 확인했는데 이번에는 처음 형광펜을 칠할 때 위와 같은 문제가 있었어요!

- 잘못된 변수로 계산함

BadaHertz52 · 2024-10-21T14:15:46Z

찐막 형광펜 버튼 위치 오류 수정

anchorLineIndex을 사용해야하는데 anchorIndexInLine을 사용해서 계산했네요.... ㅎㅎㅎ

_2024_10_21_23_12_31_720.mp4

chysis

탈도 많고 기능도 많은 형광펜 메뉴 구현이 드디어 끝났네요! 오류 없는 것 확인했습니다. 고생했어요

* refactor: line 관련 변수명 변경 (blockElement -> lineElement) * feat: HighlightMenu 컴포넌트 훅 생성 및 기존 관련 코드 변경 * fix: 하이라이트 적용과 미적용 같이 있을 때, isForwardDrag 값 오류 수정 * refactor: 하이라이트 메뉴 사이즈 관련 변수 수정 * design: 하이라이트 메뉴 버튼 스타일 변경 (사이즈 조정 및 hover시 배경색 변경) * fix: 모아보기 페이지- 주관식 답변 개행에도 li marker 표시되는 오류 수정 * refactor: 하이라이트 메뉴 위치 초기화하는 함수명 변경 * fix: 길게 눌렀을 때 삭제되는 버튼 안 뜨는 오류 수정 및 상태명 변경 * feat: 형광펜 기능 알려주는 툴팁 구현 * chore: 불필요한 콘솔 삭제 * fix: useMutateHighlight 테스트 오류 수정 * design: 형광펜 스위치 버튼 디자인 수정 - 꺼짐 : 버튼 왼쪽 - 켜짐: 버튼 오른쪽 * fix: 리뷰 모아보기 데이터 타입 차이로 인한, 형광펜 적용 안되는 오류 수정 원인 :서버가 내려준 데이터 타입과 클라이언트 타입 불일치 * design: EditorLineBlock 스타일 컴포넌트 삭제 * chore: 리뷰 모아보기 목 데이터 변경(형광펜 적용 추가) * chore: 불필요한 코드 삭제 * feat: 리뷰 모아보기- 주관식 답변 Dot 선택되지 않게 처리 및 UndraggableWrapper에 min-width 적용 * feat: 형광펜 메뉴 위치 - 에디터 상단 넘는지 확인하는 기능 추가 * design: 툴팁 그림자, 문자 졍렬 변경 * chore: 주석처리 제거 * chore: sr-only 삭제 * chore: 답변 항목 구문자 alt 빈문자열로 변경 * design: 그림자 폭 수정 * fix:span 자동 줄넘김 오류 수정 * fix : list 마크와 답변 정렬 안되는 오류 수정 및 마크 이미지 삭제 * chore: 불필요한 콘솔 삭제 * refactor: block -> line으로 변경 * fix: 형광펜 더하기 시, endIndex 오류 수정 - 글자 수에서 -1 안 한 부분 있었음 * docs: 리뷰 모아보기 페이지 하이라이트 목 데이터 변경 * style: Syntax에 prettier 적용 * fix: 글자의 마지막에만 형광펜 칠해지지 않는 오류 수정 * fix: 형광펜 있는 영역을 포함한 여러 답변에서 형광펜 더할 때 offset 오류 수정 * refactor: block -> line으로 변경 - 초기에 만든 block 변수명이 곳곳에 남아있어... * chore: 하이라이트 목 핸들러 필요 없는 response 삭제 * fix: 하이라이트 API오류 시, fallback 실행으로 isEditable 세션스토리지 값 삭제되는 오류 수정 * chore: 불필요한 타입(Highlight 삭제) * fix: 같은 답변 다른 줄, 드래그 방향 오류 수정 * fix: 같은 답변 다른 줄 드래그 방향 계산 오류 수정 - 잘못된 변수로 계산함

BadaHertz52 added 10 commits October 18, 2024 14:41

refactor: line 관련 변수명 변경 (blockElement -> lineElement)

68438f6

feat: HighlightMenu 컴포넌트 훅 생성 및 기존 관련 코드 변경

a0b692a

fix: 하이라이트 적용과 미적용 같이 있을 때, isForwardDrag 값 오류 수정

04f04fb

refactor: 하이라이트 메뉴 사이즈 관련 변수 수정

462bb03

design: 하이라이트 메뉴 버튼 스타일 변경 (사이즈 조정 및 hover시 배경색 변경)

d817bdd

fix: 모아보기 페이지- 주관식 답변 개행에도 li marker 표시되는 오류 수정

f97f414

refactor: 하이라이트 메뉴 위치 초기화하는 함수명 변경

77f76c2

fix: 길게 눌렀을 때 삭제되는 버튼 안 뜨는 오류 수정 및 상태명 변경

973daf0

feat: 형광펜 기능 알려주는 툴팁 구현

9eb233e

chore: 불필요한 콘솔 삭제

461f270

BadaHertz52 added 🍀 FE 🐛 버그 🚀 기능 labels Oct 18, 2024

BadaHertz52 added this to the 6차 스프린트: 최종장 milestone Oct 18, 2024

BadaHertz52 requested review from chysis, soosoo22 and ImxYJL October 18, 2024 08:02

BadaHertz52 self-assigned this Oct 18, 2024

BadaHertz52 linked an issue Oct 18, 2024 that may be closed by this pull request

[FE] 형광펜 적용/미적용 영역 같이 선택 시, 추가/삭제를 사용자가 선택하게 하고, 형광펜 사용방법 툴팁을 추가한다 #872

Closed

BadaHertz52 added 2 commits October 18, 2024 17:07

fix: useMutateHighlight 테스트 오류 수정

c1e8346

design: 형광펜 스위치 버튼 디자인 수정

6228290

- 꺼짐 : 버튼 왼쪽 - 켜짐: 버튼 오른쪽

BadaHertz52 added 4 commits October 19, 2024 19:19

fix: 리뷰 모아보기 데이터 타입 차이로 인한, 형광펜 적용 안되는 오류 수정

52ca34e

원인 :서버가 내려준 데이터 타입과 클라이언트 타입 불일치

design: EditorLineBlock 스타일 컴포넌트 삭제

cd6d8ec

chore: 리뷰 모아보기 목 데이터 변경(형광펜 적용 추가)

1ba7d4b

chore: 불필요한 코드 삭제

e92c960

ImxYJL requested changes Oct 20, 2024

View reviewed changes

BadaHertz52 added 2 commits October 20, 2024 14:53

feat: 리뷰 모아보기- 주관식 답변 Dot 선택되지 않게 처리 및 UndraggableWrapper에 min-width 적용

a0bc79a

feat: 형광펜 메뉴 위치 - 에디터 상단 넘는지 확인하는 기능 추가

ff817ba

BadaHertz52 requested a review from ImxYJL October 20, 2024 08:09

BadaHertz52 added 13 commits October 20, 2024 17:12

design: 그림자 폭 수정

693e38a

fix:span 자동 줄넘김 오류 수정

178f3f6

fix : list 마크와 답변 정렬 안되는 오류 수정 및 마크 이미지 삭제

04d1129

chore: 불필요한 콘솔 삭제

733e4bc

refactor: block -> line으로 변경

aab8168

fix: 형광펜 더하기 시, endIndex 오류 수정

465b5bc

- 글자 수에서 -1 안 한 부분 있었음

docs: 리뷰 모아보기 페이지 하이라이트 목 데이터 변경

e36b1ae

style: Syntax에 prettier 적용

8829c36

fix: 글자의 마지막에만 형광펜 칠해지지 않는 오류 수정

6a1f189

fix: 형광펜 있는 영역을 포함한 여러 답변에서 형광펜 더할 때 offset 오류 수정

83e0473

refactor: block -> line으로 변경

e133509

- 초기에 만든 block 변수명이 곳곳에 남아있어...

chore: 하이라이트 목 핸들러 필요 없는 response 삭제

5127a70

fix: 하이라이트 API오류 시, fallback 실행으로 isEditable 세션스토리지 값 삭제되는 오류 수정

7af6617

ImxYJL approved these changes Oct 21, 2024

View reviewed changes

soosoo22 approved these changes Oct 21, 2024

View reviewed changes

chysis reviewed Oct 21, 2024

View reviewed changes

chysis requested changes Oct 21, 2024

View reviewed changes

BadaHertz52 added 2 commits October 21, 2024 22:20

chore: 불필요한 타입(Highlight 삭제)

043d35b

fix: 같은 답변 다른 줄, 드래그 방향 오류 수정

b124bbc

BadaHertz52 requested a review from chysis October 21, 2024 13:47

Merge branch 'develop' of https://github.com/woowacourse-teams/2024-r…

2842694

…eview-me into fe/feat/872/highlight-area-tooltip

fix: 같은 답변 다른 줄 드래그 방향 계산 오류 수정

ec4db4e

- 잘못된 변수로 계산함

chysis approved these changes Oct 21, 2024

View reviewed changes

chysis merged commit cd3b567 into develop Oct 21, 2024
2 checks passed

donghoony deleted the fe/feat/872/highlight-area-tooltip branch November 17, 2024 08:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

BadaHertz52 commented Oct 18, 2024 •

edited

Loading

BadaHertz52 commented Oct 18, 2024

BadaHertz52 commented Oct 19, 2024

ImxYJL left a comment •

edited

Loading

ImxYJL Oct 20, 2024

ImxYJL Oct 20, 2024

BadaHertz52 Oct 20, 2024

ImxYJL Oct 20, 2024

BadaHertz52 Oct 20, 2024

donghoony Oct 20, 2024

ImxYJL Oct 21, 2024

ImxYJL Oct 20, 2024

ImxYJL Oct 20, 2024

ImxYJL Oct 20, 2024

ImxYJL Oct 20, 2024

BadaHertz52 Oct 20, 2024 •

edited

Loading

ImxYJL left a comment

soosoo22 left a comment

chysis left a comment •

edited

Loading

chysis Oct 21, 2024

chysis Oct 21, 2024

chysis Oct 21, 2024

BadaHertz52 Oct 21, 2024

chysis Oct 21, 2024

chysis left a comment

BadaHertz52 commented Oct 21, 2024

chysis commented Oct 21, 2024

BadaHertz52 commented Oct 21, 2024

chysis left a comment

		@@ -17,12 +17,16 @@ export interface Highlight {
		// 서버에서는 ranges로 줌
		rangeList: HighlightRange[];

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

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

Conversation

BadaHertz52 commented Oct 18, 2024 • edited Loading

🚀 어떤 기능을 구현했나요 ?

🔥 어떻게 해결했나요 ?

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

BadaHertz52 commented Oct 18, 2024

형광펜 스위치 버튼 디자인 수정

BadaHertz52 commented Oct 19, 2024

API 오류 수정

ImxYJL left a comment • edited Loading

Choose a reason for hiding this comment

제보

리뷰

건의

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BadaHertz52 Oct 20, 2024 • edited Loading

Choose a reason for hiding this comment

ImxYJL left a comment

Choose a reason for hiding this comment

soosoo22 left a comment

Choose a reason for hiding this comment

chysis left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chysis left a comment

Choose a reason for hiding this comment

BadaHertz52 commented Oct 21, 2024

chysis commented Oct 21, 2024

BadaHertz52 commented Oct 21, 2024

찐막 형광펜 버튼 위치 오류 수정

chysis left a comment

Choose a reason for hiding this comment

BadaHertz52 commented Oct 18, 2024 •

edited

Loading

ImxYJL left a comment •

edited

Loading

BadaHertz52 Oct 20, 2024 •

edited

Loading

chysis left a comment •

edited

Loading