From d2e9f1570e1803a5a76660633307d493b255b702 Mon Sep 17 00:00:00 2001
From: Wooseong Kim <carpe@29cm.co.kr>
Date: Fri, 8 Sep 2023 01:09:50 +0900
Subject: [PATCH] =?UTF-8?q?feat(home):=20HomePageContainer=20=EB=A5=BC=20s?=
 =?UTF-8?q?tyled=20=EA=B8=B0=EB=B0=98=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/home/HomePageContainer.tsx | 27 +++++++++++++++----
 apps/react-world/styles/main.css              | 10 -------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/apps/react-world/src/components/home/HomePageContainer.tsx b/apps/react-world/src/components/home/HomePageContainer.tsx
index 708ae22d..b67bef1a 100644
--- a/apps/react-world/src/components/home/HomePageContainer.tsx
+++ b/apps/react-world/src/components/home/HomePageContainer.tsx
@@ -1,9 +1,26 @@
-interface HomePageContainerProps {
-  children: React.ReactNode;
-}
+import { PropsWithChildren } from 'react';
+import styled from '@emotion/styled';
 
-const HomePageContainer: React.FC<HomePageContainerProps> = ({ children }) => {
-  return <div className="home-page">{children}</div>;
+type ContainerProps = PropsWithChildren;
+
+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;
diff --git a/apps/react-world/styles/main.css b/apps/react-world/styles/main.css
index 2502f162..09618e0a 100644
--- a/apps/react-world/styles/main.css
+++ b/apps/react-world/styles/main.css
@@ -5204,16 +5204,6 @@ footer {
 .btn .counter {
   font-size: 0.8rem !important; }
 
-.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 {