Conversation
lepitaaar
added
🎨 Design
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
QuestionTitle 컴포넌트frontend/src/components/application/QuestionTitle/QuestionTitle.tsx, frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts |
TSX: useLayoutEffect/useRef 추가, textarea ref 바인딩, auto-resize(높이=scrollHeight) 및 answer 모드 시 너비 조정, rows={1} 설정. 스타일: 컨테이너에 flex: 1, textarea에 width: 100% 추가. 공개 API 변경 없음. |
Sequence Diagram(s)
sequenceDiagram
autonumber
participant U as User
participant QT as QuestionTitle(Component)
participant TA as textarea (DOM)
participant BL as Browser Layout
U->>QT: title 업데이트 (props/state)
QT->>QT: useLayoutEffect(title)
QT->>TA: height = 0px
QT->>TA: if (mode==='answer') set width by content length
QT->>TA: height = TA.scrollHeight
TA->>BL: 레이아웃 재계산
BL-->>U: 리사이즈된 textarea 표시
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related issues
- [fix] 지원서 질문 제목의 너비가 콘텐츠의 길이에 맞춰 변경되도록 수정 #687 — QuestionTitle의 크기/자동 리사이즈 동작 개선과 직접적으로 연관됨.
Possibly related PRs
- [hotfix] 지원서 제목이 정상적으로 바뀌지않는 오류 수정 #678 — 동일 컴포넌트에서 textarea 전환 및 스타일 변경과 연결; 본 PR의 자동 리사이즈가 이를 보완.
- [fix]지원서가 만들어지지 않던 문제 해결 #679 — textarea 기반 입력/제어 로직을 다룸; 현재 PR의 ref/리사이즈 로직이 후속.
- [feature] CustomDropdown 컴포넌트 구현 및 질문 입력 필드 UX 개선 #466 — QuestionTitle 스타일/placeholder/maxLength 관련 변경과 이어짐.
Suggested reviewers
- Zepelown
- seongwon030
- oesnuj
- 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/add-responsive-layout-title
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.styles.ts (2)
33-33: flex: 1은 flex-basis: 0%라서 width: fit-content 의미를 잃습니다 — flex: auto(=1 1 auto)로 변경 권장현재 설정은 콘텐츠 고유 너비를 무시하고 가용 공간을 균등 분배하려는 동작을 유도합니다. 콘텐츠 기반으로 계산하되 필요 시 확장하려면 flex-basis가 auto여야 합니다. 또한 flex 컨텍스트에서 줄바꿈/축소 이슈를 줄이기 위해 min-width: 0 추가를 권장합니다.
- flex: 1; + /* 콘텐츠 기반 계산 유지 + 필요 시 확장 */ + flex: 1 1 auto; + /* 긴 단어/줄에서 축소 가능하도록 */ + min-width: 0;
39-39: answer 모드에서 inline width=Nch가 부모를 넘을 수 있음 — max-width: 100%로 캡 추가JS에서 el.style.width를 "Nch"로 설정할 때 부모 max-width를 초과하면 수평 오버플로우가 발생할 수 있습니다. CSS에 max-width: 100%를 추가해 상한을 보장하세요. (inline width는 max-width에 의해 제어됩니다.)
min-width: 100px; - width: 100%; + width: 100%; + max-width: 100%;frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (2)
24-34: mode 변경 시 재계산 누락 및 answer→builder 전환 시 inline width 잔존 가능의존성 배열이 [title]만 포함해 mode 전환 시(예: builder↔answer) 재계산이 누락됩니다. 또한 builder로 돌아올 때 JS로 설정된 inline width가 남아 width: 100% 스타일이 적용되지 않을 수 있습니다. deps에 mode를 포함하고, answer 이외에는 width를 초기화해 주세요. 다중 줄 제목에서는 전체 길이 대신 “가장 긴 줄” 기준으로 Nch 계산하는 편이 덜 과대/과소추정됩니다.
- useLayoutEffect(() => { - if (textAreaRef.current) { - const el = textAreaRef.current; - if (mode === 'answer') { - el.style.width = el.value.length + "ch"; - } - el.style.height = '0px'; - el.style.height = `${el.scrollHeight}px`; - } - }, [title]); + useLayoutEffect(() => { + const el = textAreaRef.current; + if (!el) return; + if (mode === 'answer') { + // 가장 긴 라인 기준으로 너비 산정 (개행 고려) + const longestLineCh = el.value + .split('\n') + .reduce((max, line) => Math.max(max, line.length), 0); + el.style.width = `${longestLineCh}ch`; + } else { + // builder 모드 복귀 시 inline width 제거 → CSS width: 100% 적용 + el.style.width = ''; + } + // 높이 재계산 + el.style.height = '0px'; + el.style.height = `${el.scrollHeight}px`; + }, [title, mode]);추가 메모(선택): 폰트/스크립트(CJK 등)에서 ch 단위는 실제 글리프 폭과 차이가 날 수 있습니다. 필요하면 Canvas 측정이나 ResizeObserver를 도입해 정확도를 높일 수 있습니다.
42-43: rows={1}와 auto-height 결합 LGTM — 접근성 보완 제안구현은 적절합니다. 접근성 표시를 위해 required 표시가 있는 경우 aria-required를 함께 노출하는 것을 권장합니다.
<Styled.QuestionTitleText ref={textAreaRef} rows={1} + aria-required={mode === 'answer' && !!required}
📜 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(3 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
🔇 Additional comments (2)
frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (2)
4-4: useLayoutEffect 도입 적절페인트 전에 치수 계산을 수행하여 레이아웃 점프를 줄이는 선택이 적절합니다.
22-22: ref 도입 적절DOM 치수 계산을 위한 textAreaRef 추가는 타당합니다.
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
고생하셨습니다~ 지금 vercel 로 보니까 개발 서버가 아직 허용이 안되어 있는 것 같네요!
2 participants
#️⃣연관된 이슈
#687
📝작업 내용
지원서 입력모드에서 textarea의 너비를 ch로 텍스트 크기에 맞게 변경되도록 합니다.
QuestionTitleTextContainer은 flex:1;
QuestionTitleText는 width: 100%을 이용해 지원서 제작시에 너비가 부모에 맞게 설정되도록 변경하여 모든브라우저에서 표시되는 화면을 통일했습니다.
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit