🐛 Bug: 모달, 메세지카드 커서 버그

[Greensod-96]

🔗 이슈 번호

• close [🐛 Bug] 모달, 메세지카드 커서 버그 #171

✨ 작업한 내용

• 카드에서는 cursor-pointer, 모달에서는 cursor-default 형태로 구현완료.

💁 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 14, 2025 6:42am

[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은 메시지 카드와 모달 간의 일관성 없는 커서 동작을 해결하여 사용자 경험을 개선합니다. 메시지 카드에서는 상호작용을 나타내는 포인터 커서를, 모달에서는 콘텐츠 보기를 위한 기본 커서를 적용하도록 UI를 조정했습니다.

Highlights

• 커서 버그 수정: 메시지 카드와 모달에서 커서가 올바르게 표시되지 않던 버그를 수정했습니다. 이제 메시지 카드에서는 'pointer' 커서가, 모달에서는 'default' 커서가 표시됩니다.
• PostContent 컴포넌트 개선: PostContent 컴포넌트에 'card' prop을 추가하여, 카드 뷰와 모달 뷰에 따라 커서 스타일과 텍스트 선택 가능 여부를 동적으로 제어할 수 있도록 했습니다.
• CSS 클래스 추가: 커서 스타일을 강제하기 위한 .pointer-mode 및 .default-mode CSS 클래스를 quill-custom.css 파일에 추가했습니다.

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-ogl9g1pui-fe-19-seongihuns-projects.vercel.app

[gemini-code-assist]

Code Review

이번 PR은 모달과 메시지 카드에서 발생하는 커서 버그를 수정하는 것을 목표로 하고 있습니다. 전반적으로 올바른 방향으로 수정이 이루어졌습니다. PostContent 컴포넌트에서 card prop에 따라 조건부로 CSS 클래스를 적용하여 커서 스타일을 제어하는 방식은 좋은 접근입니다. 또한 user-select 스타일을 추가하여 카드 위에서 텍스트가 선택되지 않도록 한 점도 좋은 사용자 경험 개선입니다.

다만, 일부 코드에서 중복되거나 불필요한 부분이 있어 몇 가지 개선점을 제안합니다. MessageCard 컴포넌트의 불필요한 useEffect 훅을 제거하고, 중복되는 CSS 클래스를 정리하면 코드가 더 깔끔하고 유지보수하기 좋아질 것입니다. 자세한 내용은 각 파일에 남긴 주석을 참고해주세요.

[gemini-code-assist]

pointer-mode와 default-mode 클래스가 각각 cursor: pointer !important와 cursor: default !important를 적용하므로, cursor-pointer와 cursor-default 클래스는 중복됩니다. 코드를 더 간결하게 만들기 위해 중복되는 클래스를 제거하는 것이 좋습니다.

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]

이 useEffect 훅은 불필요해 보입니다. PostContent 컴포넌트는 card prop이 true일 때 pointer-mode 클래스를 내부적으로 적용하여 커서 스타일을 이미 처리하고 있습니다. pointer-mode는 cursor: pointer !important를 모든 하위 요소에 적용하므로, 이 useEffect를 통한 직접적인 DOM 조작은 중복됩니다.

코드를 더 간결하게 유지하고 직접적인 DOM 조작을 피하기 위해 다음을 제거하는 것이 좋습니다:

• 이 useEffect 훅 (lines 49-57)
• cardRef 선언 (line 35)
• div 요소의 ref={cardRef} 속성 (line 61)
• react에서 useEffect와 useRef import (line 1)

[gemini-code-assist]

PostContent 컴포넌트에 card prop이 true로 전달되면, 내부적으로 pointer-mode 클래스가 적용됩니다. 이 클래스는 cursor: pointer !important 스타일을 모든 하위 요소에 적용하므로, 여기서 cursor-pointer 클래스를 추가로 전달할 필요가 없습니다. 중복을 제거하기 위해 이 클래스를 삭제하는 것이 좋습니다.

Suggested change

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

[aahreum]

고생하셨습니다!!!!!!!!!!