feat(home): HomePageContainer 를 styled 기반으로 변경

pagers-org · Sep 7, 2023 · d2e9f15 · d2e9f15
1 parent a4e436c
commit d2e9f15
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git 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
@@ -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 {