feat: Layout - Footer 확장, 자녀정보확인 반응형

in63119 · Nov 11, 2023 · dcaa480 · dcaa480
1 parent bc69a17
commit dcaa480
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 36 deletions.
diff --git a/Front-end/src/components/Button/LongBtn.tsx b/Front-end/src/components/Button/LongBtn.tsx
@@ -49,7 +49,6 @@ const Container = styled.div<{ type: string }>`
 	padding: 16px 0;
 	display: flex;
 	justify-content: center;
-	width: 335px;
 	border-radius: 14px;
 	background-color: ${({ type }) => (type === 'edit' ? '#FFFFFF' : '#A1DC2E')};
 	color: ${({ type }) => (type === 'edit' ? '#969696' : '#FFFFFF')};

diff --git a/Front-end/src/components/CheckKidsInfo/CheckInfo.tsx b/Front-end/src/components/CheckKidsInfo/CheckInfo.tsx
@@ -27,11 +27,12 @@ const Container = styled.div`
 	padding: 18px 16px;
 	display: flex;
 	background-color: #ffffff;
-	width: 335px;
 	border-radius: 14px;
 	border: 1px solid #e0e5d6;
 	gap: 16px;
 	box-shadow: 0 0 10px 0 #5a624b29;
+
+	margin-bottom: 16px;
 `;
 
 const ProfileImg = styled.img`
@@ -43,11 +44,11 @@ const ProfileText = styled.div`
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
+	width: 100%;
 `;
 
 const Name = styled.div`
 	padding: 9px 20px;
-	width: 180px;
 	border-radius: 12px;
 	border: 1px solid #e0e5d6;
 	font-size: 16px;
@@ -57,7 +58,6 @@ const Name = styled.div`
 
 const Birth = styled.div`
 	padding: 9px 20px;
-	width: 180px;
 	border-radius: 12px;
 	border: 1px solid #e0e5d6;
 `;

diff --git a/Front-end/src/components/Layout/index.styled.ts b/Front-end/src/components/Layout/index.styled.ts
@@ -5,9 +5,12 @@ export const ParentLayout = styled.div`
 	width: 100%;
 	height: calc(100vh - ${HEADER_HEIGHT}px);
 	padding: 12px 20px 0;
+
+	position: relative;
+	overflow: scroll;
 `;
 
-export const ChildLayout = styled.div`
+export const Body = styled.div`
 	width: 100%;
 	margin-top: 48px;
 `;
@@ -27,3 +30,16 @@ export const SubTitle = styled.div<{ color: string }>`
 	color: ${({ color }) => color};
 	white-space: pre-wrap;
 `;
+
+export const FooterWrapper = styled.div`
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	padding: 0 20px 15px;
+`;
+
+export const MarginBottom = styled.div`
+	/* TODO: 40px 보장 */
+	height: 180px;
+`;
diff --git a/Front-end/src/components/Layout/index.tsx b/Front-end/src/components/Layout/index.tsx
@@ -28,10 +28,14 @@ const Layout: React.FC<LayoutProps> = ({ children, hasGoback = true, title, subT
 			<Styled.ParentLayout>
 				<Styled.Title>{title.text}</Styled.Title>
 				{subTitle && <Styled.SubTitle color={subTitle.color ?? '#696969'}>{subTitle.text}</Styled.SubTitle>}
-				<Styled.ChildLayout>{children}</Styled.ChildLayout>
+				{children}
+				<Styled.MarginBottom />
 			</Styled.ParentLayout>
 		</>
 	);
 };
 
-export default Layout;
+export default Object.assign(Layout, {
+	Body: Styled.Body,
+	Footer: Styled.FooterWrapper,
+});
diff --git a/Front-end/src/pages/CheckKidsinfo.tsx b/Front-end/src/pages/CheckKidsinfo.tsx
@@ -16,27 +16,25 @@ const CheckKidsinfo = () => {
 
 	return (
 		<Layout hasGoback title={{ text: '등록할 자녀의 정보를 확인해 주세요.' }}>
-			<Contents>
+			<Layout.Body>
 				<Title>{parent.institution}</Title>
 				<CheckInfo name={parent.name} birth={parent.birth} gender={parent.gender} />
-			</Contents>
-			<BtnWrapper>
-				<LongBtn type="edit" path="/parents" />
-				<LongBtn type="request" path="/parents" />
-			</BtnWrapper>
+				<CheckInfo name={parent.name} birth={parent.birth} gender={parent.gender} />
+				<CheckInfo name={parent.name} birth={parent.birth} gender={parent.gender} />
+				<CheckInfo name={parent.name} birth={parent.birth} gender={parent.gender} />
+			</Layout.Body>
+			<Layout.Footer>
+				<ButtonWrapper>
+					<LongBtn type="edit" path="/parents" />
+					<LongBtn type="request" path="/parents" />
+				</ButtonWrapper>
+			</Layout.Footer>
 		</Layout>
 	);
 };
 
 export default CheckKidsinfo;
 
-const Contents = styled.div`
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-`;
-
 const Title = styled.div`
 	margin-bottom: 16px;
 	padding: 12px 32px;
@@ -51,13 +49,8 @@ const Title = styled.div`
 	text-align: center;
 `;
 
-const BtnWrapper = styled.div`
+const ButtonWrapper = styled.div`
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-	position: absolute;
-	bottom: 40px;
-	left: 50%;
-	transform: translateX(-50%);
 	gap: 8px;
 `;
diff --git a/Front-end/src/pages/Parents.tsx b/Front-end/src/pages/Parents.tsx
@@ -91,13 +91,16 @@ const Parents = () => {
 					<BottomSheet handleChoice={handleChoice} institutions={institutions} />
 				</LastBottomSheet>
 			)}
-			<ChoiceBtn onClick={handleClick}>
-				<Wrapper>
-					<Content>{isChoiced ? parent.institution : '어린이집을 선택해주세요.'}</Content>
-					<Arrow src="/images/icon_arrow.png" />
-				</Wrapper>
-			</ChoiceBtn>
+			<Layout.Body>
+				<ChoiceBtn onClick={handleClick}>
+					<Wrapper>
+						<Content>{isChoiced ? parent.institution : '어린이집을 선택해주세요.'}</Content>
+						<Arrow src="/images/icon_arrow.png" />
+					</Wrapper>
+				</ChoiceBtn>
+			</Layout.Body>
 			{isChoiced && !isModalOpen && (
+				// TODO: 자녀 정보 확인 컴포넌트랑 중복
 				<KidsInfoContainer>
 					<Title>자녀 정보 입력</Title>
 					<InfoContainer>
@@ -129,12 +132,14 @@ const Parents = () => {
 							</BtnWrapper>
 						</InputWrapper>
 					</InfoContainer>
-					<BtnWrapper>
-						<ProgressBtn title="자녀 추가 등록" onclick={addKid} />
-						<ProgressBtn title="다음" onclick={Checkinfo} />
-					</BtnWrapper>
 				</KidsInfoContainer>
 			)}
+			<Layout.Footer>
+				<BtnWrapper>
+					<ProgressBtn title="자녀 추가 등록" onclick={addKid} />
+					<ProgressBtn title="다음" onclick={Checkinfo} />
+				</BtnWrapper>
+			</Layout.Footer>
 		</Layout>
 	);
 };