fix: 토스페이먼츠 고객키값 2글자 미만 오류수정

[jjjsun]

💡 개요

결제창 customerKey 값 수정

🔢 관련 이슈 링크

• Closes [Fix] 토스페이먼츠 고객키값 오류 수정 #104

💻 작업내용

• 토스페이먼츠 customerKey가 2글자 이상 규칙을 만족하도록 prefix 추가

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

• N/A

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

Summary by CodeRabbit

릴리스 노트

• Bug Fixes
  • 결제 시 고객 식별자 처리 방식을 개선하여 결제 시스템과의 호환성을 강화했습니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
eatsfine	Ready	Preview, Comment	Feb 19, 2026 10:14am

[coderabbitai]

📝 Walkthrough

Walkthrough

토스페이먼츠 결제 모달에서 고객 식별자(customerKey) 생성 방식을 변경했습니다. 기존의 숫자 기반 userId에서 user_ 프리픽스를 추가하여 user_${userId} 형태로 변경함으로써 토스페이먼츠 API의 고객키 요구사항을 맞추었습니다.

Changes

Cohort / File(s)	Summary
토스페이먼츠 고객키 형식 개선 src/components/reservation/modals/PaymentModal.tsx	customerKey 생성 로직을 String(userId)에서 user_${userId}로 변경. 토스페이먼츠 API의 고객키 형식 요구사항에 맞춘 버그 수정.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3분

Poem

토스의 문을 여는 열쇠가 생겼네 🔑
user_ 접두사 덕분에 반가운 고객들,
콘솔의 오류는 사라지고
결제 창으로 순항하네 ✨
작지만 확실한 손길이다 👍

---

💡 리뷰 노트

이 변경사항은 명확한 버그 수정입니다. 좋은 점은:

✅ 기존 로직 유지: 제어 흐름은 그대로 두고 식별자 형식만 정정한 점
✅ 최소 변경: 한 줄의 변경으로 문제 해결
✅ 일관성: 향후 다른 결제 관련 코드에서도 이 형식을 사용하도록 통일 권장

일반적으로 backend의 고객키 생성 규칙이 user_ 프리픽스를 요구하는 경우가 많으므로, 혹시 다른 곳에서도 유사한 패턴이 있다면 함께 정정하는 것을 고려해볼 수 있습니다.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 Toss 고객키값에 2글자 이상 규칙을 만족하도록 prefix를 추가한 버그 수정 내용을 명확하게 설명하고 있습니다.
Description check	✅ Passed	PR 설명이 템플릿을 따르며 개요, 관련 이슈, 작업내용, 변경사항 체크박스, 체크리스트 등 필수 섹션을 모두 포함하고 있습니다.
Linked Issues check	✅ Passed	이슈 #104의 고객키값 오류 수정 요구사항이 PaymentModal.tsx에서 userId prefix 추가로 완벽하게 충족되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 고객키값 prefix 추가라는 이슈 #104의 범위 내에 있으며 불필요한 외부 변경은 없습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/payment-customerKey

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

src/components/reservation/modals/PaymentModal.tsx (3)

261-263: ⚠️ Potential issue | 🟡 Minor

프로덕션 코드에 테스트 문구가 하드코딩되어 있어요

"현재는 임시 결제(테스트)입니다." 문구가 환경 변수 등의 조건 없이 항상 렌더링됩니다. 실제 배포 시 사용자에게 노출되면 혼란을 줄 수 있어요. 개발/테스트 환경에서만 표시되도록 처리하거나, 프로덕션 전에 제거해주세요.

💡 환경 조건 처리 예시

-          <p className="text-sm text-muted-foreground text-center">
-            현재는 임시 결제(테스트)입니다.
-          </p>
+          {import.meta.env.DEV && (
+            <p className="text-sm text-muted-foreground text-center">
+              현재는 임시 결제(테스트)입니다.
+            </p>
+          )}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/reservation/modals/PaymentModal.tsx` around lines 261 - 263,
The hardcoded test notice in the PaymentModal component ("현재는 임시 결제(테스트)입니다.")
should only render in non-production environments; update PaymentModal (the JSX
that renders the <p className="text-sm text-muted-foreground text-center">...)
to conditionally render based on an environment flag (e.g., process.env.NODE_ENV
!== 'production' or a public env var like
process.env.NEXT_PUBLIC_SHOW_TEST_PAYMENT === 'true'), or remove it for
production builds; ensure you reference the same JSX fragment inside the
PaymentModal component and gate its rendering so production deployments do not
show the test message.

---

186-199: ⚠️ Potential issue | 🟠 Major

모달 열릴 때 포커스 이동 및 포커스 트랩이 없어요 (접근성)

role="dialog" + aria-modal="true" 속성은 잘 달려 있는데, 모달이 열릴 때 포커스를 모달 내부로 이동시키는 코드와, Tab 키가 모달 밖으로 빠져나가지 않도록 하는 포커스 트랩이 없습니다. WCAG 2.1 기준(2.1.2 No Keyboard Trap, 2.4.3 Focus Order)과 이 프로젝트 접근성 가이드라인에 위반됩니다.

dialog 요소에 ref를 달아 열릴 때 focus()를 호출하거나, Radix UI / @headlessui/react 같이 포커스 관리가 내장된 다이얼로그 컴포넌트로 교체하는 걸 권장해요.

💡 간단한 포커스 이동 예시

+  const dialogRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      dialogRef.current?.focus();
+    }
+  }, [open]);

   return (
     <div
+      ref={dialogRef}
+      tabIndex={-1}
       className="fixed inset-0 z-60 flex items-center justify-center p-4"
       role="dialog"
       aria-modal="true"
       aria-label="예약 내용 확인모달"
     >

포커스 트랩까지 완전히 구현하려면 focus-trap-react 같은 라이브러리 사용을 고려해보세요.

As per coding guidelines, src/components/** 파일은 접근성(aria) 체크가 필요합니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/reservation/modals/PaymentModal.tsx` around lines 186 - 199,
The modal lacks focus management and a focus trap; update the PaymentModal
component to attach a ref (e.g., dialogRef) to the dialog container element (the
<div> with role="dialog") and when the modal opens call
dialogRef.current.focus() in a useEffect tied to the open state, and also
prevent Tab from leaving the modal by integrating a focus-trap (either import
and wrap the modal content with focus-trap-react or replace the markup with a
Dialog from `@headlessui/react/Radix` which provides built-in focus management);
ensure handleRequestClose still closes the modal and that the backdrop button
keeps aria-label="모달 닫기" to restore focus on close.

