add : 버그 제보

add : 버그 제보

src/api/bug/index.ts

@@ -0,0 +1,40 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { instance } from "..";
+
+interface BugProp {
+  title: string;
+  content: string;
+  file_name: string;
+}
+
+export const BugPost = () => {
+  return useMutation<void, Error, BugProp>({
+    mutationFn: async (param) => {
+      try {
+        await instance.post(`/bug/message`, {
+          title: param.title,
+          content: param.content,
+          file_name: param.file_name,
+        });
+      } catch (error) {
+        console.log("오류");
+      }
+    },
+  });
+};
+
+export const BugImg = () => {
+  return useMutation<string, Error, { file: File }>({
+    mutationFn: async (param) => {
+      try {
+        const formData = new FormData();
+        formData.append("file", param.file);
+        const result = await instance.post(`/bug/upload`, formData);
+        return result.data;
+      } catch (error) {
+        console.log(error);
+        throw new Error("파일 업로드 중에 오류가 발생했습니다.");
+      }
+    },
+  });
+};

src/app/BugReport/page.tsx

@@ -0,0 +1,106 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import Header from "@/components/header";
+import Input from "@/components/input";
+import TextArea from "@/components/input/textarea";
+import Button from "@/components/button";
+import { BugPost, BugImg } from "@/api/bug/index";
+
+interface bugProp {
+  title: string;
+  content: string;
+  file_name: string;
+}
+
+const BugReport = () => {
+  const { mutate: BugPostMutate } = BugPost();
+  const { mutate: BugImgMutate } = BugImg();
+  const [data, setData] = useState<bugProp>({
+    title: "",
+    content: "",
+    file_name: "",
+  });
+  const [fileName, setFileName] = useState<string>();
+
+  const handleContent = ({ text, name }: { text: string; name: string }) => {
+    setData({ ...data, [name]: text });
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.currentTarget.files?.[0];
+    if (selectedFile) {
+      try {
+        await BugImgMutate(
+          { file: selectedFile },
+          {
+            onSuccess: (data) => {
+              setFileName(data);
+            },
+            onError: (error) => {
+              alert(error.message);
+            },
+          }
+        );
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  };
+
+  const Bug = async () => {
+    await BugPostMutate(data, {
+      onSuccess: () => {
+        alert("버그가 제보되었습니다.");
+        setData({
+          title: "",
+          content: "",
+          file_name: fileName ? fileName : "",
+        });
+      },
+      onError: () => {
+        console.log("에러가 발생했습니다.");
+      },
+    });
+  };
+
+  return (
+    <>
+      <Header />
+      <div className="flex flex-col bg-primary-1200 px-6 py-3 gap-5 h-dvh">
+        <div className="text-sub-title1-M">버그제보</div>
+        <div className="flex flex-col justify-center gap-10">
+          <div className="flex flex-col gap-2">
+            <div className="text-sub-title4-M">어디서 버그가 발생했나요?</div>
+            <Input
+              type="text"
+              width="full"
+              name="title"
+              onChange={handleContent}
+              value={data.title}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sub-title4-M">버그에 대해 설명해주세요</div>
+            <TextArea
+              type="text"
+              name="content"
+              width="full"
+              height=""
+              onChange={handleContent}
+              value={data.content}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sub-title4-M">버그 사진을 첨부해주세요</div>
+            <input type="file" onChange={handleFileChange} />
+          </div>
+        </div>
+        <Button onClick={Bug} buttonSize="full" colorType="primary">
+          버그 제보하기
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default BugReport;

src/app/attendanceCheck/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { AttendanceSave, GetStudentsAttendance } from "@/api/attendanceCheck";
-import { AfterStudent, AttendanceChack, ClubList } from "@/api/type";
+import { AttendanceChack, ClubList } from "@/api/type";
 import BackGround from "@/components/background";
 import Button from "@/components/button";
 import Dropdown from "@/components/dropdown";

src/app/main/page.tsx

@@ -9,6 +9,7 @@ import AfterManageImg from "@/assets/svg/aferManege.svg";
 import attendanceImg from "@/assets/svg/attendance.svg";
 import outingImg from "@/assets/svg/outing.svg";
 import moveClassImg from "@/assets/svg/moveClass.svg";
+import BugImg from "@/assets/svg/bug.svg";
 
 const Main = () => {
   const [floor, setFloor] = useState<string>();
@@ -28,6 +29,7 @@ const Main = () => {
           <Button src="/afterManage" name="방과후 출결" img={AfterManageImg} />
           <Button src="/attendanceCheck" name="출석 체크" img={attendanceImg} />
           <Button src="/classChange" name="교실 이동" img={moveClassImg} />
+          <Button src="/BugReport" name="버그 제보" img={BugImg} />
         </div>
         <div className="rounded-xl	w-full h-auto bg-white gap-2 flex items-center flex-wrap px-5 py-3">
           <div className="text-sub-title4-M text-neutral-300">

src/components/input/textarea/index.tsx

@@ -0,0 +1,60 @@
+"use client";
+import React, { useState } from "react";
+
+interface ChangeProps {
+  text: string;
+  name: string;
+}
+
+interface InputProps {
+  placeholder?: string;
+  width?: string;
+  type: string;
+  height?: string;
+  name?: string;
+  error?: boolean;
+  onChange: ({ text, name }: ChangeProps) => void;
+  disabled?: boolean;
+  value: string;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+const TextArea: React.FC<InputProps> = ({
+  placeholder,
+  width,
+  height,
+  onChange,
+  value,
+  error,
+  onKeyDown,
+  disabled,
+  name = "",
+}) => {
+  const containerClassName = `w-${width} h-56 border border-neutral-900 rounded flex justify-between items-center px-2
+    ${
+      error
+        ? "border-error-500 bg-error-900"
+        : disabled
+        ? "bg-neutral-800 border-neutral-800"
+        : "bg-neutral-900 hover:border-neutral-500 hover:bg-white active:border-secondary-500 caret-primary-500 focus:border-secondary-500"
+    }`;
+
+  const inputClassName = `h-full py-4 w-full px-2 border-none bg-transparent placeholder-neutral-500 
+    focus:outline-none rounded resize-none`;
+
+  return (
+    <div className="flex flex-col items-start">
+      <div className={containerClassName}>
+        <textarea
+          className={inputClassName}
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => onChange({ text: e.target.value, name })}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TextArea;

src/components/main/button.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 interface buttonProps {
-  name: "외출 수락" | "방과후 출결" | "출석 체크" | "교실 이동";
+  name: "외출 수락" | "방과후 출결" | "출석 체크" | "교실 이동" | "버그 제보";
   img: string;
   src: string;
 }