Style: 타임 선택 모달에서 시간 버튼 width와 margin을 %로 디바이스에 대응하여 조정

sharemindteam · Apr 26, 2024 · 7d0bb08 · 7d0bb08
1 parent c6e36ab
commit 7d0bb08
Showing 1 changed file with 9 additions and 8 deletions.
diff --git a/src/components/Seller/SellerMyPageModifyProfile/TimeSelectModal.tsx b/src/components/Seller/SellerMyPageModifyProfile/TimeSelectModal.tsx
@@ -189,7 +189,6 @@ function TimeSelectModal({
           시작시간과 종료시간을 1시간 이상 간격으로 설정해주세요
         </Caption2>
       </div>
-      <Space height="1.6rem" />
       <HourButtonList>
         {hourList.map((hour) => (
           <HourButton
@@ -221,18 +220,19 @@ function TimeSelectModal({
             {hour < 10 ? `0${hour}` : hour}시
           </HourButton>
         ))}
-        <Caption2 color={Grey3}>
-          24시 이후에 종료하고 싶은 경우, 다음 요일의 <br />
-          항목에서 시작과 종료를 별도로 설정해주세요
-        </Caption2>
+        <div className="guide-message" style={{ alignSelf: 'center' }}>
+          <Caption2 color={Grey3}>
+            24시 이후에 종료하고 싶은 경우, 다음 요일의 <br />
+            항목에서 시작과 종료를 별도로 설정해주세요
+          </Caption2>
+        </div>
       </HourButtonList>
     </Wrapper>
   );
 }
 const HourButtonList = styled.div`
   display: flex;
-  gap: 2.4rem;
-  margin: 0 3.15rem;
+  margin: 0 2rem;
   flex-wrap: wrap;
 `;
 
@@ -247,7 +247,8 @@ const HourButton = styled.div<{
     isActive ? Green : isBetween ? LightGreen : isBlock ? Grey5 : White};
   color: ${({ isActive, isBetween, isBlock }) =>
     isActive ? White : isBetween ? Black : isBlock ? White : Black};
-  width: 6rem;
+  width: 18%;
+  margin: 3.5%;
   font-size: 1.4rem;
   height: 3.4rem;
   justify-content: center;