merge to main

apps/nowait-admin/src/pages/AdminBooth/components/AccountPage.tsx

@@ -350,7 +350,7 @@ const AccountPage = () => {
                       placeholder={
                         errors[option.id] ? "" : REQUIRED_PREFIX[option.id]
                       }
-                      className={`flex w-full bg-transparent outline-none text-14-regular text-black-90`}
+                      className={`flex-1 w-[calc(100%-4px)] bg-transparent outline-none text-14-regular text-black-90`}
                       readOnly={sources[option.id] === "image"}
                     />
                     {errors[option.id] && (

apps/nowait-user/src/api/order.ts

@@ -31,7 +31,7 @@ export const getOrderDetails = async (
 };
 
 //주점 QR, 계좌번호 조회
-export const getStorePayments = async (storeId: string) => {
+export const getStorePayments = async (storeId: number) => {
   try {
     const res = await api.get<StorePaymentsResponse>(
       `/v1/store-payments/${storeId}`

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

@@ -9,12 +9,12 @@ const BackHeader = ({ title }: PropsType) => {
   const navigate = useNavigate()
   return (
     <header className="w-full fixed left-0 top-0 bg-white">
-      <div className="flex justify-between items-center px-5 py-2.5">
-        <button onClick={()=>navigate(-1)}>
+      <div className="flex justify-between items-center">
+        <button onClick={()=>navigate(-1)} className="p-2.5">
           <Back />
         </button>
         <h1 className="text-title-16-bold">{title}</h1>
-        <div className="w-2.5"></div>
+        <div className="w-[48px] h-[48px]"></div>
       </div>
     </header>
   );

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

@@ -5,11 +5,11 @@ const BackOnlyHeader = () => {
   const navigate = useNavigate();
   return (
     <header className="w-full fixed left-0 top-0 bg-transparent">
-      <div className="flex justify-between items-center px-5 py-2.5">
-        <button onClick={() => navigate(-1)}>
+      <div className="flex justify-between items-center">
+        <button onClick={() => navigate(-1)} className="p-2.5">
           <Back />
         </button>
-        <div className="w-2.5" />
+        <div className="w-[48px] h-[48px]"></div>
       </div>
     </header>
   );

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

@@ -29,7 +29,7 @@ const RemittancePage = () => {
 
   const { data: remittance, isLoading } = useQuery({
     queryKey: ["remittance", storeId],
-    queryFn: () => getStorePayments(storeId!),
+    queryFn: () => getStorePayments(Number(storeId!)),
     enabled: !!storeId,
     select: (data) => data?.response,
   });

apps/nowait-user/src/pages/waiting/bookmark/components/BookmarkListItem.tsx

@@ -57,7 +57,7 @@ const BookmarkListItem = ({
           />
           {waitingCount !== 0 && (
             <p className="absolute top-[12px] right-[12px] text-primary bg-[#ffe9df] px-2 py-[7px] font-bold text-[12px] rounded-[6px]">
-              {waitingCount}
+              대기 {waitingCount}팀
             </p>
           )}
         </Link>

apps/nowait-user/src/pages/waiting/boothMap/components/BoothDetail.tsx

@@ -2,25 +2,44 @@ import { useNavigate } from "react-router-dom";
 import { Button } from "@repo/ui";
 import Clock from "../../../../assets/icon/clock.svg?react";
 import BookmarkIcon from "../../../../components/common/BookmarkIcon";
-import { useState } from "react";
 import { motion } from "framer-motion";
+import { useBookmarkState } from "../../../../hooks/useBookmarkState";
+import { useBookmarkMutation } from "../../../../hooks/mutate/useBookmark";
 
 interface PropsType {
   booth: any | undefined;
 }
 
-
 const BoothDetail = ({ booth }: PropsType) => {
-
   const navigate = useNavigate();
-  const [isBookmarked, setIsBookmarked] = useState(false);
+
   const { storeId, name, departmentName, waitingCount } = booth;
 
+  const { createBookmarkMutate, deleteBookmarkMutate } = useBookmarkMutation(
+    {
+      withInvalidate: true,
+    },
+    Number(storeId)
+  );
+  const { isBookmarked } = useBookmarkState(Number(storeId));
+
+  const handleBookmarkButton = async () => {
+    try {
+      if (isBookmarked) {
+        await deleteBookmarkMutate.mutate();
+      } else {
+        await createBookmarkMutate.mutate();
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 100 }}
-      animate={{ opacity: 1,y: 0 }}
-      exit={{ opacity: 0,y: 100 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 100 }}
       transition={{ duration: 0.3, ease: "easeInOut" }}
       className="fixed bottom-[30px] left-1/2 -translate-x-1/2 w-[calc(100%-32px)] bg-white rounded-[20px] z-30"
     >
@@ -32,10 +51,7 @@ const BoothDetail = ({ booth }: PropsType) => {
             </h1>
             <h2 className="text-16-regular">{departmentName}</h2>
           </div>
-          <button
-            className="mr-[5px]"
-            onClick={() => setIsBookmarked(!isBookmarked)}
-          >
+          <button className="mr-[5px]" onClick={handleBookmarkButton}>
             <BookmarkIcon isBookmarked={isBookmarked} />
           </button>
         </div>

apps/nowait-user/src/pages/waiting/boothMap/components/BoothListItem.tsx

@@ -53,7 +53,7 @@ const BoothListItem = ({
           />
           {waitingCount !== 0 && (
             <p className="absolute top-[12px] right-[12px] text-primary bg-[#ffe9df] px-2 py-[7px] font-bold text-[12px] rounded-[6px]">
-              {waitingCount}
+              대기 {waitingCount}팀
             </p>
           )}
         </div>

apps/nowait-user/src/types/order/order.ts

@@ -46,7 +46,7 @@ export interface StorePaymentsResponse {
   success: boolean;
   response: {
     paymentMethodId: number;
-    storeId: string;
+    storeId: number;
     tossUrl?: string;
     kakaoPayUrl?: string;
     naverPayUrl?: string;

packages/tailwind-config/shared-styles.css

@@ -139,7 +139,7 @@ pre {
   .text-headline-24-bold {
     font-size: 24px;
     line-height: 136%;
-    letter-spacing: -0.01em;
+    letter-spacing: 0;
     font-weight: 700;
   }