[hotfix] 지원서의 질문 제목을 정상적으로 변경할수 없는 오류 수정#677
Conversation
lepitaaar
requested review from
PororoAndFriends,
Zepelown,
oesnuj,
seongwon030 and
suhyun113
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
이벤트 처리 변경: QuestionTitlefrontend/src/components/application/QuestionTitle/QuestionTitle.tsx |
Styled.QuestionTitleText의 이벤트를 onInput → onChange로 변경. textContent에서 값 추출 후 APPLICATION_FORM.QUESTION_TITLE.maxLength 검증 및 onTitleChange?.(value) 호출 로직은 유지. 기타 UI 속성 변화 없음. |
Sequence Diagram(s)
sequenceDiagram
actor User
participant QuestionTitle as QuestionTitle Component
participant Parent as Parent Handler
User->>QuestionTitle: 제목 편집 (contentEditable)
Note over QuestionTitle: 입력 중에는 상태 미전파
User->>QuestionTitle: 변경 확정/blur (change)
QuestionTitle->>QuestionTitle: 값 추출 및 maxLength 검증
alt 유효
QuestionTitle->>Parent: onTitleChange(value)
else 초과/무효
QuestionTitle--xParent: 호출 안 함
end
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
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 Docstrings
🧪 Generate unit tests
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
fix/application-builder-title-change-text-error
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.
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. - PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
CodeRabbit Commands (Invoked using PR/Issue comments)
Type @coderabbitai help to get the list of available commands.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
Status, Documentation and Community
- Visit our Status Page to check the current availability of CodeRabbit.
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (4)
31-36: IME(한글 등) 입력 조합 중 상태 업데이트는 커서 튐/문자 손실을 유발할 수 있습니다 — composition 핸들링 추가 제안한글/일본어 등 IME 조합 중 onInput/onChange에서 상태를 갱신하면 커서가 튀거나 입력이 깨지는 문제가 생길 수 있습니다. 조합 중에는 무시하고 compositionend 시점에만 커밋하도록 제어하는 것이 안전합니다.
컴포넌트 상단에 조합 상태를 추적하고, 이벤트를 추가해 주세요:
// 컴포넌트 내부 상단 const isComposingRef = React.useRef(false);요소에 다음 핸들러를 추가합니다:
onCompositionStart={() => { isComposingRef.current = true; }} onCompositionEnd={(e) => { isComposingRef.current = false; const value = e.currentTarget.textContent || ''; const max = APPLICATION_FORM.QUESTION_TITLE.maxLength; const next = value.length > max ? value.slice(0, max) : value; onTitleChange?.(next); }} onInput={(e) => { if (isComposingRef.current) return; // 조합 중엔 무시 const value = e.currentTarget.textContent || ''; const max = APPLICATION_FORM.QUESTION_TITLE.maxLength; const next = value.length > max ? value.slice(0, max) : value; onTitleChange?.(next); }}
31-36: maxLength 초과 시 UI/상태 불일치 가능 — 잘라서 반영하도록 변경 권장현재는 길이 초과 시 onTitleChange를 호출하지 않기 때문에, 사용자가 긴 텍스트를 붙여넣으면 화면의 contentEditable에는 보여도 상태는 갱신되지 않는 불일치가 생길 수 있습니다. 초과분을 잘라(next = value.slice(0, max)) 상태를 동기화하는 쪽이 일관적입니다.
위 첫 번째 코멘트의 diff처럼 guard 대신 잘라서 반영하는 로직으로 바꿔 주세요.
31-36: 접근성(a11y) 보완: role/aria 속성 추가 권장contentEditable에 placeholder UI를 커스텀 데이터 속성으로 처리 중이라 스크린리더가 의미를 놓칠 수 있습니다. role="textbox", aria-multiline, aria-label(또는 aria-placeholder 유사 패턴) 등을 추가하는 것을 권장합니다.
예:
role="textbox" aria-multiline="false" aria-label={APPLICATION_FORM.QUESTION_TITLE.placeholder}
31-36: contentEditable에 onChange 대신 onInput + onBlur 사용 권장리액트 버전 확인 결과:
– frontend/package.json 에서 React ^19.0.0, React-DOM ^19.0.0 사용 중입니다.
contentEditable의 onChange는 브라우저·React 조합에 따라 입력 중 실시간으로 이벤트가 발생하지 않거나(blur 시에만) 동작하지 않는 경우가 있어 UX가 둔감해질 수 있습니다.아래처럼 onInput으로 실시간 반영하고, onBlur에서 최종 커밋·보정하는 패턴으로 교체할 것을 권장합니다.
- 파일: frontend/src/components/application/QuestionTitle/QuestionTitle.tsx
- 위치: 31–36행
- onChange={(e) => { - const value = e.currentTarget.textContent || ''; - if (value.length <= APPLICATION_FORM.QUESTION_TITLE.maxLength) { - onTitleChange?.(value); - } - }} + onInput={(e) => { + const raw = e.currentTarget.textContent || ''; + const max = APPLICATION_FORM.QUESTION_TITLE.maxLength; + const next = raw.length > max ? raw.slice(0, max) : raw; + onTitleChange?.(next); + }} + onBlur={(e) => { + const raw = e.currentTarget.textContent || ''; + const max = APPLICATION_FORM.QUESTION_TITLE.maxLength; + const next = raw.length > max ? raw.slice(0, max) : raw; + if (raw !== next) { + e.currentTarget.textContent = next; // UI와 상태 동기화 + } + onTitleChange?.(next); + }}
📜 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 (1)
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx
frontend/**/*.tsx
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx
lepitaaar
deleted the
fix/application-builder-title-change-text-error
branch
2 participants
이게왜?????
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit