7.8 일반 게시판 공용 폼/라우트 템플릿 생성 o
This commit is contained in:
16
src/app/boards/[id]/page.tsx
Normal file
16
src/app/boards/[id]/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { PostList } from "@/app/components/PostList";
|
||||||
|
|
||||||
|
export default async function BoardDetail({ params, searchParams }: { params: { id: string }; searchParams?: { sort?: "recent" | "popular" } }) {
|
||||||
|
const sort = searchParams?.sort ?? "recent";
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||||
|
<h1>게시판</h1>
|
||||||
|
<a href={`/posts/new?boardId=${params.id}`}><button>새 글</button></a>
|
||||||
|
</div>
|
||||||
|
<PostList boardId={params.id} sort={sort} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
16
src/app/boards/page.tsx
Normal file
16
src/app/boards/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
export default async function BoardsPage() {
|
||||||
|
const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/api/boards`, { cache: "no-store" });
|
||||||
|
const { boards } = await res.json();
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>게시판</h1>
|
||||||
|
<ul style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||||
|
{boards?.map((b: any) => (
|
||||||
|
<li key={b.id}><a href={`/boards/${b.id}`}>{b.name}</a></li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
44
src/app/components/PostForm.tsx
Normal file
44
src/app/components/PostForm.tsx
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
"use client";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useToast } from "@/app/components/ui/ToastProvider";
|
||||||
|
import { UploadButton } from "@/app/components/UploadButton";
|
||||||
|
|
||||||
|
type Values = { title: string; content: string };
|
||||||
|
|
||||||
|
export function PostForm({
|
||||||
|
initial,
|
||||||
|
onSubmit,
|
||||||
|
submitText = "등록",
|
||||||
|
}: {
|
||||||
|
initial?: Partial<Values>;
|
||||||
|
onSubmit: (values: Values) => Promise<{ id: string } | void>;
|
||||||
|
submitText?: string;
|
||||||
|
}) {
|
||||||
|
const router = useRouter();
|
||||||
|
const { show } = useToast();
|
||||||
|
const [form, setForm] = useState<Values>({ title: initial?.title ?? "", content: initial?.content ?? "" });
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
async function handleSubmit() {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const res = await onSubmit(form);
|
||||||
|
show("저장되었습니다");
|
||||||
|
if (res && res.id) router.push(`/posts/${res.id}`);
|
||||||
|
} catch (e) {
|
||||||
|
show("저장 실패");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
|
||||||
|
<input placeholder="제목" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
|
||||||
|
<textarea placeholder="내용" value={form.content} onChange={(e) => setForm({ ...form, content: e.target.value })} rows={12} />
|
||||||
|
<UploadButton onUploaded={(url) => setForm((f) => ({ ...f, content: `${f.content}\n` }))} />
|
||||||
|
<button disabled={loading} onClick={handleSubmit}>{loading ? "저장 중..." : submitText}</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -4,10 +4,10 @@ import { useRouter } from "next/navigation";
|
|||||||
import { useToast } from "@/app/components/ui/ToastProvider";
|
import { useToast } from "@/app/components/ui/ToastProvider";
|
||||||
import { UploadButton } from "@/app/components/UploadButton";
|
import { UploadButton } from "@/app/components/UploadButton";
|
||||||
|
|
||||||
export default function NewPostPage() {
|
export default function NewPostPage({ searchParams }: { searchParams?: { boardId?: string } }) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { show } = useToast();
|
const { show } = useToast();
|
||||||
const [form, setForm] = useState({ boardId: "", title: "", content: "" });
|
const [form, setForm] = useState({ boardId: searchParams?.boardId ?? "", title: "", content: "" });
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
async function submit() {
|
async function submit() {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
7.5 추천/신고, 조회수 카운트 o
|
7.5 추천/신고, 조회수 카운트 o
|
||||||
7.6 익명/비밀댓글/비댓 해시 처리 o
|
7.6 익명/비밀댓글/비댓 해시 처리 o
|
||||||
7.7 신고→알림→블라인드 자동화 훅 o
|
7.7 신고→알림→블라인드 자동화 훅 o
|
||||||
7.8 일반 게시판 공용 폼/라우트 템플릿 생성
|
7.8 일반 게시판 공용 폼/라우트 템플릿 생성 o
|
||||||
7.9 일반 카테고리 설정 매핑(공지/가입인사/버그건의/이벤트/소통방/자유/무엇이든/마사지꿀팁/관리사찾아요/청와대/방문후기[승인])
|
7.9 일반 카테고리 설정 매핑(공지/가입인사/버그건의/이벤트/소통방/자유/무엇이든/마사지꿀팁/관리사찾아요/청와대/방문후기[승인])
|
||||||
7.10 제휴업소 일반(사진) 카테고리 전용 이미지 첨부/미리보기 규칙
|
7.10 제휴업소 일반(사진) 카테고리 전용 이미지 첨부/미리보기 규칙
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user