[🐛 Bug] 생성 롤링페이퍼와 모달창에 cl,ul,ol 정렬, 글자크기 변경,프로필 미선택 이미지 리스트에서 삭제 by Greensod-96 · Pull Request #167 · Sprint-19-Rolling/frontend

Greensod-96 · 2025-10-13T15:43:15Z

🔗 이슈 번호

✨ 작업한 내용

💁 Review Point

💡 참고사항

vercel · 2025-10-13T15:43:24Z

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 4:01pm

gemini-code-assist · 2025-10-13T15:43:39Z

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은 텍스트 에디터의 폰트 및 리스트 처리 기능을 개선하고, 모달 컴포넌트에 애니메이션을 추가하여 사용자 경험을 향상시키는 데 중점을 둡니다. 또한, 메시지 작성 페이지의 프로필 이미지 선택 과정을 더 직관적으로 만들고, Quill 에디터 콘텐츠의 안전한 렌더링을 위한 설정을 업데이트했습니다.

Highlights

텍스트 에디터 기능 개선: 폰트 적용 로직이 에디터 전체가 아닌 선택된 텍스트 또는 커서 위치에만 적용되도록 변경되었으며, 폰트 변경 감지 로직이 text-change 이벤트 기반으로 개선되었습니다. 또한, 툴바에 글자 크기 선택 기능이 추가되었습니다.
모달 컴포넌트 애니메이션 추가: 모달 열림/닫힘 시 부드러운 애니메이션 효과를 위해 useState와 useEffect를 활용한 가시성 관리 로직과 CSS 트랜지션이 적용되었습니다.
콘텐츠 렌더링 및 리스트 처리 로직 강화: Quill 에디터에서 생성된 HTML 콘텐츠를 안전하게 렌더링하는 PostContent 컴포넌트가 리팩토링되었습니다. 특히, 순서 있는 리스트, 글머리 기호 리스트, 체크리스트 등 다양한 리스트 항목의 정렬 및 마커 표시가 정확하게 이루어지도록 커스텀 로직이 추가되었습니다.
프로필 이미지 선택 로직 개선: 메시지 작성 페이지에서 프로필 이미지 선택 시, 첫 번째 이미지가 기본으로 설정되고 나머지 이미지는 선택 목록에 표시되도록 변경되어, '프로필 미선택' 상태가 목록에서 제거되었습니다.
HTML Sanitization 설정 확장: Quill 에디터의 풍부한 콘텐츠를 지원하기 위해 sanitizeConfig.js 파일에서 허용되는 HTML 태그, 속성 및 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.

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

This pull request addresses a bug related to text editor functionalities and modal display issues. The changes include enhancements to font application, list formatting in the text editor, and modal transition effects. Additionally, profile image handling in the message posting form has been improved. The review focuses on correctness and maintainability, particularly in the context of React component lifecycle management and DOM manipulation.

gemini-code-assist · 2025-10-13T15:46:23Z

src/components/common/modal/Modal.jsx

+      // 닫힐 때 애니메이션 고려해 약간의 지연
+      const timer = setTimeout(() => setVisible(false), 200);
+      return () => clearTimeout(timer);


모달이 닫힐 때 setTimeout을 사용하는 것은 애니메이션이 완료되기 전에 Portal이 제거될 수 있는 잠재적인 문제를 야기할 수 있습니다. setVisible(false)를 호출하기 전에 애니메이션이 완료되었는지 확인하는 것이 좋습니다. CSS 애니메이션 이벤트를 사용하여 이를 동기화할 수 있습니다.

Using setTimeout when the modal closes might cause a potential issue where the Portal is removed before the animation completes. It's recommended to ensure the animation is complete before calling setVisible(false). You could use CSS animation events to synchronize this.

gemini-code-assist · 2025-10-13T15:46:23Z

src/pages/PostMessage.jsx

+          onFontChange={(fontKey) => {
+            if (!fontKey) {
+              return;
+            }
+            setSelectedFont(fontKey);
+
+            const displayName = FONT_DISPLAY_NAMES[fontKey];
+            if (displayName && fontRef.current?.setValue) {
+              fontRef.current.setValue(displayName);
+            }
+          }}


onFontChange prop을 통해 전달되는 콜백 함수 내에서 fontRef.current?.setValue를 호출하는 것은 side effect를 발생시킬 수 있습니다. 컴포넌트의 상태 업데이트는 예측 가능해야 하며, 부모 컴포넌트의 상태를 자식 컴포넌트에서 직접 변경하는 것은 권장되지 않습니다. 대신, 부모 컴포넌트에서 상태를 업데이트하고, 필요한 경우 자식 컴포넌트에 prop으로 전달하는 것이 좋습니다.

