fix: 코드 래빗 반영

Seoje1405 · Seoje1405 · commit 6af5d27083cd · 2026-02-11T23:53:33.000+09:00
diff --git a/src/app/orders/[orderId]/cancel/_components/cancel-form.tsx b/src/app/orders/[orderId]/cancel/_components/cancel-form.tsx
@@ -9,7 +9,7 @@ import {
   OrderRefundInfoResponse,
   OrderSummary,
 } from '@/types/domain/order';
-import { OrderListCard } from '@/components/orders/order-list-card';
+import OrderListCard from '@/components/orders/order-list-card';
 import Image from 'next/image';
 
 const CANCEL_REASONS = [
@@ -46,6 +46,7 @@ export function CancelForm({ orderDetail }: CancelFormProps) {
   const [submitting, setSubmitting] = useState(false);
   const [addToCart, setAddToCart] = useState(false);
   const [showModal, setShowModal] = useState(false);
+  const [alertMessage, setAlertMessage] = useState<string | null>(null);
   const [cancelResult, setCancelResult] = useState<OrderCancelResponse | null>(
     null,
   );
@@ -64,7 +65,11 @@ export function CancelForm({ orderDetail }: CancelFormProps) {
       })
       .catch((err) => {
         console.error(err);
-        alert('환불 정보를 불러오지 못했습니다.');
+        setAlertMessage(
+          err instanceof Error
+            ? err.message
+            : '환불 정보를 불러오지 못했습니다.',
+        );
         setStep('reason');
       })
       .finally(() => setRefundLoading(false));
@@ -87,14 +92,32 @@ export function CancelForm({ orderDetail }: CancelFormProps) {
       setShowModal(false);
       setStep('complete');
     } catch (error) {
-      alert(
+      setShowModal(false);
+      setAlertMessage(
         error instanceof Error ? error.message : '주문 취소에 실패했습니다.',
       );
     } finally {
       setSubmitting(false);
     }
   };
 
+  // --- 알림 모달 ---
+  if (alertMessage) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+        <div className="mx-5 w-full max-w-md rounded-2xl bg-white p-6">
+          <p className="mb-6 text-center text-xl font-bold">{alertMessage}</p>
+          <button
+            className="bg-ongil-teal w-full rounded-xl py-3 text-lg text-white"
+            onClick={() => router.replace('/orders')}
+          >
+            주문 내역으로 돌아가기
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   // --- 완료 단계 ---
   if (step === 'complete' && cancelResult) {
     const orderSummary: OrderSummary = {
diff --git a/src/app/orders/[orderId]/cancel/page.tsx b/src/app/orders/[orderId]/cancel/page.tsx
@@ -3,6 +3,8 @@ import { getOrderDetail } from '@/app/actions/order';
 import { notFound } from 'next/navigation';
 import { CloseXButton } from '@/components/ui/close-button';
 import { CancelForm } from './_components/cancel-form';
+import { auth } from '/auth';
+import { redirect } from 'next/navigation';
 
 export const metadata: Metadata = {
   title: '주문 취소 | OnGil',
@@ -14,6 +16,8 @@ interface CancelPageProps {
 }
 
 export default async function CancelReasonPage({ params }: CancelPageProps) {
+  const session = await auth();
+  if (!session) redirect('/login');
   const { orderId } = await params;
   const numericId = Number(orderId);
   if (Number.isNaN(numericId)) {
diff --git a/src/app/orders/[orderId]/page.tsx b/src/app/orders/[orderId]/page.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { getOrderDetail } from '@/app/actions/order';
 import { CloseXButton } from '@/components/ui/close-button';
-import { DeleteOrderButton } from '@/components/orders/delete-order-button';
+import DeleteOrderButton from '@/components/orders/delete-order-button';
 import { notFound } from 'next/navigation';
 
 export const metadata: Metadata = {
@@ -37,6 +37,11 @@ export default async function OrderDetailPage({ params }: OrderPageProps) {
   const formatPrice = (price: number) => {
     return price.toLocaleString('ko-KR');
   };
+  const itemsTotal = order.orderItems.reduce(
+    (sum, item) => sum + item.priceAtOrder * item.quantity,
+    0,
+  );
+  const discountAmount = itemsTotal - order.totalAmount;
 
   return (
     <main className="mx-auto min-h-screen max-w-2xl bg-white px-5 pb-20 leading-normal">
@@ -119,31 +124,13 @@ export default async function OrderDetailPage({ params }: OrderPageProps) {
       <div className="rounded-xl border-2 border-gray-300 p-5 text-lg">
         <div className="flex justify-between py-2">
           <span>상품 금액</span>
-          <span>
-            {formatPrice(
-              order.orderItems.reduce(
-                (sum, item) => sum + item.priceAtOrder * item.quantity,
-                0,
-              ),
-            )}
-            원
-          </span>
+          <span>{formatPrice(itemsTotal)}원</span>
         </div>
-        {order.orderItems.reduce(
-          (sum, item) => sum + item.priceAtOrder * item.quantity,
-          0,
-        ) - order.totalAmount > 0 && (
+        {discountAmount > 0 && (
           <div className="flex justify-between py-2">
             <span>할인 금액</span>
             <span className="text-red-500">
-              -
-              {formatPrice(
-                order.orderItems.reduce(
-                  (sum, item) => sum + item.priceAtOrder * item.quantity,
-                  0,
-                ) - order.totalAmount,
-              )}
-              원
+              -{formatPrice(discountAmount)}원
             </span>
           </div>
         )}
diff --git a/src/app/orders/page.tsx b/src/app/orders/page.tsx
@@ -1,6 +1,8 @@
 import { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
+import { redirect } from 'next/navigation';
+import { auth } from '/auth';
 import { getOrders } from '@/app/actions/order';
 import { getDefaultDateRange } from '@/lib/date-utils';
 import { OrderList } from '@/components/orders/order-list';
@@ -13,6 +15,9 @@ export const metadata: Metadata = {
 };
 
 export default async function OrderListPage() {
+  const session = await auth();
+  if (!session) redirect('/login');
+
   const defaults = getDefaultDateRange('1m');
   const response = await getOrders({
     startDate: defaults.startDate,
diff --git a/src/components/orders/delete-order-button.tsx b/src/components/orders/delete-order-button.tsx
@@ -8,7 +8,7 @@ interface DeleteOrderButtonProps {
   orderId: number;
 }
 
-export function DeleteOrderButton({ orderId }: DeleteOrderButtonProps) {
+export default function DeleteOrderButton({ orderId }: DeleteOrderButtonProps) {
   const router = useRouter();
   const [showModal, setShowModal] = useState(false);
   const [deleting, setDeleting] = useState(false);
diff --git a/src/components/orders/order-list-card.tsx b/src/components/orders/order-list-card.tsx
@@ -1,18 +1,34 @@
 'use client';
 
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { OrderSummary } from '@/types/domain/order';
 
+const STATUS_LABEL: Record<string, string> = {
+  ORDER_RECEIVED: '주문 완료',
+  CANCELLED: '주문 취소',
+};
+
 interface OrderListCardProps {
   order: OrderSummary;
 }
 
-export function OrderListCard({ order }: OrderListCardProps) {
+export default function OrderListCard({ order }: OrderListCardProps) {
   const router = useRouter();
   const repItem = order.items[0];
+  const [showAlert, setShowAlert] = useState(false);
+  const isCancelled = String(order.orderStatus).includes('CANCEL');
+
+  const handleCancelClick = () => {
+    if (isCancelled) {
+      setShowAlert(true);
+    } else {
+      router.push(`/orders/${order.orderId}/cancel`);
+    }
+  };
 
   return (
     <Card className="rounded-lg border-black p-5">
@@ -25,7 +41,7 @@ export function OrderListCard({ order }: OrderListCardProps) {
             </span>
             {/* 상태(주문 완료/취소 인지) */}
             <span className="text-xl leading-normal font-bold text-[#FF0000]">
-              {order.orderStatus}
+              {STATUS_LABEL[order.orderStatus] ?? order.orderStatus}
             </span>
           </div>
         </div>
@@ -62,7 +78,7 @@ export function OrderListCard({ order }: OrderListCardProps) {
           <Button
             variant="outline"
             className="h-full rounded-md bg-[#C1C1C1] text-xl"
-            onClick={() => router.push(`/orders/${order.orderId}/cancel`)}
+            onClick={handleCancelClick}
           >
             <span>상품 취소하기</span>
           </Button>
@@ -74,6 +90,22 @@ export function OrderListCard({ order }: OrderListCardProps) {
           </Button>
         </div>
       </CardContent>
+
+      {showAlert && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="mx-5 w-full max-w-md rounded-2xl bg-white p-6">
+            <p className="mb-6 text-center text-xl font-bold">
+              이미 취소된 주문입니다.
+            </p>
+            <button
+              className="bg-ongil-teal w-full rounded-xl py-3 text-lg text-white"
+              onClick={() => setShowAlert(false)}
+            >
+              확인
+            </button>
+          </div>
+        </div>
+      )}
     </Card>
   );
 }
diff --git a/src/components/orders/order-list.tsx b/src/components/orders/order-list.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { OrderListCard } from '@/components/orders/order-list-card';
+import OrderListCard from '@/components/orders/order-list-card';
 import {
   OrderSearchModal,
   type OrderSearchParams,
@@ -99,7 +99,7 @@ export function OrderList({
             {keyword || '검색어를 입력하세요'}
           </span>
           <Image
-            src="icons/search.svg"
+            src="/icons/search.svg"
             alt="검색 아이콘"
             width={26}
             height={26}
diff --git a/src/lib/date-utils.ts b/src/lib/date-utils.ts
@@ -1,13 +1,35 @@
 export type PeriodPreset = 'custom' | '1m' | '6m' | '1y';
 
+function formatLocalDate(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+function subtractMonths(date: Date, months: number): Date {
+  const result = new Date(date);
+  const targetMonth = result.getMonth() - months;
+  result.setMonth(targetMonth);
+  if (result.getMonth() !== ((targetMonth % 12) + 12) % 12) {
+    result.setDate(0);
+  }
+  return result;
+}
+
 export function getDefaultDateRange(preset: Exclude<PeriodPreset, 'custom'>) {
   const today = new Date();
-  const end = today.toISOString().split('T')[0];
-  const start = new Date();
+  const endDate = formatLocalDate(today);
 
-  if (preset === '1m') start.setMonth(today.getMonth() - 1);
-  else if (preset === '6m') start.setMonth(today.getMonth() - 6);
-  else if (preset === '1y') start.setFullYear(today.getFullYear() - 1);
+  let start: Date;
+  if (preset === '1m') start = subtractMonths(today, 1);
+  else if (preset === '6m') start = subtractMonths(today, 6);
+  else
+    start = new Date(
+      today.getFullYear() - 1,
+      today.getMonth(),
+      today.getDate(),
+    );
 
-  return { startDate: start.toISOString().split('T')[0], endDate: end };
+  return { startDate: formatLocalDate(start), endDate };
 }

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ interface DeleteOrderButtonProps {`
`8`	`8`	`orderId: number;`
`9`	`9`	`}`
`10`	`10`
`11`		`-export function DeleteOrderButton({ orderId }: DeleteOrderButtonProps) {`
	`11`	`+export default function DeleteOrderButton({ orderId }: DeleteOrderButtonProps) {`
`12`	`12`	`const router = useRouter();`
`13`	`13`	`const [showModal, setShowModal] = useState(false);`
`14`	`14`	`const [deleting, setDeleting] = useState(false);`