css 적용되도록 수정.
table에 클릭시 opacity 적용.
This commit is contained in:
truthwing
@@ -63,7 +63,7 @@
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"eslint-plugin-storybook": "^0.11.2",
|
||||
"globals": "^15.14.0",
|
||||
"postcss": "^8.5.1",
|
||||
"postcss": "^8.5.3",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"storybook": "^8.5.3",
|
||||
|
||||
@@ -1,69 +1,10 @@
|
||||
@import "@common/assets/styles/base.css";
|
||||
@import "@common/assets/styles/diveicon.css";
|
||||
@import "@common/assets/styles/components.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #0a0a0a;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #0a0a0a;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #0a0a0a;
|
||||
--primary: #2094fa;
|
||||
--primary-foreground: #fafafa;
|
||||
--secondary: #f5f5f5;
|
||||
--secondary-foreground: #0f1e33;
|
||||
--muted: #f5f5f5;
|
||||
--muted-foreground: #737373;
|
||||
--accent: #f5f5f5;
|
||||
--accent-foreground: #0f1e33;
|
||||
--destructive: #ff4141;
|
||||
--destructive-foreground: #fafafa;
|
||||
--border: #e5e5e5;
|
||||
--input: #e5e5e5;
|
||||
--label: #666666;
|
||||
--ring: #0a0a0a;
|
||||
--chart-1: #d95b43;
|
||||
--chart-2: #299392;
|
||||
--chart-3: #263e4d;
|
||||
--chart-4: #dfb938;
|
||||
--chart-5: #f08634;
|
||||
--radius: 1rem;
|
||||
}
|
||||
[data-mode="dark"] {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #fafafa;
|
||||
--card: #0a0a0a;
|
||||
--card-foreground: #fafafa;
|
||||
--popover: #0a0a0a;
|
||||
--popover-foreground: #fafafa;
|
||||
--primary: #2094fa;
|
||||
--primary-foreground: #171717;
|
||||
--secondary: #262626;
|
||||
--secondary-foreground: #fafafa;
|
||||
--muted: #262626;
|
||||
--muted-foreground: #a2a2a2;
|
||||
--accent: #262626;
|
||||
--accent-foreground: #fafafa;
|
||||
--destructive: #b22222;
|
||||
--destructive-foreground: #fafafa;
|
||||
--border: #262626;
|
||||
--input: #262626;
|
||||
--label: #f1f1f1;
|
||||
--ring: #d4d4d4;
|
||||
--chart-1: #3399ff;
|
||||
--chart-2: #339966;
|
||||
--chart-3: #ff9933;
|
||||
--chart-4: #cc66ff;
|
||||
--chart-5: #ff3399;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
@@ -74,4 +15,4 @@
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,11 +0,0 @@
|
||||
|
||||
@layer base {}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import UiPageNations from "./uiPageNations";
|
||||
|
||||
type UiTableProps = {
|
||||
@@ -21,12 +21,25 @@ type UiHeadProps = {
|
||||
|
||||
export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) {
|
||||
const [cur, setCur] = useState<number>(1);
|
||||
const [idx, setIdx] = useState<number>(0);
|
||||
const handlePageChange = (page: number) => {
|
||||
setCur(page);
|
||||
onPageChange(page);
|
||||
}
|
||||
const style = cellClick ? 'cursor-pointer' : '';
|
||||
const handleCellClick = (index: number) => {
|
||||
if (cellClick) {
|
||||
console.log("cellClick", index);
|
||||
cellClick(index);
|
||||
setIdx(index);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
console.log("idx", idx);
|
||||
console.log("idx", idx);
|
||||
|
||||
},[idx])
|
||||
return (
|
||||
<>
|
||||
{headName ? <div className="card-header">
|
||||
@@ -42,10 +55,11 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
|
||||
</TableRow>}
|
||||
</TableHeader>
|
||||
<TableBody className='text-center'>
|
||||
{tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => (
|
||||
<TableRow key={index + "row"} >
|
||||
{tableData?.map((el: { [key: string]: any}, index) => (
|
||||
<TableRow key={index + "row"} >
|
||||
{headlist?.map((head) => (
|
||||
<TableCell className={style} onClick={()=>cellClick && cellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
|
||||
// <TableCell className={cellClick&&idx==index?"bg-black/10 cursor-pointer":cellClick?"cursor-pointer":""} onClick={()=>handleCellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
|
||||
<TableCell className={cellClick&&idx==index?"opacity-40 cursor-pointer":cellClick?"cursor-pointer":""} onClick={()=>handleCellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
@@ -55,4 +69,4 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,93 +1,8 @@
|
||||
import presetConfig from "../../../tailwind.config.preset";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ["class", "[data-mode='dark']"],
|
||||
content: ["./src/**/*.{ts,tsx,js,jsx}", "./.storybook/**/*.{ts,tsx,js,jsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
card: {
|
||||
DEFAULT: "var(--card)",
|
||||
foreground: "var(--card-foreground)",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "var(--popover)",
|
||||
foreground: "var(--popover-foreground)",
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: "var(--primary)",
|
||||
foreground: "var(--primary-foreground)",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "var(--secondary)",
|
||||
foreground: "var(--secondary-foreground)",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "var(--muted)",
|
||||
foreground: "var(--muted-foreground)",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "var(--accent)",
|
||||
foreground: "var(--accent-foreground)",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "var(--destructive)",
|
||||
foreground: "var(--destructive-foreground)",
|
||||
},
|
||||
border: "var(--border)",
|
||||
input: "var(--input)",
|
||||
label: "var(--label)",
|
||||
ring: "var(--ring)",
|
||||
chart: {
|
||||
1: "var(--chart-1)",
|
||||
2: "var(--chart-2)",
|
||||
3: "var(--chart-3)",
|
||||
4: "var(--chart-4)",
|
||||
5: "var(--chart-5)",
|
||||
},
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
"spin-parent": {
|
||||
from: { transform: "translate(-50%,-50%) rotate(0deg)" },
|
||||
to: { transform: "translate(-50%,-50%) rotate(360deg)" },
|
||||
},
|
||||
"spin-child": {
|
||||
from: { transform: "translate(0,0) rotate(0deg)" },
|
||||
to: { transform: "translate(0,0) rotate(360deg)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"spin-parent": "spin-parent 6s linear infinite",
|
||||
"spin-child": "spin-child 1s ease-in-out infinite",
|
||||
},
|
||||
backgroundImage: {
|
||||
"gradient-blue": "linear-gradient(.25turn, #2094fa, #00e5dd)",
|
||||
"gradient-blue-hover":
|
||||
"linear-gradient(.25turn, #2298ff, #01dcda, #00e8b4)",
|
||||
"gradient-green": "linear-gradient(.25turn, #00bad0, #00eb6f)",
|
||||
"gradient-green-hover": "linear-gradient(.25turn, #00bad0, #12fe81)",
|
||||
"gradient-red": "linear-gradient(.25turn, #ff487c, #ffc425)",
|
||||
"gradient-red-hover": "linear-gradient(.25turn, #ff487c, #ffea3a)",
|
||||
"gradient-purple": "linear-gradient(.25turn, #be30d7, #ff9264)",
|
||||
"gradient-purple-hover": "linear-gradient(.25turn, #be30d7, #ffaf5a)",
|
||||
},
|
||||
},
|
||||
},
|
||||
presets: [presetConfig],
|
||||
content: ["./src/**/*.{ts,tsx,js,jsx}"],
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user