[hotfix] 지원서 제목이 정상적으로 바뀌지않는 오류 수정#678
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 |
|---|---|
QuestionTitle 스타일 전환frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts |
QuestionTitleText를 styled.div → styled.textarea로 변경. textarea에 맞춰 CSS 재구성(overflow/white-space 조정, field-sizing: content, overflow: hidden 등). |
QuestionTitle 컴포넌트 제어형 입력화frontend/src/components/application/QuestionTitle/QuestionTitle.tsx |
contentEditable 제거 후 readOnly={mode === 'answer'}로 전환. value={title} 추가해 controlled화. onInput/textContent → onChange/e.target.value로 변경. 내부 텍스트 노드 제거, placeholder는 data-placeholder 유지. 길이 제한 로직은 동일 경로에서 value 기반으로 동작. |
Sequence Diagram(s)
sequenceDiagram
participant U as User
participant QT as QuestionTitle (textarea)
participant P as Parent
U->>QT: Type input
QT->>QT: readOnly = (mode === 'answer')
QT-->>P: onChange(value)
P->>P: setState(title = value)
P-->>QT: props { title }
QT->>QT: value = props.title
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
- [feature] CustomDropdown 컴포넌트 구현 및 질문 입력 필드 UX 개선 #466: 동일 컴포넌트와 스타일에서 textarea 전환 및 제어형 입력 적용과 직접적으로 연관.
- [hotfix] 지원서의 질문 제목을 정상적으로 변경할수 없는 오류 수정 #677: QuestionTitle의 입력 이벤트 처리 경로 변경(onInput→onChange)과 연속선상 변경.
- [fix] 질문 제목 줄바꿈, 설명 커서 노출, 객관식 선택 해제 등 지원서 폼 UI/UX 개선 #573: QuestionTitle의 편집 방식 변경(contentEditable 기반 수정)과 같은 영역 변경.
Suggested reviewers
- Zepelown
- seongwon030
- oesnuj
- PororoAndFriends
- suhyun113
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/change-questiontitle-to-textarea
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: 4
🧹 Nitpick comments (2)
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (2)
30-30: contentEditable가 아니므로 suppressContentEditableWarning은 제거하세요.현재는 textarea에 불필요한 속성이며, DOM에 알 수 없는 attribute가 내려갈 수 있습니다.
아래와 같이 제거해 주세요:
- suppressContentEditableWarning={true}
31-36: e.target.value는 항상 문자열입니다.|| ''는 불필요하며 e.currentTarget 사용을 권장합니다.불필요한 연산 제거 및 타입 안정성 향상을 위해 아래처럼 정리하세요.
- const value = e.target.value || ''; + const value = e.currentTarget.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.tsx (1)
29-29: readOnly 전환 좋습니다.answer 모드에서 편집 불가, builder 모드에서 편집 가능이라는 의도에 정확히 부합합니다.
| export const QuestionTitleText = styled.textarea` | ||
| display: inline-block; | ||
| min-width: 100px; | ||
| resize: none; | ||
| overflow-wrap: break-word; | ||
| white-space: pre-wrap; | ||
| border: none; | ||
| outline: none; | ||
| font-size: 1.25rem; | ||
| font-weight: 700; | ||
| line-height: 1.5; | ||
| color: #111; | ||
| field-sizing: content; | ||
| white-space: pre-wrap; | ||
| overflow-wrap: break-word; | ||
| overflow: hidden; | ||
|
|
There was a problem hiding this comment.
textarea로 전환했으므로 placeholder는 속성으로 처리해야 합니다 (현재 CSS placeholder 해크는 textarea에 적용되지 않을 수 있음).
contentEditable div에서 쓰던 &:empty:before { content: attr(data-placeholder) } 방식은 textarea에서 브라우저별로 동작하지 않거나 전혀 적용되지 않을 수 있습니다. textarea는 기본 placeholder 속성을 지원하므로 이를 사용해 주세요. 또한 시각적 일관성을 위해 ::placeholder 스타일을 추가하는 편이 낫습니다.
아래 diff로 스타일에 기본 placeholder 스타일을 추가해 주세요(선택):
export const QuestionTitleText = styled.textarea`
display: inline-block;
min-width: 100px;
resize: none;
border: none;
outline: none;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5;
color: #111;
field-sizing: content;
white-space: pre-wrap;
overflow-wrap: break-word;
overflow: hidden;
+
+ &::placeholder {
+ color: #c5c5c5;
+ }그리고 아래 기존 placeholder 해크는 제거해 주세요(선택, 변경 범위 밖 참고):
// 제거 권장: textarea에서는 ::before/::after, :empty가 기대대로 동작하지 않습니다.
&:empty:before {
content: attr(data-placeholder);
color: #c5c5c5;
}
&:focus:before {
opacity: 0;
}또한 TSX에서 data-placeholder 대신 placeholder 속성을 전달하도록 변경해야 합니다(별도 코멘트 참고).
🤖 Prompt for AI Agents
In frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts
around lines 35-49, the component was switched to a textarea so the CSS
placeholder hack using &:empty:before should be removed and the native
placeholder attribute used instead; update the styled textarea to include
::placeholder styling (e.g. color, opacity, font-weight) for visual consistency
and remove the &:empty:before / &:focus:before rules, and ensure the TSX using
this component passes placeholder rather than data-placeholder.
| outline: none; | ||
| font-size: 1.25rem; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
outline: none으로 포커스 가시성이 사라집니다. 대체 포커스 스타일을 제공해 주세요.
접근성(WCAG 2.4.7) 관점에서 키보드 포커스가 명확히 보여야 합니다.
아래와 같이 커스텀 포커스 표시를 추가하는 것을 권장합니다.
outline: none;
+ &:focus-visible {
+ outline: 2px solid #ff5414;
+ outline-offset: 2px;
+ border-radius: 4px;
+ }📝 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.
| outline: none; | |
| font-size: 1.25rem; | |
| outline: none; | |
| &:focus-visible { | |
| outline: 2px solid #ff5414; | |
| outline-offset: 2px; | |
| border-radius: 4px; | |
| } | |
| font-size: 1.25rem; |
🤖 Prompt for AI Agents
In frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts
around lines 40-41, the rule "outline: none;" removes keyboard focus visibility;
replace it by removing that line and add a custom accessible focus style
(preferably using :focus-visible as well as :focus fallback) that provides a
clear, high-contrast indicator (for example a visible outline or box-shadow
and/or border change) so keyboard users can see focus; ensure the focus style is
not color-only and matches the component’s spacing (use an offset or ring) and
apply it to the same selector so it appears when the element receives keyboard
focus.
| field-sizing: content; | ||
| white-space: pre-wrap; | ||
| overflow-wrap: break-word; | ||
| overflow: hidden; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
field-sizing: content + overflow: hidden 조합은 일부 브라우저에서 텍스트가 잘리는 심각한 이슈를 유발할 수 있습니다.
field-sizing: content는 아직 지원이 제한적입니다. 지원되지 않는 환경에서 overflow: hidden과 resize: none이 함께 있으면 입력 내용이 스크롤/리사이즈 없이 가려질 수 있습니다.
대응 방안(둘 중 하나 이상 적용 권장):
- 옵션 A(권장): TSX에서 자동 리사이징(JS) 구현.
textarea.style.height를scrollHeight에 맞춰 갱신하세요(별도 코멘트에 코드 제공). - 옵션 B(폴백): CSS에
@supports not (field-sizing: content)가드를 두고 스크롤 가능하게 처리.
export const QuestionTitleText = styled.textarea`
@@
overflow: hidden;
+
+ /* field-sizing 미지원 브라우저 폴백: 스크롤 허용 */
+ @supports not (field-sizing: content) {
+ overflow-y: auto;
+ }크로스 브라우저(Chromium/Safari/Firefox, 모바일 포함)에서 입력이 숨겨지지 않는지 확인 부탁드립니다.
아래 스크립트로 field-sizing: content, resize, overflow 설정이 실제로 적용된 위치를 확인하겠습니다.
🏁 Script executed:
#!/bin/bash
# QuestionTitle.styles.ts에서 field-sizing, resize, overflow 사용 확인
rg -n "field-sizing:" frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts
rg -n "resize:" frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts
rg -n "overflow" frontend/src/components/application/QuestionTitle/QuestionTitle.styles.tsLength of output: 378
field-sizing: content 미지원 브라우저에서 텍스트 클리핑 방지 방안 적용 필요
- 파일: frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts
- Lines 38 (
resize: none;), 45–48 (field-sizing: content;,overflow: hidden;등)
- Lines 38 (
- 현상:
field-sizing: content가 지원되지 않는 환경에서overflow: hidden및resize: none조합 시 입력된 텍스트가 스크롤 또는 리사이즈 없이 가려질 수 있음 - 제안 (둘 중 하나 이상 적용 권장):
• 옵션 A (권장): TSX 상에서 JS로 자동 리사이징 구현- 예:
textarea.style.height = textarea.scrollHeight + 'px'
• 옵션 B (폴백): CSS에@supports not (field-sizing: content)가드 추가 후 스크롤 허용
- 예:
export const QuestionTitleText = styled.textarea`
@@
overflow: hidden;
+
+ /* field-sizing 미지원 브라우저 폴백: 스크롤 허용 */
+ @supports not (field-sizing: content) {
+ overflow-y: auto;
+ }작업 후 크로스 브라우저(Chromium/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; | |
| export const QuestionTitleText = styled.textarea` | |
| /* …other styles above… */ | |
| resize: none; | |
| field-sizing: content; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| overflow: hidden; | |
| /* field-sizing 미지원 브라우저 폴백: 스크롤 허용 */ | |
| @supports not (field-sizing: content) { | |
| overflow-y: auto; | |
| } | |
| `; |
| value={title} | ||
| data-placeholder={title ? '' : APPLICATION_FORM.QUESTION_TITLE.placeholder} | ||
| > |
There was a problem hiding this comment.
🛠️ Refactor suggestion
placeholder/data-placeholder, maxLength, 자동 리사이즈, 접근성 보강 제안
- textarea는 기본
placeholder를 지원하므로data-placeholder대신placeholder를 사용하세요. - 입력 단계에서의 제약도 함께 걸기 위해
maxLength속성 추가를 권장합니다(상단 가드와 함께 사용 가능). - 자동 리사이징(JS)으로 contentEditable 대비 UX 저하를 방지하세요.
- 접근성: 명시적 레이블이 없다면
aria-label을 제공하세요. 초깃값 한 줄을 원하면rows={1}권장.
아래 diff는 해당 속성들을 추가하고 data-placeholder를 제거합니다.
<Styled.QuestionTitleText
readOnly={mode === 'answer'}
- suppressContentEditableWarning={true}
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}
+ ref={textAreaRef}
+ placeholder={APPLICATION_FORM.QUESTION_TITLE.placeholder}
+ maxLength={APPLICATION_FORM.QUESTION_TITLE.maxLength}
+ rows={1}
+ aria-label="질문 제목"
>
</Styled.QuestionTitleText>컴포넌트 외곽(선택, 변경 범위 밖)에는 다음 보조 코드로 자동 리사이징을 구현해 주세요.
// 상단 import 보강
import { useLayoutEffect, useRef } from 'react';
// 컴포넌트 내부
const textAreaRef = useRef<HTMLTextAreaElement>(null);
const autoResize = () => {
const el = textAreaRef.current;
if (!el) return;
el.style.height = 'auto';
el.style.height = `${el.scrollHeight}px`;
};
// title 변화 시 반영(외부 상태 업데이트로 값이 바뀌는 경우)
useLayoutEffect(() => {
autoResize();
}, [title]);참고: onChange 내부에서 즉시 autoResize()를 한 번 더 호출하면 시각적 지연을 줄일 수 있습니다. 또한 스타일 쪽의 placeholder 해크(&:empty:before)는 제거하세요(스타일 파일 코멘트 참조).
🤖 Prompt for AI Agents
In frontend/src/components/application/QuestionTitle/QuestionTitle.tsx around
lines 37-39, replace the nonstandard data-placeholder with the native
placeholder prop, add a maxLength prop (e.g. same limit enforced by
server/guards), provide accessibility by adding aria-label if there is no
explicit <label>, set rows={1} for a single-line initial height, and wire up an
auto-resize implementation by attaching a textarea ref and using a
useLayoutEffect hook to adjust height to scrollHeight when title changes (also
call the resize helper once inside onChange to reduce visual lag); remove any
CSS placeholder hack like &:empty:before.
2 participants
#️⃣연관된 이슈
📝작업 내용
저번에 이벤트를 바꾸어 해결했던건 onInput이 contenteditable div에 적용되는 이벤트가 아니여서 state가 변경되지않음에 따라 정상적으로 된것처럼 보인것입니다.
따라서 div태그대신 textarea로 변경하여 오류를 수정하였습니다
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit