diff --git a/apps/cs/src/pages/apilog/ui/apilog-page.tsx b/apps/cs/src/pages/apilog/ui/apilog-page.tsx index 532752840..a81275198 100644 --- a/apps/cs/src/pages/apilog/ui/apilog-page.tsx +++ b/apps/cs/src/pages/apilog/ui/apilog-page.tsx @@ -6,8 +6,8 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query"; import { getCoreRowModel, type PaginationState } from "@tanstack/react-table"; import { Button, - DateRangePicker, Input, + InputDatePicker, Label, Select, SelectContent, @@ -21,7 +21,7 @@ import { ENDPOINT } from "@/shared/config"; import { columns } from "@/pages/apilog/model/table-columns"; type DateRange = { - from: Date | undefined; + from?: Date | undefined; to?: Date | undefined; }; @@ -35,6 +35,7 @@ function ApiLogPage() { pageIndex: 0, pageSize: 10, }); + const [presetDateRange, setPresetDateRange] = useState(""); const [dateRange, setDateRange] = useState(defaultDateRange); const [userId, setUserId] = useState(""); const [apiHttpPmhd, setApiHttpPmhd] = useState(""); @@ -84,8 +85,10 @@ function ApiLogPage() { ...searchParams, userId, apiHttpPmhd, - dmndDtStart: dayjs(dateRange.from).format("YYYY-MM-DD"), - dmndDtEnd: dayjs(dateRange.to).format("YYYY-MM-DD"), + dmndDtStart: dateRange.from + ? dayjs(dateRange.from).format("YYYY-MM-DD") + : "", + dmndDtEnd: dateRange.to ? dayjs(dateRange.to).format("YYYY-MM-DD") : "", }); }; @@ -126,6 +129,7 @@ function ApiLogPage() { default: presetDateRange = undefined; } + setPresetDateRange(value); setDateRange(presetDateRange || defaultDateRange); }; @@ -134,23 +138,31 @@ function ApiLogPage() {
- setDateRange(value || defaultDateRange)} - > -
- -
- + + { + setDateRange({ ...dateRange, from: date }); + setPresetDateRange(""); + }} + /> + ~ + { + setDateRange({ ...dateRange, to: date }); + setPresetDateRange(""); + }} + /> (defaultDateRange); - const [isManualLoading, setIsManualLoading] = useState(false); - const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10, }); + const [presetDateRange, setPresetDateRange] = useState(""); + const [dateRange, setDateRange] = useState(defaultDateRange); const [userId, setUserId] = useState(""); const [errOcrnYn, setErrOcrnYn] = useState("N"); const [searchParams, setSearchParams] = useState({ @@ -48,6 +47,7 @@ function LoginlogPage() { searchDateTo: dayjs().format("YYYY-MM-DD"), sort: "lgnDt,desc", }); + const [isManualLoading, setIsManualLoading] = useState(false); const query = useQuery({ queryKey: [ENDPOINT.USER_SERVICE.LOGINLOG, searchParams, pagination], @@ -88,8 +88,12 @@ function LoginlogPage() { ...searchParams, userId, errOcrnYn, - searchDateFrom: dayjs(dateRange.from).format("YYYY-MM-DD"), - searchDateTo: dayjs(dateRange.to).format("YYYY-MM-DD"), + searchDateFrom: dateRange.from + ? dayjs(dateRange.from).format("YYYY-MM-DD") + : "", + searchDateTo: dateRange.to + ? dayjs(dateRange.to).format("YYYY-MM-DD") + : "", }); query.refetch().finally(() => { setIsManualLoading(false); @@ -133,6 +137,7 @@ function LoginlogPage() { default: presetDateRange = undefined; } + setPresetDateRange(value); setDateRange(presetDateRange || defaultDateRange); }; @@ -141,23 +146,31 @@ function LoginlogPage() {
- setDateRange(value || defaultDateRange)} - > -
- -
- + + { + setDateRange({ ...dateRange, from: date }); + setPresetDateRange(""); + }} + /> + ~ + { + setDateRange({ ...dateRange, to: date }); + setPresetDateRange(""); + }} + /> (defaultDateRange); const [inqInfoKeyword, setInqInfoKeyword] = useState(""); const [searchParams, setSearchParams] = useState({ @@ -85,8 +86,10 @@ function PrivacyLogPage() { setSearchParams({ ...searchParams, inqInfoKeyword, - inqDtStart: dayjs(dateRange.from).format("YYYY-MM-DD"), - inqDtEnd: dayjs(dateRange.to).format("YYYY-MM-DD"), + inqDtStart: dateRange.from + ? dayjs(dateRange.from).format("YYYY-MM-DD") + : "", + inqDtEnd: dateRange.to ? dayjs(dateRange.to).format("YYYY-MM-DD") : "", }); }; @@ -125,6 +128,7 @@ function PrivacyLogPage() { default: presetDateRange = undefined; } + setPresetDateRange(value); setDateRange(presetDateRange || defaultDateRange); }; @@ -133,30 +137,37 @@ function PrivacyLogPage() {
- setDateRange(value || defaultDateRange)} - > -
- -
- + + { + setDateRange({ ...dateRange, from: date }); + setPresetDateRange(""); + }} + /> + ~ + { + setDateRange({ ...dateRange, to: date }); + setPresetDateRange(""); + }} + /> setInqInfoKeyword(e.target.value)} /> - diff --git a/apps/cs/src/pages/recent/ui/recent-page.tsx b/apps/cs/src/pages/recent/ui/recent-page.tsx index 8f188eced..1ad451ae7 100644 --- a/apps/cs/src/pages/recent/ui/recent-page.tsx +++ b/apps/cs/src/pages/recent/ui/recent-page.tsx @@ -12,8 +12,8 @@ import { } from "@tanstack/react-table"; import { Button, - DateRangePicker, Input, + InputDatePicker, Label, Select, SelectContent, @@ -37,7 +37,7 @@ import { columns } from "../model/table-columns"; import { MovePostDialog } from "./move-post-dialog"; type DateRange = { - from: Date | undefined; + from?: Date | undefined; to?: Date | undefined; }; @@ -51,22 +51,21 @@ function RecentPage() { const { confirm } = useConfirm(); const alert = useAlertStore((state) => state.setMessage); - const [dateRange, setDateRange] = useState({ - from: undefined, - to: undefined, - }); const [tableSort, setTableSort] = useState("regDt,desc"); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10, }); const [rowSelection, setRowSelection] = useState({}); - + const [presetDateRange, setPresetDateRange] = useState(""); + const [dateRange, setDateRange] = useState({ + from: undefined, + to: undefined, + }); const [keywordType, setKeywordType] = useState(""); const [keyword, setKeyword] = useState(""); const [bbsId, setBbsId] = useState(null); const [delYn, setDelYn] = useState("N"); - const [searchParams, setSearchParams] = useState({ keywordType: "", keyword: "", @@ -193,6 +192,7 @@ function RecentPage() { default: presetDateRange = undefined; } + setPresetDateRange(value); setDateRange(presetDateRange); }; @@ -250,21 +250,31 @@ function RecentPage() {
- -
- -
- - + + { + setDateRange({ ...dateRange, from: date }); + setPresetDateRange(""); + }} + /> + ~ + { + setDateRange({ ...dateRange, to: date }); + setPresetDateRange(""); + }} + /> - - - - - - - 1개월 - 3개월 - 6개월 - - -
- + + { + setDateRange({ ...dateRange, from: date }); + setPresetDateRange(""); + }} + /> + ~ + { + setDateRange({ ...dateRange, to: date }); + setPresetDateRange(""); + }} + />
diff --git a/packages/common/components/package.json b/packages/common/components/package.json index 0edd7211b..96d381605 100644 --- a/packages/common/components/package.json +++ b/packages/common/components/package.json @@ -57,6 +57,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "date-fns": "^3.6.0", + "dayjs": "^1.11.13", "embla-carousel-react": "^8.6.0", "js-cookie": "^3.0.5", "lucide-react": "^0.474.0", diff --git a/packages/common/components/src/ui/index.ts b/packages/common/components/src/ui/index.ts index 75231add8..ae913e79a 100644 --- a/packages/common/components/src/ui/index.ts +++ b/packages/common/components/src/ui/index.ts @@ -7,6 +7,7 @@ export * from "./carousel"; export * from "./checkbox"; export * from "./data-table"; export * from "./date-picker"; +export * from "./input-date-picker"; export * from "./date-range-picker"; export * from "./dialog"; export * from "./dropdown-menu"; diff --git a/packages/common/components/src/ui/input-date-picker/index.tsx b/packages/common/components/src/ui/input-date-picker/index.tsx new file mode 100644 index 000000000..93d2caf7c --- /dev/null +++ b/packages/common/components/src/ui/input-date-picker/index.tsx @@ -0,0 +1,136 @@ +"use client"; + +import dayjs from "dayjs"; +import { useEffect, useState } from "react"; +import { CalendarIcon } from "lucide-react"; + +import { Button } from "../button"; +import { Calendar } from "../calendar"; +import { Input } from "../input"; +import { Popover, PopoverContent, PopoverTrigger } from "../popover"; + +import "./input-date-picker.css"; + +export interface InputDatePickerProps { + value?: Date; + defaultValue?: Date; + onChange?: (date: Date | undefined) => void; + placeholder?: string; + disabled?: boolean; + className?: string; +} + +export function InputDatePicker({ + value: controlledValue, + defaultValue, + onChange, + placeholder, + disabled, + className, +}: InputDatePickerProps) { + const isControlled = controlledValue !== undefined; + + const [open, setOpen] = useState(false); + const [internalDate, setInternalDate] = useState( + defaultValue, + ); + const [month, setMonth] = useState( + isControlled ? controlledValue : defaultValue, + ); + + // 실제로 사용할 date 값 (제어/비제어 모두 지원) + const date = isControlled ? controlledValue : internalDate; + + // 표시할 문자열 값 + const [displayValue, setDisplayValue] = useState(date); + + // 제어 컴포넌트일 경우 외부 값 변경 감지 + useEffect(() => { + if (isControlled) { + setDisplayValue(controlledValue); + setMonth(controlledValue); + } + }, [isControlled, controlledValue]); + + // 내부 상태 변경 핸들러 + const handleDateChange = (newDate: Date | undefined) => { + if (!isControlled) { + setInternalDate(newDate); + } + + if (onChange) { + onChange(newDate); + } + + setDisplayValue(newDate); + }; + + return ( +
+
+ { + const newDate = new Date(e.target.value); + setDisplayValue(newDate); + + if (isValidDate(newDate)) { + handleDateChange(newDate); + setMonth(newDate); + } + }} + onKeyDown={(e) => { + if (e.key === "ArrowDown") { + e.preventDefault(); + setOpen(true); + } + }} + placeholder={placeholder} + /> + + + + + + { + handleDateChange(newDate); + setOpen(false); + }} + /> + + +
+
+ ); +} + +function isValidDate(date: Date | undefined) { + if (!date) { + return false; + } + return !isNaN(date.getTime()); +} diff --git a/packages/common/components/src/ui/input-date-picker/input-date-picker.css b/packages/common/components/src/ui/input-date-picker/input-date-picker.css new file mode 100644 index 000000000..1039a6a63 --- /dev/null +++ b/packages/common/components/src/ui/input-date-picker/input-date-picker.css @@ -0,0 +1,7 @@ +@tailwind components; + +@layer components { + .input-date-picker::-webkit-calendar-picker-indicator { + display: none; + } +} diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx index 650fd2474..75edc2e1e 100644 --- a/packages/common/components/src/ui/lnb/index.tsx +++ b/packages/common/components/src/ui/lnb/index.tsx @@ -42,6 +42,7 @@ export function LNB({ handleMenuClick?: (item: MenuItem) => void; }) { const [defaultOpenMenuIds, setDefaultOpenMenuIds] = useState([]); + const [currentMenuCode, setCurrentMenuCode] = useState(null); const prevPathRef = useRef(currentPath); const cookieSiteId = getCookie("site-id-key") ?? ""; @@ -70,6 +71,7 @@ export function LNB({ if (!menuList || !currentPath) return; const matchedMenuIds: number[] = []; + let matchedMenuCode: number | null = null; const findMatchedMenus = (items: MenuItem[]) => { items.forEach((item) => { @@ -77,25 +79,32 @@ export function LNB({ const parentIds = getParentIds(item.menuCd)(menuList); matchedMenuIds.push(...parentIds, item.menuCd); } + if (item.children) findMatchedMenus(item.children); + }); + }; - if (item.children) { - findMatchedMenus(item.children); - } + const findMatchedMenuCode = (items: MenuItem[]) => { + items.forEach((item) => { + if (matchedMenuCode) return; + if (currentPath === item.urlPath) matchedMenuCode = item.menuCd; + if (item.children) findMatchedMenuCode(item.children); }); }; findMatchedMenus(menuList); + findMatchedMenuCode(menuList); - if (matchedMenuIds.length > 0) { + if (matchedMenuIds.length > 0) setDefaultOpenMenuIds((prev) => [ ...new Set([...prev, ...matchedMenuIds]), ]); - } if (prevPathRef.current !== currentPath) { setDefaultOpenMenuIds(matchedMenuIds); prevPathRef.current = currentPath; } + + if (matchedMenuCode) setCurrentMenuCode(matchedMenuCode); }, [menuList, currentPath]); function MenuItem({ @@ -106,7 +115,8 @@ export function LNB({ isSubMenu?: boolean; }) { const { open: isSidebarOpen, setOpen } = useSidebar(); - const isMatched = isPathMatched(item.urlPath); + const isMatched = + isPathMatched(item.urlPath) && currentMenuCode === item.menuCd; const handleClick = () => { if (!isSidebarOpen) setOpen(true); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86350bd39..4f07dcd3c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -913,6 +913,9 @@ importers: date-fns: specifier: ^3.6.0 version: 3.6.0 + dayjs: + specifier: ^1.11.13 + version: 1.11.13 embla-carousel-react: specifier: ^8.6.0 version: 8.6.0(react@18.3.1) @@ -2546,7 +2549,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.6.3) typescript: 5.6.3 - vite: 6.2.0(@types/node@22.13.9) + vite: 6.2.0(@types/node@22.13.5) dev: true /@jridgewell/gen-mapping@0.3.8: @@ -2637,7 +2640,7 @@ packages: dnd-multi-backend: 8.1.2(dnd-core@16.0.1) framer-motion: 11.18.2(react-dom@18.3.1)(react@18.3.1) react: 18.3.1 - react-dnd: 16.0.1(@types/node@22.13.9)(@types/react@18.3.18)(react@18.3.1) + react-dnd: 16.0.1(@types/node@22.13.5)(@types/react@18.3.18)(react@18.3.1) react-dnd-html5-backend: 16.0.1 react-dnd-touch-backend: 16.0.1 react-dom: 18.3.1(react@18.3.1) @@ -4119,7 +4122,7 @@ packages: browser-assert: 1.2.1 storybook: 8.6.0(prettier@3.5.2) ts-dedent: 2.2.0 - vite: 6.2.0(@types/node@22.13.9) + vite: 6.2.0(@types/node@22.13.5) dev: true /@storybook/components@8.6.0(storybook@8.6.0): @@ -4251,7 +4254,7 @@ packages: resolve: 1.22.10 storybook: 8.6.0(prettier@3.5.2) tsconfig-paths: 4.2.0 - vite: 6.2.0(@types/node@22.13.9) + vite: 6.2.0(@types/node@22.13.5) transitivePeerDependencies: - rollup - supports-color @@ -4881,7 +4884,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.9) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 6.2.0(@types/node@22.13.9) + vite: 6.2.0(@types/node@22.13.5) transitivePeerDependencies: - supports-color dev: true @@ -10356,7 +10359,7 @@ packages: debug: 4.4.0 globrex: 0.1.2 tsconfck: 3.1.5(typescript@5.6.3) - vite: 6.2.0(@types/node@22.13.9) + vite: 6.2.0(@types/node@22.13.5) transitivePeerDependencies: - supports-color - typescript