feat: 사업자 인증 대표자명 필드 추가, 예외 처리 보완#103
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough사업자 인증 흐름에 대표자명( Changes
Sequence Diagram(s)sequenceDiagram
participant User as 사용자
participant Form as StepBusinessAuth
participant HookForm as ReactHookForm
participant API as 사업자 인증 API
participant Modal as ConfirmModal
participant Page as StoreRegistrationPage
participant Transform as StoreTransform
User->>Form: 대표자명 + 사업자번호/시작일 입력 및 제출
Form->>HookForm: validate via BusinessAuthSchema (watch("name"))
HookForm-->>Form: 유효성 결과
Form->>API: 인증 요청 (businessNumber, startDate)
alt API returns OWNER409
API-->>Form: 409 (이미 인증)
Form->>Modal: pendingData 저장 후 모달 표시
User->>Modal: 확인 / 취소 선택
alt 확인
Modal-->>Form: confirm
Form->>Form: isVerified = true, onComplete({name, businessNumber, startDate})
else 취소
Modal-->>Form: cancel
Form->>Form: isVerified = false, pendingData 유지 또는 클리어
end
else 인증 성공
API-->>Form: 성공
Form->>Form: isVerified = true, onComplete({name, businessNumber, startDate})
end
Form->>Page: step1Data 업데이트
Page->>Transform: transformToRegister(step1Data, step2Data)
Transform-->>Page: RequestStoreCreateDto (businessNumberDto.name 포함)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly Related PRs
Suggested labels
Suggested Reviewers
Poem
검토 시 주의할 점 (권장 확인 항목, 근거+대안 포함)
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 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 |
![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
🧹 Nitpick comments (2)
src/types/store.ts (1)
72-72: 콜론 뒤 공백 누락 (스타일 일관성)같은 파일 내 다른 프로퍼티들(
businessNumber: string,startDate: string)과 달리 콜론 뒤 공백이 없어요.✏️ 제안 수정
- name:string; + name: string;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/types/store.ts` at line 72, Fix the missing space after the colon for the name property in the Store type/interface: change the declaration of the property symbol "name" from using "name:string" to match the file's style (e.g., "name: string") so it is consistent with other properties like "businessNumber: string" and "startDate: string".src/components/store-registration/BusinessAuth.schema.ts (1)
4-8: Zod v4에서 문자열 메시지 단축 형식이 deprecated됐어요 (선택적 개선)Zod v4에서 기존
message파라미터는 아직 동작하지만 deprecated 처리됐습니다..min(5, "Too short!")같은 문자열 단축 형식은 동작하지만, Zod v4의 권장 방식은{ error: "..." }객체 형태입니다.기존
businessNumber,startDate필드도 같은 패턴을 쓰고 있어서 한꺼번에 마이그레이션하면 좋을 것 같아요.♻️ Zod v4 권장 방식으로 변경
name: z .string() - .min(1, "대표자명을 입력해주세요.") - .min(2, "2자 이상이어야 합니다.") - .max(20, "20자 이하이어야 합니다."), + .min(1, { error: "대표자명을 입력해주세요." }) + .min(2, { error: "2자 이상이어야 합니다." }) + .max(20, { error: "20자 이하이어야 합니다." }),🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/BusinessAuth.schema.ts` around lines 4 - 8, Update the Zod validation calls in BusinessAuth.schema.ts to use the Zod v4 object-style error argument instead of the deprecated string shorthand: replace usages like name.string().min(1, "대표자명을 입력해주세요.").min(2, "2자 이상이어야 합니다.").max(20, "20자 이하이어야 합니다.") with the object form for each constraint (e.g., .min(1, { error: "..." }), .min(2, { error: "..." }), .max(20, { error: "..." })), and apply the same change to the other fields using the shorthand such as businessNumber and startDate so all .min/.max/.etc calls use the { error: "..." } payload.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Around line 78-93: The code currently uses the native confirm() inside
StepBusinessAuth (the block that calls confirm and then
setIsVerified/onComplete), which blocks the main thread and breaks
accessibility/UX; replace this with your ConfirmModal component by adding local
state (e.g., showConfirmModal) in StepBusinessAuth, open it instead of calling
confirm(), and move the confirm/cancel logic into the modal’s onConfirm and
onCancel handlers to call setIsVerified(true)/onComplete({...}) or
setIsVerified(false) respectively; ensure you remove the synchronous confirm()
call from any onError or async handlers so the flow is fully asynchronous and
consistent with StoreRegistrationPage’s modal usage.
---
Nitpick comments:
In `@src/components/store-registration/BusinessAuth.schema.ts`:
- Around line 4-8: Update the Zod validation calls in BusinessAuth.schema.ts to
use the Zod v4 object-style error argument instead of the deprecated string
shorthand: replace usages like name.string().min(1, "대표자명을 입력해주세요.").min(2, "2자
이상이어야 합니다.").max(20, "20자 이하이어야 합니다.") with the object form for each constraint
(e.g., .min(1, { error: "..." }), .min(2, { error: "..." }), .max(20, { error:
"..." })), and apply the same change to the other fields using the shorthand
such as businessNumber and startDate so all .min/.max/.etc calls use the {
error: "..." } payload.
In `@src/types/store.ts`:
- Line 72: Fix the missing space after the colon for the name property in the
Store type/interface: change the declaration of the property symbol "name" from
using "name:string" to match the file's style (e.g., "name: string") so it is
consistent with other properties like "businessNumber: string" and "startDate:
string".
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/components/store-registration/StepBusinessAuth.tsx (3)
123-125:className에 불필요한 공백이 있어요 (사소한 닛픽)
"text-black font-bold"에 스페이스가 두 개 들어가 있어요. 기능에는 영향이 없지만 깔끔하게 정리해두는 게 좋아요.- <span className="text-black font-bold"> + <span className="text-black font-bold">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` around lines 123 - 125, In StepBusinessAuth locate the span element that currently has className="text-black font-bold" and remove the extra space so the className reads "text-black font-bold"; this is the span inside the StepBusinessAuth component that renders the warning text and adjusting the className string will clean up the unnecessary double space.
149-224: 반복되는onChange패턴 — 헬퍼로 추출하면 깔끔해져요 (선택 사항)
name,businessNumber,startDate세 필드 모두isVerified상태에서setIsVerified(false)+onComplete(...)를 호출하는 거의 동일한 패턴이에요. 인증 해제 로직이 변경될 때 세 군데를 수정해야 하는 부담이 있어요.♻️ 헬퍼 함수로 리팩토링하는 방법
+ const handleVerifiedFieldChange = ( + fieldValues: Partial<BusinessAuthFormValues>, + ) => { + if (!isVerified) return; + setIsVerified(false); + onComplete({ + name: fieldValues.name ?? name, + businessNumber: fieldValues.businessNumber ?? businessNumber, + startDate: fieldValues.startDate ?? startDate, + isVerified: false, + }); + }; // name 필드 {...register("name", { - onChange: (e) => { - if (isVerified) { - setIsVerified(false); - onComplete({ name: e.target.value, businessNumber, startDate, isVerified: false }); - } - }, + onChange: (e) => handleVerifiedFieldChange({ name: e.target.value }), })} // businessNumber 필드 {...register("businessNumber", { - onChange: (e) => { - if (isVerified) { - setIsVerified(false); - onComplete({ name, businessNumber: e.target.value, startDate, isVerified: false }); - } - }, + onChange: (e) => handleVerifiedFieldChange({ businessNumber: e.target.value }), })} // startDate 필드 {...register("startDate", { - onChange: (e) => { - if (isVerified) { - setIsVerified(false); - onComplete({ name, businessNumber, startDate: e.target.value, isVerified: false }); - } - }, + onChange: (e) => handleVerifiedFieldChange({ startDate: e.target.value }), })}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` around lines 149 - 224, Extract the repeated onChange logic into a helper (e.g., a local function like handleFieldChange) and use it for register callbacks for name, businessNumber, and startDate: implement a function that accepts the field key and returns an onChange handler which checks isVerified, calls setIsVerified(false) and calls onComplete with the updated field value and current other fields; then replace the inline onChange objects in {...register("name", {...})}, {...register("businessNumber", {...})}, and {...register("startDate", {...})} to use this helper so the shared logic (isVerified, setIsVerified, onComplete) is centralized.
87-87:alert()도 추후 커스텀 토스트/모달로 교체 고려해보세요409 처리가
ConfirmModal로 잘 교체됐는데, 다른 에러 케이스(Line 87)에 여전히 네이티브alert()가 남아 있어요. 이 PR 범위를 넘어서는 내용이지만, 추후 프로젝트의 토스트 또는 알림 컴포넌트로 통일하면 UX·접근성 측면에서 일관성이 생겨요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` at line 87, The native alert(getErrorMessage(error)) call in StepBusinessAuth should be replaced with the project's unified notification component (e.g., use the existing ConfirmModal or the app toast utility) so error handling is consistent; locate the alert call in StepBusinessAuth and swap it to invoke the modal/toast API with the same getErrorMessage(error) text and appropriate severity/OK action (mirror how 409 uses ConfirmModal) to ensure UX/accessibility consistency.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/store-registration/ConfirmModal.tsx`:
- Around line 47-62: The confirm and cancel <button> elements in
ConfirmModal.tsx currently rely on default button behavior (which is "submit")
and can inadvertently submit enclosing forms; update the two buttons that call
onConfirm and onClose (the elements rendering confirmLabel and cancelLabel) to
explicitly include type="button" to prevent accidental form submissions when
this component is used inside a form.
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Around line 147-235: The three inputs (id="name", id="businessNumber",
id="startDate" registered via register(...)) lack ARIA linkage to their error
<p> elements; update each input to include aria-describedby that points to a
unique error id (e.g. "name-error", "businessNumber-error", "startDate-error")
when an error exists, and add role="alert" to the corresponding error <p>
elements (errors.name && touchedFields.name -> <p id="name-error" role="alert">,
etc.) so screen readers announce validation messages; ensure the
aria-describedby is only present when the error is rendered to avoid referencing
non-existent IDs.
---
Nitpick comments:
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Around line 123-125: In StepBusinessAuth locate the span element that
currently has className="text-black font-bold" and remove the extra space so
the className reads "text-black font-bold"; this is the span inside the
StepBusinessAuth component that renders the warning text and adjusting the
className string will clean up the unnecessary double space.
- Around line 149-224: Extract the repeated onChange logic into a helper (e.g.,
a local function like handleFieldChange) and use it for register callbacks for
name, businessNumber, and startDate: implement a function that accepts the field
key and returns an onChange handler which checks isVerified, calls
setIsVerified(false) and calls onComplete with the updated field value and
current other fields; then replace the inline onChange objects in
{...register("name", {...})}, {...register("businessNumber", {...})}, and
{...register("startDate", {...})} to use this helper so the shared logic
(isVerified, setIsVerified, onComplete) is centralized.
- Line 87: The native alert(getErrorMessage(error)) call in StepBusinessAuth
should be replaced with the project's unified notification component (e.g., use
the existing ConfirmModal or the app toast utility) so error handling is
consistent; locate the alert call in StepBusinessAuth and swap it to invoke the
modal/toast API with the same getErrorMessage(error) text and appropriate
severity/OK action (mirror how 409 uses ConfirmModal) to ensure UX/accessibility
consistency.
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/store-registration/StepBusinessAuth.tsx (1)
2-2:⚠️ Potential issue | 🟡 Minor프로젝트의
Label컴포넌트를 사용해서 스타일 일관성을 유지해주세요
src/components/ui/label.tsx는 Radix Label을 래핑해서 프로젝트의 디자인 시스템 스타일(텍스트 크기, 갭, 폰트 굵기, 비활성 상태 처리 등)을 적용하고 있어요. 지금은 원본 Radix를 직접 사용하고 있어서 이 스타일들이 빠지고 있습니다.-import { Label } from "@radix-ui/react-label"; +import { Label } from "@/components/ui/label";2번 라인의 import와 143~146번 라인의 사용처를 함께 수정하면 돼요. 팀의 UI 기준을 맞추는 작은 정리이니까 함께 처리해주세요 😊
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` at line 2, Replace the Radix Label import and usages with the project's wrapped Label component to restore design-system styles: change the import in StepBusinessAuth from "@radix-ui/react-label" to the project's Label component and update the JSX where Label is used (the Label element in StepBusinessAuth) to use the wrapped Label, preserving props like htmlFor and className so existing behavior/associations remain the same.
🧹 Nitpick comments (2)
src/components/store-registration/StepBusinessAuth.tsx (2)
123-123:className에 공백이 두 개 들어가 있어요 (minor nitpick)- <span className="text-black font-bold"> + <span className="text-black font-bold">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` at line 123, In StepBusinessAuth.tsx fix the minor formatting typo in the span's className attribute: replace the double space in the class string "text-black font-bold" with a single space so it becomes "text-black font-bold" (locate the span element where className is set and update the string accordingly).
79-88: OWNER409 이외의 에러는 여전히alert()을 쓰고 있어서 UX 불일치가 생겨요이번 PR에서 OWNER409 케이스는
ConfirmModal로 개선됐는데, 나머지 에러는alert()으로 처리되고 있어요. 같은onError블록 안에서 두 가지 다른 UX 패턴이 공존하게 됩니다. 추후 리팩토링 시 에러 알림도 토스트(toast)나 모달 등 프로젝트 디자인 시스템에 맞는 컴포넌트로 통일하는 것을 권장해요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` around lines 79 - 88, In the onError handler for StepBusinessAuth replace the plain alert(getErrorMessage(error)) so non-OWNER409 errors use the same project UX as OWNER409 (modal/toast) — e.g., invoke the shared error notification flow (toast or an error modal) instead of alert; keep the existing OWNER409 branch that calls setPendingData(data) and only change the fallback branch where setIsVerified(false) currently precedes alert, calling the centralized notification API/component used elsewhere in the app (match the ConfirmModal/toast pattern) and pass getErrorMessage(error) as the message.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Line 2: Replace the Radix Label import and usages with the project's wrapped
Label component to restore design-system styles: change the import in
StepBusinessAuth from "@radix-ui/react-label" to the project's Label component
and update the JSX where Label is used (the Label element in StepBusinessAuth)
to use the wrapped Label, preserving props like htmlFor and className so
existing behavior/associations remain the same.
---
Duplicate comments:
In `@src/components/store-registration/ConfirmModal.tsx`:
- Around line 47-64: Buttons in ConfirmModal now correctly include type="button"
on both action elements; no change needed — keep the two button elements with
handlers onConfirm and onClose, labels confirmLabel and cancelLabel, and the
variant-based class on the confirm button as-is to preserve the fixed behavior
and prevent accidental form submissions.
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Around line 37-39: The change replacing window.confirm with the ConfirmModal
and the pendingData-based async flow is good; apply the same fix to the other
duplicate block (the second occurrence in StepBusinessAuth.tsx around the
pendingData/state and modal handling between lines ~92-131): ensure the
duplicate pendingData state and its usage mirror the first one
(useState<BusinessAuthFormValues | null>(null)), update the corresponding
handler (handleConfirm409) to setIsVerified → onComplete → setPendingData(null)
in that duplicate, and make onClose also reset isVerified, so both places use
the ConfirmModal and identical state/flow semantics.
- Around line 147-270: The review contains a duplicate reviewer tag—keep the
approval ([approve_code_changes]) and remove the duplicate marker
([duplicate_comment]); no code changes are required for the input fields (ids:
"name", "businessNumber", "startDate") or their ARIA attributes, just update the
PR review body to delete the redundant "[duplicate_comment]" entry so only the
single approval remains.
---
Nitpick comments:
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Line 123: In StepBusinessAuth.tsx fix the minor formatting typo in the span's
className attribute: replace the double space in the class string "text-black
font-bold" with a single space so it becomes "text-black font-bold" (locate the
span element where className is set and update the string accordingly).
- Around line 79-88: In the onError handler for StepBusinessAuth replace the
plain alert(getErrorMessage(error)) so non-OWNER409 errors use the same project
UX as OWNER409 (modal/toast) — e.g., invoke the shared error notification flow
(toast or an error modal) instead of alert; keep the existing OWNER409 branch
that calls setPendingData(data) and only change the fallback branch where
setIsVerified(false) currently precedes alert, calling the centralized
notification API/component used elsewhere in the app (match the
ConfirmModal/toast pattern) and pass getErrorMessage(error) as the message.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/store-registration/StepBusinessAuth.tsx (1)
79-88:⚠️ Potential issue | 🟠 Major
alert()여전히 사용 중 —confirm()과 동일한 접근성 문제예요OWNER409 경로는
ConfirmModal로 잘 교체됐는데,line 87의 일반 오류 처리에는 네이티브alert()이 그대로 남아 있어요. 이 역시:
- 스크린 리더와 ARIA 연동이 없고,
- 메인 스레드를 블로킹하며,
- 일부 모바일/PWA 환경에서 억제될 수 있습니다.
인라인 에러 메시지 상태나 토스트 알림으로 교체하는 걸 권장해요.
🛡️ 인라인 에러 상태로 교체하는 예시
+ const [errorMessage, setErrorMessage] = useState<string | null>(null); const onSubmit = async (data: BusinessAuthFormValues) => { verifyOwner(data, { onError: (error) => { const err = error as any; const serverCode = err.response?.data?.code || err.code; if (serverCode === "OWNER409") { setPendingData(data); return; } setIsVerified(false); - alert(getErrorMessage(error)); + setErrorMessage(getErrorMessage(error)); }, }); };그리고 폼 상단 또는 버튼 위에 에러 메시지를 렌더링:
+ {errorMessage && ( + <p role="alert" aria-live="assertive" className="text-red-500 text-sm text-center"> + {errorMessage} + </p> + )} <button type="submit" ...>As per coding guidelines,
src/components/**에 적용되는 "접근성(aria) 체크" 규칙에 따라 네이티브 블로킹 다이얼로그 대신 ARIA 지원이 있는 대안을 사용해야 합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` around lines 79 - 88, The onError handler currently calls the native alert(getErrorMessage(error)) which is inaccessible and blocks the main thread; replace this with an ARIA-friendly inline error UI or a toast call instead: add or reuse a state (e.g., errorMessage / setErrorMessage) in StepBusinessAuth and set it inside onError (after setIsVerified(false)) or invoke the app's toast helper (e.g., showToast or notify) with getErrorMessage(error); ensure OWNER409 branch remains using setPendingData(data) and that the error UI is rendered in the component (near the form or button) with proper role="alert" so screen readers announce it.
🧹 Nitpick comments (1)
src/components/store-registration/StepBusinessAuth.tsx (1)
123-125:className에 공백 하나 남아 있어요 (닛픽)
"text-black font-bold"에 스페이스가 두 개 들어가 있어요. 기능상 문제는 없지만 Prettier 등으로 정리하면 깔끔해집니다.✨ 수정 예시
- <span className="text-black font-bold"> + <span className="text-black font-bold">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` around lines 123 - 125, In StepBusinessAuth.tsx update the span's className value to remove the duplicate space so it reads "text-black font-bold" (locate the span inside the component StepBusinessAuth and the JSX snippet currently using className="text-black font-bold"); just normalize the whitespace in that className string (or run Prettier/formatter) so there is a single space between class names.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Around line 274-281: The success banner rendered in StepBusinessAuth.tsx when
!isPending && isVerified lacks an aria-live attribute so screen readers won't
announce the dynamic message; update the outer success div (the one with
className "bg-green-50 border border-green-200 rounded-lg p-4") to include an
appropriate live region like aria-live="polite" (and consider aria-atomic="true"
or role="status") so the message is announced when isVerified becomes true,
keeping the attribute only on the rendered banner for that condition.
---
Outside diff comments:
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Around line 79-88: The onError handler currently calls the native
alert(getErrorMessage(error)) which is inaccessible and blocks the main thread;
replace this with an ARIA-friendly inline error UI or a toast call instead: add
or reuse a state (e.g., errorMessage / setErrorMessage) in StepBusinessAuth and
set it inside onError (after setIsVerified(false)) or invoke the app's toast
helper (e.g., showToast or notify) with getErrorMessage(error); ensure OWNER409
branch remains using setPendingData(data) and that the error UI is rendered in
the component (near the form or button) with proper role="alert" so screen
readers announce it.
---
Nitpick comments:
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Around line 123-125: In StepBusinessAuth.tsx update the span's className value
to remove the duplicate space so it reads "text-black font-bold" (locate the
span inside the component StepBusinessAuth and the JSX snippet currently using
className="text-black font-bold"); just normalize the whitespace in that
className string (or run Prettier/formatter) so there is a single space between
class names.
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/store-registration/StepBusinessAuth.tsx (2)
83-87:alert()도 ConfirmModal/토스트 알림으로 교체하면 더 일관성 있어요 🎨OWNER409 케이스는
ConfirmModal로 잘 교체됐는데, 그 외 에러 케이스(L87)에는 여전히 네이티브alert()를 쓰고 있어서 UX와 접근성이 일치하지 않아요. 스크린 리더 통합, 모바일 브라우저 동작, UI 일관성 측면에서 동일한 문제가 남아 있어요.프로젝트에 토스트 라이브러리가 있다면 그쪽으로, 아니면 에러 전용 모달/인라인 메시지로 교체하는 걸 추천해요.
♻️ 예시: 에러 상태를 컴포넌트 내에서 처리하는 방식
+ const [errorMessage, setErrorMessage] = useState<string | null>(null); ... onError: (error) => { const err = error as any; const serverCode = err.response?.data?.code || err.code; if (serverCode === "OWNER409") { setPendingData(data); return; } setIsVerified(false); - alert(getErrorMessage(error)); + setErrorMessage(getErrorMessage(error)); },그리고 JSX 에서:
+{errorMessage && ( + <p role="alert" aria-live="assertive" className="text-red-500 text-sm"> + {errorMessage} + </p> +)}As per coding guidelines,
src/components/**에 적용되는 "접근성(aria) 체크" 규칙에 따라 네이티브alert()대신 접근성 친화적인 방식을 권장합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` around lines 83 - 87, The code in StepBusinessAuth currently calls the native alert(getErrorMessage(error)) after setIsVerified(false); replace this alert with the app's accessible UI error pattern: either call the project's toast/error API (e.g., toast.error(getErrorMessage(error))) or set a component error state (e.g., setErrorMessage/getErrorMessage + setShowErrorModal) and render an accessible ConfirmModal/ErrorModal instead; update the handler where setIsVerified(false) is used to invoke that toast or set the modal state so OWNER409 already-handled flow stays consistent with other error paths and aria/accessibility rules for src/components/**.
92-131: OWNER409 ConfirmModal 통합 잘 됐어요! 이전 리뷰 피드백 완벽하게 반영됐네요 ✅
pendingData→ 모달 →handleConfirm409흐름이 깔끔하고, 취소 시setIsVerified(false)처리도 올바르게 됐어요.한 가지 아주 작은 거: L123에
text-black font-bold사이에 공백이 두 개 있어요.- <span className="text-black font-bold"> + <span className="text-black font-bold">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/store-registration/StepBusinessAuth.tsx` around lines 92 - 131, Minor CSS class typo: remove the duplicate space in the className string used in the ConfirmModal description. Edit the JSX in StepBusinessAuth where ConfirmModal's description contains <span className="text-black font-bold"> and change the className to "text-black font-bold" (refer to the ConfirmModal usage and the span inside the description, and you may verify behavior via pendingData, handleConfirm409 and setIsVerified flows).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/store-registration/StepBusinessAuth.tsx`:
- Around line 83-87: The code in StepBusinessAuth currently calls the native
alert(getErrorMessage(error)) after setIsVerified(false); replace this alert
with the app's accessible UI error pattern: either call the project's
toast/error API (e.g., toast.error(getErrorMessage(error))) or set a component
error state (e.g., setErrorMessage/getErrorMessage + setShowErrorModal) and
render an accessible ConfirmModal/ErrorModal instead; update the handler where
setIsVerified(false) is used to invoke that toast or set the modal state so
OWNER409 already-handled flow stays consistent with other error paths and
aria/accessibility rules for src/components/**.
- Around line 92-131: Minor CSS class typo: remove the duplicate space in the
className string used in the ConfirmModal description. Edit the JSX in
StepBusinessAuth where ConfirmModal's description contains <span
className="text-black font-bold"> and change the className to "text-black
font-bold" (refer to the ConfirmModal usage and the span inside the description,
and you may verify behavior via pendingData, handleConfirm409 and setIsVerified
flows).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
💡 개요
사업자 인증 대표자명 필드 추가, 예외 처리 보완
🔢 관련 이슈 링크
💻 작업내용
📌 변경사항PR
🤔 추가 논의하고 싶은 내용
✅ 체크리스트
Summary by CodeRabbit
새로운 기능
개선 사항