Merge pull request #40 from WASSUP-Project/develop

[close #39] 상단 네비게이션바로 이동할 때 로딩 최소화 작업
WASSUP-Project · Apr 8, 2024 · fa2114e · fa2114e
2 parents 6eba625 + 2fe6885
commit fa2114e
Show file tree

Hide file tree

Showing 22 changed files with 513 additions and 211 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,8 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.1",
     "react-use-pagination": "^2.0.1",
+    "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
     "yup": "^1.4.0"
   },
   "devDependencies": {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Providers } from "./providers";
+import RecoilRootProvider from "@/utils/RecoilRootProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,10 +17,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="light">
-      <Providers>
-        <body className={inter.className}>{children}</body>
-      </Providers>
-    </html>
+    <RecoilRootProvider>
+      <html lang="en" className="light">
+        <Providers>
+          <body className={inter.className}>{children}</body>
+        </Providers>
+      </html>
+    </RecoilRootProvider>
   );
 }
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -0,0 +1,5 @@
+import Profile from "@/containers/profile/Profile";
+
+export default function ProfilePage() {
+  return <Profile />;
+}
diff --git a/src/components/nav/Nav.module.css b/src/components/nav/Nav.module.css
@@ -25,6 +25,11 @@
     padding: 0 2rem;
 }
 
+.nav_item_text a {
+    font-weight: 500;
+    font-size: 16px;
+}
+
 .navItemIcon {
     width: 14px;
     height: 8px;
@@ -39,7 +44,6 @@
 }
 
 .text_button {
-    padding: 8px 16px;
     box-sizing: border-box;
     border-radius: 4px;
     font-style: normal;
@@ -52,26 +56,36 @@
     border: none;
 }
 
-.text_button:hover {
-    font-weight: 600;
-}
-
 .button {
-    padding: 8px 23px;
+    padding-top: 0.7rem;
+    padding-bottom: 0.7rem;
     border-radius: 4px;
     font-style: normal;
-    width: 150px;
     font-weight: 500;
     font-size: 16px;
     line-height: 30px;
     text-align: center;
     cursor: pointer;
+    width: 8rem;
+    min-width: 8rem;
 
     border: none;
     background-color: #e4d5fe;
     color: #926dff;
 }
 
+.text_button p {
+    padding: 1rem;
+}
+
+.text_button a {
+    padding: 1rem;
+}
+
+.button a {
+    padding: 1rem 2rem 1rem 2rem;
+}
+
 .button:hover {
     background-color: #D9C3FF;
 }
diff --git a/src/components/nav/Nav.tsx b/src/components/nav/Nav.tsx
@@ -5,11 +5,11 @@ import {
   NavbarContent,
   NavbarItem,
   Link,
-  Button,
 } from "@nextui-org/react";
 import styles from "./Nav.module.css";
 
 type navProps = {
+  contentComponents: (() => JSX.Element)[];
   textButtonComponent: () => JSX.Element;
   buttonComponent: () => JSX.Element;
 };
@@ -23,21 +23,11 @@ export default function Nav(props: navProps) {
         </Link>
       </NavbarBrand>
       <NavbarContent justify="center" className={styles.nav_content}>
-        <NavbarItem>
-          <Link href="/about" className={styles.nav_item_text}>
-            제품 소개
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="/policy/bill" className={styles.nav_item_text}>
-            요금 정책
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link href="/support" className={styles.nav_item_text}>
-            고객 지원
-          </Link>
-        </NavbarItem>
+        {props.contentComponents.map((item, index) => (
+          <NavbarItem className={styles.nav_item_text} key={index}>
+            {item()}
+          </NavbarItem>
+        ))}
       </NavbarContent>
       <NavbarContent justify="end">
         <NavbarItem>

diff --git a/src/containers/about/About.module.css b/src/containers/about/About.module.css
@@ -0,0 +1,115 @@
+.mainContainer_white {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0px;
+    gap: 24px;
+    margin: 0 auto;
+
+    background: #ffffff;
+}
+
+.loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.mainContainer_gray {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0px;
+    gap: 24px;
+    margin: 0 auto;
+
+    background: #ededed;
+}
+
+.title {
+    width: 503px;
+    height: 149px;
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 64px;
+    line-height: 72px;
+    text-align: center;
+    color: #35414B;
+}
+
+.semiTitle {
+    width: 503px;
+    height: 48px;
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 48px;
+    text-align: center;
+    color: #35414B;
+
+}
+
+.message {
+    width: 176px;
+    height: 24px;
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #4E5A65;
+}
+
+.content1 {
+    display: flex;
+    align-items: center;
+}
+
+.content1_1 {
+    padding: 8rem 4rem 8rem 4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+}
+
+.content1_2 {
+    min-width: 500px;
+    padding-right: 4rem;
+    padding-left: 4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+}
+
+.content1Title {
+    width: 315px;
+    height: 48px;
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 48px;
+    color: #35414B;
+}
+
+.content1Description {
+    width: 413px;
+    height: 48px;
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: #4E5A65;
+}
+
+.banner {
+    padding: 8rem;
+}
diff --git a/src/containers/about/About.tsx b/src/containers/about/About.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+import Spacer from "@/components/Spacer";
+import PositiveButton from "@/components/buttons/PositiveButton";
+import styles from "./About.module.css";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function About() {
+  return (
+    <>
+      <Spacer />
+      <div className={styles.mainContainer_white}>
+        <div className={styles.title}>
+          스마트 출결 파트너
+          <br />
+          WASSUP
+        </div>
+        <div className={styles.message}>실시간 등하원 안심 메시지</div>
+      </div>
+      <Spacer />
+      <div className={styles.mainContainer_gray}>
+        <div className={styles.content1}>
+          <div className={styles.content1_1}>
+            <h1 className={styles.content1Title}>스마트한 출결관리</h1>
+            <p className={styles.content1Description}>
+              얼굴 인식으로 편하게 출결을 관리하세요. <br />
+              안심 등하원 메시지로 자녀의 출결을 확인하세요
+            </p>
+            <Link href="/group">
+              <PositiveButton text="그룹 미리보기" />
+            </Link>
+          </div>
+          <div>
+            <Image
+              src="/image.png"
+              alt="Image of something relevant"
+              width={500}
+              height={250}
+              className={styles.content1_2}
+            />
+          </div>
+        </div>
+      </div>
+      <Spacer />
+      <div className={styles.mainContainer_white}>
+        <div className={styles.semiTitle}>쉽고 간편한 기능들</div>
+        <div>
+          <Image
+            src="/image1.png"
+            alt="Image of something relevant"
+            width={1300}
+            height={650}
+          ></Image>
+        </div>
+      </div>
+      <Spacer />
+      <div className={styles.mainContainer_gray}>
+        <div className={styles.banner}>
+          <Image
+            src="/image2.png"
+            alt="Image of something relevant"
+            width={1000}
+            height={200}
+          ></Image>
+        </div>
+      </div>
+    </>
+  );
+}