fix: 코드래빗 반영

Author: Seoje1405

src/app/actions/order.ts

@@ -95,7 +95,10 @@ export async function fetchDirectOrderItems(
 
   let selections: { color: string; size: string; quantity: number }[];
   try {
-    selections = JSON.parse((params.selections as string) || '[]');
+    const raw = Array.isArray(params.selections)
+      ? params.selections[0]
+      : params.selections;
+    selections = JSON.parse(raw || '[]');
   } catch {
     notFound();
   }

src/app/payment/_components/order-items.tsx

@@ -64,7 +64,7 @@ export default function OrderItemsSection({ items }: Props) {
         ))}
       </ul>
       {hasDiscount && (
-        <p className="text-red text-center text-xl leading-normal font-medium">
+        <p className="text-center text-xl leading-normal font-medium text-red-500">
           최대 할인이 적용 됐어요
         </p>
       )}

src/app/payment/_components/payment-context.tsx

@@ -74,16 +74,20 @@ export function PaymentProvider({
   const [usedPoints, setUsedPoints] = useState(0);
 
   const totalItemPrice = items.reduce((acc, item) => acc + item.totalPrice, 0);
-  const finalPrice = totalItemPrice - usedPoints;
+  const finalPrice = Math.max(0, totalItemPrice - usedPoints);
 
   /**
    * 결제 처리 함수
    * - 배송지 정보 유효성 검증 후 주문 생성
    */
   const handlePayment = async () => {
     if (isSubmitting) return;
-
-    if (!shippingInfo.deliveryAddress || !shippingInfo.postalCode) {
+    if (
+      !shippingInfo.recipient.trim() ||
+      !shippingInfo.recipientPhone.trim() ||
+      !shippingInfo.deliveryAddress ||
+      !shippingInfo.postalCode
+    ) {
       alert('배송지 정보를 모두 입력해주세요.');
       scrollToId(SECTIONS.SHIPPING);
       return;
@@ -95,7 +99,9 @@ export function PaymentProvider({
 
       if (orderType === 'cart') {
         orderId = await createOrderFromCart({
-          cartItemIds: items.map((item) => item.cartItemId!),
+          cartItemIds: items
+            .map((item) => item.cartItemId)
+            .filter((id): id is number => id != null),
           usedPoints,
           ...shippingInfo,
         });

src/app/payment/_components/payment-info.tsx

@@ -31,10 +31,12 @@ export default function PaymentInfoSection({
       <div className="mb-6">
         <div className="flex justify-around">
           <Input
-            value={usedPoints}
+            value={usedPoints || ''}
             onChange={handlePointChange}
             className="h-[87px] w-[239px] rounded-lg border border-black text-left text-3xl leading-normal font-medium placeholder:text-black"
             placeholder="0원"
+            aria-label="적립금 사용 금액"
+            inputMode="numeric"
           />
           <button
             onClick={() => onPointsChange(Math.min(userPoints, totalPrice))}

src/app/payment/_components/step-navigator.tsx

@@ -50,7 +50,7 @@ export default function StepNavigator({ activeStep, onStepChange }: Props) {
                 return (
                   <div
                     key={step.id}
-                    className="bg- relative z-10 flex flex-col items-center"
+                    className="relative z-10 flex flex-col items-center"
                   >
                     <button
                       type="button"
@@ -86,7 +86,7 @@ export default function StepNavigator({ activeStep, onStepChange }: Props) {
       </header>
 
       {/* 헤더 높이만큼 공간 확보 */}
-      <div className="h-52 w-full" aria-hidden="true" />
+      <div className="h-[220px] w-full" aria-hidden="true" />
     </>
   );
 }

src/app/payment/_components/use-payment-scroll-spy.ts

@@ -14,23 +14,19 @@ export default function usePaymentScrollSpy(ids: string[]) {
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const scrollToId = (id: string) => {
-    isClickScrolling.current = true;
-
     startTransition(() => {
       setActiveId(id);
     });
-
     const element = document.getElementById(id);
-    if (element) {
-      const top =
-        element.getBoundingClientRect().top + window.scrollY - HEADER_HEIGHT;
-      window.scrollTo({ top, behavior: 'smooth' });
-
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => {
-        isClickScrolling.current = false;
-      }, 1000);
-    }
+    if (!element) return;
+    isClickScrolling.current = true;
+    const top =
+      element.getBoundingClientRect().top + window.scrollY - HEADER_HEIGHT;
+    window.scrollTo({ top, behavior: 'smooth' });
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      isClickScrolling.current = false;
+    }, 1000);
   };
 
   useEffect(() => {

src/app/payment/complete/page.tsx

@@ -3,6 +3,8 @@ import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import { getOrderDetail } from '@/app/actions/order';
 import Image from 'next/image';
+import { auth } from '/auth';
+import { redirect } from 'next/navigation';
 
 export const metadata: Metadata = {
   title: '주문 완료 - 온길',
@@ -13,12 +15,12 @@ interface PageProps {
 }
 
 export default async function OrderCompletePage({ searchParams }: PageProps) {
+  const session = await auth();
+  if (!session) redirect('/login');
   const { orderId } = await searchParams;
-
   if (!orderId || isNaN(Number(orderId))) {
     notFound();
   }
-
   const order = await getOrderDetail(Number(orderId));
 
   return (
@@ -36,7 +38,7 @@ export default async function OrderCompletePage({ searchParams }: PageProps) {
           주문번호: <span className="">{order.orderNumber}</span>
         </p>
 
-        <div className="mt-5 grid max-w-sm grid-cols-2 gap-3 text-xl font-medium text-white">
+        <div className="mx-auto mt-5 grid max-w-sm grid-cols-2 gap-3 text-xl font-medium text-white">
           <Link
             href={`/orders/${order.id}`}
             className="bg-ongil-teal flex items-center justify-center rounded-md px-6 py-2"
@@ -87,7 +89,7 @@ export default async function OrderCompletePage({ searchParams }: PageProps) {
           <div className="mt-4 flex items-center justify-between pt-3 text-lg font-bold">
             <span>총 결제금액</span>
             <span className="text-xl text-blue-600">
-              {order.totalAmount.toLocaleString()}원
+              {(order.totalAmount ?? 0).toLocaleString()}원
             </span>
           </div>
         </div>

src/app/payment/page.tsx

@@ -37,7 +37,7 @@ export default async function PaymentPage({ searchParams }: PageProps) {
   ]);
 
   return (
-    <main className="max-h-screen">
+    <main className="min-h-screen">
       <PaymentProvider
         user={user}
         items={items}
@@ -46,14 +46,11 @@ export default async function PaymentPage({ searchParams }: PageProps) {
         <ConnectedStepNavigator />
 
         <div className="mx-auto mt-4 max-w-xl space-y-8 pb-32">
-          <section id={SECTIONS.ITEMS} className="min-h-auto scroll-mt-[120px]">
+          <section id={SECTIONS.ITEMS} className="scroll-mt-[120px]">
             <OrderItemsSection items={items} />
           </section>
 
-          <section
-            id={SECTIONS.SHIPPING}
-            className="min-h-auto scroll-mt-[120px]"
-          >
+          <section id={SECTIONS.SHIPPING} className="scroll-mt-[120px]">
             <ConnectedShippingSection />
           </section>