feat: CommonLayout 컴포넌트 정의, Home 페이지 UI를 tailwind로 재구성

pagers-org · Sep 10, 2023 · 5e27222 · 5e27222
1 parent f930e0e
commit 5e27222
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,36 +1,28 @@
 import type { Metadata } from "next";
-import { Titillium_Web } from "next/font/google";
+import { Inter } from "next/font/google";
 
 import type { PropsWithChildren } from "react";
 
-import { Footer } from "components/shared/footer";
-import { Header } from "components/shared/header";
+import { CommonLayout } from "components/shared/common-layout";
 import { Providers } from "components/shared/providers";
 
-import "styles/main.css";
-import "styles/ionicons.min.css";
 import "styles/tailwind.css";
 
 export const metadata: Metadata = {
   title: "Real World",
   description: "real world project",
 };
 
-const titillium = Titillium_Web({
+const inter = Inter({
   subsets: ["latin"],
-  weight: "400",
-  variable: "--titillium-web-font",
+  variable: "--font-sans",
 });
 
 const RootLayout = ({ children }: PropsWithChildren) => {
   return (
-    <html lang="en" className={titillium.variable}>
+    <html lang="en" className={inter.variable}>
       <Providers>
-        <body>
-          <Header />
-          {children}
-          <Footer />
-        </body>
+        <CommonLayout>{children}</CommonLayout>
       </Providers>
     </html>
   );

diff --git a/components/(home)/index.tsx b/components/(home)/index.tsx
@@ -1,18 +1,18 @@
 import { Banner } from "./banner";
-import { Feed } from "./feed/feed";
+import { Feed } from "./feed";
 import { SideBar } from "./side-bar";
 
 export const Home = () => {
   return (
-    <div className="home-page">
+    <>
       <Banner />
 
-      <div className="page container">
-        <div className="row">
+      <div className="flex justify-center">
+        <div className="page relative">
           <Feed />
           <SideBar />
         </div>
       </div>
-    </div>
+    </>
   );
 };
diff --git a/components/shared/common-layout/common-layout.tsx b/components/shared/common-layout/common-layout.tsx
@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from "react";
+
+import { Footer } from "../footer";
+import { Header } from "../header";
+
+export const CommonLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <body>
+      <div className="relative min-h-[100vh]">
+        <Header />
+        <div className="pb-14 pt-10">{children}</div>
+        <Footer />
+      </div>
+    </body>
+  );
+};
diff --git a/components/shared/common-layout/index.ts b/components/shared/common-layout/index.ts
@@ -0,0 +1 @@
+export { CommonLayout } from "./common-layout";