user - 주문리스트 - 크기 반응성으로 수정

[csm009177]

'use client'

import React, { useState, useEffect } from 'react'; import { decode } from 'js-base64' import { useRouter } from 'next/navigation'

const getUsernameSomehow = () => { const token = localStorage.getItem("token");

if (token) { try { const payload = token.split('.')[1]; const decodedPayload = decode(payload); const payloadObject = JSON.parse(decodedPayload); return payloadObject.username } catch (error) { console.error("Error parsing token:", error); } }

return null; };

// 주문 목록을 나타내는 인터페이스 interface Order { orderKey: number; username: string; productName:string; customer: string; receiver: string; phoneNumber: string; address: string; price: number; quantity:string; adddate:string; }

export function OrderList() { const [orders, setOrders] = useState<Order[]>([]); const router = useRouter();

useEffect(() => { const username = getUsernameSomehow();

if (!username) {
  console.error('사용자명을 찾을 수 없습니다.');
  return;
}

fetch(`/orders?username=${username}`)
.then((response) => {
  if (!response.ok) {
    throw new Error('주문정보 데이터를 가져오는데 실패했습니다.');
  }
  return response.json();
})
.then((data) => {
  setOrders(data);
})
.catch((error) => {
  console.error('Error fetching user cart:', error);
});

}, []);

const moveOrderDetail = (order: Order) => { const { orderKey, productName, customer, receiver, phoneNumber, address, price, quantity } = order; const url = /mypage/orderInfo/orderDetail?orderKey=${orderKey}&productName=${productName}&customer=${customer}&receiver=${receiver}&phoneNumber=${phoneNumber}&address=${address}&price=${price}&quantity=${quantity};

router.push(url);

};

return (

Order List

{orders.map((order) => ( ))}

Username	ProductName	Customer	Receiver	Phone Number	Address	Price	Quantity	AddDate	Actions
{order.username}	{order.productName}	{order.customer}	{order.receiver}	{order.phoneNumber}	{order.address}	{order.price}	{order.quantity}	{order.adddate}	moveOrderDetail(order)} className="text-white bg-blue-500 hover:bg-blue-700 font-medium py-1 px-3 rounded" > 상세정보

); }

export default OrderList;