fix: (QA/3) 한줄소개 글자수 제한 로직 추가

[heesunee]

#️⃣ Related Issue

Closes #362

💎 PR Point

• input 컴포넌트의 textarea 속성에 maxLength 추가해서 최대 길이 이상으로 글씨 안써지게 수정했슨

Summary by CodeRabbit

• 새로운 기능
  • 멀티라인 텍스트 입력에 최대 글자수 제한을 추가했습니다. 컴포넌트의 maxLength 값이 HTML 속성에 반영되며 기본값은 50자입니다. 필요 시 prop으로 조정할 수 있습니다. 단일행 입력에는 영향이 없습니다. 이로써 과도한 입력을 사전에 방지하고 일관된 입력 경험을 제공합니다.

[coderabbitai]

Walkthrough

멀티라인 textarea에 HTML maxLength 속성을 컴포넌트의 maxLength prop(기본 50)에 바인딩하도록 추가했습니다. 기존 input(type=...) 경로는 변경되지 않았습니다. 퍼블릭/익스포트 시그니처 변화는 없습니다.

Changes

Cohort / File(s)	Change Summary
Input component: textarea maxLength 바인딩 src/shared/components/input/input.tsx	멀티라인 textarea에 maxLength={maxLength} 속성 추가. 기본값 50. 기타 로직 변화 없음.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant Input as Input Component
  participant DOM as Textarea (DOM)

  U->>Input: 입력 타이핑
  Input->>DOM: render textarea with maxLength=prop(기본 50)
  U->>DOM: 계속 입력
  DOM-->>U: 추가 입력 제한(문자수 >= maxLength)
  Note over DOM: 브라우저 기본 수준에서 문자수 제한 적용

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
한줄소개 글자수 제한 추가 (#362)	❓	변경은 textarea에만 적용됨. 한줄소개가 textarea인지 불명확하며, 한 줄 입력 필드(input)에는 적용되지 않음. 기본 제한값 50이 요구사항과 일치하는지 명시 없음.

Suggested labels

채은, fix

Suggested reviewers

• Dubabbi
• yeeeww

Poem

토끼는 톡톡, 키보드 튀어
글자 수 50, 깡총 뛰어
넘치면 똑, 브라우저가 지켜
한 줄 소개, 가지런히 미소 지어
(•̀ᴗ•́)و 깔끔하게, 오늘도 귀엽게!

✨ 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/#362/introduction-limit

---

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.}

[github-actions]

MATEBALL-STORYBOOK
⚾ Storybook 배포가 완료되었습니다!

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

src/shared/components/input/input.tsx (3)

79-90: input 경로에도 maxLength 전달해 API 일관성 유지 제안

현재 구조분해로 maxLength가 props에서 빠져 input에는 전달되지 않습니다. 카운터/정책과 실제 제어의 일관성을 위해 input에도 적용을 권장합니다.

다음 diff를 적용하면 됩니다:

           <input
             id={id}
             type="text"
+            maxLength={maxLength}
             className="flex-1 p-[1.6rem] text-gray-black placeholder:text-gray-500"
             ref={ref}

---

17-18: ref 전달 방식 확인 (forwardRef 전환 권장)

ref를 prop으로 받고 textarea 쪽은 강제 캐스팅합니다. <Input ref={...}> 사용 시 함수형 컴포넌트에는 ref가 props로 전달되지 않아 의도와 다를 수 있습니다. forwardRef<HTMLInputElement | HTMLTextAreaElement>로 전환해 일관성과 타입 안정성을 확보하는 것을 권장드립니다. 필요하시면 후속 PR로 스캐폴딩해 드릴게요.

Also applies to: 64-65, 83-84

---

104-107: length 표기 안전성 보강 (미입력 시 undefined 노출 방지)

hasLength만 true이고 length가 전달되지 않으면 undefined/50이 노출될 수 있습니다. 기본값을 적용하면 안전합니다.

-                {length}/{maxLength}
+                {(length ?? 0)}/{maxLength}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 39787aa and d8b84ef.

📒 Files selected for processing (1)

• src/shared/components/input/input.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#78
File: src/pages/sign-up/utils/age-calculate.ts:1-4
Timestamp: 2025-07-09T09:08:46.371Z
Learning: heesunee는 나이 계산 시 한국식 나이 시스템을 사용하므로, 정확한 생일 기반 계산보다는 출생연도 기준의 간단한 계산 방식을 선호합니다.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: chromatic

🔇 Additional comments (1)

src/shared/components/input/input.tsx (1)

65-65: textarea에 maxLength 바인딩으로 초과 입력 방지 — LGTM

요구사항(#362) 충족합니다. 단, 이모지/조합형 문자는 브라우저가 코드 유닛 기준으로 계산할 수 있어 “N자” 정책과 오차가 생길 수 있습니다. 제품 정의가 그래핌(시각적 글자) 기준인지 확인 부탁드립니다.

[bongtta]

lgtm ㅎㅎ