From f7cbf429f88149ae9a2571206318f7d74ebb79fe Mon Sep 17 00:00:00 2001 From: ddubbu Date: Sat, 11 Nov 2023 20:00:32 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20Layout=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Front-end/src/App.tsx | 10 +++-- Front-end/src/GlobalStyle.ts | 37 +++++++++++++++++++ .../src/components/Layout/index.styled.ts | 11 ++++++ Front-end/src/components/Layout/index.tsx | 16 ++++++++ 4 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 Front-end/src/GlobalStyle.ts create mode 100644 Front-end/src/components/Layout/index.styled.ts create mode 100644 Front-end/src/components/Layout/index.tsx diff --git a/Front-end/src/App.tsx b/Front-end/src/App.tsx index 7b8cc94..875abd5 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,8 +15,10 @@ import { PageUrls } from '@constants/page-urls'; function App() { return ( - - + <> + + + } /> } /> } /> @@ -24,7 +27,8 @@ function App() { } /> } /> - + + ); } 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/Layout/index.styled.ts b/Front-end/src/components/Layout/index.styled.ts new file mode 100644 index 0000000..60e2ce8 --- /dev/null +++ b/Front-end/src/components/Layout/index.styled.ts @@ -0,0 +1,11 @@ +import { styled } from 'styled-components'; + +export const ParentLayout = styled.div` + width: 100%; + height: 100vh; + padding: 56px 20px 0; +`; + +export const ChildLayout = styled.div` + width: 100%; +`; diff --git a/Front-end/src/components/Layout/index.tsx b/Front-end/src/components/Layout/index.tsx new file mode 100644 index 0000000..a08a558 --- /dev/null +++ b/Front-end/src/components/Layout/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import * as Styled from './index.styled'; + +interface LayoutProps { + children?: React.ReactNode; +} + +const Layout: React.FC = ({ children }) => { + return ( + + {children} + + ); +}; + +export default Layout; From 631006b55e0cd17e584ad01e63f083f704a1b81d Mon Sep 17 00:00:00 2001 From: ddubbu Date: Sat, 11 Nov 2023 20:00:47 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20Layout=20=EC=A0=81=EC=9A=A9=20-=20?= =?UTF-8?q?=EC=9E=90=EB=85=80=EB=93=B1=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Front-end/src/components/Input/GenderBtn.tsx | 2 +- Front-end/src/components/Input/InputText.tsx | 7 ++--- Front-end/src/components/ProgressBtn.tsx | 2 +- Front-end/src/pages/Parents.tsx | 28 +++++++------------- 4 files changed, 14 insertions(+), 25 deletions(-) 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/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/Parents.tsx b/Front-end/src/pages/Parents.tsx index 1131aae..d46256e 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,7 +81,7 @@ const Parents = () => { }, [institutionsName]); return ( - + {isModalOpen && ( setIsModalOpen(false)}> @@ -93,7 +93,7 @@ const Parents = () => { 키록에 오신 걸 환영합니다.
소중한 자녀의 정보를 등록해주세요 - *정확한 자녀의 확인을 위해 실명을 입력해주세요 + * 정확한 자녀의 확인을 위해 실명을 입력해주세요 @@ -140,19 +140,12 @@ 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; @@ -173,9 +166,8 @@ const ChoiceBtn = styled.button` 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 +178,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 +196,6 @@ const Arrow = styled.img` const KidsInfoContainer = styled.div` margin-top: 40px; - /* height: 70%; */ `; const Title = styled.div` @@ -218,10 +208,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 +219,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%; `; From cb7ea08b41cb684463dd9290adaa44230f2930f9 Mon Sep 17 00:00:00 2001 From: ddubbu Date: Sat, 11 Nov 2023 20:30:08 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20Layout=20-=20header,=20title=20?= =?UTF-8?q?=ED=99=95=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Header/HeaderContainer.tsx | 35 ----------------- Front-end/src/components/Header/index.tsx | 38 +++++++++++++++++++ Front-end/src/components/HeaderContainer.tsx | 17 --------- .../src/components/Layout/index.styled.ts | 22 ++++++++++- Front-end/src/components/Layout/index.tsx | 31 ++++++++++++--- Front-end/src/pages/CheckKidsinfo.tsx | 26 ++----------- Front-end/src/pages/Parents.tsx | 30 +++------------ 7 files changed, 92 insertions(+), 107 deletions(-) delete mode 100644 Front-end/src/components/Header/HeaderContainer.tsx create mode 100644 Front-end/src/components/Header/index.tsx delete mode 100644 Front-end/src/components/HeaderContainer.tsx 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/Layout/index.styled.ts b/Front-end/src/components/Layout/index.styled.ts index 60e2ce8..eb1d7d5 100644 --- a/Front-end/src/components/Layout/index.styled.ts +++ b/Front-end/src/components/Layout/index.styled.ts @@ -1,11 +1,29 @@ +import { HEADER_HEIGHT } from 'components/Header'; import { styled } from 'styled-components'; export const ParentLayout = styled.div` width: 100%; - height: 100vh; - padding: 56px 20px 0; + height: calc(100vh - ${HEADER_HEIGHT}px); + padding: 12px 20px 0; `; export const ChildLayout = 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; `; diff --git a/Front-end/src/components/Layout/index.tsx b/Front-end/src/components/Layout/index.tsx index a08a558..4995866 100644 --- a/Front-end/src/components/Layout/index.tsx +++ b/Front-end/src/components/Layout/index.tsx @@ -1,15 +1,36 @@ import React from 'react'; import * as Styled from './index.styled'; +import { useNavigate } from 'react-router-dom'; +import Header from 'components/Header'; interface LayoutProps { - children?: React.ReactNode; + hasGoback?: boolean; + title: { + text: string; + }; + subTitle?: { + text: string; + color?: string; + }; + children: React.ReactNode; } -const Layout: React.FC = ({ children }) => { +const Layout: React.FC = ({ children, hasGoback = true, title, subTitle }) => { + const navigate = useNavigate(); + + const goBackHandler = () => { + navigate(-1); + }; + return ( - - {children} - + <> +
+ + {title.text} + {subTitle && {subTitle.text}} + {children} + + ); }; diff --git a/Front-end/src/pages/CheckKidsinfo.tsx b/Front-end/src/pages/CheckKidsinfo.tsx index cca4138..596a994 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,22 +8,15 @@ 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} @@ -33,24 +25,12 @@ const CheckKidsinfo = () => { - + ); }; 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; diff --git a/Front-end/src/pages/Parents.tsx b/Front-end/src/pages/Parents.tsx index d46256e..ac0c51f 100644 --- a/Front-end/src/pages/Parents.tsx +++ b/Front-end/src/pages/Parents.tsx @@ -81,27 +81,22 @@ const Parents = () => { }, [institutionsName]); return ( - + {isModalOpen && ( setIsModalOpen(false)}> )} - - - 안녕하세요!
- 키록에 오신 걸 환영합니다. -
- 소중한 자녀의 정보를 등록해주세요 - * 정확한 자녀의 확인을 위해 실명을 입력해주세요 - {isChoiced ? parent.institution : '어린이집을 선택해주세요.'} - {isChoiced && !isModalOpen && ( 자녀 정보 입력 @@ -146,21 +141,6 @@ const Parents = () => { export default Parents; -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; From 5fe148c99c65a6931a32a6f27c73077fd5676b82 Mon Sep 17 00:00:00 2001 From: ddubbu Date: Sat, 11 Nov 2023 21:05:47 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20Layout=20-=20Footer=20=ED=99=95?= =?UTF-8?q?=EC=9E=A5,=20=EC=9E=90=EB=85=80=EC=A0=95=EB=B3=B4=ED=99=95?= =?UTF-8?q?=EC=9D=B8=20=EB=B0=98=EC=9D=91=ED=98=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Front-end/src/components/Button/LongBtn.tsx | 1 - .../components/CheckKidsInfo/CheckInfo.tsx | 6 ++--- .../src/components/Layout/index.styled.ts | 18 ++++++++++++- Front-end/src/components/Layout/index.tsx | 8 ++++-- Front-end/src/pages/CheckKidsinfo.tsx | 16 ++---------- Front-end/src/pages/Parents.tsx | 25 +++++++++++-------- 6 files changed, 43 insertions(+), 31 deletions(-) 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/Layout/index.styled.ts b/Front-end/src/components/Layout/index.styled.ts index eb1d7d5..1e07c39 100644 --- 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 index 4995866..25d691a 100644 --- a/Front-end/src/components/Layout/index.tsx +++ b/Front-end/src/components/Layout/index.tsx @@ -28,10 +28,14 @@ const Layout: React.FC = ({ children, hasGoback = true, title, subT {title.text} {subTitle && {subTitle.text}} - {children} + {children} + ); }; -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 index 596a994..8579d31 100644 --- a/Front-end/src/pages/CheckKidsinfo.tsx +++ b/Front-end/src/pages/CheckKidsinfo.tsx @@ -17,7 +17,7 @@ const CheckKidsinfo = () => { return ( - + {parent.institution} @@ -31,13 +31,6 @@ const CheckKidsinfo = () => { 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; @@ -52,13 +45,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 ac0c51f..da7189c 100644 --- a/Front-end/src/pages/Parents.tsx +++ b/Front-end/src/pages/Parents.tsx @@ -91,13 +91,16 @@ const Parents = () => { )} - - - {isChoiced ? parent.institution : '어린이집을 선택해주세요.'} - - - + + + + {isChoiced ? parent.institution : '어린이집을 선택해주세요.'} + + + + {isChoiced && !isModalOpen && ( + // TODO: 자녀 정보 확인 컴포넌트랑 중복 자녀 정보 입력 @@ -129,12 +132,14 @@ const Parents = () => { - - - - )} + + + + + + ); }; From cb1addb3bd0fff351b3fe558be67868ce0df3660 Mon Sep 17 00:00:00 2001 From: ddubbu Date: Sat, 11 Nov 2023 21:12:10 +0800 Subject: [PATCH 5/5] fix: merge conflict --- Front-end/src/App.tsx | 18 +++++++++--------- Front-end/src/pages/CheckKidsinfo.tsx | 14 ++++++++------ 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/Front-end/src/App.tsx b/Front-end/src/App.tsx index 875abd5..4da221b 100644 --- a/Front-end/src/App.tsx +++ b/Front-end/src/App.tsx @@ -11,7 +11,7 @@ import Login from './pages/Login'; import Parents from './pages/Parents'; import CheckKidsinfo from './pages/CheckKidsinfo'; import Institution from './pages/Institution'; -import { PageUrls } from '@constants/page-urls'; +import { PageUrls } from './constants/page-urls'; function App() { return ( @@ -19,14 +19,14 @@ function App() { - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + } /> + } /> + } /> + } /> + } /> + } /> + } /> + ); diff --git a/Front-end/src/pages/CheckKidsinfo.tsx b/Front-end/src/pages/CheckKidsinfo.tsx index 8579d31..d6d6b85 100644 --- a/Front-end/src/pages/CheckKidsinfo.tsx +++ b/Front-end/src/pages/CheckKidsinfo.tsx @@ -9,7 +9,7 @@ import { parentsState } from '../recoil/parentsState'; // Components import CheckInfo from '../components/CheckKidsInfo/CheckInfo'; import LongBtn from '../components/Button/LongBtn'; -import { PageUrls } from '@constants/page-urls'; +import { PageUrls } from '../constants/page-urls'; import Layout from 'components/Layout'; const CheckKidsinfo = () => { @@ -20,11 +20,13 @@ const CheckKidsinfo = () => { {parent.institution} - - - - - + + + + + + + ); };