design: 피그마 디자인 반영

TEAM-SEONYAK · Oct 18, 2024 · c7360a5 · c7360a5
1 parent c54b745
commit c7360a5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -13,7 +13,7 @@
       "/^border/": ["px"],
       "font-size": ["rem", "%"]
     },
-    "unit-allowed-list": ["%", "deg", "px", "rem", "ms", "vw", "s", "dvh", "turn", "vh"],
+    "unit-allowed-list": ["%", "deg", "px", "rem", "ms", "vw", "s", "dvh", "turn", "vh", "fr"],
     "declaration-empty-line-before": [
       "always",
       {

diff --git a/src/pages/juniorPromiseRequest/components/CalendarBottomSheet.tsx b/src/pages/juniorPromiseRequest/components/CalendarBottomSheet.tsx
@@ -82,6 +82,10 @@ const Scroll = styled.div`
   overflow-y: auto;
 
   margin-bottom: 3rem;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const BottomSheetRectangleIcon = styled(BottomSheetRectangleIc)`

diff --git a/src/pages/juniorPromiseRequest/components/CustomCalendar.tsx b/src/pages/juniorPromiseRequest/components/CustomCalendar.tsx
@@ -87,10 +87,11 @@ const CalendarContainer = styled.div`
   justify-content: center;
 
   width: 100%;
+  padding: 0 3.35rem 2rem;
 `;
 
 const StyledCalendar = styled(Calendar)`
-  width: 31.5rem;
+  width: 100%;
   border: none;
 
   background: ${({ theme }) => theme.colors.grayScaleWhite};
@@ -104,6 +105,7 @@ const StyledCalendar = styled(Calendar)`
   .react-calendar__month-view__days__day {
     ${({ theme }) => theme.fonts.Title2_M_16};
     color: ${({ theme }) => theme.colors.grayScaleBG};
+    aspect-ratio: 1 / 1;
 
     &:disabled {
       color: ${({ theme }) => theme.colors.grayScaleLG2};
@@ -200,6 +202,7 @@ const StyledCalendar = styled(Calendar)`
     ${({ theme }) => theme.fonts.Title2_M_16};
     border-radius: 100px;
 
+
     background: none;
 
     cursor: pointer;

diff --git a/src/pages/juniorPromiseRequest/components/TimeList.tsx b/src/pages/juniorPromiseRequest/components/TimeList.tsx
@@ -82,7 +82,7 @@ const Wrapper = styled.div`
   align-items: center;
   flex-grow: 1;
 
-  padding-bottom: 14.4rem;
+  padding: 2rem 1.95rem 14.4rem;
 `;
 
 const Layout = styled.div`
@@ -95,20 +95,31 @@ const Layout = styled.div`
 `;
 
 const Label = styled.div`
-  padding: 2rem 0 0 0.8rem;
+  width: 100%;
   ${({ theme }) => theme.fonts.Title1_SB_16};
 
   color: ${({ theme }) => theme.colors.grayScaleBG};
 `;
 
 const EachTimeButtonBox = styled.div`
-  display: flex;
-  flex-wrap: wrap;
+  /* display: flex;
+  flex-wrap: wrap; */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  gap: 1rem 0.6rem;
+
+  width: 100%;
 `;
 
 const EachTimeButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 1rem;
+
+  width: 100%;
 
-  width: 35rem;
+  &:first-child {
+    margin-bottom: 2rem;
+  }
 `;
diff --git a/src/pages/juniorPromiseRequest/components/TimeListBtns.tsx b/src/pages/juniorPromiseRequest/components/TimeListBtns.tsx
@@ -22,9 +22,7 @@ const Wrapper = styled.div<{ $isActive: boolean }>`
   justify-content: center;
   align-items: center;
 
-  width: 10.8rem;
   height: 3.8rem;
-  margin: 0.5rem 0.3rem;
   border: ${({ $isActive, theme }) =>
     $isActive ? `1px solid ${theme.colors.Blue}` : `1px solid ${theme.colors.grayScaleLG2}`};
   border-radius: 8px;