Skip to content

feat: admin order부분 api 수정 및 ui 수정 완료 #201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dgKim1 merged 1 commit into from
Aug 8, 2025
Merged

feat: admin order부분 api 수정 및 ui 수정 완료 #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 53 additions & 16 deletions apps/nowait-admin/src/pages/AdminOrders/AdminOrders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useState, useRef } from "react";
import { PaymentCard, PaymentDetail, CookCard, CookedCard } from "./OrderCard";
import { useState, useRef, useEffect } from "react";
import { PaymentCard, CookCard, CookedCard } from "./OrderCard";
import { DetailCard } from "./DetailCard";
import RefreshIcon from "../../assets/refresh.svg?react";
import CookedPage from "./CookedPage";
import { useGetOrderList } from "../../hooks/useGetOrderList";
Expand Down Expand Up @@ -62,6 +63,22 @@ const AdminOrders = () => {
}, 0);
};

// CookedCard 클릭 핸들러
const handleCookedCardClick = (cooked: Order) => {
if (scrollContainerRef.current) {
// 현재 스크롤 위치 저장
setSavedScrollPosition(scrollContainerRef.current.scrollTop);
// 스크롤을 맨 위로 올리기
scrollContainerRef.current.scrollTop = 0;
}
setSelectedPayment(cooked);
};

// 탭 변경 시 Detail 닫기
useEffect(() => {
setSelectedPayment(null);
}, [activeTab, mobileActiveTab]);

return (
<div
className="w-full md:w-[752px] max-w-[804px] flex flex-col items-center mx-auto overflow-hidden"
Expand Down Expand Up @@ -202,17 +219,16 @@ const AdminOrders = () => {
</div>
)}

{/* PaymentDetail 오버레이 */}
{/* DetailCard 오버레이 */}
{selectedPayment && (
<PaymentDetail
<DetailCard
type="payment"
orderId={selectedPayment.id}
tableNumber={selectedPayment.tableId}
timeText={getFormattedTime(selectedPayment.createdAt)}
depositorName={selectedPayment.depositorName}
totalAmount={selectedPayment.totalPrice || 0}
menuNamesAndQuantities={
selectedPayment.menuNamesAndQuantities
}
menuDetails={selectedPayment.menuDetails}
onClose={handleClosePaymentDetail}
onSuccess={refetch}
/>
Expand Down Expand Up @@ -251,7 +267,7 @@ const AdminOrders = () => {
key={cooking.id}
orderId={cooking.id}
tableNumber={cooking.tableId}
menuNamesAndQuantities={cooking.menuNamesAndQuantities}
menuDetails={cooking.menuDetails}
onSuccess={refetch}
/>
))
Expand Down Expand Up @@ -326,17 +342,16 @@ const AdminOrders = () => {
</div>
)}

{/* PaymentDetail 오버레이 */}
{/* DetailCard 오버레이 */}
{selectedPayment && (
<PaymentDetail
<DetailCard
type="payment"
orderId={selectedPayment.id}
tableNumber={selectedPayment.tableId}
timeText={getFormattedTime(selectedPayment.createdAt)}
depositorName={selectedPayment.depositorName}
totalAmount={selectedPayment.totalPrice || 0}
menuNamesAndQuantities={
selectedPayment.menuNamesAndQuantities
}
menuDetails={selectedPayment.menuDetails}
onClose={handleClosePaymentDetail}
onSuccess={refetch}
/>
Expand Down Expand Up @@ -367,7 +382,7 @@ const AdminOrders = () => {
key={cooking.id}
orderId={cooking.id}
tableNumber={cooking.tableId}
menuNamesAndQuantities={cooking.menuNamesAndQuantities}
menuDetails={cooking.menuDetails}
onSuccess={refetch}
/>
))
Expand All @@ -391,7 +406,13 @@ const AdminOrders = () => {
<div className="flex max-[376px]:w-20 w-29">금액</div>
<div className="flex">주문 시간</div>
</div>
<div className="flex flex-col bg-white rounded-b-2xl border-t-0 border-black-25 border flex-1 min-h-0 overflow-y-auto">
<div
className={`flex flex-col bg-white rounded-b-2xl border-t-0 border-black-25 border flex-1 min-h-0 relative ${
selectedPayment && mobileActiveTab === "조리 완료"
? "overflow-hidden"
: "overflow-y-auto"
}`}
>
{isLoading ? (
<div className="flex flex-col items-center justify-center h-full text-center px-5 py-4">
<div className="text-16-medium text-black-60">
Expand All @@ -405,10 +426,11 @@ const AdminOrders = () => {
orderId={cooked.id}
tableNumber={cooked.tableId}
depositorName={cooked.depositorName}
menuNamesAndQuantities={cooked.menuNamesAndQuantities}
menuDetails={cooked.menuDetails}
totalAmount={cooked.totalPrice || 0}
createdAt={getFormattedTime(cooked.createdAt)}
onSuccess={refetch}
onClick={() => handleCookedCardClick(cooked)}
/>
))
) : (
Expand All @@ -420,6 +442,21 @@ const AdminOrders = () => {
</div>
</div>
)}

{/* DetailCard 오버레이 */}
{selectedPayment && mobileActiveTab === "조리 완료" && (
<DetailCard
type="cooked"
orderId={selectedPayment.id}
tableNumber={selectedPayment.tableId}
timeText={getFormattedTime(selectedPayment.createdAt)}
depositorName={selectedPayment.depositorName}
totalAmount={selectedPayment.totalPrice || 0}
menuDetails={selectedPayment.menuDetails}
onClose={handleClosePaymentDetail}
onSuccess={refetch}
/>
)}
</div>
</div>
)}
Expand Down
54 changes: 51 additions & 3 deletions apps/nowait-admin/src/pages/AdminOrders/CookedPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { CookedCard } from "./OrderCard";
import { DetailCard } from "./DetailCard";
import type { Order } from "../../types/order";
import { useState, useRef } from "react";

