Fix(main): 티어 그래프 관련 스타일 수정

KNU-HAEDAL · Sep 29, 2024 · 49e496c · 49e496c
1 parent 5518c60
commit 49e496c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git 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
@@ -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;