diff --git a/src/apis/challenge-record/challenge.record.api.ts b/src/apis/challenge-record/challenge.record.api.ts index 9818084..c6578e7 100644 --- 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 index 34f6d44..4ea2249 100644 --- 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 index 59cdb64..f9c0059 100644 --- 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 index b167858..349d35a 100644 --- 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,7 +28,7 @@ const Category = () => { </Text> <CategoryLayout> <CategoryButtonContainer> - <CategoryButton> + <CategoryButton onClick={() => handleCategoryClick('ECHO')}> <CategoryButtonImage src={EcoIcon} /> </CategoryButton> <Text fontSize='var(--font-size-xl)' fontWeight='700' color='#5DB075'> @@ -28,7 +36,7 @@ const Category = () => { </Text> </CategoryButtonContainer> <CategoryButtonContainer> - <CategoryButton> + <CategoryButton onClick={() => handleCategoryClick('SHARE')}> <CategoryButtonImage src={ShearIcon} /> </CategoryButton> <Text fontSize='var(--font-size-xl)' fontWeight='700' color='#FFB636'> @@ -36,7 +44,7 @@ const Category = () => { </Text> </CategoryButtonContainer> <CategoryButtonContainer> - <CategoryButton> + <CategoryButton onClick={() => handleCategoryClick('VOLUNTEER')}> <CategoryButtonImage src={VolunteerIcon} /> </CategoryButton> <Text fontSize='var(--font-size-xl)' fontWeight='700' color='#599BE8'> @@ -44,7 +52,7 @@ const Category = () => { </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 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; diff --git a/src/styles/baseStyles.ts b/src/styles/baseStyles.ts index bca6a1d..b7a7d9a 100644 --- a/src/styles/baseStyles.ts +++ b/src/styles/baseStyles.ts @@ -73,12 +73,8 @@ 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; @@ -86,8 +82,6 @@ export const TotalTierGraph = styled.div<Type.ITierGraph>` `; export const CurrentTierGraph = styled.div<Type.ICurrentTierGraph>` - /* width: 1rem; */ - /* height: 0.3125rem; */ width: ${(props) => props.width}; height: ${(props) => props.height}; flex-shrink: 0;