[Fe/#260] code comment 진행상황

[Klomachenko]

🎫 연관 티켓

#260

🙏 작업

• 메인 기능인 code comment를 구현합니다.

💁‍♂️ 어떻게?

• code 내에서 line을 클릭시 lineNumber를 가져옵니다. 라인 번호를 저장합니다.
• code라인을 클릭시 아래 code_review라는 div가 생성되고, 리뷰어는 이를 통해 코드리뷰가 가능합니다.
  • 클릭된 line 내부의 글은 code_review라는 div에 그대로 복사됩니다.
• 상단 review-editor라는 textarea를 code_review에 작성한 내부 value 값으로 업데이트 합니다.
• review-editor의 내부 값은 review_code라는 markdown parser에 반영되어 보여집니다.
  • 코드만 보이도록 설정하였습니다.

🙈 PR 참고 사항

해결된 문제와 해결방법

문제

• 코드를 가져오고 해당 코드를 변경한 뒤, 변경된 코드가 따로 생성되지 않고, 자꾸만 원래 코드를 업데이트 하는 상황이 발생했습니다
  해결방법
• textarea와 markdown parser를 각각 하나씩 더 생성하였습니다.

1. origin editor 라는 id를 가진 div에 질문자가 글을 작성합니다. 내부에 코드가 있다면 코드 스니펫으로 보여줍니다
2. 코드 스니펫의 줄을 클릭합니다.

• 이 때 코드 스니펫의 줄은 가장 하단 code_review라는 div박스 내부의 textarea에 그대로 복사되며, 클릭과 동시에 code_review 에디터가 생성됩니다.

3. 리뷰어는 코드를 수정합니다.

• 이 때 수정한 코드는 수정된 줄 뿐 아니라, 코드 스니펫 전체가 복사되며, 해당 코드 스니펫은 상단의 review-editor라는 textarea에 입력값으로 전달됩니다.

4. 코드리뷰가 반영됩니다.

• review-editor라는 textarea의 내부 값은 review_code에 그대로 childeren으로 전달됩니다.
• review-editor는 사용자가 볼 필요가 없기에 display: none을 통해 보이지 않게 하였습니다.

아직 해결하지 못한 문제

문제

• code스니펫 아래에 적힌 글이 있다면 리뷰된 코드 스니펫은 글 아래로 내려가게 됨
• code스니펫이 여려개일 경우, 리뷰 코드 스니펫도 그것에 맞춰 갯수가 늘어나야 하는데 그러지 못하고 있음
  해결방법
• 리뷰 코드 스니펫은 다른 컴포넌트로 분리해서 사용하는 방법으로 접근해보는게 어떨까...?

📸 스크린샷

정상적으로 작동되는 것 처럼 보이는 경우

코드가 맨 아래 위치하고 있고, 코드리뷰를 딱 해당 코드에만 적용하는 경우

• 초기상황

- 코드 클릭시 - 코드 변경 및 저장하기 클릭시 ### 문제상황 - 코드 스니펫 아래 적힌 글이 있다면? - 코드 스니펫이 여러개인 경우 - 첫번째 코드를 클릭 후 변경 - 두번째 코드를 클릭 후 변경

🤖 테스트 체크리스트

• 체크 미완료
• 체크 완료

[krokerdile]