baekyangdan/scheduler-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

issue #60
All checks were successful
Test CI / build (push) Successful in 16s
Details

Browse Source 
- 일정 시간 picker ui 수정(적용/취소 추가)
This commit is contained in:
geonhee-min
2025-12-08 17:25:34 +09:00
parent 6bbffbcb50
commit 47d2eae519
2 changed files with 89 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/ui/component/popover/schedule/TimePickPopover.tsx
View File

@@ -60,13 +60,13 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
>
<ToggleGroupItem
value={"오전"}
className="w-full h-7"
className="w-full h-7 rounded-none! rounded-tl-md!"
>
오전
</ToggleGroupItem>
<ToggleGroupItem
value={"오후"}
className="w-full h-7"
className="w-full h-7 rounded-none!"
>
오후
</ToggleGroupItem>
@@ -81,7 +81,7 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
{
[1,2,3,4,5,6,7,8,9,10,11,12].map((time) => (
<ToggleGroupItem
className="w-full h-7 rounded-none"
className="w-full h-7 rounded-none!"
value={time.toString().padStart(2, '0')}
>
{time.toString().padStart(2, '0')}
@@ -95,20 +95,32 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
>
<ToggleGroup
type="single"
className="w-full h-full flex flex-col justify-start items-center"
className="w-full h-full rounded-none border-r flex flex-col justify-start items-center"
>
{
Array.from({ length: 60 }).map((_, idx) => (
<ToggleGroupItem
value={idx.toString().padStart(2, '0')}
className="w-full h-7"
className="w-full h-7 rounded-none!"
>
{idx.toString().padStart(0, '2')}
{idx.toString().padStart(2, '0')}
</ToggleGroupItem>
))
}
</ToggleGroup>
</ScrollArea>
<div className="w-15 h-full flex flex-col">
<div
className="cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md! hover:bg-gray-100"
>
적용
</div>
<div
className="cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md! hover:bg-gray-100"
>
취소
</div>
</div>
</PopoverContent>
</Popover>
<span> - </span>
@@ -119,15 +131,81 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
className="border border-indigo-100 bg-white hover:bg-indigo-100 text-black"
disabled={disabled}
>
종료 시간 설정
</Button>
</PopoverTrigger>
<PopoverContent
className="w-fit h-fit"
className="w-fit h-42 flex flex-row p-0"
align={'end'}
side={popoverAlign === 'start' ? 'bottom' : 'top'}
>
<ToggleGroup
type="single"
className="w-15 flex flex-col justify-start items-center"
>
<ToggleGroupItem
value={"오전"}
className="w-full h-7 rounded-none! rounded-tl-md!"
>
오전
</ToggleGroupItem>
<ToggleGroupItem
value={"오후"}
className="w-full h-7 rounded-none!"
>
오후
</ToggleGroupItem>
</ToggleGroup>
<ScrollArea
className="w-15 h-full"
>
<ToggleGroup
type="single"
className="w-15 border-r rounded-none border-l flex flex-col justify-start items-center"
>
{
[1,2,3,4,5,6,7,8,9,10,11,12].map((time) => (
<ToggleGroupItem
className="w-full h-7 rounded-none!"
value={time.toString().padStart(2, '0')}
>
{time.toString().padStart(2, '0')}
</ToggleGroupItem>
))
}
</ToggleGroup>
</ScrollArea>
<ScrollArea
className="w-15 h-full"
>
<ToggleGroup
type="single"
className="w-full h-full rounded-none border-r flex flex-col justify-start items-center"
>
{
Array.from({ length: 60 }).map((_, idx) => (
<ToggleGroupItem
value={idx.toString().padStart(2, '0')}
className="w-full h-7 rounded-none!"
>
{idx.toString().padStart(2, '0')}
</ToggleGroupItem>
))
}
</ToggleGroup>
</ScrollArea>
<div className="w-15 h-full flex flex-col">
<div
className="cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md! hover:bg-gray-100"
>
적용
</div>
<div
className="cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md! hover:bg-gray-100"
>
취소
</div>
</div>
</PopoverContent>
</Popover>
</div>

2
src/ui/page/home/TempPage.tsx
View File

@@ -18,6 +18,8 @@ export const TempPage = () => {
localStorage.setItem('autoLogin', 'false');
navigate(PageRouting["LOGIN"].path);
}
} else {
navigate(PageRouting["LOGIN"].path);
}
}, []);