Calling fontRef.current?.setValue within the callback function passed through the onFontChange prop can cause side effects. Component state updates should be predictable, and directly modifying the parent component's state from a child component is not recommended. Instead, it's better to update the state in the parent component and pass it to the child component as a prop if necessary.

gemini-code-assist · 2025-10-13T15:46:23Z

src/components/common/TextEditor.jsx

  }, [font]);

-  // Quill에서 글꼴 변경 감지 → 외부로 전달 (선택 영역 기준)
+  // Quill에서 글꼴 변경 감지 → 외부로 전달 (툴바 사용 시만)


// Quill에서 글꼴 변경 감지 → 외부로 전달 (툴바 사용 시만) 주석은 변경된 로직을 정확히 반영하지 않습니다. 툴바를 사용하지 않고도 글꼴이 변경될 수 있습니다. 주석을 업데이트하여 변경 사항을 더 정확하게 설명하는 것이 좋습니다.

Consider updating the comment to accurately reflect the change in logic.

gemini-code-assist · 2025-10-13T15:46:23Z

src/components/common/TextEditor.jsx

+      if (format.font && format.font !== lastSelectionFontRef.current) {
+        lastSelectionFontRef.current = format.font;
        onFontChange(format.font);
      }


format.font !== lastSelectionFontRef.current 비교는 불필요해 보입니다. onFontChange 콜백은 항상 외부에서 선택된 글꼴을 기반으로 호출되므로, 이 조건은 항상 참이 될 것입니다. 이 조건을 제거하여 코드를 단순화하는 것이 좋습니다.

Consider removing the condition format.font !== lastSelectionFontRef.current to simplify the code.

onFontChange(format.font);

gemini-code-assist · 2025-10-13T15:46:23Z

src/components/common/modal/PostContent.jsx

+    // 🚨 1, 4번 문제 해결: 모든 리스트 항목(li)에 기준점과 텍스트 시작 위치 설정
+    const listItems = container.querySelectorAll('li');
+    listItems.forEach((li) => {
+      // ql-ui의 absolute 기준점
+      li.style.position = 'relative';
+      // 텍스트가 겹치지 않도록 오른쪽으로 밀어냄
+      li.style.paddingLeft = '1.5em';
+    });


li 요소에 스타일을 직접 적용하는 것은 유지보수를 어렵게 만들 수 있습니다. CSS 클래스를 사용하고, 필요한 경우 해당 클래스를 동적으로 추가/제거하는 것이 좋습니다. 이렇게 하면 스타일 변경이 더 쉽고 예측 가능해집니다.

Applying styles directly to li elements can make maintenance difficult. It's recommended to use CSS classes and dynamically add/remove those classes as needed. This makes style changes easier and more predictable.

gemini-code-assist · 2025-10-13T15:46:23Z

src/components/common/modal/PostContent.jsx

