fix: 타임 피커 스타일 수정

Nexters · Jan 1, 2025 · fce11f5 · fce11f5
1 parent 20336c7
commit fce11f5
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/packages/ui/src/components/TimePicker/TimePicker.styles.ts b/packages/ui/src/components/TimePicker/TimePicker.styles.ts
@@ -16,21 +16,21 @@ const Text = styled(TextField)`
 
 const Dimmed = styled.div`
   position: fixed;
-  z-index: 1;
+  z-index: 999;
   bottom: 0;
   left: 0;
   width: 100vw !important;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.25);
   ${mq_lg} {
-    display: none;
+    background-color: transparent;
+    position: absolute;
   }
 `;
 
 const Control = styled.div`
   position: fixed;
   width: 100vw !important;
-  z-index: 2;
   left: 0;
   bottom: 0;
   border-radius: 12px 12px 0px 0px;

diff --git a/packages/ui/src/components/TimePicker/index.tsx b/packages/ui/src/components/TimePicker/index.tsx
@@ -89,7 +89,7 @@ function TimePicker({ disabled, errorMessage, value, onChange, onBlur }: Props)
           />
         </Styled.TextContainer>
         {open && (
-          <>
+          <Styled.Dimmed>
             <Styled.Control ref={ref}>
               <Styled.Title>
                 시간 선택하기
@@ -157,8 +157,7 @@ function TimePicker({ disabled, errorMessage, value, onChange, onBlur }: Props)
                 </Styled.List>
               </Styled.ListContainer>
             </Styled.Control>
-            <Styled.Dimmed />
-          </>
+          </Styled.Dimmed>
         )}
       </Styled.Container>
     </>