Feat/payment-page

package.json

@@ -25,6 +25,7 @@
     "next-auth": "5.0.0-beta.30",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
+    "react-daum-postcode": "^3.2.0",
     "react-dom": "19.2.3",
     "react-hook-form": "^7.71.1",
     "tailwind-merge": "^3.4.0",

src/app/actions/order.ts

@@ -2,12 +2,19 @@
 
 import { api } from '@/lib/api-client';
 import { revalidatePath } from 'next/cache';
+import { redirect, notFound } from 'next/navigation';
 import {
   OrderFromCartRequest,
   OrderFromProductRequest,
   OrderDetail,
+  OrderListResponse,
+  OrderListParams,
 } from '@/types/domain/order';
+import type { PaymentDisplayItem } from '@/app/payment/_components/order-items';
+import { getCartItems } from '@/app/actions/cart';
+import { getProductDetail } from '@/app/actions/product';
 
+/** 장바구니 주문 생성 */
 export async function createOrderFromCart(
   data: OrderFromCartRequest,
 ): Promise<number> {
@@ -21,11 +28,14 @@ export async function createOrderFromCart(
   } catch (error) {
     console.error('장바구니 상품 주문 실패:', error);
     throw new Error(
-      error instanceof Error ? error.message : '장바구니 상품 주문에 실패했습니다.',
+      error instanceof Error
+        ? error.message
+        : '장바구니 상품 주문에 실패했습니다.',
     );
   }
 }
 
+/** 상품 직접 주문 생성 */
 export async function createOrderFromProduct(
   data: OrderFromProductRequest,
 ): Promise<number> {
@@ -43,6 +53,92 @@ export async function createOrderFromProduct(
   }
 }
 
