[🐛 Bug] 텍스트 에디터 내부에서 글꼴 적용후 noto-sans로 강제로 바뀌는 버그

[Greensod-96]

🔗 이슈 번호

• close [🐛 Bug] 텍스트 에디터 내부에서 글꼴 적용후 noto-sans로 강제로 바뀌는 버그 #156

✨ 작업한 내용

• 텍스트 에디터 내부에서 글꼴 적용후 noto-sans로 강제로 바뀌는 버그를 해결하였습니다.

💁 Review Point

💡 참고사항

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
frontend	Ready	Preview	Comment	Oct 13, 2025 9:06am

[gemini-code-assist]

Summary of Changes

Hello @Greensod-96, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 텍스트 에디터에서 글꼴을 적용한 후 'Noto Sans'로 강제로 되돌아가는 버그를 해결합니다. 에디터 내부의 글꼴 변경 감지 로직을 개선하고, 외부에서 선택된 글꼴과 에디터 내부의 글꼴 상태를 더 견고하게 동기화하여 사용자가 선택한 글꼴이 올바르게 유지되도록 합니다.

Highlights

• 텍스트 에디터 글꼴 유지 버그 수정: 텍스트 에디터에서 글꼴을 적용한 후 'Noto Sans'로 강제로 되돌아가는 문제를 해결했습니다.
• 에디터 내부 글꼴 변경 감지 로직 개선: Quill 에디터의 글꼴 변경 감지 로직을 selection-change 이벤트에서 text-change 이벤트로 변경하여 사용자 입력에 의한 글꼴 변경을 더 정확하게 감지하도록 개선했습니다.
• 외부 폰트 선택기와 에디터 간 양방향 동기화 강화: lastSelectionFontRef를 도입하고, 폰트 변경 핸들러를 분리하여 에디터와 외부 드롭다운 간의 폰트 상태가 일관되게 유지되도록 동기화 메커니즘을 강화했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

🎉 구현한 기능 Preview: https://frontend-9p6z45155-fe-19-seongihuns-projects.vercel.app

[gemini-code-assist]

Code Review

PR을 통해 텍스트 에디터의 폰트 관련 버그를 수정해주셔서 감사합니다. selection-change 이벤트를 text-change로 변경하여 커서 이동 시 폰트가 의도치 않게 변경되는 문제를 해결한 점이 좋습니다. 다만, 일부 텍스트에만 폰트를 적용했을 때 문서 전체의 폰트가 변경되는 사이드 이펙트가 여전히 남아있어, 이를 해결하기 위한 몇 가지 제안을 코드 리뷰에 남겼습니다. 제안된 내용은 ref를 추가하여 에디터 내부 변경과 외부 변경을 구분하는 방식입니다. PostMessage.jsx의 핸들러 분리 로직은 명확하고 좋아 보입니다.

[gemini-code-assist]

폰트 변경 로직 개선을 위한 ref 추가 제안입니다. 현재 구현은 에디터 내부에서 폰트를 변경할 때 문서 전체에 폰트가 적용되는 사이드 이펙트를 일으킬 수 있습니다. 이를 방지하기 위해, 에디터 내부에서 발생한 변경인지를 추적하는 ref를 추가하는 것이 좋습니다. 이 ref는 이어지는 다른 제안들에서 사용됩니다.

Suggested change

	const lastSelectionFontRef = useRef(null); // 마지막 선택 영역의 폰트 추적
	const lastSelectionFontRef = useRef(null); // 마지막 선택 영역의 폰트 추적
	const isInternalChangeRef = useRef(false); // 에디터 내부 폰트 변경 여부 추적

[gemini-code-assist]

에디터 내부에서 폰트가 변경되었을 때, onFontChange를 호출하기 전에 isInternalChangeRef 플래그를 true로 설정해야 합니다. 이렇게 하면 부모 컴포넌트로부터 font prop이 업데이트되어도, 앞에서 수정한 useEffect가 전체 폰트 적용 로직을 실행하는 것을 막을 수 있습니다.

      if (format.font && format.font !== lastSelectionFontRef.current) {
        isInternalChangeRef.current = true; // 내부 변경 플래그 설정
        lastSelectionFontRef.current = format.font;
        onFontChange(format.font);
      }

[aahreum]

확인했습니다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!