From 7973eebb7140622605e07875b342d24b1b851e22 Mon Sep 17 00:00:00 2001
From: Siwoo Lee <siwoo28@kakao.com>
Date: Fri, 24 May 2024 16:27:45 +0900
Subject: [PATCH] Desgin: MyCoffeeSum

---
 src/components/coffee/MyCoffeeSum.tsx |  2 +-
 src/components/coffee/SumBoard.tsx    | 23 +++++++++++++++--------
 src/styles/styles.ts                  |  4 ++--
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/coffee/MyCoffeeSum.tsx b/src/components/coffee/MyCoffeeSum.tsx
index ebd91a4b..125177f8 100644
--- 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
index e3d81146..ef952676 100644
--- 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,24 +28,24 @@ 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>
   );
@@ -53,13 +53,20 @@ const SumBoard = ({
 
 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
index b8a19d74..53679d6d 100644
--- 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%);
   `
 );