기능: 게시물 자체뿐 아니라 특정 텍스트도 ‘좋아요’ (영상)

커뮤니티 여러분, 안녕하세요.

테마 컴포넌트에 새로운 기능을 개발하면서 프로그래밍 관련 질문이 생겼습니다. 현재까지 구현한 내용과 막힌 부분을 보여주기 위해 짧은 영상을 준비했습니다.

간단한 설명은 다음과 같습니다:
사용자가 게시글 전체가 아니라, 게시글(다른 사람의 게시글 포함) 안의 특정 텍스트를 "좋아요"할 수 있도록 하려는 것입니다.
사용자가 텍스트를 선택하면 새 아이콘을 클릭하게 되고, 이 아이콘은 선택된 텍스트를 [warp] 블록으로 감싸줍니다. 이후 이 블록을 이용해 스타일링을 적용합니다.

이 래핑은 원본 텍스트를 수정함으로써 이루어지는데, 이는 다른 사람의 게시글을 수정할 권한이 없는 일반 사용자들에게 문제가 됩니다.

질문:

  • 모델 자체에 "메타 정보"를 저장하는 방법을 찾고 있습니다.
  • 모든 사용자가 텍스트를 수정/장식할 수 있는 방법을 찾고 있습니다.

도움 주시면 감사하겠습니다.

당신처럼 저도 이 기능에 정말 관심이 많습니다. 이 기능을 통해 커뮤니티의 의견을 수렴하여, 우리가 직접 호스팅하거나 공개적으로 공유할 디렉터리를 만들 때 유용하고 가치 있는 콘텐츠를 선정하고 인용하는 데 도움이 됩니다.

실제로는 테마 컴포넌트를 활용하면서 더 안전한 방식으로 구현했습니다.

목표
게시글 자체뿐만 아니라 게시글 내부의 콘텐츠(예: 특정 이미지나 텍스트 구절)에 대한 ‘좋아요’ 기능을 제공하는 것입니다.

접근 방식
테마 컴포넌트에서 구현해야 했기 때문에, 이러한 '사용자 좋아요’에 대한 메타 정보를 저장할 방법을 찾아야 했습니다. 데이터베이스를 수정할 수 있는 것은 실제 플러그인뿐이기 때문입니다. 초기에는 게시글의 원본 텍스트를 직접 수정하는 방식을 시도했지만, 사용자의 게시글을 변경하는 것은 원치 않았기 때문에 매우 지저분한 결과로 이어졌습니다.
결국 Firebase Firestore를 사용하여 데이터를 저장하는 방식으로 해결했습니다.

결과
이제 사용자는 LI 요소와 P 요소 내부의 썸네일 및 텍스트에 '하트’를 보낼 수 있습니다.

향후 계획
이를 테마 컴포넌트로 공개할 계획입니다. 다만, 개발자가 데이터를 다른 곳에 호스팅하길 원한다면 데이터 저장 부분은 개발자가 직접 처리해야 합니다.

충분한 '좋아요’를 주신다면 곧 배포하겠습니다 :slight_smile:

이 기능은 일부 부분이 다른 부분보다 더 눈에 띄는 매우 긴 게시물에 유용할 수 있습니다.
참고로, 여러 개의 '좋아요’가 있는 경우, 가장 많이 '좋아요’를 받은 상위 25%만 표시하면 더 명확하지 않을까요? 여기저기 빨간색 텍스트 줄이 너무 많으면 매우 어지러워 보일 수 있습니다.

물론이죠, 우리가 원하는 건 뭐든 만들 수 있어요 :wink: '25퍼센트’라는 건 정확히 무슨 뜻이에요?

세 번째 사분위수(가장 높은 25%)보다 높은 좋아요를 받은 게시물입니다.

이 기능을 빨리 출시해 주세요!
Medium의 하이라이트 기능이 정말 마음에 들거든요. 이제 discourse에서도 이 기능이 있었으면 좋겠어요. 가끔 텍스트의 일부에 대한 감정을 표현하고, 나중에 다시 볼 수 있도록 저장하고 싶거든요. 하지만 현재는 전체 기사만 북마크할 수 있습니다 :heart_eyes:

안녕하세요, 이제 안정적으로 작동하고 있습니다. 코드 정리와 커뮤니티 배포용 버전을 제공해야 합니다.

이 프로젝트에 대한 반응이 정말 놀라워서, 많은 분들이 좋아하고 있습니다.

상황이 변하면 알려드리겠습니다! 이번 주에 무언가를 제공할 수 있기를 바랍니다.

정말 인상적인 작업인 것 같습니다. 공개되면 코드를 한번 보고 싶네요 (그리고 아마 30% 정도는 이해할 수 있을 겁니다). :slight_smile:

정말 놀랍네요! 제대로 작동하는 모습을 보고 싶습니다. 감사합니다!

여러분, 안녕하세요! 이 게시물에서 설명드린 것처럼 저도 비슷한 아이디어가 있었습니다. @Sören_Geier 님, 이 부분에 대해 새로운 소식이라도 있나요?

며칠 전부터 특정 텍스트 부분을 '좋아요’하는 것 외에도, 인용된 부분에 대해 그 인용에 주어진 모든 답변에 대한 링크 목록이 있으면 좋겠다는 생각을 하게 되었습니다. 예를 들어 이 단어를 인용했다면, 원문에서 해당 단어가 하이라이트되고, 누군가 그 하이라이트를 클릭하면 몇 개의 답변이 이를 인용했는지, 누가 인용했는지 등을 미리 볼 수 있게 되는 거죠. 이는 토론의 특정 부분에 대한 깊이를 이해하는 좋은 방법이 될 것입니다.

제 아이디어가 충분히 명확한지 모르겠네요 하하. 하지만 이 ‘좋아요’ 기능과 유사한 방식으로 작동할 것이며, 동일한 데이터 저장 문제를 가질 것이라 예상합니다.

감사합니다 :slight_smile:

인라인 하팅(Inline Hearting) 기능이 포함된 오픈 소스 저장소를 검토해 달라고 디스커스 개발자들과 협의 중입니다. 깨끗한 디스커스 설치 환경에 이 기능을 설치하자마자 바로 작동했습니다.

현재 버전은 첫 번째 영상에서보다 훨씬 멋져 보입니다!

조금만 기다려 주세요.

감사합니다. 꼭 가장 먼저 사용해 보고 피드백을 드릴게요. 좋은 하루 보내세요!

안녕하세요, 코드를 '커뮤니티 공개 가능’한 상태로 만들기 위해 DM으로 도와주실 분이 계신가요? 레포지토리는 이미 세팅되어 공유할 준비가 되어 있지만, 널리 알리기 전에 먼저 한 분이랑 함께 건전성 검사를 하고 다른 관점에서 코드를 검토해 주셨으면 합니다.

앞으로 이 프로젝트를 진행할 수 있도록 도움이 필요하신 분은 언제든 말씀해 주세요.