interface CookedPageProps {
cookedOrders: Order[];
Expand All @@ -14,6 +16,9 @@ const CookedPage = ({
error,
onRefresh,
}: CookedPageProps) => {
const [selectedCooked, setSelectedCooked] = useState<Order | null>(null);
const [savedScrollPosition, setSavedScrollPosition] = useState<number>(0);
const scrollContainerRef = useRef<HTMLDivElement>(null);
// 시간 포맷팅 함수 (17:30 형식)
const getFormattedTime = (createdAt: string) => {
const date = new Date(createdAt);
Expand All @@ -22,8 +27,30 @@ const CookedPage = ({
return `${hours}:${minutes}`;
};

// CookedCard 클릭 핸들러
const handleCookedCardClick = (cooked: Order) => {
if (scrollContainerRef.current) {
// 현재 스크롤 위치 저장
setSavedScrollPosition(scrollContainerRef.current.scrollTop);
// 스크롤을 맨 위로 올리기
scrollContainerRef.current.scrollTop = 0;
}
setSelectedCooked(cooked);
};

// CookedDetail 닫기 핸들러
const handleCloseCookedDetail = () => {
setSelectedCooked(null);
// 약간의 딜레이 후 스크롤 위치 복원
setTimeout(() => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollTop = savedScrollPosition;
}
}, 0);
};

return (
<div className="flex flex-row gap-2.5 flex-1 min-h-0 overflow-hidden">
<div className="flex flex-row w-full gap-2.5 flex-1 min-h-0 overflow-hidden">
{/* 조리 완료 블럭 */}
<div className="flex flex-1 flex-col min-w-0 overflow-hidden">
<div className="flex flex-row ml-1.5 gap-1.5 flex-shrink-0 mb-3">
Expand Down Expand Up @@ -55,7 +82,12 @@ const CookedPage = ({
</div>

{/* 스크롤 가능한 내용 영역 */}
<div className="flex-1 overflow-y-auto min-h-0">
<div
ref={scrollContainerRef}
className={`flex-1 min-h-0 relative ${
selectedCooked ? "overflow-hidden" : "overflow-y-auto"
}`}
>
{isLoading ? (
<div className="flex flex-col items-center justify-center h-full py-20 text-center">
<div className="text-16-medium text-black-60">로딩 중...</div>
Expand All @@ -67,10 +99,11 @@ const CookedPage = ({
orderId={order.id}
tableNumber={order.tableId}
depositorName={order.depositorName}
menuNamesAndQuantities={order.menuNamesAndQuantities}
menuDetails={order.menuDetails}
totalAmount={order.totalPrice || 0}
createdAt={getFormattedTime(order.createdAt)}
onSuccess={onRefresh}
onClick={() => handleCookedCardClick(order)}
/>
))
) : (
Expand All @@ -82,6 +115,21 @@ const CookedPage = ({
</div>
</div>
)}

{/* DetailCard 오버레이 */}
{selectedCooked && (
<DetailCard
type="cooked"
orderId={selectedCooked.id}
tableNumber={selectedCooked.tableId}
timeText={getFormattedTime(selectedCooked.createdAt)}
depositorName={selectedCooked.depositorName}
totalAmount={selectedCooked.totalPrice || 0}
menuDetails={selectedCooked.menuDetails}
onClose={handleCloseCookedDetail}
onSuccess={onRefresh}
/>
)}
</div>
</div>
</div>
Expand Down
Loading