From 47d2eae519b965250526c26492133a4e3eca734f Mon Sep 17 00:00:00 2001
From: geonhee-min <garett.min@truabutment.com>
Date: Mon, 8 Dec 2025 17:25:34 +0900
Subject: [PATCH] =?UTF-8?q?issue=20#60=20-=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20picker=20ui=20=EC=88=98=EC=A0=95(=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9/=EC=B7=A8=EC=86=8C=20=EC=B6=94=EA=B0=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popover/schedule/TimePickPopover.tsx      | 96 +++++++++++++++++--
 src/ui/page/home/TempPage.tsx                 |  2 +
 2 files changed, 89 insertions(+), 9 deletions(-)

diff --git a/src/ui/component/popover/schedule/TimePickPopover.tsx b/src/ui/component/popover/schedule/TimePickPopover.tsx
index 48255b3..1c60b1f 100644
--- a/src/ui/component/popover/schedule/TimePickPopover.tsx
+++ b/src/ui/component/popover/schedule/TimePickPopover.tsx
@@ -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>
diff --git a/src/ui/page/home/TempPage.tsx b/src/ui/page/home/TempPage.tsx
index bcdc378..6cba06c 100644
--- a/src/ui/page/home/TempPage.tsx
+++ b/src/ui/page/home/TempPage.tsx
@@ -18,6 +18,8 @@ export const TempPage = () => {
         localStorage.setItem('autoLogin', 'false');
         navigate(PageRouting["LOGIN"].path);
       }
+    } else {
+      navigate(PageRouting["LOGIN"].path);
     }
   }, []);