design: 회의 소요 시간 뷰 반응형으로 수정

ASAP-as-soon-as-possible · Aug 24, 2024 · 7da75fd · 7da75fd
1 parent 63cbb45
commit 7da75fd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/components/common/atomComponents/Button.tsx b/src/components/common/atomComponents/Button.tsx
@@ -45,14 +45,15 @@ const buttonCSS = {
   halfPrimaryActive: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.main1};
-    /* width: 15.2rem;     width: calc((100%-14px) / 2);*/
+    width: 100%;
     max-width: 18.8rem;
     color: ${({ theme }) => theme.colors.white};
   `,
   halfPrimaryDisabled: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
     max-width: 18.8rem;
+    width: 100%;
     color: ${({ theme }) => theme.colors.grey4};
   `,
   primaryDisabled: css`
@@ -69,7 +70,6 @@ const buttonCSS = {
   halfSecondaryActive: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.main5};
-    /* width: 15.2rem; */
     max-width: 18.8rem;
     color: ${({ theme }) => theme.colors.grey9};
   `,
@@ -78,6 +78,7 @@ const buttonCSS = {
     background: ${({ theme }) => theme.colors.grey7};
     color: ${({ theme }) => theme.colors.grey5};
     pointer-events: none;
+    cursor: default;
   `,
   halfsecondaryDisabled: css`
     ${buttonDefaultCSS.basicCss};

diff --git a/src/pages/createMeeting/components/useFunnel/SetDuration.tsx b/src/pages/createMeeting/components/useFunnel/SetDuration.tsx
@@ -55,11 +55,14 @@ const SetAdditionalInfoWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
 `;
 
 const DurationWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 3열로 나누기 */
+  grid-template-rows: repeat(3, 1fr); /* 2행으로 나누기 */
+  width: 100%;
   gap: 1.1rem;
 
   justify-content: center;