= ({
테이블 관리
{storeName && (
-
- · {storeName}
-
+ · {storeName}
)}
@@ -621,9 +558,7 @@ const TableDashboard: React.FC = ({
{breakTimes.length > 0 && (
-
- 브레이크 타임 목록
-
+
브레이크 타임 목록
{breakTimes.map((bt, idx) => (
@@ -636,11 +571,7 @@ const TableDashboard: React.FC
= ({
{bt.start} ~ {bt.end}
-
- 📅 총 테이블 수
-
+
📅 총 테이블 수
{config.columns * config.rows}개
@@ -694,46 +623,50 @@ const TableDashboard: React.FC
= ({
gridTemplateColumns: `repeat(${config.columns}, minmax(150px, 1fr))`,
}}
>
- {Array.from({ length: config.columns * config.rows }).map(
- (_, i: number) => {
- const id = i + 1;
- const table = getTableData(id);
- const style = getTableStyle(table.maxCapacity);
-
- const extraStyle = table.isSaved
- ? ""
- : "opacity-50 border-dashed";
-
- return (
- {
- if (!table.isSaved) return;
- if (!table.isEditingCapacity) {
- setSelectedTable(id);
- }
- }}
- className={`border-2 ${style.border} ${extraStyle} rounded-lg p-4 ${style.bg} flex flex-col items-center cursor-pointer ${style.hover} transition-all relative group aspect-square justify-center w-36 md:w-40`}
- >
-
- {table.isEditingCapacity ? (
-
인원 설정
- ) : table.isEditingNum ? (
-
e.stopPropagation()}
- >
-
- updateTable(id, {
- numValue: Number(e.target.value),
- })
+ {Array.from({ length: config.columns * config.rows }).map((_, i: number) => {
+ const id = i + 1;
+ const table = getTableData(id);
+ const style = getTableStyle(table.maxCapacity);
+
+ const extraStyle = table.isSaved ? "" : "opacity-50 border-dashed";
+
+ return (
+
{
+ if (!table.isSaved) return;
+ if (!table.isEditingCapacity) {
+ setSelectedTable(id);
+ }
+ }}
+ className={`border-2 ${style.border} ${extraStyle} rounded-lg p-4 ${style.bg} flex flex-col items-center cursor-pointer ${style.hover} transition-all relative group aspect-square justify-center w-36 md:w-40`}
+ >
+
+ {table.isEditingCapacity ? (
+
인원 설정
+ ) : table.isEditingNum ? (
+
e.stopPropagation()}>
+
+ updateTable(id, {
+ numValue: Number(e.target.value),
+ })
+ }
+ onBlur={() => {
+ updateTable(id, { isEditingNum: false });
+ const tableId = getTableData(id).tableId;
+ if (tableId > 0) {
+ handlePatchTableInfo(tableId, {
+ tableNumber: table.numValue,
+ });
}
- onBlur={() => {
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
updateTable(id, { isEditingNum: false });
const tableId = getTableData(id).tableId;
if (tableId > 0) {
@@ -741,177 +674,153 @@ const TableDashboard: React.FC
= ({
tableNumber: table.numValue,
});
}
- }}
- onKeyDown={(e) => {
- if (e.key === "Enter") {
- updateTable(id, { isEditingNum: false });
- const tableId = getTableData(id).tableId;
- if (tableId > 0) {
- handlePatchTableInfo(tableId, {
- tableNumber: table.numValue,
- });
- }
- }
- }}
- />
- 번
-
- ) : (
- <>
- {table.numValue}번 테이블
+ }
+ }}
+ />
+
번
+
+ ) : (
+ <>
+ {table.numValue}번 테이블
+
+
+
+ )}
+
-
- {table.isEditingCapacity ? (
-
e.stopPropagation()}
- >
-
-
-
- {table.minCapacity}
-
-
-
-
-
-
-
- ~
-
-
-
+
+ {table.isEditingCapacity ? (
+
e.stopPropagation()}
+ >
+
+
+
{table.minCapacity}
+
+
+
-
-
-
- ) : (
- <>
-
{
- e.stopPropagation();
- startEditingCapacity(id);
- }}
- className={`${style.badge} text-white px-2 py-2 rounded-sm text-xs shadow-md min-w-15 text-center transition-transform active:scale-95`}
+
+
-
- {SEATS_TYPE_LABEL[table.seatsType]}
-
-
- )}
-
+
+
+
+
+
+ ) : (
+ <>
+
{
+ e.stopPropagation();
+ startEditingCapacity(id);
+ }}
+ className={`${style.badge} text-white px-2 py-2 rounded-sm text-xs shadow-md min-w-15 text-center transition-transform active:scale-95`}
+ >
+ {table.minCapacity}~{table.maxCapacity}인
+
+
+ {SEATS_TYPE_LABEL[table.seatsType]}
+
+
+ )}
- );
- },
- )}
+
+ );
+ })}
-
+
- Tip: 테이블을 클릭하면 상세 정보를 확인하고 예약 시간대를
- 관리할 수 있습니다.
+ Tip: 테이블을 클릭하면 상세 정보를 확인하고 예약 시간대를 관리할 수 있습니다.
-
소형
- (4인 이하)
+
소형 (4인 이하)
-
중형
- (5~8인)
+
중형 (5~8인)
-
단체석
- (9인 이상)
+
단체석 (9인 이상)
@@ -921,12 +830,8 @@ const TableDashboard: React.FC
= ({
-
- 등록된 테이블이 없습니다
-
-
- 테이블을 생성하여 가게 관리를 시작하세요
-
+ 등록된 테이블이 없습니다
+ 테이블을 생성하여 가게 관리를 시작하세요
@@ -509,11 +480,7 @@ const TableDetailModal: React.FC
= ({
{previewUrl && (
-
+
@@ -593,9 +557,7 @@ const TableDetailModal: React.FC
= ({
테이블 유형
-
- {SEATS_TYPE_LABEL[tableInfo.seatsType]}
-
+
{SEATS_TYPE_LABEL[tableInfo.seatsType]}
@@ -609,9 +571,7 @@ const TableDetailModal: React.FC = ({
-
- 예약 가능한 시간대
-
+
예약 가능한 시간대
{slots.filter((s) => s.isAvailable).length}개 예약 가능
@@ -620,18 +580,14 @@ const TableDetailModal: React.FC
= ({
-
- 테이블 타입 및 좌석 정보
-
+
테이블 타입 및 좌석 정보
🎉
-
+
{tableTypeStyle[tableType].label}
@@ -674,10 +630,7 @@ const TableDetailModal: React.FC
= ({
{["일", "월", "화", "수", "목", "금", "토"].map((d) => (
-
+
{d}
))}
@@ -691,15 +644,7 @@ const TableDetailModal: React.FC = ({
const isTodayFlag = dateObj.getTime() === today.getTime();
const weekDay = dateObj.getDay();
- const weekDayKorean = [
- "일",
- "월",
- "화",
- "수",
- "목",
- "금",
- "토",
- ][weekDay];
+ const weekDayKorean = ["일", "월", "화", "수", "목", "금", "토"][weekDay];
const isClosedDay = closedDays.includes(weekDayKorean);
@@ -722,16 +667,8 @@ const TableDetailModal: React.FC = ({
}`}
>
{day}
- {isTodayFlag && (
-
- 오늘
-
- )}
- {isClosedDay && (
-
- 휴무
-
- )}
+ {isTodayFlag && 오늘}
+ {isClosedDay && 휴무}
);
})}
@@ -743,9 +680,7 @@ const TableDetailModal: React.FC = ({
날짜를 선택하여 예약 시간대를 관리하세요
-
- 과거 날짜는 선택할 수 없습니다
-
+ 과거 날짜는 선택할 수 없습니다
@@ -759,9 +694,7 @@ const TableDetailModal: React.FC
= ({
)}
- {error && (
- {error}
- )}
+ {error && {error}
}
{showBookingDetail && (
@@ -776,15 +709,10 @@ const TableDetailModal: React.FC
= ({
예약자:{" "}
-
- {bookingDetail.bookerName}
-
+ {bookingDetail.bookerName}
- 인원:{" "}
-
- {bookingDetail.partySize}명
-
+ 인원: {bookingDetail.partySize}명
결제된 예약금:{" "}
@@ -794,9 +722,7 @@ const TableDetailModal: React.FC = ({
) : (
-
- 상세 정보가 없습니다.
-
+ 상세 정보가 없습니다.
)}
diff --git a/src/components/reservation/modals/PaymentModal.tsx b/src/components/reservation/modals/PaymentModal.tsx
index 3d9934c..d8e9276 100644
--- a/src/components/reservation/modals/PaymentModal.tsx
+++ b/src/components/reservation/modals/PaymentModal.tsx
@@ -1,21 +1,23 @@
-import type { ReservationDraft } from "@/types/restaurant";
-import type { RestaurantDetail } from "@/types/store";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { formatKrw } from "@/utils/money";
-import { Button } from "../../ui/button";
-import { X } from "lucide-react";
-import { useMenus } from "@/hooks/reservation/useMenus";
-import { useDepositRate } from "@/hooks/reservation/useDepositRate";
-import { calcMenuTotal } from "@/utils/menu";
-import { useConfirmClose } from "@/hooks/common/useConfirmClose";
-import type { CreateBookingResult } from "@/api/endpoints/reservations";
-import { requestPayment } from "@/api/endpoints/payments";
import { loadTossPayments } from "@tosspayments/tosspayments-sdk";
+import { X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
-import { useUserId } from "@/stores/useAuthStore";
+
+import { requestPayment } from "@/api/endpoints/payments";
+import type { CreateBookingResult } from "@/api/endpoints/reservations";
+import { useConfirmClose } from "@/hooks/common/useConfirmClose";
import { useModalPresence } from "@/hooks/common/useModalPresence";
+import { useDepositRate } from "@/hooks/reservation/useDepositRate";
+import { useMenus } from "@/hooks/reservation/useMenus";
import { cn } from "@/lib/utils";
+import { useUserId } from "@/stores/useAuthStore";
+import type { ReservationDraft } from "@/types/restaurant";
+import type { RestaurantDetail } from "@/types/store";
+import { calcMenuTotal } from "@/utils/menu";
import { backdropMotionClass, panelMotionClass } from "@/utils/modalMotion";
+import { formatKrw } from "@/utils/money";
+
+import { Button } from "../../ui/button";
type Props = {
open: boolean;
@@ -29,13 +31,9 @@ type Props = {
type TossPaymentsInstance = Awaited
>;
type TossWidgetsInstance = ReturnType;
-type PaymentMethodWidgetInstance = Awaited<
- ReturnType
->;
+type PaymentMethodWidgetInstance = Awaited>;
-type AgreementWidgetInstance = Awaited<
- ReturnType
->;
+type AgreementWidgetInstance = Awaited>;
export default function PaymentModal({
open,
@@ -56,11 +54,7 @@ export default function PaymentModal({
return calcMenuTotal(menus, draft.selectedMenus);
}, [menus, draft.selectedMenus]);
- const amount = booking?.totalDeposit ?? 0;
-
- const paymentMethodWidgetRef = useRef(
- null,
- );
+ const paymentMethodWidgetRef = useRef(null);
const agreementWidgetRef = useRef(null);
const widgetsRef = useRef(null);
@@ -78,9 +72,8 @@ export default function PaymentModal({
const handleRequestClose = useConfirmClose(onClose);
const userId = useUserId();
- const [_payAmount, setPayAmount] = useState(
- booking?.totalDeposit ?? 0,
- );
+ const [payAmount, setPayAmount] = useState(booking?.totalDeposit ?? 0);
+ const amount = payAmount;
useEffect(() => {
setPayAmount(booking?.totalDeposit ?? 0);
}, [booking?.totalDeposit]);
@@ -102,9 +95,7 @@ export default function PaymentModal({
if (agreementContainer) {
agreementContainer.innerHTML = "";
}
- const clientKey = import.meta.env.VITE_TOSS_CLIENT_KEY as
- | string
- | undefined;
+ const clientKey = import.meta.env.VITE_TOSS_CLIENT_KEY as string | undefined;
if (!clientKey) throw new Error("VITE_TOSS_CLIENT_KEY가 없습니다.");
if (!userId) {
throw new Error("로그인 정보가 없어 결제를 진행할 수 없습니다.");
@@ -242,9 +233,7 @@ export default function PaymentModal({
결제 금액
-
- {formatKrw(amount)}원
-
+
{formatKrw(amount)}원
메뉴 총액 {formatKrw(menuTotal)}원 * {Math.round(rate * 100)}%
diff --git a/src/components/reservation/modals/ReservationCompleteModal.tsx b/src/components/reservation/modals/ReservationCompleteModal.tsx
index 5090491..f62522a 100644
--- a/src/components/reservation/modals/ReservationCompleteModal.tsx
+++ b/src/components/reservation/modals/ReservationCompleteModal.tsx
@@ -1,3 +1,6 @@
+import { CircleCheck } from "lucide-react";
+import { useEffect } from "react";
+
import { useModalPresence } from "@/hooks/common/useModalPresence";
import { cn } from "@/lib/utils";
import type { ReservationDraft } from "@/types/restaurant";
@@ -5,8 +8,6 @@ import type { RestaurantDetail } from "@/types/store";
import { toYmd } from "@/utils/date";
import { backdropMotionClass, panelMotionClass } from "@/utils/modalMotion";
import { toHHmm } from "@/utils/time";
-import { CircleCheck } from "lucide-react";
-import { useEffect } from "react";
type Props = {
open: boolean;
diff --git a/src/components/reservation/modals/ReservationConfirmModal.tsx b/src/components/reservation/modals/ReservationConfirmModal.tsx
index f08aabf..14610cc 100644
--- a/src/components/reservation/modals/ReservationConfirmModal.tsx
+++ b/src/components/reservation/modals/ReservationConfirmModal.tsx
@@ -1,3 +1,5 @@
+import { X } from "lucide-react";
+
import type { CreateBookingResult } from "@/api/endpoints/reservations.ts";
import { useConfirmClose } from "@/hooks/common/useConfirmClose";
import { useModalPresence } from "@/hooks/common/useModalPresence";
@@ -15,7 +17,6 @@ import { backdropMotionClass, panelMotionClass } from "@/utils/modalMotion";
import { formatKrw } from "@/utils/money";
import { calcDeposit } from "@/utils/payment";
import { tablePrefLabel } from "@/utils/reservation";
-import { X } from "lucide-react";
type Props = {
open: boolean;
@@ -164,8 +165,7 @@ export default function ReservationConfirmModal({
결제 유형
사전 결제
- 예약금:{" "}
- {isCalculating ? "계산중 .." : `${formatKrw(depositAmount)}원`}
+ 예약금: {isCalculating ? "계산 중 .." : `${formatKrw(depositAmount)}원`}
예약 확정을 위해 예약금 결제가 필요합니다.(노쇼 방지 목적)
@@ -174,9 +174,7 @@ export default function ReservationConfirmModal({
예약 취소시 예약금은 환불이 어렵습니다.
-
- 위 내용으로 예약을 진행할까요?
-
+ 위 내용으로 예약을 진행할까요?
{restaurant.name} 메뉴선택
- 원하시는 메뉴를 미리 선택할 수 있어요. 메뉴당 최대수량은
- 20개입니다.
+ 원하시는 메뉴를 미리 선택할 수 있어요. 메뉴당 최대수량은 20개입니다.
+ 
+