Skip to content

feat: admin 주문UI 업데이트 #74

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
Jul 1, 2025
Merged

feat: admin 주문UI 업데이트 #74

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
14 changes: 13 additions & 1 deletion apps/nowait-admin/src/layout/AdminLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,22 @@ const AdminLayout = () => {

const isCompact = width < 1024;
const isMobile = width <= 431;

// 사이드바 너비 계산
const getSidebarWidth = () => {
if (isMobile || width <= 768) return 0;
return isCompact ? 60 : 220;
};

return (
<div className="flex [@media(max-width:431px)]:flex-col">
{width <= 431 ? <MobileMenuBar /> : <AdminSidebar />}
<main className="flex bg-[#F2F6F9] min-h-screen py-5 md:px-7.5 w-full">
<main
className={`flex bg-[#F2F6F9] min-h-screen py-5 w-full ${
width <= 431 ? "px-5" : "px-7.5"
}`}
style={{ marginLeft: `${getSidebarWidth()}px` }}
>
<Outlet />
</main>
</div>
Expand Down
27 changes: 19 additions & 8 deletions apps/nowait-admin/src/pages/AdminOrders/AdminOrders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const AdminOrders = () => {
minutesAgo: 20,
status: "cooking", // 조리 중
menus: [
{ name: "매뉴명한줄로떨어져야야야야피피피피", quantity: 1 },
{ name: "메뉴명한줄로떨어져야야야야피피피피", quantity: 1 },
{ name: "된장된장찌개", quantity: 1 },
{ name: "계란후라이", quantity: 1 },
{ name: "달달한 쏘야볶음", quantity: 1 },
Expand Down Expand Up @@ -103,7 +103,7 @@ const AdminOrders = () => {
}`}
onClick={() => setActiveTab("전체")}
>
전체
진행 중
</div>
<div
className={`rounded-full px-4 py-2 cursor-pointer ${
Expand All @@ -113,25 +113,29 @@ const AdminOrders = () => {
}`}
onClick={() => setActiveTab("조리 완료")}
>
조리 완료
완료된 주문 {cookedData.length}
</div>
</div>

<div className="flex icon-m items-center justify-center">
<div className="flex icon-m items-center justify-center cursor-pointer">
<RefreshIcon />
</div>
</div>

{activeTab === "전체" ? (
<div className="flex flex-row mt-7.5 gap-2.5 h-full w-full">
{/* 입금 대기 블럭 */}
<div className="flex flex-1 flex-col gap-3.5">
<div className="flex flex-1 flex-col">
<div className="flex flex-row ml-1.5 gap-1.5">
<div className="text-title-20-bold text-[#363D4A]">입금 대기</div>
<div className="text-title-20-bold text-primary">5</div>
</div>

<div className="flex flex-col gap-7.5 rounded-2xl border border-black-30 h-full bg-white px-6 py-5.5">
<div className="flex flex-row mt-3.5 border border-black-30 rounded-t-2xl px-5 py-2.5 gap-2.5 bg-white">
<div className="flex text-14-medium text-black-60">테이블</div>
<div className="flex text-14-medium text-black-60">입금 내역</div>
</div>
<div className="flex flex-col gap-7.5 rounded-b-2xl border border-t-0 border-black-30 h-full bg-white px-6 py-5.5">
{paymentWaitingData.map((payment) => (
<PaymentCard
key={payment.id}
Expand All @@ -148,13 +152,20 @@ const AdminOrders = () => {
</div>

{/* 조리 중 블럭 */}
<div className="flex flex-1 flex-col gap-3.5">
<div className="flex flex-1 flex-col">
<div className="flex flex-row ml-1.5 gap-1.5">
<div className="text-title-20-bold text-[#363D4A]">조리 중</div>
<div className="text-title-20-bold text-[#363D4A]">3</div>
</div>

<div className="flex flex-col gap-7.5 rounded-2xl border border-black-30 h-full bg-white px-6 py-5.5">
<div className="flex flex-row mt-3.5 border border-black-30 rounded-t-2xl px-5 py-2.5 gap-2.5 bg-white">
<div className="flex text-14-medium text-black-60">테이블</div>
<div className="flex text-14-medium text-black-60 mr-[15ch]">
메뉴
</div>
<div className="flex text-14-medium text-black-60">수량</div>
</div>
<div className="flex flex-col gap-7.5 rounded-b-2xl border border-t-0 border-black-30 h-full bg-white px-6 py-5.5">
{cookingData.map((cooking) => (
<CookCard
key={cooking.id}
Expand Down
2 changes: 1 addition & 1 deletion apps/nowait-admin/src/pages/AdminOrders/OrderCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const CookCard = ({ tableNumber, menus }: CookCardProps) => {
<div className="flex flex-col gap-2.5 ml-2.5">
{menus.map((menu, index) => (
<div key={index} className="flex flex-row justify-between w-full">
<div className="text-16-semibold text-black-80 truncate max-w-[25ch] overflow-hidden whitespace-nowrap">
<div className="text-16-semibold text-black-80 truncate max-w-[15ch] overflow-hidden whitespace-nowrap">
{menu.name}
</div>
<div className="flex text-16-medium text-black-80 ml-4">
Expand Down