Feat: 개발 QA 1차(카테고리 띄어쓰기 제한)

[jjangminii]

📌 Related Issues

관련된 Issue를 태그해주세요. (e.g. - close #25)

• close [Fix] sp1 QA 카테고리 띄어쓰기 #126

📄 Tasks

• 디자인 시스템 popup 파일에서 input 값으로 띄어쓰기 불가능하게 해뒀습니다ㅓ

⭐ PR Point (To Reviewer)

📷 Screenshot

Summary by CodeRabbit

• Bug Fixes
  • 팝업 컴포넌트의 입력형에서 입력값의 모든 공백을 자동 제거하고 스페이스 키 입력을 차단하여 잘못된 값 입력을 방지합니다. onChange에는 정제된 값이 전달되며, 다른 변형과 기본 동작에는 영향이 없습니다.
• Chores
  • 클라이언트 사이드바의 불필요한 TODO 주석을 정리했습니다. 기능 및 공개 API에는 변화가 없습니다.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
pinback-client-client	Ready	Preview	Comment	Sep 19, 2025 11:19am

[coderabbitai]

Walkthrough

두 파일이 변경됨. 클라이언트의 CreateItem 컴포넌트에서 주석 한 줄이 제거됨. 디자인 시스템의 Popup 컴포넌트 input 변형에서 입력 핸들링이 수정되어 onChange 시 공백 제거 값을 전달하고, onKeyDown에서 스페이스 입력을 방지하도록 로직 추가됨.

Changes

Cohort / File(s)	Summary
Client Sidebar Minor Cleanup apps/client/src/shared/components/sidebar/CreateItem.tsx	불필요한 TODO 주석 제거. 기능 변화 없음.
Design System Popup Input Handling packages/design-system/src/components/popup/Popup.tsx	type === 'input' 분기에서 onChange 시 value.replace(/\s/g, '')로 공백 제거 후 전달. onKeyDown에서 스페이스 키 입력 시 e.preventDefault()로 차단. 공개 API 시그니처 변경 없음.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant I as Popup(Input)
  participant H as onInputChange

  Note over I: type === "input" 변형

  U->>I: keydown (Space)
  I->>I: preventDefault()로 공백 입력 차단

  U->>I: input/change (text)
  I->>I: sanitized = text.replace(/\s/g, '')
  I->>H: onInputChange(sanitized)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Feat(design-system): 팝업 공통 컴포넌트 #39: Popup 컴포넌트 최초 추가와 관련되어, 동일 파일에 기능을 이어서 수정.
• Feat(extension): 익스텐션 페이지 레이아웃 및 북마크 저장 #64: Popup 입력 제어 로직을 확장한 PR로, 이번 공백 제거/스페이스 차단과 직접 연속선상.
• Api(client): category 수정 연결 #79: Popup 입력 기본값/핸들러 전달 로직 변경과 유사 영역(입력 처리) 수정으로 밀접히 관련.

Suggested labels

feat, 정민, frontend

Suggested reviewers

• constantly-dev
• jllee000

Poem

귀 쫑긋 토끼가 깡총깡총 뛰며 말해요
“띄어쓰기 금지! 팝업 입력은 깔끔하게!”
주석은 툭, 먼지처럼 털어내고
공백은 슥, 바람처럼 사라지고
오늘도 코드밭에 새싹 하나 더 🌱🐇

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues Check	⚠️ Warning	이 PR은 #126 이슈의 ‘카테고리 띄어쓰기 제한’ 목표는 충족하지만, #25 이슈의 ‘디자인 시스템 Progress 컴포넌트 구현’ 요구 사항이 전혀 반영되지 않아 연결된 이슈의 모든 목표를 달성하지 못했습니다.	#25 이슈의 Progress 컴포넌트 구현 요구사항을 PR에 포함하거나, 해당 이슈 링크를 제거하여 연관성을 명확히 해 주세요.
Out of Scope Changes Check	⚠️ Warning	CreateItem.tsx 파일에서 TODO 주석 삭제는 연결된 이슈(#126, #25)와 직접적인 관련이 없는 변경 사항으로, PR의 원래 목적 범위를 벗어나는 것으로 보입니다.	해당 주석 삭제는 별도 커밋이나 PR로 분리하거나, 이 PR에서 제외하여 범위를 명확히 해 주세요.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	제목은 핵심 변경 사항인 카테고리 띄어쓰기 제한을 포함하고 있어 변경 내용과 관련이 있으나 ‘개발 QA 1차’와 작성자명 ‘정민’ 등의 불필요한 부가 정보가 포함되어 있어 간결성과 일관성이 떨어집니다.
Description Check	✅ Passed	설명에는 관련 이슈(#126)와 작업 내용(팝업 input의 띄어쓰기 제한)이 명확히 기술되어 있어 주요 정보는 완전하게 포함되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ 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/#126/category-name

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 72ed6bc and c316f15.

📒 Files selected for processing (2)

• apps/client/src/shared/components/sidebar/CreateItem.tsx (0 hunks)
• packages/design-system/src/components/popup/Popup.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• apps/client/src/shared/components/sidebar/CreateItem.tsx

🔇 Additional comments (2)

packages/design-system/src/components/popup/Popup.tsx (2)

47-50: 공백 입력 제한 로직이 올바르게 구현되었습니다.

카테고리명에서 공백을 제한하려는 PR 목표에 맞게 두 가지 방식으로 적절히 구현되었습니다:

• onChange에서 입력된 모든 공백을 제거
• onKeyDown에서 스페이스 키 입력을 미리 차단

이 구현으로 사용자가 공백을 입력하려고 시도해도 차단되며, 복사-붙여넣기로 공백이 포함된 텍스트를 입력해도 자동으로 제거됩니다.

---

47-47: 카테고리명 공백 제거 동작 확인 필요

현재 Popup의 onChange가 replace(/\s/g, '')로 모든 공백(스페이스/탭/개행 등)을 제거하므로 카테고리 추가/수정 시 입력값 내부 공백까지 삭제됩니다.
영향 위치: packages/design-system/src/components/popup/Popup.tsx (onChange, ~라인 47)
사용처: apps/client/src/shared/components/sidebar/PopupPortal.tsx (카테고리 추가: 라인 102–114, 수정: 라인 118–129).
조치(선택지): 카테고리명 요구사항에 따라 동작을 변경하세요 — 내부 공백 허용이면 .trim()으로 선/후 공백만 제거하거나 내부 연속 공백을 단일 공백으로 치환하도록 수정하세요. 요구사항이 불명확하면 명세 확인 필요.

---

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]

✅ Storybook chromatic 배포 확인:
🐿️ storybook