🐛 Bug: 롤링페이퍼생성 페이지 진입시 텍스트 에디터 내부 포커싱 by Greensod-96 · Pull Request #174 · Sprint-19-Rolling/frontend

Greensod-96 · 2025-10-14T07:26:26Z

🔗 이슈 번호

close [🐛 Bug] 롤링페이퍼생성 페이지 진입시 텍스트 에디터 내부 포커싱 #173

✨ 작업한 내용

롤링페이퍼생성 페이지 진입시 텍스트 에디터 내부 포커싱 되지 않도록 수정

💁 Review Point

💡 참고사항

vercel · 2025-10-14T07:26:30Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
frontend	Ready	Preview	Comment	Oct 14, 2025 7:26am

gemini-code-assist · 2025-10-14T07:26:45Z

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은 롤링페이퍼 생성 페이지에서 텍스트 에디터가 자동으로 포커싱되는 사용자 경험 문제를 해결합니다. 에디터의 초기 포커스 동작을 제어하고, 메시지 콘텐츠가 표시되는 방식에 따라 커서 스타일을 동적으로 조정하여 사용자가 인터페이스를 더 직관적으로 이해하고 상호작용할 수 있도록 합니다. 또한, 코드베이스의 전반적인 가독성을 높이기 위한 소규모 정리 작업도 포함되어 있습니다.

Highlights

텍스트 에디터 초기 포커스 문제 해결: 롤링페이퍼 생성 페이지 진입 시 텍스트 에디터가 자동으로 포커싱되는 버그를 수정했습니다. ReactQuill 컴포넌트에 autoFocus={false} 속성을 추가하고, 렌더링 지연을 위한 useState와 setTimeout을 활용하여 초기 포커스를 방지합니다.
콘텐츠 커서 스타일 개선: 메시지 카드(요약 뷰)와 모달(상세 뷰)에서 콘텐츠 영역의 커서 스타일을 명확하게 구분하도록 개선했습니다. 카드 뷰에서는 손가락 커서(pointer-mode)를, 모달 뷰에서는 기본 커서(default-mode)를 적용하여 사용자 경험을 향상시켰습니다.
코드 가독성 및 정리: 불필요한 빈 줄을 제거하고, 불리언 반환 로직을 간소화하는 등 전반적인 코드 가독성을 개선하고 정리했습니다.

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.

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 · 2025-10-14T07:27:13Z

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

gemini-code-assist · 2025-10-14T07:27:30Z

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은 롤링페이퍼 생성 페이지에서 텍스트 에디터가 자동으로 포커싱되는 버그를 해결하고, 콘텐츠 표시 방식에 따라 커서 스타일을 다르게 적용하여 사용자 경험을 개선합니다. 주요 변경 사항은 ReactQuill 컴포넌트의 포커싱 동작을 제어하고, PostContent 컴포넌트의 렌더링 및 스타일링 로직을 최적화하는 것입니다.

Highlights

텍스트 에디터 자동 포커싱 문제 해결: 롤링페이퍼 생성 페이지 진입 시 텍스트 에디터가 자동으로 포커싱되는 버그를 수정했습니다. ReactQuill 컴포넌트에 autoFocus={false} 속성을 추가하고, 컴포넌트 렌더링을 지연시키는 ready 상태를 도입하여 원치 않는 포커싱을 방지합니다.
콘텐츠 커서 스타일 개선: 카드(요약 뷰)와 모달(상세 뷰)에서 PostContent 컴포넌트의 커서 스타일을 동적으로 적용하도록 개선했습니다. 카드에서는 손가락 커서(pointer-mode)가, 모달에서는 기본 커서(default-mode)가 표시되어 사용자 경험을 향상시킵니다.
코드 가독성 및 정리: 조건부 반환문 단순화, 불필요한 주석 제거, PostContent 컴포넌트의 기본 프롭 값 설정 등 여러 파일에서 코드 가독성을 높이고 정리하는 작업을 수행했습니다.

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.

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. ↩

gemini-code-assist

Code Review

롤링페이퍼 생성 페이지 진입 시 텍스트 에디터에 자동으로 포커싱되는 버그를 수정한 PR 잘 보았습니다. setTimeout과 autoFocus={false}를 사용하여 문제를 해결하셨네요. 이와 함께 코드 가독성과 유지보수성을 높이기 위한 여러 리팩토링도 진행되었습니다. 몇 가지 추가적으로 개선할 수 있는 부분에 대해 리뷰 코멘트를 남겼습니다. 중복 로직을 제거하고, 불필요한 DOM 직접 조작을 피하며, 코드의 명확성을 높이는 데 중점을 두었습니다. 확인 부탁드립니다.

