diff --git a/Front-end/src/App.tsx b/Front-end/src/App.tsx
index 1a2d6c6..4da221b 100644
--- a/Front-end/src/App.tsx
+++ b/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 (
-
-
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
-
+ <>
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+ >
);
}
diff --git a/Front-end/src/GlobalStyle.ts b/Front-end/src/GlobalStyle.ts
new file mode 100644
index 0000000..01ce0b8
--- /dev/null
+++ b/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;
diff --git a/Front-end/src/components/Button/LongBtn.tsx b/Front-end/src/components/Button/LongBtn.tsx
index 75557f2..ad803a9 100644
--- 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
index f1f4032..f5dade0 100644
--- 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/Header/HeaderContainer.tsx b/Front-end/src/components/Header/HeaderContainer.tsx
deleted file mode 100644
index b7c0658..0000000
--- a/Front-end/src/components/Header/HeaderContainer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface HeaderContainerProps {
- isGoback: boolean;
- goBackHandler: () => void;
-}
-
-const HeaderContainer: React.FC = (props) => {
- const { isGoback, goBackHandler } = props;
-
- return (
-
- {isGoback && }
-
- );
-};
-
-export default HeaderContainer;
-
-const Container = styled.div`
- padding: 14px 20px;
- display: flex;
- align-items: center;
- width: 100%;
-`;
-
-const LeftMenu = styled.div`
- cursor: pointer;
-`;
-
-const GobackIcon = styled.img`
- width: 24px;
- height: 24px;
-`;
diff --git a/Front-end/src/components/Header/index.tsx b/Front-end/src/components/Header/index.tsx
new file mode 100644
index 0000000..fb5cc73
--- /dev/null
+++ b/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 = (props) => {
+ const { hasGoback, handleClickGoBack } = props;
+
+ return (
+
+ {hasGoback && }
+
+ );
+};
+
+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;
+`;
diff --git a/Front-end/src/components/HeaderContainer.tsx b/Front-end/src/components/HeaderContainer.tsx
deleted file mode 100644
index f46f172..0000000
--- a/Front-end/src/components/HeaderContainer.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { styled } from 'styled-components';
-
-const HeaderContainer = () => {
- return (
-
- HeaderContainer
-
-
- );
-};
-
-export default HeaderContainer;
-
-const Container = styled.div``;
-
-const GobackContainer = styled.div``;
diff --git a/Front-end/src/components/Input/GenderBtn.tsx b/Front-end/src/components/Input/GenderBtn.tsx
index 31a96da..44c65c4 100644
--- a/Front-end/src/components/Input/GenderBtn.tsx
+++ b/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;
diff --git a/Front-end/src/components/Input/InputText.tsx b/Front-end/src/components/Input/InputText.tsx
index 3b55d41..9f72695 100644
--- a/Front-end/src/components/Input/InputText.tsx
+++ b/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;
diff --git a/Front-end/src/components/Layout/index.styled.ts b/Front-end/src/components/Layout/index.styled.ts
new file mode 100644
index 0000000..1e07c39
--- /dev/null
+++ b/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;
+`;
diff --git a/Front-end/src/components/Layout/index.tsx b/Front-end/src/components/Layout/index.tsx
new file mode 100644
index 0000000..25d691a
--- /dev/null
+++ b/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 = ({ children, hasGoback = true, title, subTitle }) => {
+ const navigate = useNavigate();
+
+ const goBackHandler = () => {
+ navigate(-1);
+ };
+
+ return (
+ <>
+
+
+ {title.text}
+ {subTitle && {subTitle.text}}
+ {children}
+
+
+ >
+ );
+};
+
+export default Object.assign(Layout, {
+ Body: Styled.Body,
+ Footer: Styled.FooterWrapper,
+});
diff --git a/Front-end/src/components/ProgressBtn.tsx b/Front-end/src/components/ProgressBtn.tsx
index 0682ac9..dd04add 100644
--- a/Front-end/src/components/ProgressBtn.tsx
+++ b/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')};
diff --git a/Front-end/src/pages/CheckKidsinfo.tsx b/Front-end/src/pages/CheckKidsinfo.tsx
index cadc80a..1ff26eb 100644
--- a/Front-end/src/pages/CheckKidsinfo.tsx
+++ b/Front-end/src/pages/CheckKidsinfo.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import { fonts } from '../constants';
-import { useNavigate } from 'react-router-dom';
// Recoil
import { useRecoilState } from 'recoil';
@@ -9,55 +8,32 @@ import { parentsState } from '../recoil/parentsState';
// Components
import CheckInfo from '../components/CheckKidsInfo/CheckInfo';
-import HeaderContainer from '../components/Header/HeaderContainer';
import LongBtn from '../components/Button/LongBtn';
import { PageUrls } from '../constants/page-urls';
+import Layout from '../components/Layout';
+
const CheckKidsinfo = () => {
const [parent] = useRecoilState(parentsState);
- const navigate = useNavigate();
-
- const goBackHandler = () => {
- navigate(-1);
- };
return (
-
-
- 등록할 자녀의 정보를 확인해 주세요.
-
+
+
{parent.institution}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
};
export default CheckKidsinfo;
-const Container = styled.div`
- font-family: ${fonts.suit.regular};
-`;
-
-const Disc = styled.div`
- margin: 12px 0px 44px;
- padding-left: 20px;
- font-weight: 600;
- font-size: 20px;
- line-height: 25px;
-`;
-
-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;
@@ -72,13 +48,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
index 1131aae..da7189c 100644
--- a/Front-end/src/pages/Parents.tsx
+++ b/Front-end/src/pages/Parents.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react';
import { styled } from 'styled-components';
import useValid from '../hooks/useValid';
import { useNavigate } from 'react-router-dom';
-import { fonts } from '../constants';
// Components
import BottomSheet from '../components/BottomSheetModal/BottomSheet';
@@ -19,6 +18,7 @@ import { parentsState } from '../recoil/parentsState';
import { useRecoilState } from 'recoil';
import { addKidsState } from '../recoil/addKidsState';
import { PageUrls } from '../constants/page-urls';
+import Layout from '../components/Layout';
const Parents = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -81,28 +81,26 @@ const Parents = () => {
}, [institutionsName]);
return (
-
+
{isModalOpen && (
setIsModalOpen(false)}>
)}
-
-
- 안녕하세요!
- 키록에 오신 걸 환영합니다.
-
- 소중한 자녀의 정보를 등록해주세요
- *정확한 자녀의 확인을 위해 실명을 입력해주세요
-
-
-
- {isChoiced ? parent.institution : '어린이집을 선택해주세요.'}
-
-
-
-
+
+
+
+ {isChoiced ? parent.institution : '어린이집을 선택해주세요.'}
+
+
+
+
{isChoiced && !isModalOpen && (
+ // TODO: 자녀 정보 확인 컴포넌트랑 중복
자녀 정보 입력
@@ -134,48 +132,27 @@ const Parents = () => {
-
-
-
-
)}
-
+
+
+
+
+
+
+
);
};
export default Parents;
-const Container = styled.div`
- padding: 60px 25px 0;
- height: 100vh;
- /* width: 100vw; */
- font-family: ${fonts.suit.regular};
-`;
-
-const Description = styled.div`
- /* margin-top : 50px; */
- margin-bottom: 30px;
- font-size: 20px;
- font-weight: 600;
- line-height: 28px;
-`;
-
-const LowerText = styled.div`
- font-size: 15px;
- font-weight: 400;
- line-height: 19px;
- color: #696969;
-`;
-
const ChoiceBtn = styled.button`
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
- width: 335px;
- /* width: 100%; */
- height: 51px;
+ width: 100%;
+ padding: 8px 20px;
border: 1.5px solid #e0e5d6;
border-radius: 12px;
cursor: pointer;
@@ -186,8 +163,7 @@ const Wrapper = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
- width: 295px;
- height: 35px;
+ width: 100%;
`;
const Content = styled.div`
@@ -205,7 +181,6 @@ const Arrow = styled.img`
const KidsInfoContainer = styled.div`
margin-top: 40px;
- /* height: 70%; */
`;
const Title = styled.div`
@@ -218,10 +193,10 @@ const Title = styled.div`
const InfoContainer = styled.div`
display: flex;
flex-direction: row;
+ gap: 18px;
`;
const Photo = styled.img`
- margin-right: 18px;
width: 80px;
height: 80px;
`;
@@ -229,9 +204,11 @@ const Photo = styled.img`
const InputWrapper = styled.div`
display: flex;
flex-direction: column;
+ width: 100%;
`;
const BtnWrapper = styled.div`
display: flex;
gap: 8px;
+ width: 100%;
`;