공지 퍼블리싱 및 api연동

공지 퍼블리싱 및 api연동

src/apis/notice/index.ts

@@ -0,0 +1,126 @@
+import { instance } from "..";
+import { useMutation } from "@tanstack/react-query";
+import { getToken } from "@/utils/auth";
+
+interface Getnotice {
+  id: string;
+  title: string;
+  create_at: string;
+  teacher: string;
+  grade: number[];
+}
+
+interface DetailNoticeType {
+  title: string;
+  content: string;
+  create_at: string;
+  teacher: string;
+  grade: number[];
+}
+
+interface post {
+  title: string;
+  content: string;
+  grade: number[];
+}
+
+interface ModifyProp {
+  id: string;
+  title: string;
+  content: string;
+}
+
+export const GetNoticeList = () => {
+  const accessToken = getToken();
+  return useMutation<Getnotice[], Error, null>({
+    mutationFn: async () => {
+      try {
+        const response = await instance.get("/notice/simple", {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};
+
+export const DetailNoticeData = () => {
+  const accessToken = getToken();
+  return useMutation<DetailNoticeType, Error, { id: string }>({
+    mutationFn: async (param) => {
+      try {
+        const response = await instance.get(`/notice/${param.id}`, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};
+
+export const DeleteNoticeData = () => {
+  const accessToken = getToken();
+  return useMutation<void, Error, { id: string }>({
+    mutationFn: async (param) => {
+      try {
+        const response = await instance.delete(`/notice/delete/${param.id}`, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};
+
+export const PostNotice = () => {
+  const accessToken = getToken();
+
+  return useMutation<void, Error, post>({
+    mutationFn: async (param: post) => {
+      const response = await instance.post(
+        `/notice/create`,
+        {
+          ...param,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+    },
+  });
+};
+
+export const ModifyNotice = () => {
+  const accessToken = getToken();
+
+  return useMutation<ModifyProp, Error, null>({
+    mutationFn: async () => {
+      try {
+        const response = await instance.patch(`/notice/modify`, null, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+
+        return response.data;
+      } catch (error) {
+        console.log(error);
+        throw error;
+      }
+    },
+  });
+};

src/app/changeTeacher/page.tsx

@@ -29,9 +29,9 @@ const ChangeTeacher = () => {
   };
 
   return (
-    <div className=" min-w-fit">
+    <div className="flex flex-col">
       <Header />
-      <div className=" min-w-min flex flex-col 3xl:px-100 px-30 py-12 gap-7">
+      <div className=" self-center flex flex-col py-12 gap-7">
         <div className="text-neutral-200 text-sub-title3-B">
           <Link href="/main">홈</Link> &gt; 자습 감독 선생님 변경
         </div>
@@ -44,4 +44,4 @@ const ChangeTeacher = () => {
   );
 };
 
-export default ChangeTeacher;
+export default ChangeTeacher; 

src/app/components/common/dropdown/selectGrade/index.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useRef, useEffect } from "react";
+
+interface GradeOption {
+  value: number;
+  label: string;
+}
+
+interface SelectGradeProps {
+  onSelect: (grade: number) => void; // Change the type here
+}
+
+const SelectGrade: React.FC<SelectGradeProps> = ({ onSelect }) => {
+  const gradeOptions: GradeOption[] = [
+    { value: 1, label: "1학년" },
+    { value: 2, label: "2학년" },
+    { value: 3, label: "3학년" },
+    { value: 4, label: "전교생" },
+  ];
+
+  const [selectedGrade, setSelectedGrade] = useState<number>(1);
+  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    setDropdownOpen(!dropdownOpen);
+  };
+
+  const handleGradeSelection = (grade: number) => {
+    setSelectedGrade(grade);
+    onSelect(grade);
+    setDropdownOpen(!dropdownOpen);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative w-78" ref={dropdownRef}>
+      <div
+        className="group bg-neutral-900 text-neutral-500 text-caption1 cursor-pointer p-3"
+        onClick={toggleDropdown}
+      >
+        {gradeOptions.find((option) => option.value === selectedGrade)?.label ??
+          "학년을 선택하세요"}
+      </div>
+      {dropdownOpen && (
+        <div className="absolute top-full left-0 w-full bg-white shadow-lg">
+          {gradeOptions.map((option) => (
+            <div
+              key={option.value}
+              className={`block w-full py-2 px-4 text-left hover:bg-gray-200 cursor-pointer ${
+                selectedGrade === option.value ? "bg-gray-200" : ""
+              }`}
+              onClick={() => handleGradeSelection(option.value)}
+            >
+              {option.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SelectGrade;

src/app/components/common/input/index.tsx

@@ -15,6 +15,7 @@ interface InputProps {
   placeholder?: string;
   width?: string;
   type: string;
+  height?: string;
   name?: string;
   error?: boolean;
   onChange: ({ text, name }: ChangeProps) => void;
@@ -28,6 +29,7 @@ const Input: React.FC<InputProps> = ({
   placeholder,
   width,
   type,
+  height,
   onChange,
   disabled,
   value,
@@ -37,7 +39,7 @@ const Input: React.FC<InputProps> = ({
 }) => {
   const [showOpen, setShowOpen] = useState<boolean>(false);
 
-  const containerClassName = ` font-sans w-${width} h-auto border border-neutral-900 rounded flex justify-between items-center px-2
+  const containerClassName = ` font-sans w-${width} h-${height} border border-neutral-900 rounded flex justify-between items-center px-2
     ${
       error
         ? "border-error-500 bg-error-900"

src/app/components/common/input/textarea/index.tsx

@@ -0,0 +1,61 @@
+"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-${height} font-sans 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/app/components/common/list/notice/[id]/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { NextPage } from "next";
+import Header from "../../../Header";
+import Link from "next/link";
+
+const DetailNotice: NextPage = () => {
+  return (
+    <div className="flex flex-col">
+      <Header />
+      <div className="flex flex-col gap-7 px-100 py-16 h-90%">
+        <div className="text-neutral-200 text-sub-title3-B">
+          <Link href="/main">홈</Link> &gt;
+          <Link href="/outList">공지 사항</Link> &gt; {"아하.."}
+        </div>
+        <div className="font-sans text-heading4 text-gray-900">공지사항</div>
+        <div className="w-auto gap-4 rounded-xl bg-primary-1200 h-full px-10 py-10">
+          <div className="flex items-end flex-col gap-4">
+            <div className="flex">
+              <div className={`$w-44 h-15`}>날짜</div>
+              <div className={`w-54 h-15`}>시간</div>
+              <div className={`w-120 h-15`}>사유</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DetailNotice;

src/app/components/common/list/notice/page.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { useRouter } from "next/navigation";
+
+interface NoticeProp {
+  title: string;
+  teacher: string;
+  createAt: string;
+  grade: string;
+  id: string;
+}
+
+const NoticeList: React.FC<NoticeProp> = ({
+  title,
+  teacher,
+  createAt,
+  grade,
+  id,
+}) => {
+  const router = useRouter();
+
+  const MoveDetail = () => {
+    router.push(`/notice/query?id=${id}`);
+  };
+
+  return (
+    <div
+      className=" cursor-pointer flex px-14 bg-neutral-900 py-4 justify-between w-full gap-40"
+      onClick={MoveDetail}
+    >
+      <div className=" max-w-96 overflow-hidden whitespace-nowrap text-overflow-ellipsis">
+        {title}
+      </div>
+      <div className=" flex justify-between w-76">
+        <div>{grade}</div>
+        <div>{teacher}</div>
+        <div>{createAt}</div>
+      </div>
+    </div>
+  );
+};
+
+export default NoticeList;

src/app/components/common/modal/selfStudyTeacher.tsx/page.tsx

@@ -47,7 +47,6 @@ const SelfStudyModal: React.FC<ModalProps> = ({
       await postTeacherMutate(postData, {
         onSuccess: () => {
           console.log("success");
-          onSuccess();
         },
         onError: (error) => {
           console.log(error);