From 49e496c03e2825797a8ac9351434e619fc15a224 Mon Sep 17 00:00:00 2001
From: Dobbymin <gmin0701@knu.ac.kr>
Date: Sun, 29 Sep 2024 17:08:40 +0900
Subject: [PATCH] =?UTF-8?q?Fix(main):=20=ED=8B=B0=EC=96=B4=20=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=98=ED=94=84=20=EA=B4=80=EB=A0=A8=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/tier/index.tsx | 56 ++++++++++++++++--------
 src/pages/main/components/tier/styles.ts |  2 +-
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/pages/main/components/tier/index.tsx b/src/pages/main/components/tier/index.tsx
index 0fd1802..a17cbfd 100644
--- a/src/pages/main/components/tier/index.tsx
+++ b/src/pages/main/components/tier/index.tsx
@@ -6,9 +6,10 @@ import ProfileImg from '@/assets/main/ZZAN-Profile.png';
 import { getTierDetails } from '@/constants/data/tierSchema';
 import { useInfoStore } from '@/store/useInfoStore';
 import * as Base from '@/styles/baseStyles';
+import { Box } from '@chakra-ui/react';
+import styled from '@emotion/styled';
 
 const Tier = () => {
-  // const [userInfo, setUserInfo] = useState<UserData | null>(null);
   const { userInfo, setUserInfo } = useInfoStore();
 
   useEffect(() => {
@@ -17,6 +18,7 @@ const Tier = () => {
         const response = await getUserInfo();
         const userData = response.data;
         setUserInfo(userData);
+        console.log(userData);
       } catch (error) {
         console.error('fetchUserInfo error: ', error);
       }
@@ -28,6 +30,10 @@ const Tier = () => {
     ? getTierDetails(userInfo?.tierInfo.tier)
     : { color: 'var(--color-class-02)' };
 
+  const currentExp = userInfo?.tierInfo.currentExp || 0;
+  const totalExp = userInfo?.tierInfo.totalExp || 1;
+  const expPercentage = (currentExp / totalExp) * 100;
+
   return (
     <>
       <Base.Text
@@ -61,29 +67,43 @@ const Tier = () => {
               <Base.Text color={tierDetails?.color} fontWeight='700'>
                 {userInfo?.tierInfo.tier}
               </Base.Text>
-              <Base.Text color={tierDetails?.color} fontWeight='1rem'>
-                {userInfo?.tierInfo.currentExp}
-              </Base.Text>
             </Base.Container>
           </Base.Container>
         </S.InfoContainer>
-        <Base.TotalTierGraph
-          width='100%'
-          mgColumn='1rem'
-          mgRow='0'
-          height='0.3125rem'
-          radius='0.125rem'
-        >
-          <Base.CurrentTierGraph
-            width='1rem'
-            height='0.3125rem'
-            radius='0.125rem'
-            bgColor={tierDetails?.color}
-          />
-        </Base.TotalTierGraph>
+        <Box margin={4} position='relative'>
+          <TotalGraph>
+            <CurrentGraph
+              width={`${expPercentage}%`}
+              backgroundColor={tierDetails?.color || '#000'}
+            />
+          </TotalGraph>
+        </Box>
       </S.TierLayout>
     </>
   );
 };
 
 export default Tier;
+
+const TotalGraph = styled(Box)`
+  position: 'relative';
+  display: flex;
+  text-align: center;
+  align-items: center;
+  margin: 1rem 0;
+  height: 1rem;
+  border-radius: 0.5rem;
+  background-color: #000;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+`;
+
+const CurrentGraph = styled(Box)<{ backgroundColor: string }>`
+  height: 1rem;
+  position: 'absolute';
+  border-radius: 0.25rem;
+  background-color: ${(props) => props.backgroundColor};
+  /* background-color: ${(props) =>
+    `linear-gradient(45deg, #4e4e4e 0%, ${props.backgroundColor} 50%)` ||
+    `linear-gradient(90deg, ${props.backgroundColor} 0%, #b28854 50%)`}; */
+  width: ${(props) => props.width};
+`;
diff --git a/src/pages/main/components/tier/styles.ts b/src/pages/main/components/tier/styles.ts
index 756f34d..eb2bab5 100644
--- a/src/pages/main/components/tier/styles.ts
+++ b/src/pages/main/components/tier/styles.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 export const TierLayout = styled.div<{ height?: string }>`
-  height: 9.3125rem;
+  height: 10rem;
   flex-shrink: 0;
   margin: 1rem 1rem 3rem 1rem;
   border-radius: 1.25rem;