feat: show mock news on top page

piro0919 · Nov 15, 2024 · ed9a061 · ed9a061
1 parent 3ab8cae
commit ed9a061
Show file tree

Hide file tree

Showing 14 changed files with 300 additions and 14 deletions.
diff --git a/apps/user/package.json b/apps/user/package.json
@@ -4,6 +4,7 @@
     "@clerk/nextjs": "6.2.0",
     "@prisma/client": "5.21.1",
     "@t3-oss/env-nextjs": "0.11.1",
+    "@tabler/icons-react": "3.22.0",
     "@vercel/postgres": "0.10.0",
     "hamburger-react": "2.5.1",
     "next": "15.0.2",

diff --git a/apps/user/src/app/(auth)/_components/App/index.tsx b/apps/user/src/app/(auth)/_components/App/index.tsx
@@ -1,5 +1,84 @@
+import Image from "next/image";
+import Link from "next/link";
 import styles from "./style.module.css";
 
 export default function App(): JSX.Element {
-  return <div className={styles.top}>aaa</div>;
+  return (
+    <div className={styles.wrapper}>
+      <section className={styles.section}>
+        <div className={styles.followNews}>
+          <h1 className={styles.h1}>フォローニュース</h1>
+          {Array(10)
+            .fill(undefined)
+            .map((_, index) => (
+              <article
+                className={styles.article}
+                data-article={index % 3 === 0 ? "pickup" : "dropoff"}
+                key={index}
+              >
+                <Link href="/news/hoge">
+                  <div className={styles.thmubnail}>
+                    <Image
+                      alt=""
+                      fill={true}
+                      quality={100}
+                      src="https://img.youtube.com/vi/FIAKcjtdXQo/maxresdefault.jpg"
+                    />
+                  </div>
+                </Link>
+                <div className={styles.detail}>
+                  <Link href="/news/hoge">
+                    <div className={styles.title}>投稿したよ！</div>
+                    <div className={styles.date}>3 時間前</div>
+                  </Link>
+                  <Link href="/vtuber/hoge">
+                    <div className={styles.user}>
+                      <Image
+                        alt=""
+                        className={styles.icon}
+                        height={24}
+                        src="https://yt3.googleusercontent.com/yv7Myimz11d0URsPtpeoLe18mx7UUeFInVOag9j2uZUWh0i24bH8AY7jvPPcNeEhqylxw4xrEw=s160-c-k-c0x00ffffff-no-rj"
+                        width={24}
+                      />
+                      <div className={styles.name}>冷夏茶みしろ</div>
+                    </div>
+                  </Link>
+                </div>
+              </article>
+            ))}
+        </div>
+        <div className={styles.topNews}>
+          <h2 className={styles.h2}>トップニュース</h2>
+          {Array(10)
+            .fill(undefined)
+            .map((_, index) => (
+              <article className={styles.article} key={index}>
+                <div className={styles.thmubnail}>
+                  <Image
+                    alt=""
+                    fill={true}
+                    quality={100}
+                    src="https://img.youtube.com/vi/FIAKcjtdXQo/maxresdefault.jpg"
+                  />
+                </div>
+                <div className={styles.detail}>
+                  <div className={styles.title}>投稿したよ！</div>
+                  <div className={styles.date}>3 時間前</div>
+                  <div className={styles.user}>
+                    <Image
+                      alt=""
+                      className={styles.icon}
+                      height={24}
+                      src="https://yt3.googleusercontent.com/yv7Myimz11d0URsPtpeoLe18mx7UUeFInVOag9j2uZUWh0i24bH8AY7jvPPcNeEhqylxw4xrEw=s160-c-k-c0x00ffffff-no-rj"
+                      width={24}
+                    />
+                    <div className={styles.name}>冷夏茶みしろ</div>
+                  </div>
+                </div>
+              </article>
+            ))}
+        </div>
+      </section>
+    </div>
+  );
 }
