Merge pull request #171 from KNU-HAEDAL/Feat/issue-#170

메인페이지 기능 수정
KNU-HAEDAL · Sep 29, 2024 · 3c914e0 · 3c914e0
2 parents 82677d3 + a0f78f1
commit 3c914e0
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 39 deletions.
diff --git a/src/apis/challenge-record/challenge.record.api.ts b/src/apis/challenge-record/challenge.record.api.ts
@@ -12,7 +12,7 @@ export async function postVerification(
   id: number,
   image: File,
   content: string
-): Promise<unknown> {
+): Promise<ChallengeVerificationData> {
   const formData = new FormData();
   formData.append(
     'body',

diff --git a/src/pages/challenge-list/index.tsx b/src/pages/challenge-list/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import Contents from './components/contents';
 import { useGetChallengeList } from '@/apis/challenge-list/getChallengeList.api';
@@ -23,12 +23,27 @@ const ChallengeList = () => {
   const [allData, setAllData] = useState<Challenge[]>([]);
   const [page, setPage] = useState(0);
 
-  const categoryList = [
-    { label: '건강', data: 'HEALTH' },
-    { label: '에코', data: 'ECHO' },
-    { label: '나눔', data: 'SHARE' },
-    { label: '봉사', data: 'VOLUNTEER' },
-  ];
+  const categoryList = useMemo(
+    () => [
+      { label: '에코', data: 'ECHO' },
+      { label: '나눔', data: 'SHARE' },
+      { label: '봉사', data: 'VOLUNTEER' },
+      { label: '건강', data: 'HEALTH' },
+    ],
+    []
+  );
+
+  useEffect(() => {
+    const savedCategory = sessionStorage.getItem('category');
+    if (savedCategory) {
+      const tabIndex = categoryList.findIndex(
+        (category) => category.data === savedCategory
+      );
+      if (tabIndex !== -1) {
+        setActiveTab(tabIndex);
+      }
+    }
+  }, [categoryList]);
 
   const { data, isLoading } = useGetChallengeList(page, 20);
 
@@ -107,10 +122,9 @@ const ChallengeListLayout = styled.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  margin: 0 1.5rem;
   padding-bottom: 6rem;
 `;
 
 const TabPanelsLayout = styled(Box)`
-  margin: 1rem 0;
+  margin: 1rem 1.5rem;
 `;
diff --git a/src/pages/challenge-record/index.tsx b/src/pages/challenge-record/index.tsx
@@ -48,5 +48,6 @@ const ChallengeRecord = () => {
 export default ChallengeRecord;
 
 const Wrapper = styled.div`
+  display: block;
   width: 100%;
 `;
diff --git a/src/pages/main/components/category/index.tsx b/src/pages/main/components/category/index.tsx
@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router-dom';
+
 import EcoIcon from '@/assets/main/Eco-Logo.svg';
 import HealthIcon from '@/assets/main/Heart-Logo.svg';
 import ShearIcon from '@/assets/main/Nanum-Logo.svg';
@@ -6,6 +8,12 @@ import { Box, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 const Category = () => {
+  const navigate = useNavigate();
+  const handleCategoryClick = (category: string) => {
+    sessionStorage.setItem('category', category);
+    navigate('/challenge/list');
+    console.log(`${category} 카테고리가 세션 스토리지에 저장되었습니다.`);
+  };
   return (
     <>
       <Text
@@ -20,31 +28,31 @@ const Category = () => {
       </Text>
       <CategoryLayout>
         <CategoryButtonContainer>
-          <CategoryButton>
+          <CategoryButton onClick={() => handleCategoryClick('ECHO')}>
             <CategoryButtonImage src={EcoIcon} />
           </CategoryButton>
           <Text fontSize='var(--font-size-xl)' fontWeight='700' color='#5DB075'>
             에코
           </Text>
         </CategoryButtonContainer>
         <CategoryButtonContainer>
-          <CategoryButton>
+          <CategoryButton onClick={() => handleCategoryClick('SHARE')}>
             <CategoryButtonImage src={ShearIcon} />
           </CategoryButton>
           <Text fontSize='var(--font-size-xl)' fontWeight='700' color='#FFB636'>
             나눔
           </Text>
         </CategoryButtonContainer>
         <CategoryButtonContainer>
-          <CategoryButton>
+          <CategoryButton onClick={() => handleCategoryClick('VOLUNTEER')}>
             <CategoryButtonImage src={VolunteerIcon} />
           </CategoryButton>
           <Text fontSize='var(--font-size-xl)' fontWeight='700' color='#599BE8'>
             봉사
           </Text>
         </CategoryButtonContainer>
         <CategoryButtonContainer>
-          <CategoryButton>
+          <CategoryButton onClick={() => handleCategoryClick('HEALTH')}>
             <CategoryButtonImage src={HealthIcon} />
           </CategoryButton>
           <Text fontSize='var(--font-size-xl)' fontWeight='700' color='#FF0000'>
@@ -85,6 +93,7 @@ const CategoryButton = styled(Container)`
   border: 1px solid #d4d6dd;
   background: #fff;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
 `;
 
 const CategoryButtonImage = styled.img`

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;

diff --git a/src/styles/baseStyles.ts b/src/styles/baseStyles.ts
@@ -73,21 +73,15 @@ export const TotalTierGraph = styled.div<Type.ITierGraph>`
   align-items: center;
   width: ${(props) => props.width};
   height: ${(props) => props.height};
-  /* width: 100%;
-  height: 0.3125rem; */
   margin: 1rem 0;
   margin: ${(props) => props.mgColumn} ${(props) => props.mgRow};
-  /* padding-right: 1.625rem; */
-  /* border-radius: 0.125rem; */
   border-radius: ${(props) => props.radius};
   flex-shrink: 0;
   background: #000;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 `;
 
 export const CurrentTierGraph = styled.div<Type.ICurrentTierGraph>`
-  /* width: 1rem; */
-  /* height: 0.3125rem; */
   width: ${(props) => props.width};
   height: ${(props) => props.height};
   flex-shrink: 0;