Fix381: FAQ 아코디언 너비 수정 #382
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughTwo UI/layout updates: MarkDownRenderer now supports an optional className and sets article to max-w-none; FAQ page passes className="w-full" to MarkDownRenderer and sets AccordionContent to w-full. No data or control-flow changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
📝 추가 및 변경된 파일총 2개 파일 변경 |
📚 Storybook이 Chromatic에 배포되었습니다!
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
mosu-app/src/pages/notice/faq.tsx (1)
21-22: Sanitize Markdown→HTML during build to prevent XSSremark-html does not sanitize. Switch to a sanitized pipeline.
-import { remark } from "remark"; -import html from "remark-html"; +import { unified } from "unified"; +import remarkParse from "remark-parse"; +import remarkGfm from "remark-gfm"; +import remarkRehype from "remark-rehype"; +import rehypeSanitize from "rehype-sanitize"; +import rehypeStringify from "rehype-stringify"; @@ - answer: remark().use(html).processSync(faq.answer).toString(), + answer: unified() + .use(remarkParse) + .use(remarkGfm) + .use(remarkRehype) + .use(rehypeSanitize) // sanitize HTML + .use(rehypeStringify) + .processSync(faq.answer) + .toString(),
🧹 Nitpick comments (2)
mosu-app/src/entities/posts/ui/MarkDown.tsx (1)
11-11: Flip merge order, keepmax-w-nonedefault in MarkDownRenderer
Allow consumer width classes to override without breaking existing full-width layouts. Inmosu-app/src/entities/posts/ui/MarkDown.tsxupdate:- className={cn(props.className, "prose max-w-none [&>h1]:my-1")} + className={cn("prose max-w-none [&>h1]:my-1", props.className)}Consumers needing a different max-width can now pass their own width utilities. Verify usages in signup, service, FAQ, announcement, and privacy pages and add explicit width overrides only where needed.
mosu-app/src/pages/notice/faq.tsx (1)
57-59: Scope the full-width change to FAQ onlyApply max-w-none at the call site so other MarkDownRenderer consumers keep their current layout. w-full on the container is fine.
- <AccordionContent className="mt-4 text-lg w-full"> - <MarkDownRenderer content={faq.answer} className="w-full" /> + <AccordionContent className="mt-4 text-lg w-full"> + <MarkDownRenderer content={faq.answer} className="w-full max-w-none" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
mosu-app/src/entities/posts/ui/MarkDown.tsx(1 hunks)mosu-app/src/pages/notice/faq.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
mosu-app/src/pages/notice/faq.tsx (1)
mosu-app/src/entities/posts/ui/MarkDown.tsx (1)
MarkDownRenderer(7-15)
🪛 ast-grep (0.38.6)
mosu-app/src/entities/posts/ui/MarkDown.tsx
[warning] 11-11: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Run DangerJS
| {...props} | ||
| className={cn(props.className, "prose [&>h1]:my-1")} | ||
| className={cn(props.className, "prose max-w-none [&>h1]:my-1")} | ||
| dangerouslySetInnerHTML={{ __html: content }} |
There was a problem hiding this comment.
Sanitize HTML before injecting (XSS risk)
dangerouslySetInnerHTML requires trusted content. Sanitize on render or ensure upstream sanitization.
Option A (render-time sanitization):
- dangerouslySetInnerHTML={{ __html: content }}
+ dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }}Add once at the top of this file:
import DOMPurify from "isomorphic-dompurify";Option B (preferred): sanitize in the Markdown→HTML pipeline (see comment in faq.tsx Lines 21-22).
🧰 Tools
🪛 Biome (2.1.2)
[error] 12-12: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🤖 Prompt for AI Agents
mosu-app/src/entities/posts/ui/MarkDown.tsx around line 12, the component
injects raw HTML via dangerouslySetInnerHTML which is an XSS risk; either (A)
import isomorphic-dompurify at the top of this file and sanitize content before
passing it to dangerouslySetInnerHTML (use DOMPurify.sanitize with an HTML
profile/options), or (B, preferred) ensure the Markdown→HTML pipeline sanitizes
the output upstream and pass only already-sanitized HTML here; implement one of
these fixes and remove any remaining direct injections of unsanitized content.
✅ Linked Issue
🔍 What I did
Summary by CodeRabbit