Conversation
…area [hotfix] 지원서 제목이 정상적으로 바뀌지않는 오류 수정
Zepelown
requested review from
PororoAndFriends,
lepitaaar,
oesnuj and
seongwon030
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Change Summary |
|---|---|
QuestionTitle 편집 모델 전환frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts, frontend/src/components/application/QuestionTitle/QuestionTitle.tsx |
styled.div를 styled.textarea로 변경. textarea에 field-sizing, pre-wrap, overflow 제어 등 스타일 추가. 컴포넌트를 contentEditable → 제어된 textarea(value/onChange)로 전환하고 모드별 readOnly 적용, onChange에서 e.target.value 사용 및 maxLength 검사 유지. |
Sequence Diagram(s)
sequenceDiagram
actor User
participant QuestionTitle as QuestionTitle (textarea)
participant Parent as Parent Component
User->>QuestionTitle: 입력 (builder 모드)
QuestionTitle->>QuestionTitle: onChange(e.target.value) + maxLength 검사
QuestionTitle-->>Parent: onTitleChange(title)
Parent-->>QuestionTitle: props.title 갱신 (value로 반영)
User->>QuestionTitle: 포커스/입력 시도 (answer 모드)
QuestionTitle->>QuestionTitle: readOnly=true로 입력 차단
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
- [hotfix] 지원서 제목이 정상적으로 바뀌지않는 오류 수정 #678: 동일한 파일에서 div→textarea 및 제어 컴포넌트 전환을 수행하는 유사 변경.
- [hotfix] 지원서의 질문 제목을 정상적으로 변경할수 없는 오류 수정 #677: contentEditable 기반에서 onInput→onChange로 이벤트 경로를 수정한 동일 코드 경로 관련 변경.
- [fix] 질문 제목 줄바꿈, 설명 커서 노출, 객관식 선택 해제 등 지원서 폼 UI/UX 개선 #573: QuestionTitle 렌더/편집 방식 변경을 다루는 이전 PR로 같은 파일과 책임 영역을 수정.
Suggested labels
🐞 Bug, 🛠Fix, 💻 FE
Suggested reviewers
- lepitaaar
- seongwon030
- oesnuj
- PororoAndFriends
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
develop-fe
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: 2
🔭 Outside diff range comments (1)
frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts (1)
50-57: textarea에서는 &:empty:before 기반 placeholder가 동작하지 않습니다textarea는 ::before/::after가 적용되지 않고, :empty도 기대대로 매칭되지 않습니다. 현재 data-placeholder로 전달해도 표시되지 않아 placeholder가 사라지는 UX 이슈가 발생합니다. 표준 placeholder 속성 사용으로 전환해야 합니다.
아래처럼 CSS를 교체해 주세요:
- &:empty:before { - content: attr(data-placeholder); - color: #c5c5c5; - } - - &:focus:before { - opacity: 0; - } + &::placeholder { + color: #c5c5c5; + }TSX 쪽에서도 data-placeholder 대신 placeholder 속성을 사용하도록 함께 수정 제안(별도 코멘트 참고).
🧹 Nitpick comments (1)
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (1)
31-36: onChange의 길이 체크는 maxLength 속성으로 대체 가능(간소화 제안)이미 maxLength 속성을 추가하면 중복된 로직이 됩니다. 간결성을 위해 제거 고려 바랍니다.
간소화 예:
- onChange={(e) => { - const value = e.target.value || ''; - if (value.length <= APPLICATION_FORM.QUESTION_TITLE.maxLength) { - onTitleChange?.(value); - } - }} + onChange={(e) => onTitleChange?.(e.target.value ?? '')}
📜 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)
frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts(1 hunks)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.styles.tsfrontend/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
🧬 Code Graph Analysis (1)
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (1)
frontend/src/constants/APPLICATION_FORM.ts (1)
APPLICATION_FORM(1-26)
🔇 Additional comments (1)
frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts (1)
35-44: textarea 전환으로 입력 이벤트/상태 동기화 문제 해결 — 방향 좋습니다contentEditable div 대신 textarea로 바꾼 선택이 문제의 근본 원인(onInput 미적용)을 제거합니다. 제어 컴포넌트 패턴과의 궁합도 좋습니다.
| field-sizing: content; | ||
| white-space: pre-wrap; | ||
| overflow-wrap: break-word; | ||
| overflow: hidden; |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
field-sizing: content + overflow: hidden 조합은 비지원 브라우저에서 내용이 잘릴 수 있음
field-sizing: content는 아직 브라우저 지원이 고르지 않습니다. 해당 속성이 무시되는 환경에서 overflow: hidden이 유지되면 textarea 높이가 늘지 않아 입력 내용이 가려질 수 있습니다.
권장 대응:
- 최소 안전망: overflow를 auto로 바꿔 스크롤이라도 노출되게 합니다.
- 더 나은 UX: 자동 리사이즈(JS 기반) 또는 react-textarea-autosize 도입.
해당 라인에 대한 최소 수정안:
- overflow: hidden;
+ /* Fallback: ensure content is still accessible when field-sizing is unsupported */
+ overflow: auto;추가로 TSX에서 rows={1}를 부여하면 초기 높이를 줄이면서도 스크롤이 필요 시 나타납니다(아래 TSX 코멘트에 함께 제안).
Safari/Firefox에서 실제 입력 시 줄바꿈이 여러 줄일 때 내용이 보이는지 확인 부탁드립니다.
overflow:hidden 사용 시 field-sizing 미지원 브라우저에서 내용 가려짐
field-sizing: content가 아직 주요 브라우저에서 일관되게 지원되지 않아, 해당 속성이 무시되면 overflow: hidden으로 인해 textarea 높이가 늘어나지 않아 입력 내용이 잘려 보일 수 있습니다.
권장 대응:
- 최소 안전망:
overflow: auto로 변경해 스크롤이 나타나도록 합니다. - UX 개선: JS 기반 자동 리사이징 로직 또는
react-textarea-autosize도입을 검토합니다. - 초기 높이를 조절하려면 TSX에서
<textarea rows={1} />속성 추가도 고려해 주세요.
수정 예시 (frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts:45–48):
- overflow: hidden;
+ /* field-sizing 미지원 환경 대비: 컨텐츠 접근성 보장 */
+ overflow: auto;Safari/Firefox 등 실제 브라우저에서 여러 줄 입력 시 정상 동작하는지 반드시 확인 부탁드립니다.
📝 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.
| field-sizing: content; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| overflow: hidden; | |
| field-sizing: content; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| /* field-sizing 미지원 환경 대비: 컨텐츠 접근성 보장 */ | |
| overflow: auto; |
🤖 Prompt for AI Agents
In frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts
around lines 45–48, the stylesheet uses "field-sizing: content" with "overflow:
hidden", which causes textarea content to be clipped in browsers that ignore
field-sizing; change "overflow: hidden" to "overflow: auto" as a minimum fix so
scrollbars appear when content exceeds size, and as a follow-up either implement
JS-based auto-resizing or integrate react-textarea-autosize and set an initial
rows={1} on the textarea element in the TSX to improve UX; after changes verify
multi-line input behavior in Safari and Firefox.
| readOnly={mode === 'answer'} | ||
| suppressContentEditableWarning={true} | ||
| onChange={(e) => { | ||
| const value = e.currentTarget.textContent || ''; | ||
| const value = e.target.value || ''; | ||
| if (value.length <= APPLICATION_FORM.QUESTION_TITLE.maxLength) { | ||
| onTitleChange?.(value); | ||
| } | ||
| }} | ||
| value={title} | ||
| data-placeholder={title ? '' : APPLICATION_FORM.QUESTION_TITLE.placeholder} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
contentEditable 잔여 prop 제거, placeholder/maxLength/rows 추가 제안
- suppressContentEditableWarning은 textarea에서 불필요합니다(잔존 코드로 보임).
- placeholder는 data-placeholder가 아닌 표준 placeholder 속성 사용이 맞습니다(현 스타일 전환과 부합).
- maxLength를 속성으로도 지정하면 네이티브 차단/보조 기술 호환성이 좋아집니다.
- rows={1}로 초기 높이를 낮추되, 스타일의 overflow fallback과 함께 사용 시 안전합니다.
적용 diff:
<Styled.QuestionTitleText
- readOnly={mode === 'answer'}
- suppressContentEditableWarning={true}
+ readOnly={mode === 'answer'}
+ rows={1}
+ maxLength={APPLICATION_FORM.QUESTION_TITLE.maxLength}
onChange={(e) => {
const value = e.target.value || '';
if (value.length <= APPLICATION_FORM.QUESTION_TITLE.maxLength) {
onTitleChange?.(value);
}
}}
value={title}
- data-placeholder={title ? '' : APPLICATION_FORM.QUESTION_TITLE.placeholder}
+ placeholder={APPLICATION_FORM.QUESTION_TITLE.placeholder}
>원하시면 자동 리사이즈 훅/컴포넌트(useAutosizeTextarea 또는 react-textarea-autosize 도입)도 추가해드리겠습니다.
🤖 Prompt for AI Agents
In frontend/src/components/application/QuestionTitle/QuestionTitle.tsx around
lines 29 to 38, remove the leftover suppressContentEditableWarning prop (it's
for contentEditable, not textarea), replace data-placeholder with the standard
placeholder prop, add a native maxLength attribute set to
APPLICATION_FORM.QUESTION_TITLE.maxLength, and add rows={1} to set initial
height (keeping existing overflow/resize styling); leave readOnly logic as-is
and keep the onChange handler but let the browser enforce maxLength while still
guarding value length in the handler.
3 participants
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit