modulersYJ/ganoverflow-front

IDEA: 내 CHAT문서에 대해, 형광펜 긋기 기능 있으면 좋을듯.

Opened this issue · 3 comments

유지,관리 방법

클라에서 형광펜을 긋고 유지하려면, 결국 백엔드에서 이를 유지하고 다시 보내줘야 한다.

  1. chat 내용을 분리(plain text, highlited text)하든
  2. 하이라이트 시, 클라이언트에서 읽고 다시 형광펜 칠 수 있는 특수한 식별자를 채팅 텍스트 내 해당 문장에 wrap해주든 지
    하면 될 것 같다.

내 생각엔 1번의 경우 단어, 혹은 문장 간 순서 정렬 문제를 고려하여, 관리하기 난해해질 수 있을 것 같고, update 시 매우 큰 복잡도를 야기할 것이라 생각하여, 2번 방법으로 간단하게 클라이언트에서 텍스트 내 백틱 등으로 wrap처리하여 요청을 보내주는 편이 나아보인다.

BUT!!!

  1. 하이라이트 영역 중복 시 처리 문제
  • 백틱만을 사용하면, 어려워지지 않나? 클라이언트 자체적인 검증 로직을 마련해야 함
  • chatPair의 필드 확장을 통한 접근법: 하이라이트 start, end 따로 둬서 관리
import { Chatpost } from "src/chatposts/entities/chatpost.entity";
import { Column, Entity, ManyToOne, PrimaryGeneratedColumn } from "typeorm";

@Entity()
export class ChatPair {
  @PrimaryGeneratedColumn()
  chatPairId: number;

  @Column()
  question: string;
  @Column()
  answer: string;
  @Column()
  order: number;

  // 형광펜 강조를 위한 새로운 칼럼들
  @Column({ nullable: true })
  highlightStart: number;

  @Column({ nullable: true })
  highlightEnd: number;

  @ManyToOne(() => Chatpost, (chatPost) => chatPost.chatPair)
  chatPost: Chatpost;
}

형광펜 긋는 방법

형광펜을 활성화시키는 트리거(버튼)이 있어야 할 것이다.

  1. 형광펜 버튼 클릭으로 활성화 이후, 채팅 텍스트 드래그 -> 형광펜 처리 & 서버 업데이트
  • 사용자 경험 비교적 안좋을 것으로 예상.
  1. 채팅 텍스트 드래그를 통한 영역 생성 시, 형광펜 버튼을 툴팁처럼 띄워주고 이 버튼을 클릭 시 -> 형광펜 처리 & 서버 업데이트
  • 비록, 매 드래그 시 형광펜 활성화 버튼을 띄워줘야하지만, 1번에 비해 UX가 우수할 것으로 예상

@hongregii 혹시 관련해서 의견 있으면 남겨주세요..!

백엔드쪽 설명 더 있으면 좋을것 같아요

  1. start / end가 있다는 말은 answer 안에서만 할 수 있다는 거로 이해하면 되나요?
  2. 그리고 하나의 답변 안에서도 형광펜을 두군데 칠수는 없을것 같은데 맞을까요?
    ex. 로렘입 섬로렘입섬 로렘입섬 로렘입섬 ← 이렇게는 안될것 같네요

만약 이대로 비즈니스룰 유지하실거면 그대로 구현해주시고 알려주세요!

@ABizCho

@hongregii 요 코멘트 답변을 못드렸네요..!

  1. 저 필드확장 방식은 생각도 잘 안나네욥.. 근데 확실히 number로만 관리하면 answer이든 question이든 말씀해주신대로 한쪽만 적용 가능하겠네요!

  2. 아마 필드를 따로 안두고 백틱같은 걸로 하이라이트할 영역을 단순히 wrap하여 저장하는 것으로 관리한다면 중복영역 관리가 안돼서, 하나의 answer 내에서 두개의 형광펜을 치는 것은 어려울 것 같네요(중복영역 검증을 해주지 않는 이상?)

사실, 이 부분은 게시판 내 컨텐츠 보여주는 부분이랑도 긴밀하게 닿아 있는 문제라 홍래님과 오프라인 만남 때 깊게 논의해보고 결정하는게 나을 것 같습니다!

이 이상으로 아이디어 디벨롭해두진 않고 펜딩하겠슴다~