search 폼 형태 수정.

This commit is contained in:
truthwing
2025-04-17 11:35:35 +09:00
parent c3d2804471
commit 00548eb914
9 changed files with 24 additions and 33 deletions
@@ -1,5 +1,4 @@
import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@common/components";
import { useState } from "react";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader } from "@common/components";
type ModalType = {
bodyClass: string;
@@ -1,7 +1,7 @@
function SearchDiv ({children}:{ children: React.ReactNode; }) {
return (
<div className="flex card card-border !mt-6">
{children}
{children}
</div>
)
}
@@ -242,7 +242,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
return (
isShowPart ? (
<div className="grid grid-cols-12 gap-4 w-4/5 mx-4">
<div className="grid grid-cols-12 gap-5 w-11/12 m-4">
<SelectBox className="col-span-3" label={'구분'} selectArray={selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/>
{showPart === '01' ? (
<>
@@ -265,7 +265,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
{children}
</div>
) : (
<div className="grid grid-cols-12 gap-4 w-4/5 mx-4">
<div className="grid grid-cols-12 gap-5 w-5/6 m-4">
{children}
</div>
)
@@ -1,11 +1,11 @@
import React from 'react'
import React from 'react';
function SearchFormRight(props: {children: React.ReactNode}) {
return (
<div className="w-1/5 mx-5 flex items-center justify-end space-x-2">
<div className="w-1/12 mx-5 flex flex-col items-center justify-center space-x-2">
{props.children}
</div>
)
}
export { SearchFormRight };
export { SearchFormRight };
@@ -21,9 +21,9 @@ const SearchInput = React.forwardRef<HTMLInputElement, {className:string, label:
return (
<div className={className+" flex items-center"} >
{label && <Label className="w-20 text-base text-gray-600">{label}</Label>}
<Input className="flex-1 ml-8 w-3/4 h-10 border rounded" value={textValue} onChange={changeText} onKeyUp={keyUp}></Input>
{label && <Label className="w-20 text-xl text-gray-600">{label}</Label>}
<Input className="!text-lg flex-1 w-3/4 h-14 border rounded" value={textValue} onChange={changeText} onKeyUp={keyUp}></Input>
</div>
)
});
export { SearchInput };
export { SearchInput };
@@ -24,12 +24,12 @@ const SearchInputSelect = React.forwardRef<HTMLInputElement, {className:string,
return (
<div className={className+" flex items-center"} >
{label && <Label className="w-20 text-base text-gray-600">{label}</Label>}
{label && <Label className="w-20 text-xl text-gray-600">{label}</Label>}
<div className="flex w-full items-center">
<Input className="w-2/3 text-lg h-10 p-2 border rounded" value={textValue} onChange={changeText} />
<Input className="w-2/3 text-xl h-14 p-2 border rounded" value={textValue} onChange={changeText} />
<Select onValueChange={onSelectValue} value={selectValue}>
<SelectTrigger className="ml-2 w-1/3 text-lg" >
<SelectValue placeholder={selectData?.[0]?.text ?? ""} />
<SelectTrigger className="ml-2 w-1/3" >
<SelectValue placeholder={selectData?.[0]?.text ?? ""} />
</SelectTrigger>
{/* <SelectContent ref={refs ? (refs as unknown as RefType)?.selectValue : null}> */}
<SelectContent >
@@ -42,4 +42,4 @@ const SearchInputSelect = React.forwardRef<HTMLInputElement, {className:string,
</div>
)
});
export { SearchInputSelect };
export { SearchInputSelect };
@@ -23,7 +23,7 @@ const SelectBox = React.forwardRef<
return (
<div className={className+" flex items-center"} ref={ref}>
{label && <Label className="w-20 text-base text-gray-600">{label}</Label>}
{label && <Label className="w-20 text-xl text-gray-600">{label}</Label>}
<Select onValueChange={onSelectValue} value={value !== undefined ? String(value) : undefined}>
<SelectTrigger className={selectClass?selectClass:"flex-1 p-2 border rounded"}>
<SelectValue placeholder={placeHolder} />
@@ -38,4 +38,4 @@ const SelectBox = React.forwardRef<
)
})
export { SelectBox };
export { SelectBox };
@@ -1,6 +1,6 @@
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"
import * as React from "react"
import { cn } from "../../../lib/utils"
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"flex h-13 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-xl ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...props}
@@ -103,7 +103,7 @@ const SelectLabel = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
className={cn("py-1.5 pl-8 pr-2 text-lg font-semibold", className)}
{...props}
/>
))
@@ -116,7 +116,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-lg outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
@@ -145,14 +145,6 @@ const SelectSeparator = React.forwardRef<
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue
}
@@ -51,7 +51,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
</div> : <></>}
<div className={`card !m-[1.2rem] !p-0r ${className}`}>
<Table variant="secondary">
<TableHeader >
<TableHeader className="font-bold">
{children ? <>{children}</> : <TableRow>
{headlist?.map((head) => (
<TableHead key={head.id}>{head.title}</TableHead>