refactor: layout folder

src/containers/CatExplorer.tsx

@@ -4,15 +4,16 @@ import { useSetState } from "react-use";
 import styled from "styled-components";
 import { useMemo, useRef, useState } from "react";
 import { catApi } from "@/services/catApi";
-import { FlexSection } from "@/components/FlexSection";
+import { FlexSection } from "@/layouts/FlexSection";
 import Card from "@/components/Card";
 import notFound from "@/assets/cat-not-found.jpg";
-import { FixedDiv } from "@/components/FixedDiv";
+import { FixedDiv } from "@/layouts/FixedDiv";
 import { Modal, ModalRefObject } from "@/components/Modal";
 import { CatDetail } from "@/pages/CatDetail";
 import { Breed } from "@/types/cat";
 import LoadingPage from "@/pages/LoadingPage";
 import { Button } from "@/components/Button";
+import { Container } from "@/layouts/Container";
 
 export default function CatExplorer() {
   const modalRef = useRef<ModalRefObject>();
@@ -126,11 +127,6 @@ export default function CatExplorer() {
     </Container>
   );
 }
-const Container = styled.div`
-  height: 100vh;
-  display: flex;
-  align-items: center;
-`;
 
 const StyledFlexSection = styled(FlexSection)`
   width: 100vw;

src/containers/Home.tsx

@@ -1,21 +1,22 @@
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { Path } from "@/constants/paths";
-import { FlexSection } from "@/components/FlexSection";
+import { Container } from "@/layouts/Container";
 
 export default function Home() {
   return (
-    <div>
+    <Container justify="center" align="center" direction="column">
+      <CatLogo>🐱</CatLogo>
       <Title>Cat Explorer</Title>
-      <StyledSection justify="center" align="center">
-        <StyledLink to={Path.CAT_EXPLORER}>
-          <StyledButton type="button">Start!</StyledButton>
-        </StyledLink>
-      </StyledSection>
-    </div>
+      <StyledLink to={Path.CAT_EXPLORER}>
+        <StyledButton type="button">Start!</StyledButton>
+      </StyledLink>
+    </Container>
   );
 }
-
+const CatLogo = styled.div`
+  font-size: 7rem;
+`;
 const Title = styled.h1`
   text-align: center;
 `;
@@ -29,6 +30,3 @@ const StyledButton = styled.button`
   width: 6rem;
   height: 4rem;
 `;
-const StyledSection = styled(FlexSection)`
-  height: 100%;
-`;

src/layouts/Container.ts

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { FlexSection } from "./FlexSection";
+
+export const Container = styled(FlexSection).attrs((p) => ({
+	...p,
+}))`
+	height: 100vh;
+`;

src/pages/CatDetail.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import styled from "styled-components";
-import { FlexSection } from "@/components/FlexSection";
+import { FlexSection } from "@/layouts/FlexSection";
 import { Breed } from "@/types/cat";
 
 type Props = Partial<Breed>;

src/pages/LoadingPage.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { FixedDiv } from "@/components/FixedDiv";
+import { FixedDiv } from "@/layouts/FixedDiv";
 import { Z_INDEX } from "@/constants/zIndex";
 
 type Props = {