diff --git a/apps/user/src/app/(auth)/_components/App/style.module.css b/apps/user/src/app/(auth)/_components/App/style.module.css
@@ -1,5 +1,126 @@
-.top {
+.wrapper {
   background-image: url(/background.jpg);
   background-position: center bottom;
   background-size: cover;
 }
+
+.section {
+  align-items: flex-start;
+  display: grid;
+  gap: min(15px, 2.25dvw);
+  margin: 0 auto;
+  padding: min(15px, 2.25dvw);
+  width: min(100%, 1280px);
+
+  @media (width >= 980px) {
+    grid-template: auto / 2fr 1fr;
+  }
+}
+
+.followNews,
+.topNews {
+  background: #fff;
+  border: 1px solid #e8eaee;
+  border-radius: min(15px, 2.25dvw);
+  padding: 0 min(15px, 2.25dvw);
+}
+
+.h1,
+.h2 {
+  font-size: 2.1rem;
+  font-weight: 500;
+  padding: min(15px, 2.25dvw) 0 calc(min(15px, 2.25dvw) / 2);
+}
+
+.article {
+  border-top: 1px solid #e8eaee;
+  display: grid;
+  padding: min(15px, 2.25dvw) 0;
+  gap: min(15px, 2.25dvw);
+}
+
+.followNews {
+  .article[data-article="pickup"] {
+    @media (width < 980px) {
+      grid-template: auto / auto;
+    }
+    @media (width >= 980px) {
+      grid-template: auto / 1fr 1.25fr;
+    }
+  }
+
+  .article[data-article="pickup"] .title {
+    font-size: 2.4rem;
+  }
+
+  .article[data-article="dropoff"] {
+    grid-template: auto / 3fr 1fr;
+  }
+
+  .article[data-article="dropoff"] .detail {
+    order: -1;
+  }
+
+  .article[data-article="dropoff"] .title {
+    font-size: 2.1rem;
+  }
+}
+
+.topNews {
+  .article {
+    @media (width < 980px) {
+      grid-template: auto / 3fr 1fr;
+    }
+    @media (width >= 980px) {
+      grid-template: auto / 1.5fr 1fr;
+    }
+  }
+
+  .detail {
+    order: -1;
+  }
+
+  .title {
+    @media (width < 980px) {
+      font-size: 2.1rem;
+    }
+    @media (width >= 980px) {
+      font-size: 1.8rem;
+    }
+  }
+}
+
+.thmubnail {
+  aspect-ratio: 16 / 9;
+  position: relative;
+  border-radius: min(15px, 2.25dvw);
+  overflow: hidden;
+}
+
+.title {
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  line-clamp: 3;
+  overflow: hidden;
+}
+
+.date {
+  font-size: 1.35rem;
+}
+
+.user {
+  align-items: center;
+  display: flex;
+  margin: 9px 0 0;
+  gap: 9px;
+}
+
+.icon {
+  border-radius: 50dvmax;
+}
+
+.name {
+  font-size: 1.35rem;
+}
diff --git a/apps/user/src/app/(auth)/_components/AuthLayout/index.tsx b/apps/user/src/app/(auth)/_components/AuthLayout/index.tsx
@@ -3,6 +3,7 @@ import { Spin as Hamburger } from "hamburger-react";
 import { ReactNode } from "react";
 import { useBoolean } from "usehooks-ts";
 import Drawer from "../Drawer";
+import Footer from "../Footer";
 import Header from "../Header";
 import MobileNavigation from "../MobileNavigation";
 import styles from "./style.module.css";
@@ -24,6 +25,9 @@ export default function AuthLayout({ children }: AuthLayoutProps): JSX.Element {
         <Header />
       </div>
       <main className={styles.main}>{children}</main>
+      <div className={styles.footer}>
+        <Footer />
+      </div>
       <aside className={styles.mobileNavigation}>
         <MobileNavigation />
       </aside>

diff --git a/apps/user/src/app/(auth)/_components/AuthLayout/style.module.css b/apps/user/src/app/(auth)/_components/AuthLayout/style.module.css
@@ -1,11 +1,21 @@
 .header {
   inset: 0 0 auto;
-  z-index: 1;
   position: fixed;
+  z-index: 1;
 }
 
 .main {
   margin: 48px 0 0;
+
+  @media (width < 740px) {
+    margin-bottom: 48px;
+  }
+}
+
+.footer {
+  @media (width < 740px) {
+    display: none;
+  }
 }
 
 .mobileNavigation {
@@ -18,7 +28,7 @@
 }
 
 .hamburger {
-  position: fixed;
   inset: 0 0 auto auto;
+  position: fixed;
   z-index: 1000;
 }
diff --git a/apps/user/src/app/(auth)/_components/Footer/index.tsx b/apps/user/src/app/(auth)/_components/Footer/index.tsx
@@ -0,0 +1,9 @@
+import styles from "./style.module.css";
+
+export default function Footer(): JSX.Element {
+  return (
+    <footer className={styles.footer}>
+      <small className={styles.copyright}>&copy; 2024 Vmate</small>
+    </footer>
+  );
+}
diff --git a/apps/user/src/app/(auth)/_components/Footer/style.module.css b/apps/user/src/app/(auth)/_components/Footer/style.module.css
@@ -0,0 +1,12 @@
+.footer {
+  background: #fff;
+  border-top: 1px solid #e8eaee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+}
+
+.copyright {
+  font-size: 1.2rem;
+}
diff --git a/apps/user/src/app/(auth)/_components/MobileNavigation/index.tsx b/apps/user/src/app/(auth)/_components/MobileNavigation/index.tsx
@@ -1,3 +1,9 @@
+import {
+  IconClock,
+  IconHome,
+  IconMessageDots,
+  IconUserSquare,
+} from "@tabler/icons-react";
 import Link from "next/link";
 import { useMemo } from "react";
 import styles from "./style.module.css";
@@ -7,25 +13,30 @@ export default function MobileNavigation(): JSX.Element {
     () =>
       [
         {
+          Icon: IconHome,
           path: "/",
           text: "ホーム",
         },
         {
+          Icon: IconMessageDots,
           path: "community/",
           text: "コミュニティ",
         },
         {
+          Icon: IconClock,
           path: "/schedule",
           text: "スケジュール",
         },
         {
+          Icon: IconUserSquare,
           path: "/pypage",
           text: "マイページ",
         },
-      ].map(({ path, text }) => (
+      ].map(({ Icon, path, text }) => (
         <li key={path}>
           <Link className={styles.link} href="/">
-            {text}
+            <Icon />
+            <span className={styles.text}>{text}</span>
           </Link>
         </li>
       )),

diff --git a/apps/user/src/app/(auth)/_components/MobileNavigation/style.module.css b/apps/user/src/app/(auth)/_components/MobileNavigation/style.module.css
@@ -11,5 +11,13 @@
 }
 
 .link {
-  display: block;
+  align-content: center;
+  display: grid;
+  height: 100%;
+  justify-content: center;
+  justify-items: center;
+}
+
+.text {
+  font-size: 1.2rem;
 }
diff --git a/apps/user/src/app/(auth)/news/[newsId]/page.tsx b/apps/user/src/app/(auth)/news/[newsId]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page(): JSX.Element {
+  return <div>aaa</div>;
+}
diff --git a/apps/user/src/app/(auth)/vtuber/[vtuberId]/page.tsx b/apps/user/src/app/(auth)/vtuber/[vtuberId]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page(): JSX.Element {
+  return <div>aaa</div>;
+}
diff --git a/apps/user/src/app/globals.css b/apps/user/src/app/globals.css
@@ -1,8 +1,3 @@
-:root {
-  /* stylelint-disable-next-line property-no-unknown */
-  interpolate-size: allow-keywords;
-}
-
 html {
   @media (width < 740px) {
     font-size: 56.25%;

diff --git a/apps/user/src/app/layout.tsx b/apps/user/src/app/layout.tsx
@@ -2,14 +2,17 @@
 import { jaJP } from "@clerk/localizations";
 import { ClerkProvider } from "@clerk/nextjs";
 import type { Metadata } from "next";
+import { Noto_Sans_JP as NotoSansJP } from "next/font/google";
 import "react-modern-drawer/dist/index.css";
 import "ress";
 import Layout from "./_components/Layout";
 import "./globals.css";
 
+const notoSansJP = NotoSansJP({ subsets: ["latin"] });
+
 export const metadata: Metadata = {
   description: "Generated by create next app",
-  title: "ブイメイト",
+  title: "Vmate",
 };
 
 export default function RootLayout({
@@ -19,7 +22,7 @@ export default function RootLayout({
 }>): JSX.Element {
   return (
     <html lang="ja">
-      <body>
+      <body className={notoSansJP.className}>
         <ClerkProvider localization={jaJP}>
           <Layout>{children}</Layout>
         </ClerkProvider>