Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/#094 기초 마크다운 에디터 구현 #95

Merged
merged 20 commits into from
Nov 12, 2024

Conversation

Ludovico7
Copy link
Collaborator

@Ludovico7 Ludovico7 commented Nov 12, 2024

📝 변경 사항

🔍 변경 사항 설명

  • �기존 프로토타입 코드를 수정해서 에디터 스타일에 맞게 반영했습니다
    • 기존에 지원하던 마크다운 문법 변환 기능
    • 리스트 관련 기능
      • li 태그 사이 포인터 관계 수정
      • 리스트 분할 기능
  • 에디터 내 제목 컴포넌트 작성
  • 제목 컴포넌트와 페이지 타이틀 실시간 연동
  • tsconfig에 @hooks, @ utils 절대경로 저장
  • 블록별 플레이이스홀더 적용

🙏 질문 사항

  • 현재 리스트로 변경하면 불렛포인트나 숫자가 안보이는 문제가 있습니다. 아직 PandaCSS에 익숙하지 않아서 학습 후에 수정하겠습니다.
  • hooks, utils디렉토리는 절대경로를 저장했을 때 잘 작동했는데, types 디렉토리는 인식하지 않는 문제가 있습니다.
  • 플레이스 홀더를 적용한 후 블록에 마우스를 hover했을 때, 텍스트에 올리는 I자가 아니고 일반 커서가 나오는 문제가 있습니다.
  • 한글 IME 처리를 하지 않아 한글 입력시 캐럿이 이상하게 이동하는 문제가 있습니다. 기본적인 동작 구현을 완료하고 한글 입력기능을 구현할 예정입니다.
  • 체크박스 생성시 화살표 클릭으로 블록사이를 이동할 때 문제가 있습니다. 체크박스 데이터 구조에 맞게 화살표 로직을 수정할 예정입니다.

📷 스크린샷 (선택)

2024-11-12.3.59.51.mov
  • 플레이스홀더 적용
2024-11-12.4.50.23.mov

✅ 작성자 체크리스트

  • Self-review: 코드가 스스로 검토됨
  • Unit tests 추가 또는 수정
  • 로컬에서 모든 기능이 정상 작동함
  • 린터 및 포맷터로 코드 정리됨
  • 의존성 업데이트 확인
  • 문서 업데이트 또는 주석 추가 (필요 시)

@Ludovico7 Ludovico7 added FE 프론트엔드 작업 Design 사용자 UI 레이아웃 디자인 및 CSS 스타일 변경 Build 개발 환경 세팅(eslint, 컨벤션 등) 또는 패키지 매니저 수정 P1 긴급/즉시 반영 labels Nov 12, 2024
@Ludovico7 Ludovico7 self-assigned this Nov 12, 2024
@hyonun321
Copy link
Collaborator

tets212.mp4

스페이스바를 누르면 인덱스가 맨 앞으로 이동하는 현상이 있군요.
영어는 문제가 없는걸보니 한글일때만 문제가 있는 듯 합니다.

@Ludovico7
Copy link
Collaborator Author

아직 한글입력 관련 IME 처리를 구현하지 않아서 한글입력시에는 캐럿이 이상하게 이동하는 문제가 있습니다. 영어로 했을 때 기본적인 동작이 잘 돌아갈 때 한글입력 기능을 구현할 것 같습니다.

Copy link
Collaborator

@minjungw00 minjungw00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

직접 코드 하나하나 뜯어보니까 굉장히 노력하신 게 보이네요! 100% 분석은 못했지만 그래도 코드 재미있게 읽었습니다!

Comment on lines 18 to 80
switch (e.key) {
case "ArrowUp":
if (currentNode.parentNode?.type === "checkbox") {
if (currentNode.parentNode.prevNode) {
if (currentNode.parentNode.prevNode.type === "checkbox") {
targetNode = currentNode.parentNode.prevNode.firstChild;
} else {
targetNode = currentNode.parentNode.prevNode;
}
}
} else if (currentNode.prevNode?.type === "ul" || currentNode.prevNode?.type === "ol") {
targetNode = editorList.getLastChild(currentNode.prevNode);
} else if (currentNode.type === "li") {
if (currentNode.prevSibling?.id) {
targetNode = currentNode.prevSibling;
} else {
if (currentNode.parentNode?.prevNode) {
if (currentNode.parentNode.prevNode.type === "checkbox") {
// 이전 블록이 체크박스인 경우 처리
targetNode = currentNode.parentNode.prevNode.firstChild;
} else {
targetNode = currentNode.parentNode.prevNode;
}
} else {
return;
}
}
} else {
targetNode = currentNode.prevNode;
}
break;

case "ArrowDown":
if (currentNode.parentNode?.type === "checkbox") {
if (currentNode.parentNode.nextNode) {
if (currentNode.parentNode.nextNode.type === "checkbox") {
targetNode = currentNode.parentNode.nextNode.firstChild;
} else {
targetNode = currentNode.parentNode.nextNode;
}
}
} else if (currentNode.nextNode?.type === "ul" || currentNode.nextNode?.type === "ol") {
targetNode = currentNode.nextNode.firstChild;
} else if (currentNode.type === "li") {
if (currentNode.nextSibling?.id) {
targetNode = currentNode.nextSibling;
} else {
if (currentNode.parentNode?.nextNode) {
if (currentNode.parentNode.nextNode.type === "checkbox") {
// 다음 블록이 체크박스인 경우 처리
targetNode = currentNode.parentNode.nextNode.firstChild;
} else {
targetNode = currentNode.parentNode.nextNode;
}
} else {
return;
}
}
} else {
targetNode = currentNode.nextNode;
}
break;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

삼항연산자랑 early return 패턴 사용하면 if문 깊이를 어느 정도 줄일 수 있을 것 같아요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 이부분에 문제가 있어서 수정을 해야될것 같습니다... 체크박스로 이동할때 노드이동 관련한 로직에 문제가 있는것 같아서 로직 수정할때 같이 리팩토링 해보겠습니다!

@hyonun321 hyonun321 merged commit 8bb2d3d into dev Nov 12, 2024
1 check failed
@hyonun321
Copy link
Collaborator

conflict를 PR내에서 commit으로 해결 + 웹상에서 동시에 해결을 해버려서
lint쪽 통과가 안되는 문제로 인해 수동으로 merge로 붙였습니다.
이후 작업은 새롭게 dev에서 브런치 파고 작업할 예정입니다.😥

@hyonun321 hyonun321 deleted the Feature/#094_기초_마크다운_에디터_구현 branch November 15, 2024 07:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Build 개발 환경 세팅(eslint, 컨벤션 등) 또는 패키지 매니저 수정 Design 사용자 UI 레이아웃 디자인 및 CSS 스타일 변경 FE 프론트엔드 작업 P1 긴급/즉시 반영
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants