[hotfix] 모바일 지원서 UI 깨짐 수정

[oesnuj]

#️⃣ 연관된 이슈

#1028

📝 작업 내용

동아리 WAP에서 지원서를 사용하여 지원하는 과정에서 UI가 깨지는 문제가 발생하여 긴급 hotfix 진행

1. QuestionTitle 필수 표시(*) 위치 및 줄바꿈 문제

• 원인: textarea 옆에 *를 별도 요소로 두어 줄바꿈 시 위치가 이상함
• 해결: answer 모드에서 <span>으로 렌더링하여 텍스트 뒤에 *가 자연스럽게 붙도록 수정

Before	After

2. InputField 모바일 레이아웃 문제

• 원인: props로 주입된 width: 60%가 미디어쿼리보다 우선순위가 높아 모바일에서도 60% 유지
• 해결: Input 요소에 ${media.mobile} { width: 100% } 추가하여 화면 전체 너비로 적응

Before	After

리뷰받고 싶은 부분 (선택)

QA 잘해주세요

🫡 참고 사항

QuestionTitle, InputField 모두 임시 대응으로 추후 리팩토링 필요

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
moadong	Ready	Preview, Comment	Jan 14, 2026 10:42am

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

QuestionTitle 스타일 내보내기 및 이름 변경, 빌더(mode==='builder')와 답변 모드 렌더링 분리(빌더 전용 자동 리사이즈), ShortText에서 불필요한 DOM 제거, InputField에 모바일 반응형(width:100%) 규칙 추가. (50단어 이내)

Changes

Cohort / File(s)	Summary
QuestionTitle 스타일 변경 frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts	QuestionTitleContainer 제거; QuestionTitleTextContainer → QuestionTitleTextWrapper로 이름 변경; QuestionRequired를 RequiredStar와 QuestionTitleReadOnly로 분리; QuestionTitleRow 정렬 추가; QuestionTitleText에 width:100%/min-width 보존 및 배경 투명화.
QuestionTitle 렌더링 변경 frontend/src/components/application/QuestionTitle/QuestionTitle.tsx	mode를 의존성에 포함한 빌더 전용 자동 리사이즈 effect 추가; 답변 모드에선 읽기전용 표시(QuestionTitleReadOnly + RequiredStar), 빌더 모드에선 textarea 제어(onChange, aria-required)로 분리 및 JSX 재구성.
ShortText 및 InputField 반응형 변경 frontend/src/components/application/questionTypes/ShortText.tsx, frontend/src/components/common/InputField/InputField.styles.ts	ShortText.tsx의 외부 div를 fragment로 제거하여 DOM 노드 삭제. InputField.styles.ts에 media.mobile 규칙 추가해 모바일에서 Input 너비를 100%로 설정.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [fix] 질문 제목 반응형 레이아웃 변경 #688: QuestionTitle의 textarea 자동 리사이즈 및 레이아웃 변경 관련 PR — 제목 크기/레이아웃 관련 수정이 겹칩니다.
• [fix] 질문 제목 줄바꿈, 설명 커서 노출, 객관식 선택 해제 등 지원서 폼 UI/UX 개선 #573: QuestionTitle 스타일/렌더링 분리 및 읽기전용 처리 관련 PR — builder/answer 모드 분리와 유사한 변경점을 포함합니다.
• [hotfix] 지원서의 질문 제목을 정상적으로 변경할수 없는 오류 수정 #677: QuestionTitle 입력 이벤트 처리 변경(PR) — 제목 입력 핸들링(onInput → onChange 등) 관련 수정이 관련됩니다.

Suggested labels

🎨 Design, 💻 FE, 🛠Fix

Suggested reviewers

• lepitaaar
• seongwon030

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	PR 제목이 변경사항의 주요 목표와 일치합니다. 모바일 UI 깨짐 수정이라는 제목이 전체 변경사항(QuestionTitle, InputField 반응형 스타일링 등)을 대표합니다.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts`:
- Around line 24-29: The inline gap on the wrapper duplicates RequiredStar's
left margin causing doubled spacing; remove the gap property from
QuestionTitleTextWrapper (and the other wrapper at lines 61-67) so spacing is
governed solely by RequiredStar.margin-left: 4px, or alternatively remove
RequiredStar.margin-left and keep the wrapper gap—pick one approach and apply it
consistently to both wrappers (use the symbol QuestionTitleTextWrapper and
RequiredStar to locate the changes).
- Around line 61-67: RequiredStar uses a fixed font-size (1.25rem) causing
mismatch with QuestionTitleText/ReadOnly on mobile; update the styled component
RequiredStar to keep 1.25rem by default but add a media.mobile rule that sets
font-size to 1.05rem so it matches QuestionTitleText/ReadOnly on mobile, and
apply the same change to the other RequiredStar-like declaration in the file
(the one around lines 69-81) so both stars are responsive and visually
consistent.

In `@frontend/src/components/application/QuestionTitle/QuestionTitle.tsx`:
- Around line 38-60: The title input currently only enforces length in the
onChange handler which can be bypassed by paste/IME; add the native maxLength
attribute to Styled.QuestionTitleText using
APPLICATION_FORM.QUESTION_TITLE.maxLength so the browser enforces it, and keep
the existing onChange guard. Also make the required state perceivable in
read-only/answer mode by adding aria-required={required} (or an equivalent
accessible indicator) to Styled.QuestionTitleReadOnly while leaving RequiredStar
aria-hidden="true".

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 491eaa0 and a963891.

📒 Files selected for processing (3)

• frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts
• frontend/src/components/application/QuestionTitle/QuestionTitle.tsx
• frontend/src/components/application/questionTypes/ShortText.tsx

🧰 Additional context used

🧬 Code graph analysis (2)

frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (1)

frontend/src/constants/APPLICATION_FORM.ts (1)

• APPLICATION_FORM (1-26)

frontend/src/components/application/QuestionTitle/QuestionTitle.styles.ts (1)

frontend/src/styles/mediaQuery.ts (1)

• media (8-14)

🔇 Additional comments (3)

frontend/src/components/application/questionTypes/ShortText.tsx (2)

5-20: useDevice() 도입 시 SSR/하이드레이션 안전성만 확인해 주세요.
useDevice가 window 의존이면 SSR 환경에서 하이드레이션 미스매치/경고가 날 수 있어서, 이 컴포넌트가 CSR 전제인지(또는 훅이 안전장치가 있는지)만 점검하면 좋겠습니다.

---

21-46: 모바일에서 width="100%"로 확장한 방향은 적절합니다.
다만 InputField의 width prop이 “문자열 퍼센트”를 기대하는지(또는 number/px만 처리하는지)만 확인해 주세요.

frontend/src/components/application/QuestionTitle/QuestionTitle.tsx (1)

24-32: builder 모드에서만 auto-resize 하도록 제한한 건 좋습니다.
추가로, SSR이 있을 경우 useLayoutEffect 경고가 없는지(혹은 이 페이지가 CSR 전제인지)만 확인해 주세요.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

[suhyun113]

모바일에서 안 깨지고 잘 보이네요!
빠른 수정 좋아요~