Skip to content

Commit 6624e28

Browse files
Seoje1405Seoje1405
committed
refactor: 삭제 버튼 추가 및 UI 수정
1 parent fa8b1cb commit 6624e28

1 file changed

Lines changed: 109 additions & 83 deletions

File tree

‎src/app/orders/[orderId]/page.tsx‎

Lines changed: 109 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { Metadata } from 'next';
22
import Image from 'next/image';
33
import Link from 'next/link';
44
import { getOrderDetail } from '@/app/actions/order';
5-
import { CloseButton } from '@/components/ui/close-button';
5+
import { CloseXButton } from '@/components/ui/close-button';
6+
import { DeleteOrderButton } from '@/components/orders/delete-order-button';
67
import { notFound } from 'next/navigation';
78

89
export const metadata: Metadata = {
@@ -38,97 +39,122 @@ export default async function OrderDetailPage({ params }: OrderPageProps) {
3839
};
3940

4041
return (
41-
<main className="mx-auto min-h-screen max-w-2xl bg-white">
42-
<header className="sticky top-0 z-20 flex h-24 w-full items-center justify-center bg-white">
43-
<div className="absolute top-1/2 left-4 ml-3 -translate-y-1/2">
44-
<CloseButton />
42+
<main className="mx-auto min-h-screen max-w-2xl bg-white px-5 pb-20 leading-normal">
43+
<header className="flex items-center justify-center py-8">
44+
<h1 className="text-3xl font-semibold">주문 상세</h1>
45+
<div className="absolute right-5">
46+
<CloseXButton />
4547
</div>
46-
<h1 className="text-3xl leading-[18px] font-semibold">주문 상세</h1>
4748
</header>
4849

49-
<div className="px-6 pb-32">
50-
{/* 주문 번호 및 날짜 */}
51-
<section className="border-b border-gray-200 pb-6">
52-
<p className="text-sm text-gray-500">주문번호</p>
53-
<p className="mt-1 text-lg font-semibold">{order.orderNumber}</p>
54-
<p className="mt-2 text-sm text-gray-500">
55-
{formatDate(order.createdAt)}
56-
</p>
57-
</section>
50+
{/* 주문 번호 및 날짜 */}
51+
<section className="mb-8">
52+
<p className="text-base text-gray-500">주문번호</p>
53+
<p className="mt-1 text-xl font-semibold">{order.orderNumber}</p>
54+
<p className="mt-2 text-base text-gray-500">
55+
{formatDate(order.createdAt)}
56+
</p>
57+
</section>
5858

59-
{/* 주문 상품 목록 */}
60-
<section className="border-b border-gray-200 py-6">
61-
<h2 className="mb-4 text-xl font-semibold">주문 상품</h2>
62-
<ul className="space-y-4">
63-
{order.orderItems.map((item, index) => (
64-
<li key={index} className="flex gap-4">
65-
<Link href={`/product/${item.productId}`}>
66-
<div className="relative h-24 w-24 overflow-hidden rounded-lg bg-gray-100">
67-
<Image
68-
src={item.imageUrl}
69-
alt={item.productName}
70-
fill
71-
className="object-cover"
72-
/>
73-
</div>
74-
</Link>
75-
<div className="flex flex-1 flex-col justify-center">
76-
<p className="text-sm text-gray-500">{item.brandName}</p>
77-
<Link
78-
href={`/product/${item.productId}`}
79-
className="font-medium hover:underline"
80-
>
81-
{item.productName}
82-
</Link>
83-
<p className="mt-1 text-sm text-gray-500">
84-
{item.selectedColor} / {item.selectedSize} / {item.quantity}
85-
개
86-
</p>
87-
<p className="mt-1 font-semibold">
88-
{formatPrice(item.priceAtOrder * item.quantity)}원
89-
</p>
90-
</div>
91-
</li>
92-
))}
93-
</ul>
94-
</section>
95-
96-
{/* 배송 정보 */}
97-
<section className="border-b border-gray-200 py-6">
98-
<h2 className="mb-4 text-xl font-semibold">배송 정보</h2>
99-
<dl className="space-y-2 text-sm">
100-
<div className="flex">
101-
<dt className="w-24 text-gray-500">받는 분</dt>
102-
<dd>{order.recipient}</dd>
103-
</div>
104-
<div className="flex">
105-
<dt className="w-24 text-gray-500">연락처</dt>
106-
<dd>{order.recipientPhone}</dd>
59+
{/* 주문 상품 목록 */}
60+
<h2 className="mb-5 text-2xl">주문 상품</h2>
61+
<div className="mb-8 flex flex-col gap-4">
62+
{order.orderItems.map((item, index) => (
63+
<div
64+
key={index}
65+
className="flex gap-4 rounded-xl border-2 border-gray-300 p-4"
66+
>
67+
<Link href={`/product/${item.productId}`}>
68+
<Image
69+
src={item.imageUrl}
70+
alt={item.productName}
71+
width={80}
72+
height={80}
73+
/>
74+
</Link>
75+
<div className="flex flex-col gap-2">
76+
<span className="text-lg font-medium">{item.brandName}</span>
77+
<Link
78+
href={`/product/${item.productId}`}
79+
className="text-lg hover:underline"
80+
>
81+
{item.productName}
82+
</Link>
83+
<span className="text-base text-gray-600">
84+
{item.selectedColor} / {item.selectedSize} · {item.quantity}개
85+
</span>
86+
<span className="text-lg font-bold">
87+
{formatPrice(item.priceAtOrder * item.quantity)}원
88+
</span>
10789
</div>
108-
<div className="flex">
109-
<dt className="w-24 text-gray-500">배송지</dt>
110-
<dd>{order.deliveryAddress}</dd>
111-
</div>
112-
{order.deliveryMessage && (
113-
<div className="flex">
114-
<dt className="w-24 text-gray-500">배송 메모</dt>
115-
<dd>{order.deliveryMessage}</dd>
116-
</div>
117-
)}
118-
</dl>
119-
</section>
90+
</div>
91+
))}
92+
</div>
93+
94+
{/* 배송 정보 */}
95+
<h2 className="mb-5 text-2xl">배송 정보</h2>
96+
<div className="mb-8 rounded-xl border-2 border-gray-300 p-5 text-lg">
97+
<div className="flex py-2">
98+
<span className="w-28 text-gray-500">받는 분</span>
99+
<span>{order.recipient}</span>
100+
</div>
101+
<div className="flex py-2">
102+
<span className="w-28 text-gray-500">연락처</span>
103+
<span>{order.recipientPhone}</span>
104+
</div>
105+
<div className="flex py-2">
106+
<span className="w-28 text-gray-500">배송지</span>
107+
<span>{order.deliveryAddress}</span>
108+
</div>
109+
{order.deliveryMessage && (
110+
<div className="flex py-2">
111+
<span className="w-28 text-gray-500">배송 메모</span>
112+
<span>{order.deliveryMessage}</span>
113+
</div>
114+
)}
115+
</div>
120116

121-
{/* 결제 금액 */}
122-
<section className="py-6">
123-
<h2 className="mb-4 text-xl font-semibold">결제 금액</h2>
124-
<div className="flex items-center justify-between text-2xl font-bold">
125-
<span>총 결제금액</span>
126-
<span className="text-blue-600">
127-
{formatPrice(order.totalAmount)}원
117+
{/* 결제 금액 */}
118+
<h2 className="mb-5 text-2xl">결제 금액</h2>
119+
<div className="rounded-xl border-2 border-gray-300 p-5 text-lg">
120+
<div className="flex justify-between py-2">
121+
<span>상품 금액</span>
122+
<span>
123+
{formatPrice(
124+
order.orderItems.reduce(
125+
(sum, item) => sum + item.priceAtOrder * item.quantity,
126+
0,
127+
),
128+
)}
129+
원
130+
</span>
131+
</div>
132+
{order.orderItems.reduce(
133+
(sum, item) => sum + item.priceAtOrder * item.quantity,
134+
0,
135+
) - order.totalAmount > 0 && (
136+
<div className="flex justify-between py-2">
137+
<span>할인 금액</span>
138+
<span className="text-red-500">
139+
-
140+
{formatPrice(
141+
order.orderItems.reduce(
142+
(sum, item) => sum + item.priceAtOrder * item.quantity,
143+
0,
144+
) - order.totalAmount,
145+
)}
146+
원
128147
</span>
129148
</div>
130-
</section>
149+
)}
150+
<div className="mt-2 flex justify-between border-t pt-4 text-xl font-bold">
151+
<span>총 결제금액</span>
152+
<span>{formatPrice(order.totalAmount)}원</span>
153+
</div>
131154
</div>
155+
156+
{/* 주문 기록 삭제 */}
157+
<DeleteOrderButton orderId={numericId} />
132158
</main>
133159
);
134160
}

0 commit comments

Comments
 (0)