[Feat/#13] 홈 화면 UI 제작

.eslintrc.json

@@ -57,6 +57,11 @@
             "group": "type",
             "position": "before"
           },
+          {
+            "pattern": "@/pages/**/*",
+            "group": "type",
+            "position": "before"
+          },
           {
             "pattern": "@/styles/**/*",
             "group": "type",

package.json

@@ -19,7 +19,8 @@
     "@tanstack/react-query": "^5.64.2",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",

src/App.tsx

@@ -1,34 +1,10 @@
-import styles from "./App.module.scss";
-
-import Button from "@/components/ui/Button/Button";
-import IconButton from "@/components/ui/IconButton/IconButton";
-import Text from "@/components/ui/Text/Text";
+import { Outlet } from "react-router-dom";
 
 const App = () => {
   return (
-    <div className={styles.Test}>
-      <Button variant="primary" text="정보가 맞아요" />
-      <Button variant="secondary" text="정보가 맞아요" />
-      <Button variant="tertiary" text="다시 스캔하기" />
-      <div className={styles.Test2}>
-        <IconButton text="갤러리" iconName="gallery" />
-        <IconButton text="카메라" iconName="camera" />
-      </div>
-      <div className={styles.Test3}>
-        <IconButton size="sm" text="복사하기" iconName="paste" />
-      </div>
-      <div className={styles.Test3}>
-        <Text align="center" color="gradient" size="lg" weight="bold">
-          영수증으로
-        </Text>
-        <Text align="center" color="gradient" size="lg" weight="bold">
-          AI 음식 리뷰 남겨요
-        </Text>
-        <Text color="primary" weight="medium">
-          손쉬운 음식 리뷰 작성
-        </Text>
-      </div>
-    </div>
+    <main>
+      <Outlet />
+    </main>
   );
 };
 

src/components/Home/Home.module.scss

@@ -0,0 +1,58 @@
+.Home {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 2.5rem;
+  height: calc(100vh - 2.75rem);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--color-bg-gradient);
+
+  &::before {
+    content: "";
+    background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat;
+    background-size: 100% 16.375rem;
+    filter: blur(4.625rem);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+
+  .HomeTitle {
+    padding-top: 5rem;
+    padding-bottom: 1.25rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    z-index: 1;
+
+    & > h1 {
+      white-space: pre-line;
+    }
+  }
+
+  .HomeImage {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+
+    & > img {
+      width: 16.25rem;
+      height: 16.25rem;
+    }
+  }
+
+  .HomeBottom {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    z-index: 1;
+  }
+}

src/components/Home/Home.tsx

@@ -0,0 +1,27 @@
+import styles from "@/components/Home/Home.module.scss";
+import IconButton from "@/components/ui/IconButton/IconButton";
+import Text from "@/components/ui/Text/Text";
+
+const Home = () => {
+  return (
+    <div className={styles.Home}>
+      <div className={styles.HomeTitle}>
+        <Text size="xl" color="gradient" weight="bold" align="center" as="h1">
+          {`영수증으로\nAI 음식 리뷰 남겨요`}
+        </Text>
+        <Text color="secondary" weight="medium" align="center">
+          손쉬운 음식 리뷰 작성
+        </Text>
+      </div>
+      <div className={styles.HomeImage}>
+        <img src="/src/assets/img/img-graphic-logo.png" alt="mainLogo" />
+      </div>
+      <div className={styles.HomeBottom}>
+        <IconButton text="갤러리" iconName="gallery" />
+        <IconButton text="카메라" iconName="camera" />
+      </div>
+    </div>
+  );
+};
+
+export default Home;

src/components/common/Navbar.module.scss

@@ -0,0 +1,5 @@
+.Navbar {
+  width: 100%;
+  height: 2.75rem;
+  background-color: red;
+}

src/components/common/Navbar.tsx

@@ -0,0 +1,7 @@
+import styles from "@/components/common/Navbar.module.scss";
+
+const Navbar = () => {
+  return <div className={styles.Navbar}>Navbar</div>;
+};
+
+export default Navbar;

src/main.tsx

@@ -1,19 +1,19 @@
 import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
+import ReactDom from "react-dom/client";
 
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
-import App from "@/App";
+import AppRouter from "@/router/AppRouter";
 
 import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider";
 
 import "@/styles/reset.scss";
 import "@/styles/global.scss";
 
-createRoot(document.getElementById("root")!).render(
+ReactDom.createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ReactQueryClientProvider>
-      <App />
+      <AppRouter />
       <ReactQueryDevtools initialIsOpen={false} />
     </ReactQueryClientProvider>
   </StrictMode>,

src/pages/HomePage.tsx

@@ -0,0 +1,13 @@
+import Navbar from "@/components/common/Navbar";
+import Home from "@/components/Home/Home";
+
+const HomePage = () => {
+  return (
+    <>
+      <Navbar />
+      <Home />
+    </>
+  );
+};
+
+export default HomePage;

src/router/AppRouter.tsx

@@ -0,0 +1,24 @@
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+
+import App from "@/App";
+
+import HomePage from "@/pages/HomePage";
+
+const AppRouter = () => {
+  const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <App />,
+      children: [
+        {
+          path: "",
+          element: <HomePage />,
+        },
+      ],
+    },
+  ]);
+
+  return <RouterProvider router={router} />;
+};
+
+export default AppRouter;