Merge pull request #512 from GTable/fix/user/order

feat: 주문 페이지 UI 수정

Author: hwangdae

apps/nowait-user/src/components/BackHeader.tsx

@@ -8,7 +8,7 @@ interface PropsType {
 const BackHeader = ({ title }: PropsType) => {
   const navigate = useNavigate()
   return (
-    <header className="w-full sticky left-0 top-0 bg-white z-40">
+    <header className="w-full fixed left-0 top-0 bg-white z-40">
       <div className="flex justify-between items-center">
         <button onClick={()=>navigate(-1)} className="p-2.5">
           <Back />

apps/nowait-user/src/components/common/MenuItem.tsx

@@ -32,7 +32,7 @@ const MenuItem = ({ data, mode }: PropsType) => {
               {data.name}
             </h2>
             {data.isSoldOut && (
-              <span className="text-[12px] font-bold text-primary bg-[#FFF0EB] rounded-[6px] px-2 py-1.5 align-middle">
+              <span className="text-[12px] font-bold text-primary bg-[#FFF0EB] rounded-[6px] px-2 py-1.5 align-middle break-keep">
                 품절
               </span>
             )}

apps/nowait-user/src/components/common/MenuList.tsx

@@ -12,7 +12,7 @@ const MenuList = ({
 }) => {
 
   return (
-    <div className="pt-[30px] pb-[10px]">
+    <div className="pt-[30px] pb-[14px]">
       <h1 className="text-title-20-semibold mb-3">메뉴</h1>
       <ul>
         {!isLoading ? (

apps/nowait-user/src/pages/order/home/StorePage.tsx

@@ -38,7 +38,7 @@ const StorePage = () => {
   console.log(menus, "asd");
   return (
     <div>
-      <div className="flex flex-col flex-grow min-h-dvh pt-7.5 px-5">
+      <div className={`flex flex-col flex-grow min-h-dvh pt-7.5 ${cart && cart.length > 0 ? "pb-[116px]" : ""} px-5`}>
         <div className="flex-grow">
           <StoreHeader storeName={menus?.storeName} isLoading={isLoading} />
           <SectionDivider />

apps/nowait-user/src/pages/order/orderList/OrderListPage.tsx

@@ -62,11 +62,11 @@ const OrderListPage = () => {
   return (
     <div>
       <BackHeader title="장바구니" />
-      <section className="flex flex-col flex-grow min-h-[calc(100dvh-164px)] pt-7 px-5">
+      <section className="flex flex-col flex-grow min-h-[calc(100dvh-164px)] pt-7 px-5 mt-[48px]">
         <h1 className="text-headline-22-bold mb-5">
           주문 총 <span className="text-primary">{cart.length}건</span>
         </h1>
-        <motion.ul className="flex justify-center flex-col" layout>
+        <motion.ul className="flex justify-center flex-col mb-[116px]" layout>
           <AnimatePresence mode="sync">
             {cart.map((item) => {
               return (

apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx

@@ -72,7 +72,7 @@ const RemittancePage = () => {
   };
   console.log(remittance);
   return (
-    <div className="flex flex-col flex-grow">
+    <div className="flex flex-col flex-grow mt-[48px] mb-[116px]">
       <BackHeader title="주문하기" />
       <section className="px-5">
         <OrderSummary cart={cart} />