From 5518c60310f0106488885ccb853d050d0534a019 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 17:07:34 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Style:=20Graph=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/baseStyles.ts | 6 ------ 1 file changed, 6 deletions(-) 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` 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` `; export const CurrentTierGraph = styled.div` - /* width: 1rem; */ - /* height: 0.3125rem; */ width: ${(props) => props.width}; height: ${(props) => props.height}; flex-shrink: 0; From 49e496c03e2825797a8ac9351434e619fc15a224 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 17:08:40 +0900 Subject: [PATCH 2/6] =?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(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 ( <> { {userInfo?.tierInfo.tier} - - {userInfo?.tierInfo.currentExp} - - - - + + + + + ); }; 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; From 9257e41fe12925e5f5bd7ff2543cf991f5fb53c7 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 17:29:26 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Style:=20tab=20width=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/challenge-record/index.tsx | 1 + 1 file changed, 1 insertion(+) 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%; `; From 7d8251ed83bb31eb90da64b28c56d7f3aa6dcb55 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 17:40:36 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Feat(challenge-list):=20=EC=B1=8C=EB=A6=B0?= =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=B9=B4=ED=85=8C?= =?UTF-8?q?=EA=B3=A0=EB=A6=AC=EB=B3=84=EB=A1=9C=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/challenge-list/index.tsx | 32 +++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) 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([]); 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; `; From a2b8270a63978125feeede2354f3b1a2b43b55ab Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 17:40:49 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Feat(main):=20=EC=B1=8C=EB=A6=B0=EC=A7=80?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/components/category/index.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) 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 ( <> { - + handleCategoryClick('ECHO')}> @@ -28,7 +36,7 @@ const Category = () => { - + handleCategoryClick('SHARE')}> @@ -36,7 +44,7 @@ const Category = () => { - + handleCategoryClick('VOLUNTEER')}> @@ -44,7 +52,7 @@ const Category = () => { - + handleCategoryClick('HEALTH')}> @@ -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` From a0f78f11e7ccfde61c4c0534e592beafc8f5b281 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Sun, 29 Sep 2024 17:45:03 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Fix:=20eslint=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/challenge-record/challenge.record.api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 { +): Promise { const formData = new FormData(); formData.append( 'body',