Merge pull request #36 from Project-Unifest/feature/megaphone

Feature/megaphone

app/megaphone/[id]/page.tsx

@@ -0,0 +1,11 @@
+import { Megaphone } from "@/src/widgets/megaphone/ui/Megaphone/Megaphone";
+import React from "react";
+export default function MegaphonePage({ params }: { params: { id: string } }) {
+  const { id } = params;
+
+  return (
+    <>
+      <Megaphone boothId={Number(id)} />
+    </>
+  );
+}

src/features/megaphone/api/megaphone.ts

@@ -0,0 +1,24 @@
+import {
+  API_URL,
+  HTTPHeaderKey,
+  HTTPHeaderValue,
+  HTTPMethod,
+  getAuthorziationValue,
+} from "@/src/shared/api/config";
+
+export const makeMegaphone = async (
+  accessToken: string,
+  boothId: number,
+  msg: { msgBody: string },
+) => {
+  const response = await fetch(`${API_URL}/booths/${boothId}/announcement`, {
+    method: HTTPMethod.POST,
+    headers: {
+      [`${HTTPHeaderKey.CONTENT_TYPE}`]: HTTPHeaderValue.APPLICATION_JSON,
+      [`${HTTPHeaderKey.AUTHORIZATION}`]: getAuthorziationValue(accessToken),
+    },
+    body: JSON.stringify(msg),
+  });
+  const data = await response.json();
+  return data;
+};

src/widgets/header/ui/Header.tsx

@@ -23,6 +23,10 @@ enum SignInPathSegment {
   SIGN_IN = "sign-in",
 }
 
+enum MegaphonePathSegment {
+  MEGAPHONE = "megaphone",
+}
+
 // TODO change Header on sign-in and sign-on page
 
 export function Header() {
@@ -41,7 +45,11 @@ export function Header() {
     pathname.includes(segment),
   )
     ? "운영자/학생회 로그인"
-    : "운영자모드";
+    : Object.values(MegaphonePathSegment).some((segment) =>
+          pathname.includes(segment),
+        )
+      ? "확성기"
+      : "운영자모드";
 
   const [accessToken, reset] = useAuthStore((state) => [
     state.accessToken,

src/widgets/megaphone/ui/Megaphone/Megaphone.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { BoothItem } from "@/src/entities/booth";
+import { getBoothDetail } from "@/src/entities/booth/api/boothDetail";
+import { DeleteButton } from "@/src/features/booth/ui/DeleteButton";
+import { EditButton } from "@/src/features/booth/ui/EditButton";
+import { SwitchButton } from "@/src/features/booth/ui/SwitchButton";
+import { makeMegaphone } from "@/src/features/megaphone/api/megaphone";
+import { Booth } from "@/src/shared/lib/types";
+import useAuthFetch from "@/src/shared/model/auth/useAuthFetchList";
+import useRequireAuth, {
+  AuthType,
+} from "@/src/shared/model/auth/useRequireAuth";
+import { useAuthStore } from "@/src/shared/model/provider/auth-store-provider";
+import { Button } from "@/src/shared/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/src/shared/ui/form";
+import { Textarea } from "@/src/shared/ui/textarea";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+export function Megaphone({ boothId }: { boothId: number }) {
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const [booth, setBooth] = useState<Booth>();
+  const getAuthBooth = useAuthFetch(() => getBoothDetail(boothId));
+  const isAuthLoading = useRequireAuth(AuthType.MEMBER);
+
+  useEffect(() => {
+    const getBoothListEffect = async () => {
+      const { data } = await getAuthBooth();
+      if (data) {
+        setBooth(data as Booth);
+      }
+    };
+    if (!isAuthLoading) {
+      getBoothListEffect();
+    }
+  }, [isAuthLoading, setBooth]);
+
+  const form = useForm<{ msgBody: string }>({
+    defaultValues: {
+      msgBody: "",
+    },
+  });
+  const router = useRouter();
+  const makeAuthMegaphone = useAuthFetch(makeMegaphone);
+
+  const onSubmit = async (data: any) => {
+    console.log(data);
+    console.log(boothId);
+    await makeAuthMegaphone(boothId, data);
+    router.push("/");
+  };
+
+  if (isAuthLoading) {
+    return (
+      <div className="justify-content flex items-center"> 로딩중입니다.</div>
+    );
+  }
+
+  if (!booth) {
+    return (
+      <div className="flex flex-auto flex-col items-center justify-center">
+        <h2 className="text-lg font-semibold">해당하는 부스 존재하지 않음</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div className="my-4 space-y-2">
+      <BoothItem
+        key={booth.id}
+        {...booth}
+        editButton={<EditButton boothId={booth.id!} />}
+        deleteButton={<DeleteButton boothId={booth.id!} />}
+        switchButton={
+          <SwitchButton boothId={booth.id!} initialOpened={booth.enabled} />
+        }
+      />
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <FormField
+            name="msgBody"
+            control={form.control}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>보낼 내용</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="내용을 입력해주세요"
+                    {...field}
+                    className="h-[300px] resize-none"
+                    maxLength={1000}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button
+            className="mt-[16px] w-full flex-[2] rounded-[10px] bg-pink py-3 text-white hover:bg-pink"
+            type="submit"
+          >
+            발송하기
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}