gemini-code-assist · 2025-10-14T07:28:01Z

src/components/rolling-paper-list/message-card/MessageCard.jsx

+  useEffect(() => {
+    if (!cardRef.current) {
+      return;
+    }
+    const editor = cardRef.current.querySelector('.ql-editor');
+    if (editor) {
+      editor.style.cursor = 'pointer';
+    }
+  }, [content]);


이 useEffect 훅은 DOM을 직접 조작하여 커서 스타일을 변경하고 있습니다. PostContent 컴포넌트가 card prop을 기반으로 커서 스타일을 관리하도록 변경되었기 때문에 이 코드는 더 이상 필요하지 않습니다. 이 훅과 함께 cardRef 선언(35행), ref prop(61행)도 함께 제거하는 것이 좋습니다.

gemini-code-assist · 2025-10-14T07:28:02Z

src/components/common/TextEditor.jsx

-    onChange(content);
-  };
+  useEffect(() => {
+    const timer = setTimeout(() => setReady(true), 50); // 50ms 뒤 렌더


setTimeout에 사용된 50은 "매직 넘버"로, 코드의 의도를 파악하기 어렵게 만듭니다. 이 값을 EDITOR_RENDER_DELAY와 같이 의미 있는 이름의 상수로 선언하여 사용하면 가독성과 유지보수성이 향상됩니다.

gemini-code-assist · 2025-10-14T07:28:02Z

src/components/common/TextEditor.jsx

    if (!range) {
-      // 포커스가 없으면 다음 입력에 적용될 포맷만 설정
      quill.format('font', font, 'api');
    } else if (range.length === 0) {
-      // 커서만 있고 선택 영역이 없으면 다음 입력에 적용
      quill.format('font', font, 'api');
    } else {
-      // 선택 영역이 있으면 해당 영역에만 폰트 적용
      quill.formatText(range.index, range.length, { font }, 'api');
    }


if (!range) 블록과 else if (range.length === 0) 블록의 내용이 동일합니다. 두 조건을 || 연산자로 통합하여 코드를 더 간결하게 만들 수 있습니다.

if (!range || range.length === 0) { quill.format('font', font, 'api'); } else { quill.formatText(range.index, range.length, { font }, 'api'); }

gemini-code-assist · 2025-10-14T07:28:02Z

src/components/rolling-paper-list/message-card/MessageCard.jsx

      <PostContent
        htmlContent={content}
-        className={'line-clamp-2 sm:line-clamp-3'}
+        className="line-clamp-2 cursor-pointer sm:line-clamp-3"


PostContent 컴포넌트에 cursor-pointer 클래스를 직접 추가하셨습니다. 하지만 PostContent 컴포넌트는 이제 card prop이 true일 때 내부적으로 pointer-mode 클래스를 적용하여 커서 스타일을 관리합니다. 따라서 이 클래스는 중복되므로 제거해도 됩니다.

Suggested change

className="line-clamp-2 cursor-pointer sm:line-clamp-3"

className="line-clamp-2 sm:line-clamp-3"

gemini-code-assist

Code Review

롤링페이퍼 생성 페이지 진입 시 텍스트 에디터에 자동으로 포커싱되는 버그를 수정한 점이 좋습니다. useEffect와 setTimeout을 사용하여 ReactQuill 컴포넌트의 렌더링을 지연시키고 autoFocus={false} 속성을 명시적으로 추가하여 문제를 해결한 접근 방식이 인상적입니다. 또한, 카드 형태와 모달 형태에서 콘텐츠의 커서 스타일을 다르게 처리하기 위해 CSS 클래스를 도입한 것도 좋은 개선입니다. 다만, 커서 스타일을 적용하는 부분에서 일부 중복되는 코드가 있어 이에 대한 리뷰 의견을 남겼습니다. 해당 부분을 정리하면 코드가 더 깔끔하고 유지보수하기 좋아질 것 같습니다.

gemini-code-assist · 2025-10-14T07:28:37Z

src/components/rolling-paper-list/message-card/MessageCard.jsx

+  useEffect(() => {
+    if (!cardRef.current) {
+      return;
+    }
+    const editor = cardRef.current.querySelector('.ql-editor');
+    if (editor) {
+      editor.style.cursor = 'pointer';
+    }
+  }, [content]);


이 useEffect 훅은 중복된 로직으로 보입니다. PostContent 컴포넌트가 card prop을 통해 pointer-mode 클래스를 이미 적용하고 있으며, 이 클래스는 quill-custom.css에서 커서 스타일을 pointer로 설정하고 있습니다. 따라서 이 훅은 불필요하며, React에서 직접 DOM 스타일을 조작하는 대신 CSS 클래스를 통해 스타일을 관리하는 것이 더 바람직합니다. 이 훅을 제거하여 코드를 단순화하는 것이 좋겠습니다.

gemini-code-assist · 2025-10-14T07:28:37Z

src/components/common/modal/PostContent.jsx

+      className={`ql-editor w-full ${textStyle(font)} ${quillFontClass} ${className} ${
+        card ? 'pointer-mode cursor-pointer' : 'default-mode cursor-default'
+      }`}


pointer-mode 클래스가 이미 quill-custom.css에서 cursor: pointer !important;를 적용하고 있으므로, cursor-pointer 클래스를 함께 사용하는 것은 중복입니다. default-mode의 경우에도 cursor-default가 중복됩니다. 코드를 더 간결하게 유지하기 위해 중복되는 TailwindCSS 유틸리티 클래스를 제거하는 것이 좋습니다.

Suggested change

className={`ql-editor w-full ${textStyle(font)} ${quillFontClass} ${className} ${

card ? 'pointer-mode cursor-pointer' : 'default-mode cursor-default'

}`}

className={`ql-editor w-full ${textStyle(font)} ${quillFontClass} ${className} ${

card ? 'pointer-mode' : 'default-mode'

}`}

gemini-code-assist · 2025-10-14T07:28:37Z

src/components/rolling-paper-list/message-card/MessageCard.jsx

      <PostContent
        htmlContent={content}
-        className={'line-clamp-2 sm:line-clamp-3'}
+        className="line-clamp-2 cursor-pointer sm:line-clamp-3"


PostContent에 전달되는 className의 cursor-pointer는 불필요합니다. PostContent 컴포넌트 내부에서 card prop이 true일 때 pointer-mode 클래스가 적용되어 이미 커서 스타일을 처리하고 있습니다. 중복되는 스타일을 제거하여 코드를 더 명확하게 만들 수 있습니다.

Suggested change

className="line-clamp-2 cursor-pointer sm:line-clamp-3"

className="line-clamp-2 sm:line-clamp-3"

aahreum

고생하셨습니다!

Greensod-96 added 5 commits October 14, 2025 15:29

🎨 Style: 모달 내부 PostContent에 modal-content 클래스 추가하여 커서 스타일 분리

cd31e67

🎨 Style: PostContent에 pointer/default 모드 및 user-select 제어 로직 추가

04d7ea1

🎨 Style: MessageCard 내부 ql-editor에 pointer 커서 강제 적용

49e7fb3

🎨 Style: quill-custom.css에 pointer-mode 및 default-mode 커서 스타일 추가

7083bc8

🐛 Fix: 생성 페이지 진입 시 Quill 에디터 자동 포커싱으로 커서 깜빡임 현상 방지

9dbdce8

Greensod-96 added this to the Rolling 프로젝트 milestone Oct 14, 2025

Greensod-96 requested review from aahreum, eunji0124, heoc0523 and seongihun October 14, 2025 07:26

Greensod-96 self-assigned this Oct 14, 2025

Greensod-96 added the 🐛 Bug label Oct 14, 2025

Greensod-96 added this to Rolling - 롤링 Oct 14, 2025

gemini-code-assist bot reviewed Oct 14, 2025

View reviewed changes

aahreum approved these changes Oct 14, 2025

View reviewed changes

aahreum merged commit 2ed8356 into main Oct 14, 2025
3 checks passed

aahreum deleted the fix/textEditor-pofocus branch October 14, 2025 13:17

github-project-automation bot moved this to Done in Rolling - 롤링 Oct 14, 2025

	className="line-clamp-2 cursor-pointer sm:line-clamp-3"
	className="line-clamp-2 sm:line-clamp-3"

Conversation

Greensod-96 commented Oct 14, 2025

🔗 이슈 번호

✨ 작업한 내용

💁 Review Point

💡 참고사항

Uh oh!

vercel bot commented Oct 14, 2025

Uh oh!

gemini-code-assist bot commented Oct 14, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

github-actions bot commented Oct 14, 2025

Uh oh!

gemini-code-assist bot commented Oct 14, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

aahreum left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants