Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughSummary by CodeRabbit릴리스 노트
WalkthroughSVG를 React 컴포넌트로 전환하고 버튼에 마우스 이벤트 핸들러를 추가했으며, 코드 메시지에 대해 react-syntax-highlighter를 사용한 신택스 하이라이팅을 적용했습니다. 페이지 레이아웃 및 로고 호버 애니메이션도 조정되었습니다. (50단어 이내) Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
검토 팁(짧게): Button에 추가된 마우스 이벤트는 문서화된 시그니처와 일관되게 사용하세요(예: MDN mouse events: https://developer.mozilla.org/docs/Web/API/Element/mouseenter_event). ChatMessagePanel의 하이라이터 스타일은 모바일 가로 오버플로우를 고려해 테스트 권장합니다. 칭찬: UI 상호작용 세심하게 정리했네요 — 깔끔합니다. 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/pages/common/LandingPage.tsx (1)
72-72: arbitrary value 사용 이유가 있나요?
text-[33px]는 arbitrary value입니다. 디자인 시스템에서 정확히 33px가 필요한 것인지, 아니면 가장 가까운 Tailwind 기본값(text-3xl= 30px 또는text-4xl= 36px)을 사용할 수 있는지 확인해보세요.디자인 일관성을 위해 가능하면 Tailwind의 기본 타이포그래피 스케일을 사용하는 것이 좋습니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/common/LandingPage.tsx` at line 72, The span currently uses an arbitrary font-size class "text-[33px]" (see the span with class 'text-black-primary text-[33px] font-semibold leading-[150%]'); replace this arbitrary value with the nearest Tailwind typography token (e.g., text-3xl or text-4xl) and adjust the line-height class (replace leading-[150%] with the closest Tailwind leading token like leading-tight/leading-snug/leading-normal) so the element uses the design system scale instead of a hardcoded pixel value.src/widgets/chat-message-panel/ui/ChatMessagePanel.tsx (1)
3-4: 코드 블록 렌더링을 위한 하이라이터는 지연 로딩을 권장합니다현재 코드는
SyntaxHighlighter를 최상단에서 eagerly import하고 있지만,message.messageType === 'CODE'일 때만 사용됩니다. react-syntax-highlighter는 unpacked 상태로 1.5MB 규모이므로, 필요할 때만 로드하면 초기 번들을 줄일 수 있습니다.다음과 같이 개선할 수 있습니다:
PrismAsyncLight사용: 공식 async 빌드로 필요한 언어만 동적으로 로드- React.lazy + Suspense로 코드 블록 렌더링 컴포넌트 분리: 초기 로드 시 해당 컴포넌트는 제외
참고: React lazy 패턴, Vite 동적 임포트, react-syntax-highlighter 비동기 빌드
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/widgets/chat-message-panel/ui/ChatMessagePanel.tsx` around lines 3 - 4, The file eagerly imports Prism SyntaxHighlighter even though it's only used when message.messageType === 'CODE', inflating the bundle; change ChatMessagePanel.tsx to lazy-load the highlighter: create a separate CodeBlock component (or lazy-load the existing render branch) that imports react-syntax-highlighter's async build (PrismAsyncLight) and required languages via dynamic import, then use React.lazy + Suspense to load that component only for CODE messages; update the branch that checks message.messageType === 'CODE' to render the lazy CodeBlock component so the heavy dependency is not included in the initial bundle.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Line 48: The dependency `@types/react-syntax-highlighter`@15.5.13 is
incompatible with react-syntax-highlighter@16.x; update package.json to resolve
the mismatch by either removing the outdated `@types` entry, upgrading/locking
react-syntax-highlighter to a compatible v15.x, or adding a temporary
override/resolution (or local d.ts) for `@types/react-syntax-highlighter` to avoid
TS errors; if you choose a short-term workaround, annotate problematic
imports/usages with // `@ts-ignore` or explicit type assertions until the official
`@types` (see issue `#439`) or an in-repo type definition replaces it—look for the
package name "react-syntax-highlighter" and "@types/react-syntax-highlighter" in
package.json to apply the change.
In `@src/pages/common/LandingPage.tsx`:
- Line 65: The Tailwind classes in LandingPage.tsx's className (`w-100`,
`duration-800`, `scale-115`) are not in the default scale—replace them with
Tailwind arbitrary-value syntax: use w-[100px] (or w-[100%] if you intended full
width), duration-[800ms], and scale-[1.15] in the className expression that
builds the container (keep the conditional on hover !== 'none' but switch the
scale token to scale-[1.15]).
In `@src/widgets/chat-message-panel/ui/ChatMessagePanel.tsx`:
- Around line 84-99: The CODE branch hardcodes language='python' causing wrong
highlighting; update MessageItem in ChatMessagePanel.tsx to detect language from
the message (either add a language field to the chat message model or implement
a parseCodeBlock helper) and pass that into SyntaxHighlighter; specifically, add
a parseCodeBlock(content: string) function that extracts fenced-code language
and code (falling back to {language:'text', code: content}), compute parsedCode
= message.messageType === 'CODE' ? parseCodeBlock(message.content) : null, then
change SyntaxHighlighter props to language={parsedCode?.language ?? 'text'} and
render parsedCode?.code ?? message.content instead of the hardcoded 'python' and
message.content.
---
Nitpick comments:
In `@src/pages/common/LandingPage.tsx`:
- Line 72: The span currently uses an arbitrary font-size class "text-[33px]"
(see the span with class 'text-black-primary text-[33px] font-semibold
leading-[150%]'); replace this arbitrary value with the nearest Tailwind
typography token (e.g., text-3xl or text-4xl) and adjust the line-height class
(replace leading-[150%] with the closest Tailwind leading token like
leading-tight/leading-snug/leading-normal) so the element uses the design system
scale instead of a hardcoded pixel value.
In `@src/widgets/chat-message-panel/ui/ChatMessagePanel.tsx`:
- Around line 3-4: The file eagerly imports Prism SyntaxHighlighter even though
it's only used when message.messageType === 'CODE', inflating the bundle; change
ChatMessagePanel.tsx to lazy-load the highlighter: create a separate CodeBlock
component (or lazy-load the existing render branch) that imports
react-syntax-highlighter's async build (PrismAsyncLight) and required languages
via dynamic import, then use React.lazy + Suspense to load that component only
for CODE messages; update the branch that checks message.messageType === 'CODE'
to render the lazy CodeBlock component so the heavy dependency is not included
in the initial bundle.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b5f193cf-b572-490f-883d-a047cf9c4e67
⛔ Files ignored due to path filters (3)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsrc/assets/svg/arrowleftIcon.svgis excluded by!**/*.svgsrc/assets/svg/arrowrightIcon.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
package.jsonsrc/pages/common/LandingPage.tsxsrc/pages/common/UserIdInputPage.tsxsrc/shared/ui/button/Button.tsxsrc/widgets/chat-message-panel/ui/ChatMessagePanel.tsx
| "@types/node": "^24.2.1", | ||
| "@types/react": "^19.1.8", | ||
| "@types/react-dom": "^19.1.6", | ||
| "@types/react-syntax-highlighter": "^15.5.13", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Does react-syntax-highlighter@16.1.1 include built-in TypeScript types, and if not, which @types/react-syntax-highlighter version is recommended for it?
💡 Result:
No, react-syntax-highlighter@16.1.1 does not include built-in TypeScript types. The official npm page and README explicitly recommend installing the separate @types/react-syntax-highlighter package as a dev dependency to prevent TypeScript or ESLint errors. The latest version of @types/react-syntax-highlighter is 15.5.13 (last updated May 2024), which is commonly used with v16.x (e.g., in real-world package.json examples with react-syntax-highlighter ^16.1.0). While @types versions lag behind (no updates since v15 despite v16 releases in 2025-2026), it remains the recommended and compatible option per official docs. GitHub issues confirm ongoing reliance on external types without built-in support added.
Citations:
- 1: https://www.npmjs.com/package/react-syntax-highlighter
- 2: https://www.npmjs.com/package/@types/react-syntax-highlighter?activeTab=versions
- 3: https://registry.npmjs.org/react-syntax-highlighter
- 4: https://github.com/rayasabari/joko-ui/blob/main/package.json
- 5: https://www.npmjs.com/package/@types/react-syntax-highlighter
- 6: Upgrade the @types/react-syntax-highlighter version react-syntax-highlighter/react-syntax-highlighter#439
- 7: https://github.com/react-syntax-highlighter/react-syntax-highlighter
🌐 Web query:
react-syntax-highlighter 16.x와 @types/react-syntax-highlighter 15.x 호환성 공식 문서 확인
💡 Result:
react-syntax-highlighter 16.x와 @types/react-syntax-highlighter 15.x는 공식적으로 호환되지 않습니다. 공식 npm 페이지와 GitHub README(2026년 2월 v16.1.1 업데이트 기준)에서 TypeScript 사용자에게 @types/react-syntax-highlighter를 설치하라고 권장하지만, @types 패키지의 최신 버전은 15.5.13(2024년 5월)으로 16.x의 변경사항(refractor v5 업그레이드 등)을 반영하지 않습니다. GitHub 이슈 #439(2021년~)에서 types 동기화 요청이 open 상태이며, 16.x 릴리스 노트나 CHANGELOG에 types 업데이트 언급이 없습니다. 따라서 TypeScript 오류(예: 새로운 테마/props 누락, import 경로 변경)가 발생할 수 있으며, 임시 workaround나 types 업데이트 대기를 권장합니다.
Citations:
- 1: https://www.npmjs.com/package/react-syntax-highlighter
- 2: Upgrade the @types/react-syntax-highlighter version react-syntax-highlighter/react-syntax-highlighter#439
- 3: https://registry.npmjs.org/react-syntax-highlighter
- 4: https://www.npmjs.com/package/@types/react-syntax-highlighter?activeTab=versions
- 5: https://github.com/react-syntax-highlighter/react-syntax-highlighter/releases
- 6: https://github.com/react-syntax-highlighter/react-syntax-highlighter
- 7: https://www.npmjs.com/package/@types/react-syntax-highlighter
@types/react-syntax-highlighter 버전을 병합 전에 반드시 재검토하세요
Line 48의 @types/react-syntax-highlighter@15.5.13과 react-syntax-highlighter@16.x는 공식적으로 호환되지 않습니다. @types 패키지가 2024년 5월 이후 업데이트되지 않은 반면, v16.x에서는 refractor v5 업그레이드 등 주요 변경사항이 있었기 때문입니다. 이로 인해 타입 정의 누락, props 불일치, import 경로 오류 등의 TypeScript 컴파일 오류가 발생할 수 있습니다.
권장 방안:
- GitHub issue
#439(타입 동기화 요청)에서@types업데이트 진행 상황 확인 - 단기:
@ts-ignore또는 type assertion으로 임시 대응 - 장기: 공식
@types업데이트 대기 또는 자체 타입 정의 고려
참고: react-syntax-highlighter/react-syntax-highlighter#439
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` at line 48, The dependency
`@types/react-syntax-highlighter`@15.5.13 is incompatible with
react-syntax-highlighter@16.x; update package.json to resolve the mismatch by
either removing the outdated `@types` entry, upgrading/locking
react-syntax-highlighter to a compatible v15.x, or adding a temporary
override/resolution (or local d.ts) for `@types/react-syntax-highlighter` to avoid
TS errors; if you choose a short-term workaround, annotate problematic
imports/usages with // `@ts-ignore` or explicit type assertions until the official
`@types` (see issue `#439`) or an in-repo type definition replaces it—look for the
package name "react-syntax-highlighter" and "@types/react-syntax-highlighter" in
package.json to apply the change.
| alt='로고' | ||
| className='w-full h-full transition-all duration-300' | ||
| /> | ||
| className={`relative w-100 flex-center transition-all duration-800 ${hover !== 'none' ? 'scale-115' : ''}`}> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Tailwind 설정에서 커스텀 duration, scale 값 확인
# tailwind.config 파일 찾기 및 내용 확인
fd -e js -e ts -e mjs -e cjs "tailwind.config" --exec cat {}
# CSS 파일에서 커스텀 테마 확인 (Tailwind v4 `@theme` 사용 시)
fd -e css -g "*.css" --exec grep -l "@theme" {} \; | head -5 | xargs -I {} sh -c 'echo "=== {} ===" && cat {}'Repository: 2025-snowCode/snowCode-Client
Length of output: 2871
🏁 Script executed:
# Check the specific file and line mentioned in the review
cat -n src/pages/common/LandingPage.tsx | sed -n '60,70p'Repository: 2025-snowCode/snowCode-Client
Length of output: 480
🏁 Script executed:
# Look for any tailwind.config.js, tailwind.config.ts, or tailwind.config.mjs files
fd -type f "tailwind.config" -o -name "tailwind.config.*"Repository: 2025-snowCode/snowCode-Client
Length of output: 243
🏁 Script executed:
# Search for any custom duration or scale definitions in the codebase
rg "duration-|scale-" --type js --type ts --type css | head -30Repository: 2025-snowCode/snowCode-Client
Length of output: 1522
🏁 Script executed:
# Check if there are any build files or output showing Tailwind class validation
fd "tailwind" --type f -x grep -l "duration-800\|scale-115" {}Repository: 2025-snowCode/snowCode-Client
Length of output: 55
🏁 Script executed:
# Double-check if w-100 is a standard Tailwind width value by looking at usage patterns
rg "w-\[" --max-count 10Repository: 2025-snowCode/snowCode-Client
Length of output: 1553
🏁 Script executed:
# Verify that w-100 appears elsewhere in the codebase (to understand if it's a pattern)
rg "w-100|h-150"Repository: 2025-snowCode/snowCode-Client
Length of output: 461
Tailwind 임의 값(arbitrary value) 문법으로 수정하세요.
라인 65의 세 클래스가 모두 Tailwind CSS 기본 스케일에 포함되지 않는 값입니다:
w-100: 표준 너비 값이 아님duration-800: 기본값은 75, 100, 150, 200, 300, 500, 700, 1000scale-115: 기본값은 0, 50, 75, 90, 95, 100, 105, 110, 125, 150
프로젝트에 이 값들을 정의하지 않았으므로, Tailwind v4의 임의 값 문법을 사용해서 명시적으로 작성하세요:
수정 제안
- className={`relative w-100 flex-center transition-all duration-800 ${hover !== 'none' ? 'scale-115' : ''}`}
+ className={`relative w-[100px] flex-center transition-all duration-[800ms] ${hover !== 'none' ? 'scale-[1.15]' : ''}`}참고: Tailwind CSS - Arbitrary values, Transition Duration
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className={`relative w-100 flex-center transition-all duration-800 ${hover !== 'none' ? 'scale-115' : ''}`}> | |
| className={`relative w-[100px] flex-center transition-all duration-[800ms] ${hover !== 'none' ? 'scale-[1.15]' : ''}`}> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/common/LandingPage.tsx` at line 65, The Tailwind classes in
LandingPage.tsx's className (`w-100`, `duration-800`, `scale-115`) are not in
the default scale—replace them with Tailwind arbitrary-value syntax: use
w-[100px] (or w-[100%] if you intended full width), duration-[800ms], and
scale-[1.15] in the className expression that builds the container (keep the
conditional on hover !== 'none' but switch the scale token to scale-[1.15]).
| {message.messageType === 'CODE' ? ( | ||
| <div className='max-w-xs rounded-2xl overflow-hidden text-sm'> | ||
| <SyntaxHighlighter | ||
| style={oneDark} | ||
| PreTag='div' | ||
| language='python' | ||
| customStyle={{ | ||
| margin: 0, | ||
| borderRadius: '1rem', | ||
| fontSize: '0.75rem', | ||
| padding: '0.75rem 1rem', | ||
| maxWidth: '100%', | ||
| overflowX: 'auto', | ||
| }}> | ||
| {message.content} | ||
| </SyntaxHighlighter> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether chat message model already has language metadata.
rg -n "messageTypeSchema|chatMessageSchema|language" src/entities/chat/model/schemas.ts src/entities/chat/model/useChatSocket.ts src/widgets/chat-message-panel/ui/ChatMessagePanel.tsxRepository: 2025-snowCode/snowCode-Client
Length of output: 852
🏁 Script executed:
# Check the full chatMessageSchema structure
cat -n src/entities/chat/model/schemas.ts | head -70Repository: 2025-snowCode/snowCode-Client
Length of output: 2416
🏁 Script executed:
# Search for any language detection or parsing logic in the codebase
rg -n "parseCodeBlock|language|markdown|fenced|code.*language" src/entities/ src/widgets/chat-message-panel/ -A 3Repository: 2025-snowCode/snowCode-Client
Length of output: 1002
🏁 Script executed:
# Search for examples of CODE type messages or how they are formatted
rg -n "messageType.*CODE\|message.content\|CODE.*message" src/ -B 2 -A 2 | head -80Repository: 2025-snowCode/snowCode-Client
Length of output: 55
🏁 Script executed:
# Check test files for message examples
fd -t f "\.test\.\|\.spec\." src/ | xargs rg -l "CODE\|SyntaxHighlighter" 2>/dev/null || echo "No test files found"Repository: 2025-snowCode/snowCode-Client
Length of output: 92
🏁 Script executed:
# View the full ChatMessagePanel.tsx component to understand the message flow
wc -l src/widgets/chat-message-panel/ui/ChatMessagePanel.tsxRepository: 2025-snowCode/snowCode-Client
Length of output: 131
🏁 Script executed:
# Check the content around the problematic code
sed -n '75,110p' src/widgets/chat-message-panel/ui/ChatMessagePanel.tsxRepository: 2025-snowCode/snowCode-Client
Length of output: 1184
🏁 Script executed:
# Search for where CODE messages are created or sent
rg -n "messageType.*=.*CODE\|CODE.*message\|type.*CODE" src/ -B 3 -A 3 | head -100Repository: 2025-snowCode/snowCode-Client
Length of output: 55
CODE 메시지 언어가 Python으로 고정되어 있어 다른 언어의 구문 강조가 정확하지 않습니다
현재 src/entities/chat/model/schemas.ts의 chatMessageSchema에는 언어 정보 필드가 없으며, 라인 89에서 language='python'이 하드코딩되어 있습니다. 이로 인해 JavaScript, TypeScript, Java 등 다른 언어로 작성된 코드도 모두 Python 규칙으로 렌더링됩니다.
메시지 스키마에 언어 필드를 추가하거나, 최소한 마크다운 fenced code 형식(\``language)으로 감싸진 코드 블록을 파싱하는 폴백을 구현하세요. 그렇지 않으면 text`를 기본값으로 사용하는 것이 좋습니다.
관련 자료:
🔧 제안 패치 (fenced code 언어 폴백)
+function parseCodeBlock(content: string): {language: string; code: string} {
+ const match = content.match(/^```([\w+-]+)?\n([\s\S]*?)```$/);
+ if (!match) return {language: 'text', code: content};
+ return {
+ language: (match[1] || 'text').toLowerCase(),
+ code: match[2],
+ };
+}
+
function MessageItem({
message,
isMine,
isFirstInGroup,
isLastInGroup,
opponentId,
}: MessageItemProps) {
+ const parsedCode =
+ message.messageType === 'CODE' ? parseCodeBlock(message.content) : null;
+
return (
{message.messageType === 'CODE' ? (
<div className='max-w-xs rounded-2xl overflow-hidden text-sm'>
<SyntaxHighlighter
style={oneDark}
PreTag='div'
- language='python'
+ language={parsedCode?.language ?? 'text'}
customStyle={{
margin: 0,
borderRadius: '1rem',
fontSize: '0.75rem',
padding: '0.75rem 1rem',
maxWidth: '100%',
overflowX: 'auto',
}}>
- {message.content}
+ {parsedCode?.code ?? message.content}
</SyntaxHighlighter>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/widgets/chat-message-panel/ui/ChatMessagePanel.tsx` around lines 84 - 99,
The CODE branch hardcodes language='python' causing wrong highlighting; update
MessageItem in ChatMessagePanel.tsx to detect language from the message (either
add a language field to the chat message model or implement a parseCodeBlock
helper) and pass that into SyntaxHighlighter; specifically, add a
parseCodeBlock(content: string) function that extracts fenced-code language and
code (falling back to {language:'text', code: content}), compute parsedCode =
message.messageType === 'CODE' ? parseCodeBlock(message.content) : null, then
change SyntaxHighlighter props to language={parsedCode?.language ?? 'text'} and
render parsedCode?.code ?? message.content instead of the hardcoded 'python' and
message.content.
1 participant
⚙️ Related ISSUE Number
Related #99
📄 Work Description
Button컴포넌트onMouseEnter,onMouseLeave적용syntax-highlighter적용📷 Screenshot
💬 To Reviewers
🔗 Reference