Conversation
Walkthrough전화번호 입력 필드에 대해 하이픈이 포함된 한국 휴대폰 번호 형식(예: 010-1234-5678)으로 자동 포맷팅하는 기능이 여러 페이지에 도입되었습니다. 입력값 저장 시에는 하이픈이 제거되어 숫자만 저장됩니다. 유효성 검사 로직도 이에 맞게 단순화되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PhoneInput
participant FormatFunc
participant State/Form
participant Validation
User->>PhoneInput: 전화번호 입력
PhoneInput->>FormatFunc: 입력값 전달
FormatFunc->>PhoneInput: 하이픈 포함 포맷팅 적용
PhoneInput->>State/Form: 포맷된 값 저장
State/Form->>Validation: 저장 시 정규식으로 유효성 검사
State/Form->>서버: 하이픈 제거 후 전송
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/pages/join/InfoInputPage.tsx (1)
11-16: 🛠️ Refactor suggestion중복된 formatPhoneNumber 함수입니다.
이 함수는 다른 컴포넌트들과 동일합니다. 공통 유틸리티로 추출하여 코드 중복을 제거하세요.
src/pages/event/ui/create-event/EventOrganizerInfoPage.tsx (1)
14-19: 🛠️ Refactor suggestion중복된 formatPhoneNumber 함수입니다.
네 번째로 동일한 함수가 중복 구현되었습니다. 반드시 공통 유틸리티로 추출하세요.
🧹 Nitpick comments (1)
src/pages/join/InfoInputPage.tsx (1)
71-71: 기존 전화번호 데이터 포맷팅을 고려하세요.기존 사용자 데이터에 전화번호가 있다면 포맷팅하여 표시해야 할 수 있습니다. 현재는 빈 문자열로 초기화하고 있습니다.
기존 전화번호가 있다면 포맷팅하여 표시하도록 수정하세요:
- phone: '', + phone: data.phoneNumber ? formatPhoneNumber(data.phoneNumber) : '',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/pages/dashboard/ui/EventInfoPage.tsx(4 hunks)src/pages/event/ui/create-event/EventOrganizerInfoPage.tsx(3 hunks)src/pages/join/InfoInputPage.tsx(4 hunks)src/shared/lib/formValidation.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/pages/join/InfoInputPage.tsx (2)
src/shared/lib/formValidation.ts (1)
FormData(25-25)src/features/join/api/user.ts (1)
updateUser(11-16)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (8)
src/shared/lib/formValidation.ts (1)
12-12: 유효성 검사 로직 개선이 적절합니다.
.refine()체크를 제거하고 regex 패턴만 사용하는 것이 자동 포맷팅 기능과 잘 맞습니다. 에러 메시지도 더 명확해졌습니다.src/pages/dashboard/ui/EventInfoPage.tsx (3)
64-64: 저장 시 하이픈 제거 로직이 올바릅니다.API 요청 시 하이픈을 제거하여 숫자만 저장하는 것이 데이터 일관성 측면에서 적절합니다.
123-126: controlled input 구현이 올바릅니다.placeholder 변경과 onChange 핸들러를 통한 자동 포맷팅이 잘 구현되었습니다.
85-85:Details
❓ Verification inconclusive
기존 데이터 로딩 시 포맷팅을 확인하세요.
API에서 받아온 기존 전화번호 데이터가 하이픈 없이 저장되어 있다면, 화면에 표시할 때 포맷팅이 필요할 수 있습니다.
다음 스크립트로 API 응답 데이터 구조를 확인하세요:
🏁 Script executed:
#!/bin/bash # API 응답에서 전화번호 필드 형식 확인 rg -A 3 -B 3 "organizerPhoneNumber\|phoneNumber" --type tsLength of output: 60
기존 전화번호 포맷팅 확인 필요
API에서
organizerPhoneNumber를 하이픈 없이 순수 숫자만 반환할 경우, 화면에 표시될 때 하이픈(-)을 추가하는 포맷팅 로직이 필요할 수 있습니다.
src/pages/dashboard/ui/EventInfoPage.tsx85라인의setPhone(info.organizerPhoneNumber)호출 이후 포맷팅 적용 여부를 확인해주세요.
- 확인 방법: 브라우저 네트워크 탭 또는 API 클라이언트에서
organizerPhoneNumber값 형식 검증- 필요 시 예시:
const formatted = info.organizerPhoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); setPhone(formatted);src/pages/join/InfoInputPage.tsx (2)
42-45: controlled input 구현이 적절합니다.
watch와setValue를 사용한 controlled input 구현이 올바르며,shouldValidate: true옵션도 적절합니다.
104-105: controlled input 프로퍼티가 올바릅니다.
value와onChange를 사용한 controlled input 구현이 적절합니다.src/pages/event/ui/create-event/EventOrganizerInfoPage.tsx (2)
38-41: controlled input 핸들러가 올바릅니다.포맷팅과 유효성 검사를 동시에 처리하는 핸들러가 적절히 구현되었습니다.
66-72: UI 개선사항이 적절합니다.라벨을 "연락처"로 변경하고 placeholder에 예시 형식을 보여주는 것이 사용자 경험 측면에서 좋습니다.
2 participants
회원가입
대시보드 (이벤트 기본정보)
호스트 생성 (주최자 정보 입력)
Summary by CodeRabbit
신규 기능
버그 수정
스타일
문서화