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

[apps/cs] feat: 검색 초기화 로직 작업 (CS_UT01010101)

Browse Source
This commit is contained in:
chanii8
2025-07-10 02:00:25 +09:00
parent a7b9b9d24a
commit e07c29c0ad
17 changed files with 620 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/src/pages/admin/ui/admin-page.tsx
+38 -16
View File
@@ -38,10 +38,14 @@ function AdminPage() {
const alert = useAlertStore((state) => state.setMessage);
const { confirm } = useConfirm();
const [adminQuery, setAdminQuery] = useState<UserSearchParams>({
const [keywordType, setKeywordType] = useState("");
const [keyword, setKeyword] = useState("");
const [grpId, setGrpId] = useState("");
const [searchParams, setSearchParams] = useState<UserSearchParams>({
keywordType: "",
keyword: "",
grpId: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -66,10 +70,10 @@ function AdminPage() {
});
const query = useQuery({
queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination],
queryKey: [ENDPOINT.USER_SERVICE.USERS, searchParams, pagination],
queryFn: () =>
UserApi.findPageAdminUser({
...adminQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -123,7 +127,24 @@ function AdminPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
keywordType,
keyword,
grpId,
});
};
const handleReset = () => {
setKeywordType("");
setKeyword("");
setGrpId("");
setSearchParams({
...searchParams,
keywordType: "",
keyword: "",
grpId: "",
});
};
const handleDeleteAdmins = async () => {
@@ -161,11 +182,7 @@ function AdminPage() {
<form onSubmit={handleSubmit} className="flex items-center gap-6 p-2">
<div className="flex items-center gap-2">
<Label className="mr-2 text-label">관리자구분</Label>
<Select
onValueChange={(value) =>
setAdminQuery({ ...adminQuery, grpId: value })
}
>
<Select value={grpId} onValueChange={(value) => setGrpId(value)}>
<SelectTrigger className="h-[3.2rem] w-[16rem] !text-[1.3rem]">
<SelectValue placeholder="그룹 선택" />
</SelectTrigger>
@@ -183,9 +200,8 @@ function AdminPage() {
관리자
</Label>
<Select
onValueChange={(value) =>
setAdminQuery({ ...adminQuery, keywordType: value })
}
value={keywordType}
onValueChange={(value) => setKeywordType(value)}
>
<SelectTrigger className="h-[3.2rem] w-[10rem] !text-[1.3rem]">
<SelectValue placeholder="선택" />
@@ -197,16 +213,22 @@ function AdminPage() {
</Select>
<Input
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={adminQuery.keyword}
onChange={(e) =>
setAdminQuery({ ...adminQuery, keyword: e.target.value })
}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
placeholder="검색어 입력"
/>
</div>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/banner/ui/banner-page.tsx
+29 -8
View File
@@ -28,17 +28,21 @@ function BannerPage() {
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
const [bannerQuery, setBannerQuery] = useState<BannerParams>({ bnrTtl: "" });
const [bnrTtl, setBnrTtl] = useState("");
const [searchParams, setSearchParams] = useState<BannerParams>({
bnrTtl: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 5,
});
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, searchParams, pagination],
queryFn: () =>
BannerApi.getBannerList({
...bannerQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -46,7 +50,18 @@ function BannerPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
bnrTtl,
});
};
const handleReset = () => {
setBnrTtl("");
setSearchParams({
...searchParams,
bnrTtl: "",
});
};
const handleRowClick = (row: Banner) => {
@@ -107,14 +122,20 @@ function BannerPage() {
</Label>
<Input
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={bannerQuery.bnrTtl}
onChange={(e) =>
setBannerQuery({ ...bannerQuery, bnrTtl: e.target.value })
}
value={bnrTtl}
onChange={(e) => setBnrTtl(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/bbs/ui/bbs-page.tsx
+33 -12
View File
@@ -29,9 +29,12 @@ function BbsPage() {
const router = useRouter();
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
const [boardParams, setBoardParams] = useState<BoardParams>({
const [bbsTypeCd, setBbsTypeCd] = useState("");
const [bbsNm, setBbsNm] = useState("");
const [searchParams, setSearchParams] = useState<BoardParams>({
bbsTypeCd: "",
bbsNm: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -39,10 +42,10 @@ function BbsPage() {
});
const query = useQuery({
queryKey: [ENDPOINT.BOARD_SERVICE.BBS, pagination],
queryKey: [ENDPOINT.BOARD_SERVICE.BBS, searchParams, pagination],
queryFn: () =>
BoardApi.getBoardList({
...boardParams,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -50,7 +53,21 @@ function BbsPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
bbsTypeCd,
bbsNm,
});
};
const handleReset = () => {
setBbsTypeCd("");
setBbsNm("");
setSearchParams({
...searchParams,
bbsTypeCd: "",
bbsNm: "",
});
};
const handleRowClick = (row: Board) => {
@@ -86,10 +103,8 @@ function BbsPage() {
</Label>
<CodeSelect
upCd="BBSTYPE"
value={boardParams.bbsTypeCd}
onValueChange={(value) =>
setBoardParams({ ...boardParams, bbsTypeCd: value })
}
value={bbsTypeCd}
onValueChange={(value) => setBbsTypeCd(value)}
/>
<Label htmlFor="bbsNm" className="ml-4 mr-2 text-label">
게시판명
@@ -97,14 +112,20 @@ function BbsPage() {
<Input
id="bbsNm"
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={boardParams.bbsNm}
onChange={(e) =>
setBoardParams({ ...boardParams, bbsNm: e.target.value })
}
value={bbsNm}
onChange={(e) => setBbsNm(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/code/ui/lwpocode-section.tsx
+27 -11
View File
@@ -15,8 +15,10 @@ type LwpoCodeSectionProps = {
function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
const alert = useAlertStore((state) => state.setMessage);
const [dialogOpen, setDialogOpen] = useState(false);
const [lwpoCodeQuery, setLwpoCodeQuery] = useState<LwpoCodeParams>({
const [lwpoCdNm, setLwpoCdNm] = useState("");
const [searchParams, setSearchParams] = useState<LwpoCodeParams>({
lwpoCdNm: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -24,10 +26,10 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
});
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, searchParams, pagination],
queryFn: () =>
LwpoCodeApi.getLwpoCodeList({
...lwpoCodeQuery,
...searchParams,
upCd,
page: pagination.pageIndex,
size: pagination.pageSize,
@@ -59,7 +61,18 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
lwpoCdNm,
});
};
const handleReset = () => {
setLwpoCdNm("");
setSearchParams({
...searchParams,
lwpoCdNm: "",
});
};
useEffect(() => {
@@ -75,17 +88,20 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
</Label>
<Input
className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
value={lwpoCodeQuery.lwpoCdNm}
onChange={(e) =>
setLwpoCodeQuery({
...lwpoCodeQuery,
lwpoCdNm: e.target.value,
})
}
value={lwpoCdNm}
onChange={(e) => setLwpoCdNm(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/code/ui/upcode-section.tsx
+27 -11
View File
@@ -14,8 +14,10 @@ type UpCodeSectionProps = {
function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
const [dialogOpen, setDialogOpen] = useState(false);
const [upCodeQuery, setUpCodeQuery] = useState<UpCodeParams>({
const [keyword, setKeyword] = useState("");
const [searchParams, setSearchParams] = useState<UpCodeParams>({
keyword: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -23,10 +25,10 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
});
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, searchParams, pagination],
queryFn: () =>
UpCodeApi.getUpCodeList({
...upCodeQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -40,7 +42,18 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
keyword,
});
};
const handleReset = () => {
setKeyword("");
setSearchParams({
...searchParams,
keyword: "",
});
};
const { tableComponent, tableInstance: table } = useDataTable({
@@ -66,17 +79,20 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
</Label>
<Input
className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
value={upCodeQuery.keyword}
onChange={(e) =>
setUpCodeQuery({
...upCodeQuery,
keyword: e.target.value,
})
}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/contents/ui/contents-page.tsx
+27 -6
View File
@@ -17,8 +17,10 @@ import { columns } from "../model/table-columns";
function ContentsPage() {
const router = useRouter();
const [contentsQuery, setContentsQuery] = useState<ContentsParams>({
const [contsTtl, setContsTtl] = useState("");
const [searchParams, setSearchParams] = useState<ContentsParams>({
contsTtl: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -26,10 +28,10 @@ function ContentsPage() {
});
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS, searchParams, pagination],
queryFn: () =>
ContentsApi.getContentsList({
...contentsQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -38,7 +40,18 @@ function ContentsPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
contsTtl,
});
};
const handleReset = () => {
setContsTtl("");
setSearchParams({
...searchParams,
contsTtl: "",
});
};
const handleRowClick = (row: Contents) => {
@@ -72,12 +85,20 @@ function ContentsPage() {
</Label>
<Input
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={contentsQuery.contsTtl}
onChange={(e) => setContentsQuery({ contsTtl: e.target.value })}
value={contsTtl}
onChange={(e) => setContsTtl(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/file/ui/file-page.tsx
+27 -13
View File
@@ -14,8 +14,10 @@ function FilePage() {
const { confirm } = useConfirm();
const alert = useAlertStore((state) => state.setMessage);
const [attachmentQuery, setAttachmentQuery] = useState<AttachmentParams>({
const [orgnlFileNm, setOrgnlFileNm] = useState("");
const [searchParams, setSearchParams] = useState<AttachmentParams>({
orgnlFileNm: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -23,10 +25,10 @@ function FilePage() {
});
const query = useQuery({
queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, pagination],
queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, searchParams, pagination],
queryFn: () =>
AttachmentApi.getAttachmentsList({
...attachmentQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -64,14 +66,20 @@ function FilePage() {
},
});
const handleAttachmentQueryChange =
(key: keyof AttachmentParams) => (value: string) => {
setAttachmentQuery({ ...attachmentQuery, [key]: value });
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
orgnlFileNm,
});
};
const handleReset = () => {
setOrgnlFileNm("");
setSearchParams({
...searchParams,
orgnlFileNm: "",
});
};
return (
@@ -86,10 +94,8 @@ function FilePage() {
<Input
id="keyword"
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={attachmentQuery.orgnlFileNm || ""}
onChange={(e) =>
handleAttachmentQueryChange("orgnlFileNm")(e.target.value)
}
value={orgnlFileNm}
onChange={(e) => setOrgnlFileNm(e.target.value)}
placeholder="파일명을 입력하세요"
/>
</div>
@@ -97,6 +103,14 @@ function FilePage() {
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/image/ui/image-page.tsx
+30 -12
View File
@@ -24,22 +24,23 @@ type PostingTarget = {
function ImagePage() {
const router = useRouter();
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
const [imageQuery, setImageQuery] = useState<ImageParams>({
keyword: "" ,
sort:"regDt,desc"
const [keyword, setKeyword] = useState("");
const [searchParams, setSearchParams] = useState<ImageParams>({
keyword: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 5,
});
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, searchParams, pagination],
queryFn: () =>
ImageApi.getImageList({
...imageQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -47,7 +48,18 @@ function ImagePage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
keyword,
});
};
const handleReset = () => {
setKeyword("");
setSearchParams({
...searchParams,
keyword: "",
});
};
const handleRowClick = (row: Image) => {
@@ -99,14 +111,20 @@ function ImagePage() {
</Label>
<Input
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={imageQuery.keyword}
onChange={(e) =>
setImageQuery({ ...imageQuery, keyword: e.target.value })
}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/module/ui/module-page.tsx
+36 -20
View File
@@ -18,21 +18,23 @@ import { columns } from "../model/authorizations-table-columns";
function ModulePage() {
const router = useRouter();
const [authorizationQuery, setAuthorizationQuery] =
useState<AuthorizationsParams>({
authorizationName: "",
httpMethodCode: "",
});
const [authorizationName, setAuthorizationName] = useState("");
const [httpMethodCode, setHttpMethodCode] = useState("");
const [searchParams, setSearchParams] = useState<AuthorizationsParams>({
authorizationName: "",
httpMethodCode: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const query = useQuery({
queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS, pagination],
queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS, searchParams, pagination],
queryFn: () =>
AuthorizationsApi.getAuthorizationsList({
...authorizationQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -60,14 +62,23 @@ function ModulePage() {
},
});
const handleAuthorizationQueryChange =
(key: keyof AuthorizationsParams) => (value: string) => {
setAuthorizationQuery({ ...authorizationQuery, [key]: value });
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
authorizationName,
httpMethodCode,
});
};
const handleReset = () => {
setAuthorizationName("");
setHttpMethodCode("");
setSearchParams({
...searchParams,
authorizationName: "",
httpMethodCode: "",
});
};
return (
@@ -81,7 +92,8 @@ function ModulePage() {
</Label>
<CodeSelect
upCd="HTTPMHD"
onValueChange={handleAuthorizationQueryChange("httpMethodCode")}
value={httpMethodCode}
onValueChange={(value) => setHttpMethodCode(value)}
/>
</div>
<div className="flex items-center gap-2">
@@ -91,18 +103,22 @@ function ModulePage() {
<Input
id="keyword"
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={authorizationQuery.authorizationName}
onChange={(e) =>
handleAuthorizationQueryChange("authorizationName")(
e.target.value,
)
}
value={authorizationName}
onChange={(e) => setAuthorizationName(e.target.value)}
/>
</div>
</div>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/popup/ui/popup-page.tsx
+27 -8
View File
@@ -25,8 +25,10 @@ type PostingTarget = {
function PopupPage() {
const router = useRouter();
const [popupParams, setPopupParams] = useState<PopupParams>({
const [keyword, setKeyword] = useState("");
const [searchParams, setSearchParams] = useState<PopupParams>({
keyword: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -36,10 +38,10 @@ function PopupPage() {
const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.POPUPS, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.POPUPS, searchParams, pagination],
queryFn: () =>
PopupApi.getPopupList({
...popupParams,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -48,7 +50,18 @@ function PopupPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
keyword,
});
};
const handleReset = () => {
setKeyword("");
setSearchParams({
...searchParams,
keyword: "",
});
};
const handleRowClick = (row: Popup) => {
@@ -99,14 +112,20 @@ function PopupPage() {
</Label>
<Input
className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
value={popupParams.keyword}
onChange={(e) =>
setPopupParams({ ...popupParams, keyword: e.target.value })
}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/recent/ui/recent-page.tsx
+70 -32
View File
@@ -51,28 +51,43 @@ function RecentPage() {
const { confirm } = useConfirm();
const alert = useAlertStore((state) => state.setMessage);
const [dateRange, setDateRange] = useState<DateRange>();
const [dateRange, setDateRange] = useState<DateRange | undefined>({
from: undefined,
to: undefined,
});
const [tableSort, setTableSort] = useState("regDt,desc");
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
const [recentPostQuery, setRecentPostQuery] = useState<RecentPostParams>({
const [keywordType, setKeywordType] = useState("");
const [keyword, setKeyword] = useState("");
const [bbsId, setBbsId] = useState<string | null>(null);
const [delYn, setDelYn] = useState("N");
const [searchParams, setSearchParams] = useState<RecentPostParams>({
keywordType: "",
keyword: "",
bbsId: null,
delYn: "N",
frDateYmd: "",
toDateYmd: "",
sort: "regDt,desc",
});
const [isDeletePostData, setIsDeletePostData] = useState(false);
const query = useQuery({
queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, pagination, tableSort],
queryKey: [
ENDPOINT.BOARD_SERVICE.POSTS,
searchParams,
pagination,
tableSort,
],
queryFn: () =>
PostApi.getRecentPostList({
...recentPostQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
sort: tableSort,
@@ -115,14 +130,40 @@ function RecentPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsDeletePostData(recentPostQuery.delYn === "Y");
query.refetch();
setIsDeletePostData(delYn === "Y");
setSearchParams({
...searchParams,
keywordType,
keyword,
bbsId: bbsId ? parseInt(bbsId) : null,
delYn,
frDateYmd: dateRange?.from
? dayjs(dateRange.from).format("YYYYMMDD")
: "",
toDateYmd: dateRange?.to ? dayjs(dateRange.to).format("YYYYMMDD") : "",
});
};
const handleRecentPostParamsChange =
(key: keyof RecentPostParams) => (value: unknown) => {
setRecentPostQuery({ ...recentPostQuery, [key]: value });
};
const handleReset = () => {
setKeywordType("");
setKeyword("");
setBbsId(null);
setDelYn("N");
setDateRange({
from: undefined,
to: undefined,
});
setSearchParams({
...searchParams,
keywordType: "",
keyword: "",
bbsId: null,
delYn: "N",
frDateYmd: "",
toDateYmd: "",
});
setIsDeletePostData(false);
};
const handlePresetDateRange = (value: string) => {
let presetDateRange: DateRange | undefined;
@@ -148,16 +189,7 @@ function RecentPage() {
default:
presetDateRange = undefined;
}
handleDateRangeChange(presetDateRange);
};
const handleDateRangeChange = (value: DateRange | undefined) => {
setDateRange(value);
setRecentPostQuery({
...recentPostQuery,
frDateYmd: dayjs(value?.from).format("YYYYMMDD") ?? "",
toDateYmd: dayjs(value?.to).format("YYYYMMDD") ?? "",
});
setDateRange(presetDateRange);
};
const onSoftDeletePost = async () => {
@@ -214,10 +246,7 @@ function RecentPage() {
<div className="card card-border">
<form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
<Label className="mr-2">날짜</Label>
<DateRangePicker
value={dateRange}
onValueChange={handleDateRangeChange}
>
<DateRangePicker value={dateRange} onValueChange={setDateRange}>
<div className="card card-border flex items-center gap-2">
<Select onValueChange={handlePresetDateRange}>
<SelectTrigger>
@@ -233,7 +262,10 @@ function RecentPage() {
</DateRangePicker>
<Label className="ml-4 mr-2 text-label">게시판</Label>
<Select onValueChange={handleRecentPostParamsChange("bbsId")}>
<Select
value={bbsId?.toString() || ""}
onValueChange={(value) => setBbsId(value ? value : null)}
>
<SelectTrigger className="w-[12rem]">
<SelectValue placeholder="선택" />
</SelectTrigger>
@@ -247,7 +279,7 @@ function RecentPage() {
</Select>
<Label className="ml-4 mr-2 text-label">상태</Label>
<Select onValueChange={handleRecentPostParamsChange("delYn")}>
<Select value={delYn} onValueChange={(value) => setDelYn(value)}>
<SelectTrigger className="w-[10rem]">
<SelectValue placeholder="선택" />
</SelectTrigger>
@@ -259,8 +291,8 @@ function RecentPage() {
<Label className="ml-4 mr-2 text-label">검색</Label>
<Select
value={recentPostQuery.keywordType}
onValueChange={handleRecentPostParamsChange("keywordType")}
value={keywordType}
onValueChange={(value) => setKeywordType(value)}
>
<SelectTrigger className="h-[3.2rem] w-[10rem]">
<SelectValue placeholder="선택" />
@@ -272,15 +304,21 @@ function RecentPage() {
</SelectContent>
</Select>
<Input
value={recentPostQuery.keyword}
onChange={(e) =>
handleRecentPostParamsChange("keyword")(e.target.value)
}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/role/ui/role-page.tsx
+27 -8
View File
@@ -13,8 +13,10 @@ import { columns } from "../model/table-columns";
function RolePage() {
const router = useRouter();
const [roleQuery, setRoleQuery] = useState<RoleParams>({
const [keyword, setKeyword] = useState("");
const [searchParams, setSearchParams] = useState<RoleParams>({
keyword: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -22,10 +24,10 @@ function RolePage() {
});
const query = useQuery({
queryKey: [ENDPOINT.USER_SERVICE.ROLES, pagination],
queryKey: [ENDPOINT.USER_SERVICE.ROLES, searchParams, pagination],
queryFn: () =>
RoleApi.getRoles({
...roleQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -54,7 +56,18 @@ function RolePage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
keyword,
});
};
const handleReset = () => {
setKeyword("");
setSearchParams({
...searchParams,
keyword: "",
});
};
return (
@@ -66,14 +79,20 @@ function RolePage() {
</Label>
<Input
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={roleQuery.keyword}
onChange={(e) =>
setRoleQuery({ ...roleQuery, keyword: e.target.value })
}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/site/ui/site-page.tsx
+30 -10
View File
@@ -14,10 +14,10 @@ import { columns } from "../model/table-columns";
function SitePage() {
const router = useRouter();
const [siteQuery, setSiteQuery] = useState<SiteParams>({
const [siteNm, setSiteNm] = useState("");
const [searchParams, setSearchParams] = useState<SiteParams>({
siteNm: "",
sort:"regDt,desc"
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -25,10 +25,10 @@ function SitePage() {
});
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.SITES, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.SITES, searchParams, pagination],
queryFn: () =>
SiteApi.getSiteList({
...siteQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -37,7 +37,18 @@ function SitePage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
siteNm,
});
};
const handleReset = () => {
setSiteNm("");
setSearchParams({
...searchParams,
siteNm: "",
});
};
const handleRowClick = (row: Site) => {
@@ -65,17 +76,26 @@ function SitePage() {
<div className="card card-border !mt-6">
<div className="card card-border">
<form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
<Label htmlFor="" className="mr-2 text-label">
<Label htmlFor="siteNm" className="mr-2 text-label">
사이트명
</Label>
<Input
name="siteNm"
value={siteNm}
onChange={(e) => setSiteNm(e.target.value)}
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={siteQuery.siteNm}
onChange={(e) => setSiteQuery({ siteNm: e.target.value })}
/>
<Button className="h-[3.2rem]" type="submit">
<Button type="submit" className="h-[3.2rem]">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/survey/ui/survey-page.tsx
+27 -8
View File
@@ -25,8 +25,10 @@ type PostingTarget = {
function SurveyPage() {
const router = useRouter();
const [surveyParams, setSurveyParams] = useState<SurveyParams>({
const [srvyTtl, setSrvyTtl] = useState("");
const [searchParams, setSearchParams] = useState<SurveyParams>({
srvyTtl: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -36,10 +38,10 @@ function SurveyPage() {
const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, searchParams, pagination],
queryFn: () =>
SurveyApi.getSurveyList({
...surveyParams,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -71,7 +73,18 @@ function SurveyPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
srvyTtl,
});
};
const handleReset = () => {
setSrvyTtl("");
setSearchParams({
...searchParams,
srvyTtl: "",
});
};
useEffect(() => {
@@ -99,14 +112,20 @@ function SurveyPage() {
</Label>
<Input
className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
value={surveyParams.srvyTtl}
onChange={(e) =>
setSurveyParams({ ...surveyParams, srvyTtl: e.target.value })
}
value={srvyTtl}
onChange={(e) => setSrvyTtl(e.target.value)}
/>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/template/ui/template-page.tsx
+35 -19
View File
@@ -14,22 +14,23 @@ import type { Template, TemplateParams } from "../model/template-interface";
function TemplatePage() {
const router = useRouter();
const [templateQuery, setTemplateQuery] = useState<TemplateParams>({
tmpltSeCd: "",
const [keyword, setKeyword] = useState("");
const [tmpltSeCd, setTmpltSeCd] = useState("");
const [searchParams, setSearchParams] = useState<TemplateParams>({
keyword: "",
sort:"regDt,desc"
tmpltSeCd: "",
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 5,
pageSize: 10,
});
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE, searchParams, pagination],
queryFn: () =>
TemplateApi.getTemplateList({
...templateQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -38,7 +39,21 @@ function TemplatePage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
keyword,
tmpltSeCd,
});
};
const handleReset = () => {
setKeyword("");
setTmpltSeCd("");
setSearchParams({
...searchParams,
keyword: "",
tmpltSeCd: "",
});
};
const handleRowClick = (row: Template) => {
@@ -73,10 +88,8 @@ function TemplatePage() {
</Label>
<CodeSelect
upCd="TMPLTCLCD"
value={templateQuery.tmpltSeCd}
onValueChange={(value) =>
setTemplateQuery({ ...templateQuery, tmpltSeCd: value })
}
value={tmpltSeCd}
onValueChange={(value) => setTmpltSeCd(value)}
/>
</div>
<div className="flex items-center gap-2">
@@ -85,19 +98,22 @@ function TemplatePage() {
</Label>
<Input
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={templateQuery.keyword}
onChange={(e) =>
setTemplateQuery({
...templateQuery,
keyword: e.target.value,
})
}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
</div>
</div>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/terms/ui/terms-page.tsx
+34 -17
View File
@@ -15,10 +15,12 @@ import type { TermsParams, Terms } from "../model/terms-interface";
function TermsPage() {
const router = useRouter();
const [termsQuery, setTermsQuery] = useState<TermsParams>({
const [keyword, setKeyword] = useState("");
const [trmsSeCd, setTrmsSeCd] = useState("");
const [searchParams, setSearchParams] = useState<TermsParams>({
keyword: "",
trmsSeCd: "",
keyword: "",
sort:"regDt,desc"
sort: "regDt,desc",
});
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
@@ -26,10 +28,10 @@ function TermsPage() {
});
const query = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.TERMS, pagination],
queryKey: [ENDPOINT.CMS_SERVICE.TERMS, searchParams, pagination],
queryFn: () =>
TermsApi.getTermsList({
...termsQuery,
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
@@ -38,7 +40,21 @@ function TermsPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
keyword,
trmsSeCd,
});
};
const handleReset = () => {
setKeyword("");
setTrmsSeCd("");
setSearchParams({
...searchParams,
keyword: "",
trmsSeCd: "",
});
};
const handleRowClick = (row: Terms) => {
@@ -73,10 +89,8 @@ function TermsPage() {
</Label>
<CodeSelect
upCd="TRMSCLCD"
value={termsQuery.trmsSeCd}
onValueChange={(value) =>
setTermsQuery({ ...termsQuery, trmsSeCd: value })
}
value={trmsSeCd}
onValueChange={(value) => setTrmsSeCd(value)}
/>
</div>
<div className="flex items-center gap-2">
@@ -85,19 +99,22 @@ function TermsPage() {
</Label>
<Input
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={termsQuery.keyword}
onChange={(e) =>
setTermsQuery({
...termsQuery,
keyword: e.target.value,
})
}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
</div>
</div>
<Button className="h-[3.2rem]" type="submit">
조회
</Button>
<Button
type="button"
color="white"
className="h-[3.2rem]"
onClick={handleReset}
>
초기화
</Button>
</form>
</div>
<div className="card card-border">
apps/cs/src/pages/users/ui/users-page.tsx
+96 -48
View File
@@ -2,7 +2,6 @@
import dayjs from "dayjs";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
@@ -40,19 +39,25 @@ function UsersPage() {
pageIndex: 0,
pageSize: 10,
});
const [dateRange, setDateRange] = useState<DateRange>();
const [dateRange, setDateRange] = useState<DateRange | undefined>({
from: undefined,
to: undefined,
});
const [keywordType, setKeywordType] = useState("all");
const [keyword, setKeyword] = useState("");
const [userStateCode, setUserStateCode] = useState("");
const [aprvYn, setAprvYn] = useState("");
const [grpId, setGrpId] = useState("");
const { register, watch, setValue, getValues } = useForm<UserSearchParams>({
defaultValues: {
keywordType: "all",
keyword: "",
userStateCode: "",
aprvYn: "",
grpId: "",
frDateYmd: "",
toDateYmd: "",
sort: "regDt,desc"
},
const [searchParams, setSearchParams] = useState<UserSearchParams>({
keywordType: "all",
keyword: "",
userStateCode: "",
aprvYn: "",
grpId: "",
frDateYmd: "",
toDateYmd: "",
sort: "regDt,desc",
});
const { data: userSttsStats } = useQuery({
@@ -61,16 +66,16 @@ function UsersPage() {
});
const query = useQuery({
queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination, watch("sort")],
queryKey: [ENDPOINT.USER_SERVICE.USERS, searchParams, pagination],
queryFn: () =>
UserApi.findPageUser({
...getValues(),
...searchParams,
page: pagination.pageIndex,
size: pagination.pageSize,
}),
});
const { data: userStateCode } = useQuery({
const { data: userStateCodes } = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.CODE],
queryFn: () => CodeApi.getCode("USERSTTS"),
});
@@ -98,7 +103,40 @@ function UsersPage() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
query.refetch();
setSearchParams({
...searchParams,
keywordType,
keyword,
userStateCode,
aprvYn,
grpId,
frDateYmd: dateRange?.from
? dayjs(dateRange.from).format("YYYYMMDD")
: "",
toDateYmd: dateRange?.to ? dayjs(dateRange.to).format("YYYYMMDD") : "",
});
};
const handleReset = () => {
setKeywordType("all");
setKeyword("");
setUserStateCode("");
setAprvYn("");
setGrpId("");
setDateRange({
from: undefined,
to: undefined,
});
setSearchParams({
...searchParams,
keywordType: "all",
keyword: "",
userStateCode: "",
aprvYn: "",
grpId: "",
frDateYmd: "",
toDateYmd: "",
});
};
const handlePresetDateRange = (value: string) => {
@@ -126,8 +164,6 @@ function UsersPage() {
presetDateRange = undefined;
}
setDateRange(presetDateRange);
setValue("frDateYmd", dayjs(presetDateRange?.from).format("YYYYMMDD"));
setValue("toDateYmd", dayjs(presetDateRange?.to).format("YYYYMMDD"));
};
const getUserSttsStatsCnt = (code: string): number => {
@@ -135,6 +171,21 @@ function UsersPage() {
return userSttsStats.find((item) => item.sttsCd === code)?.cnt ?? 0;
};
const handleUserStateCodeChange = (code: string, checked: boolean) => {
let newUserStateCode = userStateCode;
if (checked) {
newUserStateCode = userStateCode ? `${userStateCode},${code}` : code;
} else {
newUserStateCode = userStateCode
.split(",")
.filter((c) => c !== code)
.join(",");
}
setUserStateCode(newUserStateCode);
};
return (
<div className="card card-border !mt-6">
<div className="card card-border flex items-center justify-center gap-10 !bg-accent !py-6">
@@ -195,8 +246,8 @@ function UsersPage() {
회원정보
</Label>
<Select
{...register("keywordType")}
onValueChange={(value) => setValue("keywordType", value)}
value={keywordType}
onValueChange={(value) => setKeywordType(value)}
>
<SelectTrigger className="w-[18rem]">
<SelectValue placeholder="선택" />
@@ -210,7 +261,8 @@ function UsersPage() {
</SelectContent>
</Select>
<Input
{...register("keyword")}
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
className="!text-[1.3rem]"
placeholder="검색어를 입력하세요"
/>
@@ -221,14 +273,7 @@ function UsersPage() {
</div>
<div className="flex items-center gap-2">
<Label className="mr-2 text-label">기간</Label>
<DateRangePicker
value={dateRange}
onValueChange={(value) => {
setDateRange(value);
setValue("frDateYmd", dayjs(value?.from).format("YYYYMMDD"));
setValue("toDateYmd", dayjs(value?.to).format("YYYYMMDD"));
}}
>
<DateRangePicker value={dateRange} onValueChange={setDateRange}>
<div className="card card-border flex items-center gap-2">
<Select onValueChange={handlePresetDateRange}>
<SelectTrigger>
@@ -250,24 +295,14 @@ function UsersPage() {
<div className="flex items-center gap-2">
<Label className="mr-2 text-label">회원상태</Label>
<div className="flex gap-4">
{userStateCode?.map((item) => (
{userStateCodes?.map((item) => (
<div key={item.lwpoCd} className="flex items-center gap-2">
<Checkbox
id={item.lwpoCd}
value={item.lwpoCd}
checked={watch("userStateCode")?.includes(item.lwpoCd)}
checked={userStateCode?.includes(item.lwpoCd)}
onCheckedChange={(checked) => {
setValue(
"userStateCode",
checked
? getValues("userStateCode")
? `${getValues("userStateCode")},${item.lwpoCd}`
: item.lwpoCd
: getValues("userStateCode")
?.split(",")
.filter((code) => code !== item.lwpoCd)
.join(","),
);
handleUserStateCodeChange(item.lwpoCd, !!checked);
}}
/>
<Label htmlFor={item.lwpoCd}>{item.lwpoCdNm}</Label>
@@ -276,10 +311,20 @@ function UsersPage() {
</div>
</div>
<hr />
<Button type="submit" className="mx-auto w-[16rem]">
<i className="diveicon di-search" />
검색
</Button>
<div className="flex justify-center gap-2">
<Button type="submit" className="w-[16rem]">
<i className="diveicon di-search" />
검색
</Button>
<Button
type="button"
color="white"
className="w-[16rem]"
onClick={handleReset}
>
초기화
</Button>
</div>
</form>
</div>
<div className="card card-border">
@@ -290,7 +335,10 @@ function UsersPage() {
<Select
defaultValue="regDt,desc"
onValueChange={(value) => {
setValue("sort", value);
setSearchParams({
...searchParams,
sort: value,
});
}}
>
<SelectTrigger>