first commit

app/admin/noticeboard/write/page.tsx

@@ -0,0 +1,112 @@
+'use client'
+import { Crepe } from "@milkdown/crepe";
+import { MilkdownProvider } from "@milkdown/react";
+import { useCallback, useState,useRef } from "react";
+import { MilkdownEditor } from "@/app/components/editor";
+
+export default function Page() {
+  const titleRef = useRef<HTMLInputElement>(null!);
+  const tagRef = useRef<HTMLSelectElement>(null!);
+
+  const crepeRef = useRef<Crepe>(null!);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+
+  const handlePost = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch('/api/notice', {
+        method: 'POST',
+        body: JSON.stringify({
+          title: titleRef.current?.value,
+          content: crepeRef.current?.getMarkdown(),
+          tag: tagRef.current?.value,
+        }),
+      });
+
+      if (response.ok) {
+        setToastMessage('Post successful!');
+        setTimeout(() => {
+          setToastMessage('');
+          window.location.href = '/usr/4_noticeboard'; // Redirect after success
+        }, 1000); // 3 seconds delay
+      } else {
+        setToastMessage('Failed to post.');
+      }
+    } catch (error) {
+      setToastMessage('An error occurred.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className=" bg-white h-full min-h-[760px]">
+      <div className="h-full grid grid-rows-[20px_74px_minmax(300px,auto)_240px] grid-cols-[minmax(500px,880px)] justify-center py-8 gap-5
+      2xl:grid-cols-[minmax(500px,880px)_auto] 2xl:grid-rows-[20px_74px_minmax(300px,1fr)_auto]
+      ">
+        <div className="ml-1 text-xl leading-8 font-extrabold 2xl:col-[1/3] 2xl:row-[1/2]">게시글작성</div>
+        <div className="flex flex-col justify-between  2xl:col-[1/2] 2xl:row-[2/3]">
+          <div className="h-[14px] text-sm leading-4 text-[#3f2929] ml-1">
+            제목
+          </div>
+          <input 
+            type="text" 
+            className="h-[48px] border-1 border-[#d5d5d5] rounded-lg px-2 mx-1" 
+            placeholder="제목을 입력하세요" 
+            ref={titleRef}
+          />
+        </div>
+        <div className="flex flex-col justify-between 2xl:col-[1/2] 2xl:row-[3/4]">
+          <div className="h-[14px] text-sm leading-4 text-[#3f2929] ml-1"> 내용 </div>
+          <div className="h-[13px]"></div>
+
+        <div className="grow-1 border-1 border-[#d5d5d5] rounded-lg px-2 mx-1 overflow-y-auto">
+          <MilkdownProvider>
+            <MilkdownEditor editorRef={crepeRef} />
+          </MilkdownProvider>
+        </div>
+        </div>
+        <div className="flex flex-col justify-center 2xl:col-[2/3] 2xl:row-[2/4] 2xl:justify-start">
+          <div className="flex flex-col ">
+            <div className="h-[14px] text-sm  leading-4 text-[#3f2929] ml-1">
+              작업 태그 설정
+            </div>
+            <div className="h-[13px]"></div>
+            <select
+              className="h-[48px] mx-1 border-1 border-[#d5d5d5] rounded-lg px-2" 
+              ref={tagRef}
+            >
+              <option value="중요">중요</option>
+              <option value="0">없음</option>
+            </select>
+          </div>
+          <div className="h-[48px]"></div>
+
+          <div className="flex flex-col justify-between h-[116px] items-center">
+            <button onClick={handlePost} disabled={isLoading} className="w-[324px] h-[48px] border-1 border-[#D73B29] rounded-lg flex items-center justify-center text-white bg-[#F94B37] font-extrabold text-xl cursor-pointer hover:bg-[#D73B29]">
+              {isLoading ? 'Posting...' : '게시'}
+            </button>
+            <div 
+              className="w-[324px] h-[48px] border-1 border-[#D5D5D5] rounded-lg flex items-center justify-center font-medium text-xl cursor-pointer hover:bg-[#E5E5E5]" 
+              onClick={() => window.location.href = '/usr/4_noticeboard'}
+            >
+              취소
+            </div>
+          </div>
+          {toastMessage && (
+            <div className="fixed bottom-4 right-4 bg-gray-800 text-white p-4 rounded shadow-lg">
+              {toastMessage}
+            </div>
+          )}
+
+        </div>
+      </div>
+      
+    </div>
+  )
+}
+
+
+