+        // 이미 생성된 마커가 있다면 건너뜁니다. (안전 장치)
+        if (li.querySelector('.ql-ui')) {
+          return;


이미 생성된 마커가 있는지 확인하는 로직(li.querySelector('.ql-ui'))은 중복 생성을 방지하는 데 유용하지만, 마커가 예상치 않게 제거된 경우를 처리하지 않습니다. 마커가 존재하지 않을 때마다 마커를 다시 생성하도록 로직을 조정하는 것이 좋습니다.

The logic to check if a marker already exists (li.querySelector('.ql-ui')) is useful for preventing duplicate creation, but it doesn't handle cases where the marker might have been unexpectedly removed. Consider adjusting the logic to recreate the marker whenever it's not present.

gemini-code-assist · 2025-10-13T15:46:24Z

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

+      <PostContent
+        htmlContent={content}
+        className={'line-clamp-2 sm:line-clamp-3'}
+        font={font}
+        card


PostContent 컴포넌트를 사용하여 메시지 내용을 표시하는 것은 좋지만, line-clamp 클래스를 PostContent 내부로 이동시키는 것을 고려해 보세요. 이렇게 하면 MessageCard 컴포넌트가 더 깔끔해지고, PostContent가 자체적으로 텍스트 줄 truncation을 처리하도록 할 수 있습니다.

While using the PostContent component to display the message content is good, consider moving the line-clamp class inside PostContent. This would make the MessageCard component cleaner and allow PostContent to handle text truncation on its own.

gemini-code-assist · 2025-10-13T15:46:24Z

src/pages/PostMessage.jsx

+    !fromInput.value?.trim() ||
+    !profileImageURL?.trim() ||


fromInput.value?.trim() 및 profileImageURL?.trim()에 대한 nullish coalescing 연산자를 사용하는 것은 좋습니다. 이렇게 하면 값이 null 또는 undefined인 경우 오류가 발생하는 것을 방지할 수 있습니다.

Using nullish coalescing operators for fromInput.value?.trim() and profileImageURL?.trim() is good. This prevents errors if the values are null or undefined.

gemini-code-assist · 2025-10-13T15:46:24Z

src/style/base/quill-custom.css


 .ql-snow.ql-toolbar button.ql-list.ql-active .ql-stroke,
-.ql-snow.ql-toolbar button.ql-list.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-list.ql-active .ql-stroke,


.ql-snow .ql-toolbar button.ql-list.ql-active .ql-stroke에 대한 중복 선언이 있습니다. 이 중복을 제거하여 CSS를 정리하는 것이 좋습니다.

There is a duplicate declaration for .ql-snow .ql-toolbar button.ql-list.ql-active .ql-stroke. Consider removing this duplication to clean up the CSS.

github-actions · 2025-10-13T15:47:38Z

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

…print-19-Rolling/frontend into fix/profile-image-basic-Delete

github-actions · 2025-10-13T15:49:44Z

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

…print-19-Rolling/frontend into fix/profile-image-basic-Delete

github-actions · 2025-10-13T16:00:53Z

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

github-actions · 2025-10-13T16:01:49Z

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

aahreum

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

Greensod-96 added 8 commits October 14, 2025 00:33

✨ Feat: Quill 에디터 폰트 적용 방식 개선 및 툴바 옵션 확장

d7887f3

🎨 Style: 모달 열림/닫힘 시 부드러운 전환 애니메이션 추가

a3e4e7b

✨ Feat: PostContent 컴포넌트 리스트 및 폰트 렌더링 개선

b8e3d7e

♻️ Refactor: MessageCard 컴포넌트에서 PostContent 재사용으로 코드 중복 제거

33a5e62

✨ Feat: 폰트 매핑 및 클래스 상수 정리 (fontMap, FONT_CLASSES, QUILL_FONT_CLASSES) 추가

945a4fd

✨ Feat: SANITIZE_CONFIG 확장 — 체크리스트 및 스타일 속성 지원 추가

7a096a9

♻️ Refactor: PostMessage 컴포넌트 구조 개선 및 프로필 이미지 관리 방식 단순화

1e99cfb

🎨 Style: Quill 체크리스트 및 에디터 영역 커스텀 스타일 추가

2dcb56f

Greensod-96 requested review from aahreum, eunji0124, heoc0523 and seongihun October 13, 2025 15:43

gemini-code-assist bot reviewed Oct 13, 2025

View reviewed changes

Merge branch 'main' into fix/profile-image-basic-Delete

64cf88c

vercel bot deployed to Preview October 13, 2025 15:47 View deployment

Greensod-96 added 2 commits October 14, 2025 00:48

♻️ Refactor: 불필요한 주석제거

eaeca19

Merge branch 'fix/profile-image-basic-Delete' of https://github.com/S…

21f7638

…print-19-Rolling/frontend into fix/profile-image-basic-Delete

vercel bot deployed to Preview October 13, 2025 15:49 View deployment

Greensod-96 self-assigned this Oct 13, 2025

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

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

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

Merge branch 'main' into fix/profile-image-basic-Delete

5ab9954

vercel bot deployed to Preview October 13, 2025 16:00 View deployment

Greensod-96 added 2 commits October 14, 2025 01:00

♻️ Refactor: import DOMpurify 삭제

de6922e

Merge branch 'fix/profile-image-basic-Delete' of https://github.com/S…

4372f08

…print-19-Rolling/frontend into fix/profile-image-basic-Delete

vercel bot deployed to Preview October 13, 2025 16:01 View deployment

aahreum approved these changes Oct 13, 2025

View reviewed changes

aahreum merged commit 3845e78 into main Oct 13, 2025
3 checks passed

aahreum deleted the fix/profile-image-basic-Delete branch October 13, 2025 16:06

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

Conversation

Greensod-96 commented Oct 13, 2025

🔗 이슈 번호

✨ 작업한 내용

💁 Review Point

💡 참고사항

Uh oh!

vercel bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Oct 13, 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 13, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 13, 2025

Uh oh!

github-actions bot commented Oct 13, 2025

Uh oh!

github-actions bot commented Oct 13, 2025

Uh oh!

github-actions bot commented Oct 13, 2025

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

vercel bot commented Oct 13, 2025 •

edited

Loading