feat(app, home): emotion 기반으로 홈 배너와 홈 페이지 컨테이너 로직을 변경합니다.

apps/react-world/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@types/axios": "^0.14.0",
     "axios": "^1.5.0",
     "react": "^18.2.0",

apps/react-world/src/components/home/HomeBanner.styled.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import { Banner, BannerTitle } from '../shared/banner/Banner.styled';
+
+export const HomeBannerContainer = styled(Banner)`
+  background: #5cb85c;
+  box-shadow:
+    inset 0 8px 8px -8px rgba(0, 0, 0, 0.3),
+    inset 0 -8px 8px -8px rgba(0, 0, 0, 0.3);
+  text-align: center;
+`;
+
+export const HomeBannerTitle = styled(BannerTitle)`
+  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
+  font-weight: 700;
+  font-size: 3.5rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0px;
+  font-family: 'Titillium Web', sans-serif;
+`;
+
+export const HomeBannerText = styled.p`
+  color: #fff;
+  font-size: 1.5rem;
+  font-weight: 300;
+  margin-bottom: 0px;
+`;

apps/react-world/src/components/home/HomeBanner.tsx

@@ -1,12 +1,14 @@
+import {
+  HomeBannerContainer,
+  HomeBannerText,
+  HomeBannerTitle,
+} from './HomeBanner.styled';
+
 export const HomeBanner: React.FC = () => {
   return (
-    <div className="home-page">
-      <div className="banner">
-        <div className="container">
-          <h1 className="logo-font">conduit</h1>
-          <p>A place to share your knowledge.</p>
-        </div>
-      </div>
-    </div>
+    <HomeBannerContainer>
+      <HomeBannerTitle>conduit</HomeBannerTitle>
+      <HomeBannerText>A place to share your knowledge.</HomeBannerText>
+    </HomeBannerContainer>
   );
 };

apps/react-world/src/components/home/HomePageContainer.tsx

@@ -1,9 +1,28 @@
-interface HomePageContainerProps {
-  children: React.ReactNode;
-}
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
 
-const HomePageContainer: React.FC<HomePageContainerProps> = ({ children }) => {
-  return <div className="home-page">{children}</div>;
+type ContainerProps = {
+  children?: ReactNode;
 };
 
+export const HomePageContainer = ({ children }: ContainerProps) => {
+  return <Container>{children}</Container>;
+};
+
+const Container = styled.div`
+  &.home-page .feed-toggle {
+    margin-bottom: -1px;
+  }
+
+  &.home-page .sidebar {
+    padding: 5px 10px 10px 10px;
+    background: #f3f3f3;
+    border-radius: 4px;
+  }
+
+  &.home-page .sidebar p {
+    margin-bottom: 0.2rem;
+  }
+`;
+
 export default HomePageContainer;

apps/react-world/src/components/shared/Container.tsx

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  @media (min-width: 544px) {
+    max-width: 576px;
+  }
+
+  @media (min-width: 768px) {
+    max-width: 720px;
+  }
+
+  @media (min-width: 992px) {
+    max-width: 940px;
+  }
+
+  @media (min-width: 1200px) {
+    max-width: 1140px;
+  }
+`;

apps/react-world/src/components/shared/banner/Banner.styled.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+export const Banner = styled.div`
+  color: #fff;
+  background: #333;
+  padding: 2rem;
+  margin-bottom: 2rem;
+`;
+
+export const BannerTitle = styled.h1`
+  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
+  margin-bottom: 0px;
+`;

apps/react-world/src/components/shared/layout/Layout.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Navbar } from './NavBar';
+import { Footer } from './Footer';
+
+type LayoutProps = {
+  children?: ReactNode;
+};
+
+export const Layout = ({ children }: LayoutProps) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+};

apps/react-world/src/components/shared/layout/index.ts

@@ -0,0 +1 @@
+export * from './Layout.tsx';

apps/react-world/src/routes/Routes.tsx

@@ -1,5 +1,5 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { Layout } from '../components/Layout';
+import { Layout } from '../components/shared/layout/Layout';
 import { HomePage } from '../pages/home';
 import { LoginPage } from '../pages/login';
 import { RegisterPage } from '../pages/register';

apps/react-world/styles/main.css

@@ -5204,32 +5204,6 @@ footer {
 .btn .counter {
   font-size: 0.8rem !important; }
 
-.home-page .banner {
-  background: #5CB85C;
-  box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.3), inset 0 -8px 8px -8px rgba(0, 0, 0, 0.3); }
-  .home-page .banner p {
-    color: #fff;
-    text-align: center;
-    font-size: 1.5rem;
-    font-weight: 300 !important;
-    margin-bottom: 0px; }
-  .home-page .banner h1 {
-    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-    font-weight: 700 !important;
-    text-align: center;
-    font-size: 3.5rem;
-    padding-bottom: 0.5rem; }
-
-.home-page .feed-toggle {
-  margin-bottom: -1px; }
-
-.home-page .sidebar {
-  padding: 5px 10px 10px 10px;
-  background: #f3f3f3;
-  border-radius: 4px; }
-  .home-page .sidebar p {
-    margin-bottom: 0.2rem; }
-
 .article-page .banner {
   padding: 2rem 0 2rem 0; }
   .article-page .banner h1 {