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

[apps/cs] chore: 수정 요청 사항 반영

Browse Source
This commit is contained in:
chanii8
2025-07-25 18:38:56 +09:00
parent 78eb2d8fcd
commit bd999eb0f3
10 changed files with 149 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/src/pages/admin/ui/add-admin-dialog.tsx
+3 -2
View File
@@ -47,7 +47,7 @@ function AddAdminDialog() {
const [open, setOpen] = useState(false);
const [userSearchQuery, setUserSearchQuery] = useState<UserSearchParams>({
keywordType: "",
keywordType: "userName",
keyword: "",
});
const [selectedGroupId, setSelectedGroupId] = useState("");
@@ -193,6 +193,7 @@ function AddAdminDialog() {
<form onSubmit={handleSearch} className="flex items-center gap-2">
<Select
value={userSearchQuery.keywordType}
onValueChange={(value) =>
setUserSearchQuery({ ...userSearchQuery, keywordType: value })
}
@@ -201,8 +202,8 @@ function AddAdminDialog() {
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="userId">아이디</SelectItem>
<SelectItem value="userName">이름</SelectItem>
<SelectItem value="userId">아이디</SelectItem>
</SelectContent>
</Select>
<Input
apps/cs/src/pages/apilog/ui/apilog-page.tsx
+10 -16
View File
@@ -7,7 +7,6 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
import {
Button,
Input,
InputDatePicker,
Label,
Select,
SelectContent,
@@ -15,10 +14,11 @@ import {
SelectTrigger,
SelectValue,
} from "@common/components";
import { columns } from "@/pages/apilog/model/table-columns";
import { ApiLogApi, type ApiLogParams } from "@/entities/apilog";
import { useDataTable } from "@/shared/lib";
import { ENDPOINT } from "@/shared/config";
import { columns } from "@/pages/apilog/model/table-columns";
import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
type DateRange = {
from?: Date | undefined;
@@ -133,6 +133,11 @@ function ApiLogPage() {
setDateRange(presetDateRange || defaultDateRange);
};
const handleDateRangeChange = (dateRange: DateRange) => {
setDateRange(dateRange);
setPresetDateRange("");
};
return (
<div className="flex-1">
<div className="card card-border">
@@ -148,20 +153,9 @@ function ApiLogPage() {
<SelectItem value="3M">3개월</SelectItem>
</SelectContent>
</Select>
<InputDatePicker
value={dateRange.from}
onChange={(date) => {
setDateRange({ ...dateRange, from: date });
setPresetDateRange("");
}}
/>
~
<InputDatePicker
value={dateRange.to}
onChange={(date) => {
setDateRange({ ...dateRange, to: date });
setPresetDateRange("");
}}
<InputDateRangePicker
dateRange={dateRange}
setDateRange={handleDateRangeChange}
/>
<Label className="ml-4 mr-2 text-label">사용자ID</Label>
<Input
apps/cs/src/pages/groups/ui/group-form.tsx
+2 -2
View File
@@ -161,11 +161,11 @@ function GroupForm({ form }: GroupFormProps) {
>
<div className="flex items-center space-x-2">
<RadioGroupItem value="Y" id="mngrY" />
<Label htmlFor="mngrY">Y</Label>
<Label htmlFor="mngrY">예</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="N" id="mngrN" />
<Label htmlFor="mngrN">N</Label>
<Label htmlFor="mngrN">아니오</Label>
</div>
</RadioGroup>
</FormControl>
apps/cs/src/pages/groups/ui/groups-dialog.tsx
+7 -3
View File
@@ -1,6 +1,6 @@
"use client";
import { memo, useState } from "react";
import { memo, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useConfirm } from "@frontend-opensource/use-react-hooks";
@@ -43,7 +43,7 @@ const GroupsDialog = memo(
const { data: group } = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, groupId],
queryFn: () => GroupApi.findGroupById(groupId!),
enabled: !!groupId && open, // open 시점 groupId가 있을 때만 상세 조회 API 호출
enabled: !!groupId && open, // open 시점 groupId가 있을 때만 상세 조회 API 호출
});
const { mutateAsync: createGroup } = useMutationWrapper({
@@ -77,7 +77,7 @@ const GroupsDialog = memo(
delYn: group?.delYn ?? "",
authrtId: group?.authrtId ?? "",
siteId: group?.siteId ?? "",
mngrYn: group?.mngrYn ?? "",
mngrYn: group?.mngrYn ?? "Y",
},
});
@@ -91,6 +91,10 @@ const GroupsDialog = memo(
if (await confirm(confirmMessage)) callback(data);
};
useEffect(() => {
if (open) form.reset();
}, [open]);
return (
<Dialog open={open} onOpenChange={setOpen} {...props}>
<DialogTrigger asChild>{children}</DialogTrigger>
apps/cs/src/pages/loginlog/ui/loginlog-page.tsx
+10 -16
View File
@@ -7,7 +7,6 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
import {
Button,
Input,
InputDatePicker,
Label,
Select,
SelectContent,
@@ -16,10 +15,11 @@ import {
SelectValue,
LoadingWithImage,
} from "@common/components";
import { columns } from "@/pages/loginlog/model/table-columns";
import { LoginlogApi, type LoginlogParams } from "@/entities/loginlog";
import { useDataTable } from "@/shared/lib";
import { ENDPOINT } from "@/shared/config";
import { columns } from "@/pages/loginlog/model/table-columns";
import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
type DateRange = {
from?: Date | undefined;
@@ -141,6 +141,11 @@ function LoginlogPage() {
setDateRange(presetDateRange || defaultDateRange);
};
const handleDateRangeChange = (dateRange: DateRange) => {
setDateRange(dateRange);
setPresetDateRange("");
};
return (
<div className="flex-1">
<div className="card card-border">
@@ -156,20 +161,9 @@ function LoginlogPage() {
<SelectItem value="3M">3개월</SelectItem>
</SelectContent>
</Select>
<InputDatePicker
value={dateRange.from}
onChange={(date) => {
setDateRange({ ...dateRange, from: date });
setPresetDateRange("");
}}
/>
~
<InputDatePicker
value={dateRange.to}
onChange={(date) => {
setDateRange({ ...dateRange, to: date });
setPresetDateRange("");
}}
<InputDateRangePicker
dateRange={dateRange}
setDateRange={handleDateRangeChange}
/>
<Label className="ml-4 mr-2 text-label">사용자ID</Label>
<Input
apps/cs/src/pages/privacylog/ui/privacylog-page.tsx
+10 -16
View File
@@ -7,7 +7,6 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
import {
Button,
Input,
InputDatePicker,
Label,
Select,
SelectContent,
@@ -15,13 +14,14 @@ import {
SelectTrigger,
SelectValue,
} from "@common/components";
import { columns } from "@/pages/privacylog/model/table-columns";
import {
PrivacyLogPrivacy,
type PrivacyLogParams,
} from "@/entities/privacylog";
import { useDataTable } from "@/shared/lib";
import { ENDPOINT } from "@/shared/config";
import { columns } from "@/pages/privacylog/model/table-columns";
import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
type DateRange = {
from?: Date | undefined;
@@ -132,6 +132,11 @@ function PrivacyLogPage() {
setDateRange(presetDateRange || defaultDateRange);
};
const handleDateRangeChange = (dateRange: DateRange) => {
setDateRange(dateRange);
setPresetDateRange("");
};
return (
<div className="flex-1">
<div className="card card-border">
@@ -147,20 +152,9 @@ function PrivacyLogPage() {
<SelectItem value="3M">3개월</SelectItem>
</SelectContent>
</Select>
<InputDatePicker
value={dateRange.from}
onChange={(date) => {
setDateRange({ ...dateRange, from: date });
setPresetDateRange("");
}}
/>
~
<InputDatePicker
value={dateRange.to}
onChange={(date) => {
setDateRange({ ...dateRange, to: date });
setPresetDateRange("");
}}
<InputDateRangePicker
dateRange={dateRange}
setDateRange={handleDateRangeChange}
/>
<Label className="ml-4 mr-2 text-label">조회정보</Label>
<Input
apps/cs/src/pages/recent/ui/recent-page.tsx
+16 -19
View File
@@ -13,7 +13,6 @@ import {
import {
Button,
Input,
InputDatePicker,
Label,
Select,
SelectContent,
@@ -31,8 +30,9 @@ import {
} from "@/entities/post";
import { BoardApi } from "@/entities/board";
import { AuthorityButton } from "@/entities/menu-authority";
import { useAlertStore, useSelectPrompt, useDataTable } from "@/shared/lib";
import { ENDPOINT } from "@/shared/config";
import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
import { useAlertStore, useSelectPrompt, useDataTable } from "@/shared/lib";
import { columns } from "../model/table-columns";
import { MovePostDialog } from "./move-post-dialog";
@@ -58,7 +58,7 @@ function RecentPage() {
});
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
const [presetDateRange, setPresetDateRange] = useState("");
const [dateRange, setDateRange] = useState<DateRange | undefined>({
const [dateRange, setDateRange] = useState<DateRange>({
from: undefined,
to: undefined,
});
@@ -169,7 +169,7 @@ function RecentPage() {
};
const handlePresetDateRange = (value: string) => {
let presetDateRange: DateRange | undefined;
let presetDateRange: DateRange;
switch (value) {
case "1W":
presetDateRange = {
@@ -190,12 +190,20 @@ function RecentPage() {
};
break;
default:
presetDateRange = undefined;
presetDateRange = {
from: undefined,
to: undefined,
};
}
setPresetDateRange(value);
setDateRange(presetDateRange);
};
const handleDateRangeChange = (dateRange: DateRange) => {
setDateRange(dateRange);
setPresetDateRange("");
};
const onSoftDeletePost = async () => {
const { resolved, value: delRsn } =
await prompt("삭제 사유를 입력해주세요.");
@@ -260,20 +268,9 @@ function RecentPage() {
<SelectItem value="3M">3개월</SelectItem>
</SelectContent>
</Select>
<InputDatePicker
value={dateRange?.from}
onChange={(date) => {
setDateRange({ ...dateRange, from: date });
setPresetDateRange("");
}}
/>
~
<InputDatePicker
value={dateRange?.to}
onChange={(date) => {
setDateRange({ ...dateRange, to: date });
setPresetDateRange("");
}}
<InputDateRangePicker
dateRange={dateRange}
setDateRange={handleDateRangeChange}
/>
<Label className="ml-4 mr-2 text-label">게시판</Label>
<Select
apps/cs/src/pages/user-statistics/ui/user-statistics-page.tsx
+24 -30
View File
@@ -4,19 +4,6 @@ import dayjs from "dayjs";
import { useState } from "react";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
import {
Button,
Input,
InputDatePicker,
Label,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@common/components";
import { SiteSelect } from "@/entities/site";
import { useDataTable } from "@/shared/lib";
import {
Chart as ChartJS,
CategoryScale,
@@ -31,6 +18,19 @@ import {
type ChartData,
} from "chart.js";
import { Bar, Doughnut } from "react-chartjs-2";
import {
Button,
Input,
Label,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@common/components";
import { SiteSelect } from "@/entities/site";
import { useDataTable } from "@/shared/lib";
import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
import { UserStatisticsApi } from "../api";
import { chartData } from "../model/chart-data";
import { columns } from "../model/table-columns";
@@ -105,7 +105,7 @@ function UserStatisticsPage() {
});
const handlePresetDateRange = (value: string) => {
let presetDateRange: DateRange | undefined;
let presetDateRange: DateRange;
switch (value) {
case "1W":
presetDateRange = {
@@ -126,10 +126,15 @@ function UserStatisticsPage() {
};
break;
default:
presetDateRange = undefined;
presetDateRange = defaultDateRange;
}
setPresetDateRange(value);
setDateRange(presetDateRange || defaultDateRange);
setDateRange(presetDateRange);
};
const handleDateRangeChange = (dateRange: DateRange) => {
setDateRange(dateRange);
setPresetDateRange("");
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -200,20 +205,9 @@ function UserStatisticsPage() {
<SelectItem value="3M">3개월</SelectItem>
</SelectContent>
</Select>
<InputDatePicker
value={dateRange.from}
onChange={(date) => {
setDateRange({ ...dateRange, from: date });
setPresetDateRange("");
}}
/>
~
<InputDatePicker
value={dateRange.to}
onChange={(date) => {
setDateRange({ ...dateRange, to: date });
setPresetDateRange("");
}}
<InputDateRangePicker
dateRange={dateRange}
setDateRange={handleDateRangeChange}
/>
<Label className="ml-4 mr-2 text-label">사이트</Label>
<SiteSelect enabledAllSite className="w-[16rem]" />
apps/cs/src/pages/users/ui/users-page.tsx
+20 -22
View File
@@ -9,7 +9,6 @@ import {
Button,
Checkbox,
Input,
InputDatePicker,
Label,
Select,
SelectContent,
@@ -25,6 +24,7 @@ import {
} from "@/entities/user";
import { ENDPOINT } from "@/shared/config";
import { useDataTable } from "@/shared/lib";
import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
import { columns } from "../model/table-columns";
type DateRange = {
@@ -40,7 +40,7 @@ function UsersPage() {
pageSize: 10,
});
const [presetDateRange, setPresetDateRange] = useState("");
const [dateRange, setDateRange] = useState<DateRange | undefined>({
const [dateRange, setDateRange] = useState<DateRange>({
from: undefined,
to: undefined,
});
@@ -62,7 +62,7 @@ function UsersPage() {
});
const { data: userSttsStats } = useQuery({
queryKey: [ENDPOINT.USER_SERVICE.USERS],
queryKey: [ENDPOINT.USER_SERVICE.USERS, "userStatusStatistics"],
queryFn: () => UserApi.selectUserSttsStats(),
});
@@ -145,7 +145,7 @@ function UsersPage() {
};
const handlePresetDateRange = (value: string) => {
let presetDateRange: DateRange | undefined;
let presetDateRange: DateRange;
switch (value) {
case "1M":
presetDateRange = {
@@ -166,15 +166,24 @@ function UsersPage() {
};
break;
default:
presetDateRange = undefined;
presetDateRange = {
from: undefined,
to: undefined,
};
}
setPresetDateRange(value);
setDateRange(presetDateRange);
};
const getUserSttsStatsCnt = (code: string): number => {
if (!Array.isArray(userSttsStats)) return 0;
return userSttsStats.find((item) => item.sttsCd === code)?.cnt ?? 0;
const handleDateRangeChange = (dateRange: DateRange) => {
setDateRange(dateRange);
setPresetDateRange("");
};
const getUserSttsStatsCnt = (code: string): string => {
if (!Array.isArray(userSttsStats)) return "0";
const count = userSttsStats.find((item) => item.sttsCd === code)?.cnt ?? 0;
return count.toLocaleString();
};
const handleUserStateCodeChange = (code: string, checked: boolean) => {
@@ -292,20 +301,9 @@ function UsersPage() {
<SelectItem value="6M">6개월</SelectItem>
</SelectContent>
</Select>
<InputDatePicker
value={dateRange?.from}
onChange={(date) => {
setDateRange({ ...dateRange, from: date });
setPresetDateRange("");
}}
/>
~
<InputDatePicker
value={dateRange?.to}
onChange={(date) => {
setDateRange({ ...dateRange, to: date });
setPresetDateRange("");
}}
<InputDateRangePicker
dateRange={dateRange}
setDateRange={handleDateRangeChange}
/>
</div>
</div>
apps/cs/src/shared/ui/input-date-range-picker.tsx
+47
View File
@@ -0,0 +1,47 @@
import { InputDatePicker } from "@common/components";
import { useEffect } from "react";
import { useAlertStore } from "../lib";
type DateRange = {
from?: Date;
to?: Date;
};
type InputDateRangePickerProps = {
dateRange: DateRange;
setDateRange: (dateRange: DateRange) => void;
};
function InputDateRangePicker({
dateRange,
setDateRange,
}: InputDateRangePickerProps) {
const alert = useAlertStore((state) => state.setMessage);
useEffect(() => {
if (dateRange.from && dateRange.to && dateRange.from > dateRange.to) {
alert("시작일보다 종료일이 커야 합니다.");
setDateRange({ ...dateRange, to: dateRange.from });
}
}, [dateRange]);
return (
<>
<InputDatePicker
value={dateRange.from}
onChange={(date) => {
setDateRange({ ...dateRange, from: date });
}}
/>
~
<InputDatePicker
value={dateRange.to}
onChange={(date) => {
setDateRange({ ...dateRange, to: date });
}}
/>
</>
);
}
export { InputDateRangePicker };