Desgin: MyCoffeeSum

7-7-2 · May 24, 2024 · 7973eeb · 7973eeb
1 parent 6d36bd4
commit 7973eeb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/components/coffee/MyCoffeeSum.tsx b/src/components/coffee/MyCoffeeSum.tsx
@@ -1,9 +1,9 @@
 import SumBoard from '@/components/coffee/SumBoard';
 import { COFFEE_TEXTS } from '@/constants/coffee';
+import { useGetMyCoffeeSum } from '@/hooks/coffee/useGetMyCoffeeSum';
 
 import { cx } from 'styled-system/css';
 import { SumTitle, PaddingT22 } from '@/styles/styles';
-import { useGetMyCoffeeSum } from '@/hooks/coffee/useGetMyCoffeeSum';
 
 const { sum } = COFFEE_TEXTS;
 

diff --git a/src/components/coffee/SumBoard.tsx b/src/components/coffee/SumBoard.tsx
@@ -1,9 +1,9 @@
 import SumByType from '@/components/coffee/SumByType';
 import { COFFEE_TEXTS } from '@/constants/coffee';
 import { styled } from 'styled-system/jsx';
-import { Column, Evenly, Flex } from '@/styles/layout';
+import { Between, Column, Flex } from '@/styles/layout';
 import { SumBoardTitle, SumType, Blur } from '@/styles/styles';
-import { cx, css } from 'styled-system/css';
+import { cx } from 'styled-system/css';
 
 const { intake, cups, unit, coffee, caffeine, year, month } = COFFEE_TEXTS;
 
@@ -28,38 +28,45 @@ const SumBoard = ({
         {YearPredi && year} {intake}
       </div>
 
-      <InfoArea className={cx(Flex, Evenly)}>
-        <div className={Column}>
+      <InfoArea className={cx(Flex, Between)}>
+        <InfoItem className={Column}>
           <div className={blur ? cx(SumType, Blur) : SumType}>{coffee}</div>
           <SumByType
             amount={coffeeAmount}
             unit={cups}
             blur={blur}
           />
-        </div>
+        </InfoItem>
         <Divider />
-        <div className={Column}>
+        <InfoItem className={Column}>
           <div className={blur ? cx(SumType, Blur) : SumType}>{caffeine}</div>
           <SumByType
             amount={caffeineAmount}
             unit={unit}
             blur={blur}
           />
-        </div>
+        </InfoItem>
       </InfoArea>
     </Container>
   );
 };
 
 const Container = styled.div`
   margin-top: 12px;
-  padding: 16px;
+  padding: 16px 20px;
   background-color: var(--colors-tertiary);
   border-radius: 16px;
 `;
 
 const InfoArea = styled.div`
   position: relative;
+  padding: 0 10px;
+  margin-top: 6px;
+`;
+
+const InfoItem = styled.div`
+  width: 126px;
+  align-items: flex-start;
 `;
 
 const Divider = styled.div`

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -436,7 +436,7 @@ export const SumTypeAmount = cx(
   css`
     color: var(--colors-main);
     font-size: var(--font-sizes-xl);
-    line-height: 28px;
+    line-height: 24px;
   `
 );
 
@@ -445,7 +445,7 @@ export const SumTypeUnit = cx(
   css`
     color: #313131;
     font-size: var(--font-sizes-sm);
-    line-height: 28px;
+    line-height: 24px;
     transform: translateY(7%);
   `
 );