[Feat/#56] 사장님 스토어 계정 및 스토어 정보 수정 페이지 생성#72
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough오너 앱의 "마이페이지" 기능을 추가합니다. 설정 페이지에서 스토어 정보 수정과 스토어 계정 관리로 라우팅하는 네비게이션을 제공하며, 스토어 계정 페이지는 프로필, 계정 정보, 계좌 정보, 사업자 등록번호를 표시합니다. 스토어 정보 편집 페이지는 복잡한 폼 상태와 모달을 통한 업무시간 및 랜덤박스 관리 기능을 포함합니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (3)
apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx (1)
5-15: 사업자등록번호를 컴포넌트 내부에 하드코딩하지 않는 편이 좋습니다.Line 14 값이 고정되어 있어 실제 데이터 바인딩/테스트 재사용이 어렵습니다.
props로 주입하고, 표시 시 마스킹 유틸을 거치는 구조로 바꾸는 것을 권장합니다.제안 diff
+interface OwnerBusinessNumberCardProps { + businessNumber: string; +} + +const maskBusinessNumber = (value: string) => + value.replace(/^(\d{3})-(\d{2})-(\d{5})$/, "$1-$2-*****"); + -export const OwnerBusinessNumberCard = () => { +export const OwnerBusinessNumberCard = ({ + businessNumber, +}: OwnerBusinessNumberCardProps) => { return ( <Card variant="gray-200-elevated"> <div> <p className="body1-m text-primary">내 사업자 등록번호</p> @@ - <span className="body2-r text-gray-600">123-45-67890</span> + <span className="body2-r text-gray-600"> + {maskBusinessNumber(businessNumber)} + </span> </div> </div> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx around lines 5 - 15, OwnerBusinessNumberCard currently hardcodes the business number string; change it to accept a prop (e.g., businessNumber: string) on OwnerBusinessNumberCard and render that value instead of the hardcoded "123-45-67890". Before rendering, run the input through the masking utility (e.g., maskBusinessNumber or a new maskBusinessNumber function) and display the masked result; handle empty/undefined by showing a sensible fallback (e.g., "-" or "등록되지 않음"). Update the component signature and any parent usages to pass the actual businessNumber prop, and ensure the displayed element (the second span) uses the masked value.apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx (1)
18-21: 프로필 식별정보 하드코딩은 분리해 두는 것이 좋습니다.Line 19~21 하드코딩 값은 화면 재사용/테스트를 어렵게 만듭니다. 상위 페이지에서 사용자 정보를 주입받는 구조로 바꾸는 것을 권장합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx around lines 18 - 21, OwnerProfileSection currently hardcodes profile strings ("홍길동", "루키사장", "owner@example.com") which prevents reuse and testing; change the OwnerProfileSection component to accept a user prop (or use the existing auth/user context) and render user.name, user.title (or role), and user.email instead of the literals, updating the component signature (e.g., OwnerProfileSection({ user }: { user: User })) and all call sites to pass the user object from the parent page so the view is driven by injected data rather than hardcoded values.apps/owner/src/app/(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx (1)
17-39: 미래 비동기 작업 추가 시 중복 실행 방지 로직을 고려해 주세요.현재
handleLogout과handleWithdraw는 동기 함수이며, 모달이 즉시 닫혀 자동으로 중복 클릭이 방지됩니다. 다만 향후 이 함수들이 API 호출 등 비동기 작업으로 확장될 경우 사용자의 연속 클릭으로 동일 액션(예: 로그아웃, 회원탈퇴)이 중복 실행될 수 있으므로, 그 시점에 클릭 중복 방지 가드(예:useRef를 이용한pending상태 관리) 추가를 권장합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/owner/src/app/`(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx around lines 17 - 39, The confirm and cancel handlers (onConfirm/onClose used in confirmButton and cancelButton) currently assume synchronous behavior; to prevent duplicate execution when these handlers (e.g., handleLogout or handleWithdraw) become asynchronous, add a click-guard: introduce a pending ref/state (useRef or useState) checked at the start of the onConfirm wrapper to early-return if already pending, set pending=true before awaiting the async action and reset/keep true appropriately, and disable the confirmButton while pending so repeat clicks are ignored; update the wrapper around onConfirm (and similarly for onClose if needed) to use this guard and ensure the modal close only happens after the async completes or when intended.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/owner/src/app/`(tabs)/mypage/page.tsx:
- Around line 19-24: The Icon used for the settings menu right-side decoration
(Icon with name="NextButton") is currently set as ariaHidden={false} which
exposes a decorative icon to screen readers; change the prop to
ariaHidden={true} or remove the explicit ariaHidden prop so the Icon component's
default (true) is used, ensuring the icon is ignored by assistive technologies
while leaving the surrounding button label intact.
In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerAccountCard.tsx:
- Around line 27-35: The confirm handlers currently only log and close the
modal; replace those no-op actions by invoking callbacks passed from the parent
(e.g., onLogout and onWithdraw props) and then close the modal. Update the
OwnerAccountCard component to accept two props (onLogout: () => void,
onWithdraw: () => void), call onLogout() inside handleLogout and onWithdraw()
inside handleWithdraw instead of console.log, and keep the existing
setIsLogoutModalOpen(false)/setIsWithdrawModalOpen(false) calls; also adjust any
modal-confirm handlers around lines 65-86 to call the same props so the actual
logout/withdraw logic runs in the parent.
In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerStoreAccountInfoCard.tsx:
- Around line 37-45: OwnerStoreAccountInfoCard currently hardcodes and displays
the full bank name and account number (the two <span> elements showing "국민은행"
and "123-456-789012"); change the component to accept props (e.g., bankName and
accountNumber) instead of hardcoded values and render those props, and mask the
accountNumber in the UI (e.g., replace all but the last 4 digits with asterisks
or a standard mask like "***-***-7890") before rendering to avoid exposing
plaintext PII; keep the real accountNumber only in props/state for any backend
calls and ensure the displayed <span> uses the masked value.
In `@apps/owner/src/app/`(tabs)/mypage/store-info/page.tsx:
- Around line 96-103: The random box object is being created with price: 0 which
ignores user input; in the setRandomBoxes update (where you push an object with
id: nextId, name: data.name, quantity: data.quantity, price: 0, limit:
data.limit) replace the hard-coded 0 with the submitted value (e.g., data.price
or Number(data.price)) so the user's entered price is stored — ensure you
reference the same setRandomBoxes callback and nextId/data variables and coerce
the type if needed.
- Line 3: The uploaded file leaks Object URLs—update the photo-handling logic so
any previously created object URL is revoked before creating a new one and when
the component unmounts: in the handleChangePhoto function revoke the existing
URL (e.g., the state variable holding the preview URL) before calling
URL.createObjectURL, and add a useEffect cleanup that calls
URL.revokeObjectURL(currentPreviewUrl) whenever that preview URL changes or on
unmount; use URL.revokeObjectURL and the same state variable name used for the
preview to locate and clean up the URL.
---
Nitpick comments:
In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx:
- Around line 17-39: The confirm and cancel handlers (onConfirm/onClose used in
confirmButton and cancelButton) currently assume synchronous behavior; to
prevent duplicate execution when these handlers (e.g., handleLogout or
handleWithdraw) become asynchronous, add a click-guard: introduce a pending
ref/state (useRef or useState) checked at the start of the onConfirm wrapper to
early-return if already pending, set pending=true before awaiting the async
action and reset/keep true appropriately, and disable the confirmButton while
pending so repeat clicks are ignored; update the wrapper around onConfirm (and
similarly for onClose if needed) to use this guard and ensure the modal close
only happens after the async completes or when intended.
In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx:
- Around line 5-15: OwnerBusinessNumberCard currently hardcodes the business
number string; change it to accept a prop (e.g., businessNumber: string) on
OwnerBusinessNumberCard and render that value instead of the hardcoded
"123-45-67890". Before rendering, run the input through the masking utility
(e.g., maskBusinessNumber or a new maskBusinessNumber function) and display the
masked result; handle empty/undefined by showing a sensible fallback (e.g., "-"
or "등록되지 않음"). Update the component signature and any parent usages to pass the
actual businessNumber prop, and ensure the displayed element (the second span)
uses the masked value.
In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx:
- Around line 18-21: OwnerProfileSection currently hardcodes profile strings
("홍길동", "루키사장", "owner@example.com") which prevents reuse and testing; change
the OwnerProfileSection component to accept a user prop (or use the existing
auth/user context) and render user.name, user.title (or role), and user.email
instead of the literals, updating the component signature (e.g.,
OwnerProfileSection({ user }: { user: User })) and all call sites to pass the
user object from the parent page so the view is driven by injected data rather
than hardcoded values.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 37c9de4f-524d-40ab-906e-362bcf3de999
📒 Files selected for processing (9)
apps/owner/src/app/(tabs)/mypage/page.tsxapps/owner/src/app/(tabs)/mypage/store-account/_components/ConfirmActionModal.tsxapps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerAccountCard.tsxapps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsxapps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerProfileSection.tsxapps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerStoreAccountInfoCard.tsxapps/owner/src/app/(tabs)/mypage/store-account/_types/confirmAction.tsapps/owner/src/app/(tabs)/mypage/store-account/page.tsxapps/owner/src/app/(tabs)/mypage/store-info/page.tsx
✅ 작업 내용
📝 Description
🚀 설계 의도 및 개선점
📸 스크린샷 (선택)
📎 기타 참고사항
Fixes #56
Summary by CodeRabbit
릴리스 노트