Merge pull request #7 from in63119/feature/layout

feat: 공통 Layout 추가

Front-end/src/App.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import GlobalStyle from 'GlobalStyle';
 import './App.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
@@ -14,17 +15,20 @@ import { PageUrls } from './constants/page-urls';
 
 function App() {
 	return (
-		<BrowserRouter>
-			<Routes>
-				<Route path={PageUrls.INTRO} element={<Main />} />
-				<Route path="/callback" element={<Callback />} />
-				<Route path={PageUrls.SELECT_INTRO} element={<SelectIntro />} />
-				<Route path={PageUrls.LOGIN} element={<Login />} />
-				<Route path={PageUrls.PARENTS} element={<Parents />} />
-				<Route path={PageUrls.CHECK_KIDS_INFO} element={<CheckKidsinfo />} />
-				<Route path={PageUrls.INSTITUTION} element={<Institution />} />
-			</Routes>
-		</BrowserRouter>
+		<>
+			<GlobalStyle />
+			<BrowserRouter>
+				<Routes>
+					<Route path={PageUrls.INTRO} element={<Main />} />
+					<Route path="/callback" element={<Callback />} />
+					<Route path={PageUrls.SELECT_INTRO} element={<SelectIntro />} />
+					<Route path={PageUrls.LOGIN} element={<Login />} />
+					<Route path={PageUrls.PARENTS} element={<Parents />} />
+					<Route path={PageUrls.CHECK_KIDS_INFO} element={<CheckKidsinfo />} />
+					<Route path={PageUrls.INSTITUTION} element={<Institution />} />
+				</Routes>
+			</BrowserRouter>
+		</>
 	);
 }
 

Front-end/src/GlobalStyle.ts

@@ -0,0 +1,37 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+	* {
+		touch-action: manipulation;
+		box-sizing: border-box;
+	}
+	i {
+		font-style: normal;
+	}
+	input,
+	button {
+		font-family: inherit;
+	}
+	button {
+		cursor: pointer;
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+	/**
+		https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+	*/
+	input:-webkit-autofill {
+		-webkit-box-shadow: 0 0 0 1000px transparent inset;
+	}
+
+	input:-webkit-autofill,
+	input:-webkit-autofill:hover,
+	input:-webkit-autofill:focus,
+	input:-webkit-autofill:active {
+		transition: background-color 5000s ease-in-out 0s;
+	}
+`;
+
+export default GlobalStyle;

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')};

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;
 `;

Front-end/src/components/Header/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface HeaderProps {
+	hasGoback: boolean;
+	handleClickGoBack: () => void;
+}
+
+const Header: React.FC<HeaderProps> = (props) => {
+	const { hasGoback, handleClickGoBack } = props;
+
+	return (
+		<Container>
+			<LeftMenu onClick={handleClickGoBack}>{hasGoback && <GobackIcon src="/images/icon_goBack.png" />}</LeftMenu>
+		</Container>
+	);
+};
+
+export default Header;
+
+export const HEADER_HEIGHT = 44;
+
+const Container = styled.div`
+	padding: 6px 14px;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: ${HEADER_HEIGHT}px;
+`;
+
+const LeftMenu = styled.div`
+	cursor: pointer;
+`;
+
+const GobackIcon = styled.img`
+	width: 24px;
+	height: 24px;
+`;

Front-end/src/components/Input/GenderBtn.tsx

@@ -29,13 +29,13 @@ export default GenderBtn;
 const Container = styled.div`
 	cursor: pointer;
 	-webkit-tap-highlight-color: transparent;
+	width: 100%;
 `;
 
 const Btn = styled.div`
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	width: 114px;
 	height: 44px;
 	border-radius: 12px;
 	border: 1.5px solid #e0e3da;

Front-end/src/components/Input/InputText.tsx

@@ -23,15 +23,12 @@ export default InputText;
 
 const Container = styled.div<{ isvalid?: string }>`
 	margin-bottom: 14px;
-	width: 237px;
+
 	height: 56px;
-	/* text-align: center; */
 
 	& > input {
-		/* width: 80%;
-      height: 3rem; */
-		padding-top: 8px;
 		width: 100%;
+		padding-top: 8px;
 		height: 28px;
 		border-style: none;
 		outline: none;

Front-end/src/components/Layout/index.styled.ts

@@ -0,0 +1,45 @@
+import { HEADER_HEIGHT } from 'components/Header';
+import { styled } from 'styled-components';
+
+export const ParentLayout = styled.div`
+	width: 100%;
+	height: calc(100vh - ${HEADER_HEIGHT}px);
+	padding: 12px 20px 0;
+
+	position: relative;
+	overflow: scroll;
+`;
+
+export const Body = styled.div`
+	width: 100%;
+	margin-top: 48px;
+`;
+
+export const Title = styled.div`
+	font-size: 20px;
+	font-weight: 600;
+	line-height: 28px;
+	white-space: pre-wrap;
+`;
+
+export const SubTitle = styled.div<{ color: string }>`
+	margin-top: 8px;
+	font-size: 15px;
+	font-weight: 400;
+	line-height: 19px;
+	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;
+`;

Front-end/src/components/Layout/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import * as Styled from './index.styled';
+import { useNavigate } from 'react-router-dom';
+import Header from 'components/Header';
+
+interface LayoutProps {
+	hasGoback?: boolean;
+	title: {
+		text: string;
+	};
+	subTitle?: {
+		text: string;
+		color?: string;
+	};
+	children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children, hasGoback = true, title, subTitle }) => {
+	const navigate = useNavigate();
+
+	const goBackHandler = () => {
+		navigate(-1);
+	};
+
+	return (
+		<>
+			<Header hasGoback={hasGoback} handleClickGoBack={goBackHandler} />
+			<Styled.ParentLayout>
+				<Styled.Title>{title.text}</Styled.Title>
+				{subTitle && <Styled.SubTitle color={subTitle.color ?? '#696969'}>{subTitle.text}</Styled.SubTitle>}
+				{children}
+				<Styled.MarginBottom />
+			</Styled.ParentLayout>
+		</>
+	);
+};
+
+export default Object.assign(Layout, {
+	Body: Styled.Body,
+	Footer: Styled.FooterWrapper,
+});

Front-end/src/components/ProgressBtn.tsx

@@ -25,13 +25,13 @@ const Container = styled.div`
 	margin-top: 70px;
 	cursor: pointer;
 	-webkit-tap-highlight-color: transparent;
+	width: 100%;
 `;
 
 const Btn = styled.div<{ title: string }>`
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	width: 163.5px;
 	height: 56px;
 	border-radius: 14px;
 	background-color: ${({ title }) => (title === '다음' ? '#A1DC2E' : '#F1F6E2')};