Skip to content

feat: admin order 디자인 수정 완료 #122

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
oriNuguri25 merged 3 commits into from
Jul 20, 2025
Merged

feat: admin order 디자인 수정 완료 #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d71008b
feat: admin order 디자인 수정 완료
oriNuguri25 Jul 19, 2025
f49b673
feat: admin order 페이지 ui, api 연결
oriNuguri25 Jul 20, 2025
d2f99e0
Revert "feat: admin order 페이지 ui, api 연결"
oriNuguri25 Jul 20, 2025
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
23 changes: 14 additions & 9 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 @@ -106,9 +106,13 @@ const AdminOrders = () => {
</div>
</div>

<div className="flex flex-row border border-black-30 rounded-t-2xl px-5 py-2.5 gap-2.5 bg-[#E7ECF0] flex-shrink-0">
<div className="flex text-14-medium text-black-60">테이블</div>
<div className="flex text-14-medium text-black-60">입금 내역</div>
<div className="flex flex-row border border-black-30 rounded-t-2xl pl-5 py-2.5 gap-2.5 bg-[#E7ECF0] flex-shrink-0">
<div className="flex text-14-medium leading-[136%] text-navy-35">
테이블
</div>
<div className="flex text-14-medium leading-[136%] text-navy-35">
입금 내역
</div>
</div>
<div
ref={scrollContainerRef}
Expand Down Expand Up @@ -166,15 +170,16 @@ const AdminOrders = () => {
</div>
</div>

<div className="flex flex-row border border-black-30 rounded-t-2xl px-5 py-2.5 gap-2.5 bg-[#E7ECF0] flex-shrink-0">
<div className="flex text-14-medium text-black-60 flex-[0.6]">
<div className="flex flex-row border border-black-30 rounded-t-2xl bg-[#E7ECF0] gap-2.5 py-2.5 pl-5">
<div className="flex text-14-medium leading-[136%] text-navy-35">
테이블
</div>
<div className="flex text-14-medium text-black-60 flex-[3] gap-1.5">
<div className="flex-[6] text-left">메뉴</div>
<div className="flex-[2] text-center">수량</div>
<div className="flex w-38.5 text-start text-14-medium leading-[136%] text-navy-35">
메뉴
</div>
<div className="flex text-14-medium leading-[136%] text-navy-35">
수량
</div>
<div className="flex text-14-medium text-black-60 flex-[1]"></div>
</div>
<div className="flex flex-col gap-7.5 rounded-b-2xl border border-t-0 border-black-30 flex-1 bg-white px-5.5 py-4 overflow-y-auto min-h-0">
{isLoading ? (
Expand Down
73 changes: 14 additions & 59 deletions 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 @@ -208,87 +208,42 @@ const PaymentDetail = ({
);
};

import { useWindowWidth } from "../../hooks/useWindowWidth";

interface CookCardProps {
tableNumber: number;
menuNamesAndQuantities?: MenuNamesAndQuantities;
}

const CookCard = ({ tableNumber, menuNamesAndQuantities }: CookCardProps) => {
const windowWidth = useWindowWidth();
const menuEntries = menuNamesAndQuantities
? Object.entries(menuNamesAndQuantities)
: [];
const isOneMenu = menuEntries.length === 1;

return (
<div
className={`flex flex-row w-full ${
isOneMenu ? "items-center" : "items-start"
className={`flex flex-row justify-between ${
isOneMenu ? "items-center" : ""
}`}
>
<div
className={`flex flex-[0.6] ${
isOneMenu ? "items-center" : "items-start"
}`}
>
<div className="flex rounded-full bg-navy-50 w-9 h-9 items-center justify-center text-title-18-semibold text-white-100">
<div className="flex flex-row gap-2.5">
<div className="flex bg-[#6C707A] w-9 h-9 items-center justify-center rounded-full text-title-18-semibold text-white-100">
{tableNumber}
</div>
</div>

<div
className={`flex flex-col gap-2.5 flex-[2.5] ${
isOneMenu ? "justify-center" : ""
}`}
>
{menuEntries.map(([menuName, quantity], index) => {
// 화면 크기에 따른 글자 수 제한
const getDisplayText = (text: string) => {
// xl: 전체 표시, lg: 12글자, md: 7글자, sm: 6글자, xs: 4글자
if (windowWidth >= 1280) {
return text; // 전체 화면에서는 모든 글자 표시
} else if (windowWidth >= 1024) {
return text.length > 12 ? `${text.slice(0, 12)}...` : text;
} else if (windowWidth >= 768) {
return text.length > 7 ? `${text.slice(0, 7)}...` : text;
} else if (windowWidth >= 640) {
return text.length > 6 ? `${text.slice(0, 6)}...` : text;
} else {
return text.length > 4 ? `${text.slice(0, 4)}...` : text;
}
};

const isLargeScreen = windowWidth >= 1280;

return (
<div key={index} className="flex flex-row gap-2.5">
<div
className={`text-16-semibold text-left text-black-80 flex-[8] min-w-0 ${
isLargeScreen
? ""
: "truncate overflow-hidden whitespace-nowrap"
}`}
>
{getDisplayText(menuName)}
</div>
<div className="text-16-medium text-black-80 text-center flex-[2] flex-shrink-0">
{quantity}
</div>
<div className="flex flex-col gap-3.5 text-16-semibold text-black-80">
{menuEntries.map(([menuName, quantity], index) => (
<div key={index} className="flex flex-row gap-2.5 justify-between">
<div className="flex w-40 truncate">{menuName}</div>
<div className="flex">{quantity}</div>
</div>
);
})}
))}
</div>
</div>

<div
className={`flex flex-[1] justify-end ${
isOneMenu ? "items-center" : ""
className={`flex rounded-lg bg-black-20 px-2.5 py-1.25 items-center justify-center text-14-semibold text-black-70 ${
isOneMenu ? "" : "self-start"
}`}
>
<div className="flex px-2.5 py-1.25 bg-black-20 rounded-lg text-14-semibold text-black-70 flex-shrink-0 whitespace-nowrap">
조리 완료
</div>
조리 완료
</div>
</div>
);
Expand Down