style(ui): 배경색 통일 및 스크롤 최적화
- autocomplete-search-input: !bg-background 강제 적용 - section-paper: 배경색 진하게(bg-muted/40), 기본 테두리 활성화, overflow-visible - modal-repeater-table: tbody 흰색 배경, 스크롤 높이 제한(240px), 헤더 고정 - autocomplete 드롭다운: z-index 100으로 상향 배경색 통일로 일관된 디자인, 스크롤로 공간 효율 개선
This commit is contained in:
parent
da0a82a0ec
commit
58427fb8e0
|
|
@ -175,7 +175,7 @@ export function AutocompleteSearchInputComponent({
|
|||
onFocus={handleInputFocus}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
className="h-8 pr-16 text-xs sm:h-10 sm:text-sm"
|
||||
className="h-8 pr-16 text-xs sm:h-10 sm:text-sm !bg-background"
|
||||
/>
|
||||
<div className="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
{loading && (
|
||||
|
|
@ -198,7 +198,7 @@ export function AutocompleteSearchInputComponent({
|
|||
|
||||
{/* 드롭다운 결과 */}
|
||||
{isOpen && (results.length > 0 || loading) && (
|
||||
<div className="absolute z-50 mt-1 max-h-[300px] w-full overflow-y-auto rounded-md border bg-background shadow-lg">
|
||||
<div className="absolute z-[100] mt-1 max-h-[300px] w-full overflow-y-auto rounded-md border bg-background shadow-lg">
|
||||
{loading && results.length === 0 ? (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
<Loader2 className="mx-auto mb-2 h-4 w-4 animate-spin" />
|
||||
|
|
|
|||
|
|
@ -118,10 +118,10 @@ export function RepeaterTable({
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<div className="border rounded-md overflow-hidden bg-background">
|
||||
<div className="overflow-x-auto max-h-[240px] overflow-y-auto">
|
||||
<table className="w-full text-xs sm:text-sm">
|
||||
<thead className="bg-muted">
|
||||
<thead className="bg-muted sticky top-0 z-10">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
|
||||
#
|
||||
|
|
@ -141,7 +141,7 @@ export function RepeaterTable({
|
|||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody className="bg-background">
|
||||
{data.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@ export function SectionPaperComponent({
|
|||
|
||||
// 배경색 매핑
|
||||
const backgroundColorMap = {
|
||||
default: "bg-muted/20",
|
||||
muted: "bg-muted/30",
|
||||
accent: "bg-accent/20",
|
||||
primary: "bg-primary/5",
|
||||
default: "bg-muted/40",
|
||||
muted: "bg-muted/50",
|
||||
accent: "bg-accent/30",
|
||||
primary: "bg-primary/10",
|
||||
custom: "",
|
||||
};
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ export function SectionPaperComponent({
|
|||
const padding = config.padding || "md";
|
||||
const rounded = config.roundedCorners || "md";
|
||||
const shadow = config.shadow || "none";
|
||||
const showBorder = config.showBorder || false;
|
||||
const showBorder = config.showBorder !== undefined ? config.showBorder : true;
|
||||
const borderStyle = config.borderStyle || "subtle";
|
||||
|
||||
// 커스텀 배경색 처리
|
||||
|
|
@ -87,7 +87,7 @@ export function SectionPaperComponent({
|
|||
<div
|
||||
className={cn(
|
||||
// 기본 스타일
|
||||
"relative transition-colors",
|
||||
"relative transition-colors overflow-visible",
|
||||
|
||||
// 배경색
|
||||
backgroundColor !== "custom" && backgroundColorMap[backgroundColor],
|
||||
|
|
|
|||
Loading…
Reference in New Issue