113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
'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>
|
|
)
|
|
}
|
|
|
|
|
|
|