+/** 장바구니 주문 아이템 조회 */
+export async function fetchCartOrderItems(
+  params: Record<string, string | string[] | undefined>,
+): Promise<PaymentDisplayItem[]> {
+  const rawIds = params.items;
+  const cartItemIds = (
+    typeof rawIds === 'string' ? rawIds.split(',') : (rawIds ?? [])
+  )
+    .map(Number)
+    .filter((id) => !isNaN(id));
+
+  if (cartItemIds.length === 0) redirect('/cart');
+
+  const cartItems = await getCartItems();
+  const selected = cartItems.filter((c) => cartItemIds.includes(c.cartId));
+
+  if (selected.length === 0) redirect('/cart');
+
+  return selected.map((c) => ({
+    productId: c.productId,
+    productName: c.productName,
+    brandName: c.brandName,
+    thumbnailImageUrl: c.thumbnailImageUrl,
+    selectedSize: c.selectedSize,
+    selectedColor: c.selectedColor,
+    quantity: c.quantity,
+    originalPrice: c.price,
+    price: c.price,
+    totalPrice: c.totalPrice,
+    cartItemId: c.cartId,
+  }));
+}
+
+/** 바로 구매 아이템 조회 */
+export async function fetchDirectOrderItems(
+  params: Record<string, string | string[] | undefined>,
+): Promise<PaymentDisplayItem[]> {
+  const productId = Number(params.productId);
+  if (!productId || isNaN(productId)) notFound();
+
+  let selections: { color: string; size: string; quantity: number }[];
+  try {
+    const raw = Array.isArray(params.selections)
+      ? params.selections[0]
+      : params.selections;
+    selections = JSON.parse(raw || '[]');
+  } catch {
+    notFound();
+  }
+
+  if (selections.length === 0) notFound();
+
+  const product = await getProductDetail(productId);
+
+  return selections.map((sel) => ({
+    productId: product.id,
+    productName: product.name,
+    brandName: product.brandName,
+    thumbnailImageUrl: product.thumbnailImageUrl,
+    selectedSize: sel.size,
+    selectedColor: sel.color,
+    quantity: sel.quantity,
+    originalPrice: product.price,
+    price: product.finalPrice,
+    totalPrice: product.finalPrice * sel.quantity,
+  }));
+}
+
+/** 주문 내역 조회 */
+export async function getOrders(
+  params?: OrderListParams,
+): Promise<OrderListResponse> {
+  try {
+    const response = await api.get<OrderListResponse>('/orders', {
+      params: params as Record<string, string | number | boolean | undefined>,
+    });
+    return response;
+  } catch (error) {
+    console.error('주문 내역 조회 실패:', error);
+    throw new Error(
+      error instanceof Error ? error.message : '주문 내역 조회에 실패했습니다.',
+    );
+  }
+}
+
+/** 주문 상세 조회 */
 export async function getOrderDetail(orderId: number): Promise<OrderDetail> {
   try {
     const orderDetail = await api.get<OrderDetail>(`/orders/${orderId}`);

src/app/actions/product.ts

@@ -0,0 +1,19 @@
+'use server';
+
+import { api } from '@/lib/api-client';
+import type { ProductDetail } from '@/types/domain/product';
+
+/** 상품 상세 조회 */
+export async function getProductDetail(
+  productId: number,
+): Promise<ProductDetail> {
+  try {
+    const product = await api.get<ProductDetail>(`/products/${productId}`);
+    return product;
+  } catch (error) {
+    console.error('상품 상세 조회 실패:', error);
+    throw new Error(
+      error instanceof Error ? error.message : '상품 상세 조회에 실패했습니다.',
+    );
+  }
+}

src/app/actions/user.ts

@@ -0,0 +1,20 @@
+'use server';
+
+import { api } from '@/lib/api-client';
+import type { UserInfoResDto } from '@/types/domain/user';
+
+/** 내 정보 조회 */
+export async function getUserInfo(): Promise<UserInfoResDto> {
+  try {
+    const user = await api.get<UserInfoResDto>('/users/me');
+    if (typeof user.points === 'string') {
+      user.points = Number((user.points as string).replace(/,/g, '')) || 0;
+    }
+    return user;
+  } catch (error) {
+    console.error('유저 정보 조회 실패:', error);
+    throw new Error(
+      error instanceof Error ? error.message : '유저 정보 조회에 실패했습니다.',
+    );
+  }
+}

src/app/payment/_components/constants.ts

@@ -0,0 +1,7 @@
+export const SECTIONS = {
+  ITEMS: 'section-items',
+  SHIPPING: 'section-shipping',
+  PAYMENT: 'section-payment',
+} as const;
+
+export const SECTION_IDS = Object.values(SECTIONS);

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

@@ -0,0 +1,96 @@
+import Image from 'next/image';
+
+export interface PaymentDisplayItem {
+  productId: number;
+  productName: string;
+  brandName: string;
+  thumbnailImageUrl: string;
+  selectedSize: string;
+  selectedColor: string;
+  quantity: number;
+  originalPrice: number; // 정가
+  price: number; // 최종가(판매가)
+  totalPrice: number;
+  cartItemId?: number;
+}
+
+interface Props {
+  items: PaymentDisplayItem[];
+}
+
+export default function OrderItemsSection({ items }: Props) {
+  const originalTotal = items.reduce(
+    (acc, item) => acc + item.originalPrice * item.quantity,
+    0,
+  );
+  const discountTotal = items.reduce(
+    (acc, item) => acc + (item.originalPrice - item.price) * item.quantity,
+    0,
+  );
+  const finalTotal = items.reduce((acc, item) => acc + item.totalPrice, 0);
+  const hasDiscount = discountTotal > 0;
+
+  return (
+    <div className="mt-8 flex flex-col gap-6 px-5">
+      <p className="text-center text-3xl leading-normal font-medium">
+        주문 정보 확인해주세요
+      </p>
+      <ul className="mt-10 space-y-4">
+        {items.map((item, index) => (
+          <li key={`${item.productId}-${index}`} className="flex gap-4">
+            <div className="flex h-full w-full items-center justify-center gap-4 rounded-2xl border border-black p-5">
+              {item.thumbnailImageUrl ? (
+                <Image
+                  src={item.thumbnailImageUrl}
+                  alt={item.productName}
+                  width={110}
+                  height={110}
+                />
+              ) : (
+                <div className="flex h-[110px] w-[110px] items-center justify-center text-xl">
+                  No Image
+                </div>
+              )}
+              <div className="flex flex-col justify-center gap-7 text-xl leading-[18px] font-medium">
+                <span>{item.brandName}</span>
+                <p>{item.productName}</p>
+                <span>
+                  {item.selectedColor} / {item.selectedSize}
+                </span>
+                <span>{item.quantity}개</span>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+      {hasDiscount && (
+        <p className="text-center text-xl leading-normal font-medium text-red-500">
+          최대 할인이 적용 됐어요
+        </p>
+      )}
+
+      <div className="mt-16 flex flex-col justify-center gap-6 text-xl leading-normal font-medium">
+        <div className="flex items-center justify-between">
+          <span>상품 금액</span>
+          <span className="text-2xl leading-[18px]">
+            {originalTotal.toLocaleString()}원
+          </span>
+        </div>
+        {hasDiscount && (
+          <div className="flex items-center justify-between">
+            <span>할인 금액</span>
+            <span className="text-2xl leading-[18px]">
+              {discountTotal.toLocaleString()}원
+            </span>
+          </div>
+        )}
+        <div className="flex items-center justify-between">
+          <span>총 금액</span>
+          <span className="text-3xl leading-[18px]">
+            {finalTotal.toLocaleString()}원
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}