ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 게시판 등록, 수정 작업

Browse Source
This commit is contained in:
chanii8
2025-04-28 15:21:26 +09:00
parent 44b820c62e
commit 4bcbff714a
11 changed files with 621 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/app/(with-base-layout)/bbs/register/[id]/page.tsx
+10
View File
@@ -0,0 +1,10 @@
import { ModifyPage as VModifyPage } from "@/pages/bbs";
export default async function ModifyPage({
params,
}: {
params: Promise<{ id: string }>;
}) {
const { id } = await params;
return <VModifyPage bbsId={id} />;
}
apps/cs/app/(with-base-layout)/bbs/register/page.tsx
+2
View File
@@ -0,0 +1,2 @@
import { CreatePage } from "@/pages/bbs";
export default CreatePage;
apps/cs/src/entities/board/api/board-service.ts
+29
View File
@@ -1,6 +1,8 @@
import { client } from "@/shared/api";
import { ENDPOINT } from "@/shared/config";
import type {
Board,
BoardFormData,
BoardList,
BoardParams,
BoardPopupList,
@@ -26,6 +28,33 @@ export class BoardApiService implements BoardService {
);
return response.data;
}
public async getBoardInfo(bbsId: string): Promise<Board> {
const response = await client.get<Board>(
`${ENDPOINT.BOARD_SERVICE.BBS}/${bbsId}`,
);
return response.data;
}
public async createBoard(data: BoardFormData): Promise<Board> {
const response = await client.post<Board>(
`${ENDPOINT.BOARD_SERVICE.BBS}`,
data,
);
return response.data;
}
public async updateBoard(bbsId: string, data: BoardFormData): Promise<Board> {
const response = await client.put<Board>(
`${ENDPOINT.BOARD_SERVICE.BBS}/${bbsId}`,
data,
);
return response.data;
}
public async deleteBoard(bbsId: string): Promise<void> {
await client.delete(`${ENDPOINT.BOARD_SERVICE.BBS}/${bbsId}`);
}
}
export const BoardApi = new BoardApiService();
apps/cs/src/entities/board/index.ts
+2
View File
@@ -1,6 +1,8 @@
export { BoardApi } from "./api/board-service";
export {
boardFormSchema,
type Board,
type BoardFormData,
type BoardParams,
type BoardPopup,
} from "./model/board-interface";
apps/cs/src/entities/board/model/board-interface.ts
+25
View File
@@ -1,3 +1,4 @@
import { z } from "zod";
import type { PageableList, PageableParams } from "@/shared/model";
export const BOARD_TYPE = {
@@ -62,10 +63,34 @@ export interface BoardPopup extends Board {
pstCnt: number;
}
export const boardFormSchema = z.object({
bbsTypeCd: z.string(),
bbsNm: z.string(),
bbsExpln: z.string(),
rfrncUseYn: z.string(),
atflUseYn: z.string(),
atflMaxCnt: z.number().nullish(),
atflMaxFileSz: z.number().nullish(),
ansUseYn: z.string(),
ansUseAuthrt: z.string().nullish(),
cmntUseYn: z.string(),
dgstfnEvlUseYn: z.string(),
smsUseYn: z.string(),
upndFixUseYn: z.string(),
pstgPrdUseYn: z.string(),
popupUseYn: z.string(),
useYn: z.string(),
});
export type BoardList = PageableList<Board>;
export type BoardPopupList = PageableList<BoardPopup>;
export type BoardFormData = z.infer<typeof boardFormSchema>;
export interface BoardService {
getBoardList: (params: BoardParams) => Promise<BoardList>;
getBoardPopupList: (params: BoardPopupParams) => Promise<BoardPopupList>;
getBoardInfo: (bbsId: string) => Promise<Board>;
createBoard: (data: BoardFormData) => Promise<Board>;
updateBoard: (bbsId: string, data: BoardFormData) => Promise<Board>;
deleteBoard: (bbsId: string) => Promise<void>;
}
apps/cs/src/pages/bbs/index.ts
+2
View File
@@ -1 +1,3 @@
export { BbsPage } from "./ui/bbs-page";
export { CreatePage } from "./ui/create-page";
export { ModifyPage } from "./ui/modify-page";
apps/cs/src/pages/bbs/ui/bbs-form.tsx
+447
View File
@@ -0,0 +1,447 @@
"use client";
import type { UseFormReturn } from "react-hook-form";
import {
Input,
Label,
RadioGroup,
RadioGroupItem,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@common/components";
import { FormWrapper } from "@/widgets/form-wrapper";
import { CodeSelect } from "@/entities/code";
import type { Board, BoardFormData } from "@/entities/board";
import { FormControl, FormField, FormItem } from "@/shared/ui/form";
type BbsFormProps = {
form: UseFormReturn<BoardFormData>;
bbsId?: string;
handleSave: (data: BoardFormData) => Promise<Board>;
};
function BbsForm({ form, bbsId, ...props }: BbsFormProps) {
return (
<FormWrapper form={form} isModifyMode={!!bbsId} {...props}>
<div className="card">
<Table variant="secondary">
<colgroup>
<col width="15%" />
<col width="85%" />
</colgroup>
<TableBody>
<TableRow>
<TableHead>게시판명</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="bbsNm"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
value={field.value ?? ""}
className="!text-[1.3rem]"
placeholder="게시판명을 입력해주세요"
/>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>게시판 설명</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="bbsExpln"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
value={field.value ?? ""}
className="!text-[1.3rem]"
placeholder="게시판설명을 입력해주세요"
/>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>게시판 유형</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="bbsTypeCd"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormControl>
<CodeSelect
{...field}
upCd="BBSTYPE"
onValueChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>참조 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="rfrncUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="rfrncUseY" />
<Label htmlFor="rfrncUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="rfrncUseN" />
<Label htmlFor="rfrncUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>첨부파일 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="atflUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="atflUseY" />
<Label htmlFor="atflUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="atflUseN" />
<Label htmlFor="atflUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>첨부파일 최대 개수</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="atflMaxCnt"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
type="number"
min={0}
value={field.value ?? ""}
onChange={(e) => {
const value = e.target.value;
if (isNaN(Number(value))) return;
field.onChange(value === "" ? null : Number(value));
}}
className="w-[12rem] !text-[1.3rem]"
placeholder="최대 개수 입력"
disabled={form.watch("atflUseYn") === "N"}
/>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>첨부파일 최대 크기</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="atflMaxFileSz"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
type="number"
min={0}
value={field.value ?? ""}
onChange={(e) => {
const value = e.target.value;
if (isNaN(Number(value))) return;
field.onChange(value === "" ? null : Number(value));
}}
className="w-[12rem] !text-[1.3rem]"
placeholder="최대 크기 입력"
disabled={form.watch("atflUseYn") === "N"}
/>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>답글 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="ansUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="ansUseY" />
<Label htmlFor="ansUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="ansUseN" />
<Label htmlFor="ansUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>답글 사용 권한</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="ansUseAuthrt"
render={({ field }) => (
<FormItem>
<FormControl>
<Select
value={field.value ?? ""}
onValueChange={field.onChange}
disabled={form.watch("ansUseYn") === "N"}
>
<SelectTrigger className="w-[12rem]">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="A">관리자</SelectItem>
<SelectItem value="M">회원</SelectItem>
<SelectItem value="N">일반</SelectItem>
</SelectContent>
</Select>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>댓글 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="cmntUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="cmntUseY" />
<Label htmlFor="cmntUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="cmntUseN" />
<Label htmlFor="cmntUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>게시물평가 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="dgstfnEvlUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="dgstfnEvlUseY" />
<Label htmlFor="dgstfnEvlUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="dgstfnEvlUseN" />
<Label htmlFor="dgstfnEvlUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>팝업 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="popupUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="popupUseY" />
<Label htmlFor="popupUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="popupUseN" />
<Label htmlFor="popupUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>SMS알림 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="smsUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="smsUseY" />
<Label htmlFor="smsUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="smsUseN" />
<Label htmlFor="smsUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>상단고정 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="upndFixUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="upndFixUseY" />
<Label htmlFor="upndFixUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="upndFixUseN" />
<Label htmlFor="upndFixUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>게시기간 사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="pstgPrdUseYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="pstgPrdUseY" />
<Label htmlFor="pstgPrdUseY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="pstgPrdUseN" />
<Label htmlFor="pstgPrdUseN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
<TableRow>
<TableHead>사용 여부</TableHead>
<TableCell className="border">
<FormField
control={form.control}
name="useYn"
render={({ field }) => (
<FormItem>
<FormControl>
<RadioGroup {...field} onValueChange={field.onChange}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="useY" />
<Label htmlFor="useY">사용</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="useN" />
<Label htmlFor="useN">사용안함</Label>
</div>
</RadioGroup>
</FormControl>
</FormItem>
)}
/>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</FormWrapper>
);
}
export { BbsForm };
apps/cs/src/pages/bbs/ui/bbs-page.tsx
+3 -1
View File
@@ -70,7 +70,9 @@ function BbsPage() {
refetch();
};
const handleRowClick = (row: Board) => {};
const handleRowClick = (row: Board) => {
router.push(`/bbs/register/${row.bbsId}`);
};
useEffect(() => {
refetch();
apps/cs/src/pages/bbs/ui/create-page.tsx
+55
View File
@@ -0,0 +1,55 @@
"use client";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import { useAlertStore } from "@/shared/lib/use-alert-store";
import {
BoardApi,
boardFormSchema,
type BoardFormData,
} from "@/entities/board";
import { BbsForm } from "./bbs-form";
function CreatePage() {
const router = useRouter();
const { setMessage: alert } = useAlertStore((state) => state);
const { mutateAsync: createBoard } = useMutation({
mutationFn: (data: BoardFormData) => BoardApi.createBoard(data),
onSuccess: () => {
alert("등록되었습니다.", router.back);
},
});
const form = useForm<BoardFormData>({
resolver: zodResolver(boardFormSchema),
defaultValues: {
bbsTypeCd: "",
bbsNm: "",
bbsExpln: "",
rfrncUseYn: "Y",
atflUseYn: "Y",
ansUseYn: "Y",
cmntUseYn: "Y",
dgstfnEvlUseYn: "Y",
smsUseYn: "Y",
upndFixUseYn: "Y",
pstgPrdUseYn: "Y",
popupUseYn: "Y",
useYn: "Y",
},
});
return (
<div className="card card-border !mt-6">
<div className="card-header">
<h3 className="text-2xl font-medium text-label">게시판 등록</h3>
</div>
<BbsForm form={form} handleSave={createBoard} />
</div>
);
}
export { CreatePage };
apps/cs/src/pages/bbs/ui/modify-page.tsx
+45
View File
@@ -0,0 +1,45 @@
"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useAlertStore } from "@/shared/lib/use-alert-store";
import { ENDPOINT } from "@/shared/config";
import {
BoardApi,
boardFormSchema,
type BoardFormData,
} from "@/entities/board";
import { BbsForm } from "./bbs-form";
function ModifyPage({ bbsId }: { bbsId: string }) {
const { setMessage: alert } = useAlertStore((state) => state);
const { data: boardInfo } = useQuery({
queryKey: [ENDPOINT.BOARD_SERVICE.BBS, bbsId],
queryFn: () => BoardApi.getBoardInfo(bbsId),
});
const { mutateAsync: updateBoard } = useMutation({
mutationFn: (data: BoardFormData) => BoardApi.updateBoard(bbsId, data),
onSuccess: () => {
alert("수정되었습니다.");
},
});
const form = useForm<BoardFormData>({
resolver: zodResolver(boardFormSchema),
values: boardInfo,
});
return (
<div className="card card-border !mt-6">
<div className="card-header">
<h3 className="text-2xl font-medium text-label">게시판 수정</h3>
</div>
<BbsForm form={form} bbsId={bbsId} handleSave={updateBoard} />
</div>
);
}
export { ModifyPage };
apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ function FormWrapper<T extends FieldValues>({
<Button size="lg" type="submit">
저장
</Button>
{isModifyMode && (
{isModifyMode && handleDelete && (
<Button size="lg" color="red" type="button" onClick={onDelete}>
삭제
</Button>