---

46-46: ⚠️ Potential issue | 🟡 Minor

_payAmount 상태가 사실상 dead state예요 — 서버 확정 금액이 화면에 반영 안 됩니다

현재 화면에 표시되는 결제금액은 Line 46의 amount (booking?.totalDeposit)인데, Line 103에서 서버로부터 받은 payOrder.amount를 setPayAmount로 저장해도 _payAmount는 아무 데도 사용되지 않아요. 서버 응답 금액과 booking.totalDeposit이 다를 경우 사용자에게 잘못된 금액이 표시될 수 있습니다.

두 가지 방법 중 하나를 선택하면 좋겠어요:

방법 A — _payAmount를 제거하고, 렌더링에 사용되는 amount를 서버 확정 금액으로 교체

♻️ 제안 수정

-  const amount = booking?.totalDeposit ?? 0;
+  const [amount, setAmount] = useState<number>(booking?.totalDeposit ?? 0);

   // ... (useEffect 내부)
-  const [_payAmount, setPayAmount] = useState<number>(
-    booking?.totalDeposit ?? 0,
-  );
-  useEffect(() => {
-    setPayAmount(booking?.totalDeposit ?? 0);
-  }, [booking?.totalDeposit]);

   // ... setPayAmount 호출 부분
-  setPayAmount(payOrder.amount);
+  setAmount(payOrder.amount);

방법 B — 서버 금액을 사용하지 않는다면 _payAmount와 setPayAmount 호출을 모두 제거

Also applies to: 66-71, 103-103

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/reservation/modals/PaymentModal.tsx` at line 46, The UI shows
booking?.totalDeposit via the local const amount while the _payAmount state (and
setPayAmount) that gets updated from the server response (payOrder.amount) is
never used; fix by either (A) wiring the render to use the server-confirmed
value: initialize and update _payAmount (usePayAmount state) and replace
references to booking?.totalDeposit (const amount) with _payAmount so
payOrder.amount is reflected in the UI, or (B) remove the unused _payAmount
state and any setPayAmount calls (including the payOrder handling at the
response) and keep using booking?.totalDeposit; update/remove imports/usages
accordingly (references: amount, booking?.totalDeposit, _payAmount,
setPayAmount, payOrder.amount in PaymentModal component).

🤖 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/reservation/modals/PaymentModal.tsx`:
- Around line 261-263: The hardcoded test notice in the PaymentModal component
("현재는 임시 결제(테스트)입니다.") should only render in non-production environments; update
PaymentModal (the JSX that renders the <p className="text-sm
text-muted-foreground text-center">...) to conditionally render based on an
environment flag (e.g., process.env.NODE_ENV !== 'production' or a public env
var like process.env.NEXT_PUBLIC_SHOW_TEST_PAYMENT === 'true'), or remove it for
production builds; ensure you reference the same JSX fragment inside the
PaymentModal component and gate its rendering so production deployments do not
show the test message.
- Around line 186-199: The modal lacks focus management and a focus trap; update
the PaymentModal component to attach a ref (e.g., dialogRef) to the dialog
container element (the <div> with role="dialog") and when the modal opens call
dialogRef.current.focus() in a useEffect tied to the open state, and also
prevent Tab from leaving the modal by integrating a focus-trap (either import
and wrap the modal content with focus-trap-react or replace the markup with a
Dialog from `@headlessui/react/Radix` which provides built-in focus management);
ensure handleRequestClose still closes the modal and that the backdrop button
keeps aria-label="모달 닫기" to restore focus on close.
- Line 46: The UI shows booking?.totalDeposit via the local const amount while
the _payAmount state (and setPayAmount) that gets updated from the server
response (payOrder.amount) is never used; fix by either (A) wiring the render to
use the server-confirmed value: initialize and update _payAmount (usePayAmount
state) and replace references to booking?.totalDeposit (const amount) with
_payAmount so payOrder.amount is reflected in the UI, or (B) remove the unused
_payAmount state and any setPayAmount calls (including the payOrder handling at
the response) and keep using booking?.totalDeposit; update/remove imports/usages
accordingly (references: amount, booking?.totalDeposit, _payAmount,
setPayAmount, payOrder.amount in PaymentModal component).