feat: toggle booth opened state

src/features/booth/api/booth.ts

@@ -34,3 +34,20 @@ export const editBooth = async (
  const data = await response.json();
  return data;
 };
+
+export const updateBoothOpened = async (
+ accessToken: string,
+ boothId: number,
+ opened: boolean,
+) => {
+ const response = await fetch(`${API_URL}/api/booths/${boothId}`, {
+ method: HTTPMethod.PATCH,
+ headers: {
+ [`${HTTPHeaderKey.CONTENT_TYPE}`]: HTTPHeaderValue.APPLICATION_JSON,
+ [`${HTTPHeaderKey.AUTHORIZATION}`]: getAuthorziationValue(accessToken),
+ },
+ body: JSON.stringify({ enabled: opened }),
+ });
+ const data = await response.json();
+ return data;
+};

src/features/booth/ui/SwitchButton.tsx

@@ -1,21 +1,31 @@
 "use client";
 
+import useAuthFetch from "@/src/shared/model/auth/useAuthFetchList";
 import { Label } from "@/src/shared/ui/label";
 import { Switch } from "@/src/shared/ui/switch";
 import React, { useState } from "react";
+import { updateBoothOpened } from "../api/booth";
 
-export function SwitchButton() {
- const [isOpened, setIsOpened] = useState<boolean>(false);
+export function SwitchButton({
+ boothId,
+ initialOpened,
+}: Readonly<{ boothId: number; initialOpened?: boolean }>) {
+ const [opened, setIsOpened] = useState<boolean>(false);
+
+ const updateAuthBoothOpened = useAuthFetch(updateBoothOpened);
+
+ const toggleBoothOpened = async () => {
+ await updateAuthBoothOpened(boothId, !opened);
+ setIsOpened((currentOpened) => !currentOpened);
+ };
 
  return (
  <div className="flex items-center space-x-2">
  <Label htmlFor="booth-mode">영업</Label>
  <Switch
  id="booth-mode"
- checked={isOpened}
- onCheckedChange={() =>
- setIsOpened((currentIsOpened) => !currentIsOpened)
- }
+ checked={opened}
+ onCheckedChange={toggleBoothOpened}
  />
  </div>
  );

src/widgets/boothList/ui/BoothList.tsx

@@ -68,7 +68,7 @@ export function BoothList() {
  {...booth}
  editButton={<EditButton boothId={booth.id!} />}
  deleteButton={<DeleteButton boothId={booth.id!} />}
- switchButton={<SwitchButton />}
+ switchButton={<SwitchButton boothId={booth.id!} />}
  />
  ))}
  </div>