MVPTeam/DABEEO-DETECTION-APPLICATION
Template
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 컴포넌트 추가, 스타일 수정

Browse Source
This commit is contained in:
JoohyunKim(Lucy)
2026-04-10 12:23:48 +09:00
parent a836333512
commit 35f6023f5a
19 changed files with 1263 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web-app/app/shared/components/datePicker/DatePicker.tsx
View File

@@ -8,16 +8,16 @@ import { calendarDateToDate, dateToCalendarDate } from '../calendar/utils';
import { CalendarIcon } from '../icons';
const trigger = tv({
base: 'flex h-9 w-[156px] cursor-pointer items-center border border-kc-gray-be bg-white text-left outline-none transition',
base: 'flex h-9 w-[156px] cursor-pointer items-center border border-dabeeo-gray-be bg-white text-left outline-none transition',
variants: {
isHovered: {
true: 'border-kc-black-34',
true: 'border-dabeeo-black-34',
},
isFocused: {
true: 'border-kc-black-34',
true: 'border-dabeeo-black-34',
},
isDisabled: {
true: 'cursor-default border-kc-gray-99 bg-kc-gray-eb',
true: 'cursor-default border-dabeeo-gray-99 bg-dabeeo-gray-eb',
},
isFocusVisible: {
true: 'ring-2 ring-offset-2 ring-primary',
@@ -51,21 +51,21 @@ export function DatePicker({ value, onChange, maxValue, minValue, isDisabled, cl
>
<Group>
<Button className={(renderProps) => trigger(renderProps)}>
<span className={`flex-1 px-3 text-sm ${value ? 'text-kc-black-34' : 'text-kc-gray-99'}`}>
<span className={`flex-1 px-3 text-sm ${value ? 'text-dabeeo-black-34' : 'text-dabeeo-gray-99'}`}>
{value ? dayjs(value).format('YYYY.MM.DD') : 'YYYY.MM.DD'}
</span>
<span className="flex h-full w-8 shrink-0 items-center justify-center text-kc-gray-99">
<span className="flex h-full w-8 shrink-0 items-center justify-center text-dabeeo-gray-99">
<CalendarIcon className="h-4 w-4" />
</span>
</Button>
</Group>
<Popover className="bg-white border border-kc-gray-be p-3 px-6 pb-6 drop-shadow-modal outline-none" offset={12}>
<Popover className="bg-white border border-dabeeo-gray-be p-3 px-6 pb-6 drop-shadow-modal outline-none" offset={12}>
<OverlayArrow className="group/arrow">
<svg
width="12"
height="8"
viewBox="0 0 12 8"
className="block fill-white stroke-kc-gray-be group-data-[placement=bottom]/arrow:rotate-180"
className="block fill-white stroke-dabeeo-gray-be group-data-[placement=bottom]/arrow:rotate-180"
>
<path d="M0 0 L6 8 L12 0" />
</svg>

20
web-app/app/shared/components/datePicker/DateRangePicker.tsx
View File

@@ -16,16 +16,16 @@ import { RangeCalendar } from '../calendar/RangeCalendar';
import { calendarDateToDate, dateToCalendarDate } from '../calendar/utils';
const trigger = tv({
base: 'flex h-9 w-[260px] cursor-pointer items-center border border-kc-gray-be bg-white text-left outline-none transition',
base: 'flex h-9 w-[260px] cursor-pointer items-center border border-dabeeo-gray-be bg-white text-left outline-none transition',
variants: {
isHovered: {
true: 'border-kc-black-34',
true: 'border-dabeeo-black-34',
},
isFocused: {
true: 'border-kc-black-34',
true: 'border-dabeeo-black-34',
},
isDisabled: {
true: 'cursor-default border-kc-gray-99 bg-kc-gray-eb',
true: 'cursor-default border-dabeeo-gray-99 bg-dabeeo-gray-eb',
},
isFocusVisible: {
true: 'ring-2 ring-offset-2 ring-primary',
@@ -81,25 +81,25 @@ export function DateRangePicker({
>
<Group>
<Button className={(renderProps) => trigger(renderProps)}>
<span className={`tabular-nums px-3 text-sm ${value?.start ? 'text-kc-black-34' : 'text-kc-gray-99'}`}>
<span className={`tabular-nums px-3 text-sm ${value?.start ? 'text-dabeeo-black-34' : 'text-dabeeo-gray-99'}`}>
{value?.start ? dayjs(value.start).format('YYYY. MM. DD') : 'YYYY.MM.DD'}
</span>
<span className="text-sm text-kc-gray-99">~</span>
<span className={`tabular-nums flex-1 px-3 text-sm ${value?.end ? 'text-kc-black-34' : 'text-kc-gray-99'}`}>
<span className="text-sm text-dabeeo-gray-99">~</span>
<span className={`tabular-nums flex-1 px-3 text-sm ${value?.end ? 'text-dabeeo-black-34' : 'text-dabeeo-gray-99'}`}>
{value?.end ? dayjs(value.end).format('YYYY. MM. DD') : 'YYYY.MM.DD'}
</span>
<span className="flex h-full w-8 shrink-0 items-center justify-center text-kc-gray-99">
<span className="flex h-full w-8 shrink-0 items-center justify-center text-dabeeo-gray-99">
<CalendarIcon className="h-4 w-4" />
</span>
</Button>
</Group>
<Popover className="bg-white border border-kc-gray-be p-3 px-6 pb-6 drop-shadow-modal outline-none" offset={12}>
<Popover className="bg-white border border-dabeeo-gray-be p-3 px-6 pb-6 drop-shadow-modal outline-none" offset={12}>
<OverlayArrow className="group/arrow">
<svg
width="12"
height="8"
viewBox="0 0 12 8"
className="block fill-white stroke-kc-gray-be group-data-[placement=bottom]/arrow:rotate-180"
className="block fill-white stroke-dabeeo-gray-be group-data-[placement=bottom]/arrow:rotate-180"
>
<path d="M0 0 L6 8 L12 0" />
</svg>