fix: max-height 이슈 해결

ThisIsComedy · Dec 10, 2023 · b02ecff · b02ecff
1 parent ed0deee
commit b02ecff
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/src/components/BoxContainer/BoxContainer.tsx b/src/components/BoxContainer/BoxContainer.tsx
@@ -1,24 +1,24 @@
 import React from 'react';
 import styled from "styled-components";
 
-const BoxContainer = (props: { children: React.ReactNode; }) => {
+const BoxContainer = (props: { children: React.ReactNode, isGNB: boolean }) => {
 	return (
-		<Container>
+		<Container isGNB={props.isGNB} >
 			{props.children}
 		</Container>
 	);
 };
 
 export default BoxContainer;
 
-const Container = styled.div`
+const Container = styled.div<{isGNB: boolean}>`
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	width: 100%;
 	gap: 12px;
 	padding: 12px 16px;
-	max-height: 715px;
+	max-height: ${({ isGNB }) => isGNB ? "659px" : "715px"};
 	overflow: hidden;
 	overflow-y:auto;
 	&::-webkit-scrollbar {

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -60,7 +60,7 @@ const Home = () => {
 					<Header>
 						<Logo src='/assets/home/nodamnodamlogo_gray.png' />
 					</Header>
-					<BoxContainer>
+					<BoxContainer isGNB={!isBottomSheetOpen} >
 						<KnowHowBox />
 						<ThreeDaysCheckBox state={stats.threeDayCurrentState} />
 						<GrassChart grass={grass}/>

diff --git a/src/pages/Ranking/Ranking.tsx b/src/pages/Ranking/Ranking.tsx
@@ -37,7 +37,7 @@ const Ranking = () => {
 						<Title>랭킹</Title>
 						<Information>3일 연속 금연일 기준</Information>
 					</Header>
-					<BoxContainer>
+					<BoxContainer isGNB={true} >
 						<Top3RankingContainer>
 							{rank.slice(0, 3).map((obj, idx) => {
 								const top3Order: number[] = [2, 1, 3];

diff --git a/src/pages/Record/Record.tsx b/src/pages/Record/Record.tsx
@@ -36,7 +36,7 @@ const Record = () => {
 					<Header>
 						<Title>기록</Title>
 					</Header>
-					<BoxContainer>
+					<BoxContainer isGNB={true} >
 						<RateBox title="총 금연일" rate={stats?.noSmokeDay ?? 0} type="일" />
 						<RateBox title="아낀 금액" rate={stats?.saveMoney ?? 0} type="원" />
 						<RateBox title="연속 금연일" rate={stats?.continuityNoSmoke ?? 0} type="일" />

diff --git a/src/pages/RetryForm/RetryForm.tsx b/src/pages/RetryForm/RetryForm.tsx
@@ -21,7 +21,7 @@ const RetryForm = () => {
 						<Title>금연 재도전</Title>
 						<CloseIcon src="/assets/global/close.svg" onClick={() => { window.location.href = "/home" }} />
 					</Header>
-					<BoxContainer>
+					<BoxContainer isGNB={false} >
 						<RetryPage step={step} setStep={setStep} />
 					</BoxContainer>
 				</Section>