Feature/#3 front design adjustment

components/molecules/header-menu.tsx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import React, { useState } from "react";
+
+import styles from "@styles/Home.module.scss";
+
+import { HeaderScrollRefs, scroll } from "libs/utils/header";
+
+export const HeaderMenu: React.FC = () => {
+  const [ menuOpen, setMenuOpen ] = useState(false);
+
+  const scrollAndMenuClose = (ref : React.RefObject<HTMLDivElement>) => {
+    setMenuOpen(false);
+    scroll(ref);
+  }
+
+  return (
+    <div className={styles.headerMenu}>
+      <div className={styles.headerWrapper}>
+        <div className={styles.headerBar}>
+          <div className={styles.titleLogo}>
+            <Image
+              alt="タイトルロゴ"
+              src="/KUMD.svg"
+              width="129px"
+              height="33px"
+              onClick={() => scrollAndMenuClose(HeaderScrollRefs.TOP)}
+            />
+          </div>
+          <div className={styles.pcScrollBtns}>
+            <span onClick={() => scrollAndMenuClose(HeaderScrollRefs.TOP)}>
+              top
+            </span>
+            <span onClick={() => scrollAndMenuClose(HeaderScrollRefs.ABOUT)}>
+              about
+            </span>
+            <span onClick={() => scrollAndMenuClose(HeaderScrollRefs.GALLERY)}>
+              gallery
+            </span>
+          </div>
+          <div className={styles.hamburgerWrapper}>
+              <button className={`${styles.hamburger} ${menuOpen ? styles.openHamburger : ""}`} onClick={() => setMenuOpen(!menuOpen)}>
+              <span></span>
+              <span></span>
+              <span></span>
+            </button>
+          </div>
+        </div>
+        <div className={`${styles.headerContent} ${menuOpen ? styles.openContent : ""}`}>
+          <div className={styles.borderTop}></div>
+          <div className={styles.scrollBtnWrapper}>
+            <div className={styles.scrollBtn} onClick={() => scrollAndMenuClose(HeaderScrollRefs.TOP)}>
+              <div>01<br/>TOP</div>
+            </div>
+            <div className={styles.scrollBtn} onClick={() => scrollAndMenuClose(HeaderScrollRefs.ABOUT)}>
+              <div>02<br/>ABOUT</div>
+            </div>
+            <div className={styles.scrollBtn} onClick={() => scrollAndMenuClose(HeaderScrollRefs.GALLERY)}>
+              <div>03<br/>GALLERY</div>
+            </div>
+          </div>
+          <div className={styles.borderBottom}></div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/molecules/index.ts

@@ -1,2 +1,3 @@
 export * from "./home";
+export * from "./header-menu";
 export * from "./section-title";

components/organisms/home-layout.tsx

@@ -3,7 +3,9 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { SectionTitle } from "@components/molecules";
+import { HeaderMenu } from "@components/molecules";
 import { WorksState } from "hooks/works/state";
+import { HeaderScrollRefs, scroll } from "libs/utils/header";
 import { convertWorksToSortableWorks } from "libs/utils";
 
 type Props = {
@@ -13,20 +15,27 @@ type Props = {
 export const HomeLayout: React.FC<Props> = ({ worksState }) => {
   return (
     <div className="layout">
-      <h1 className="logo-font">KUMD</h1>
-      <div className="section-about">
+      <HeaderMenu></HeaderMenu>
+      <div className="section-about" ref={HeaderScrollRefs.ABOUT}>
         <SectionTitle>はじめに</SectionTitle>
 
-        <div>
+        <div className="description">
           <p>KUMD海賊版パネル展示会は</p>
-          <p>現回生OBOG問わず、さまざまな世代の漫画同好会が</p>
+          <p>現回生OBOG問わず、様々な世代の漫画同好会が</p>
           <p>イラスト漫画を通じ、公開鑑賞交流しあえることを</p>
+          <br/>
           <p>目的として開催したイベントです.</p>
         </div>
         <div className="description">
-          <div className="description-logo"></div>
+          <div className="description-logo">
+            <Image
+              alt="背景ロゴ"
+              src="/KUMD.svg"
+              layout="fill"
+            />
+          </div>
           <p>
-            現在は<span>2022.06~08</span>の期間に募集した
+            現在は<span className="black-background">2022.06~08</span>の期間に募集した
           </p>
           <p>作品を展示しています。</p>
         </div>
@@ -39,30 +48,32 @@ export const HomeLayout: React.FC<Props> = ({ worksState }) => {
             </div>
             <div className="author">
               <span>Engineering</span>
-              <span>つんぱ。</span>
+              <span>藤井遼 つんぱ。</span>
             </div>
             <div className="author">
               <span>Top picture</span>
               <span>cacao</span>
             </div>
+            <div className="scroll-bar" onClick={() => scroll(HeaderScrollRefs.GALLERY)}>
+              <div className="bar"></div>
+              <p>scroll</p>
+            </div>
           </div>
 
-          <div className="artists-table">
-            <div>Artists</div>
-            <div className="artists">
-              {Array.from(
-                new Set(worksState.works.map((work) => work.artist))
-              ).map((artist, idx) => (
-                <span key={idx}>{artist.name}</span>
-              ))}
+          <div className="news-contents">
+            <div className="news">
+              coming soon
+            </div>
+            <div className="news">
+              coming soon
             </div>
           </div>
         </div>
       </div>
-      <div>
-        <SectionTitle>作品一覧</SectionTitle>
 
-        <div>
+      <div ref={HeaderScrollRefs.GALLERY}>
+        <SectionTitle>GALLERY</SectionTitle>
+        <div className="opus-wrapper">
           {worksState.isLoading && <span>Now Loading...</span>}
           {convertWorksToSortableWorks(worksState.works).map(
             ({ work }, idx) => {
@@ -80,10 +91,8 @@ export const HomeLayout: React.FC<Props> = ({ worksState }) => {
                       />
                     </div>
                     <div className="text-wrapper">
-                      <p className="text-title">{work.title}</p>
                       <p className="text-artist">{work.artist.name}</p>
-
-                      <p className="text-description">{work.description}</p>
+                      <p className="text-title">{work.title}</p>
                     </div>
                   </div>
                 </Link>

libs/utils/header.ts

@@ -0,0 +1,16 @@
+import React from "react";
+
+export const HeaderScrollRefs = {
+  TOP: React.createRef<HTMLDivElement>(),
+  ABOUT: React.createRef<HTMLDivElement>(),
+  GALLERY: React.createRef<HTMLDivElement>(),
+} as const;
+
+type HeaderScrollRef = typeof HeaderScrollRefs[keyof typeof HeaderScrollRefs];
+
+export const scroll = (ref: HeaderScrollRef) => {
+  ref!.current!.scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+};

pages/_document.tsx

@@ -38,7 +38,7 @@ export default function CustomDocument() {
           crossOrigin="true"
         />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@700&family=M+PLUS+1p:wght@400;700&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Noto+Sans+JP:wght@700&display=swap"
           rel="stylesheet"
         ></link>
         <Script

pages/index.tsx

@@ -7,6 +7,7 @@ import styles from "@styles/Home.module.scss";
 import { HomeHeader } from "@components/molecules";
 import { HomeLayout } from "@components/organisms";
 import { useWorks } from "hooks/works/useWorks";
+import { HeaderScrollRefs } from "libs/utils/header"
 import { useExhibitions } from "hooks/exhibitions/use-exhibitions";
 import OGP from "@components/organisms/ogp";
 import { firestoreExhibitionStore } from "store/exhibitions-store";
@@ -18,7 +19,7 @@ const Home: NextPage = () => {
     exhibitionsState: { currentExhibition },
   } = useExhibitions();
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={ HeaderScrollRefs.TOP }>
       <Head>
         <title>{currentExhibition?.title ?? "KUMD海賊版パネル展示会"}</title>
         <meta

styles/Home.module.scss

@@ -110,3 +110,147 @@
     flex-direction: column;
   }
 }
+
+// ヘッダーメニュー
+
+.headerMenu {
+  position: sticky;
+  top: 50px;
+  margin-left: -2.5vw;
+  z-index: 10;
+  width: 100vw;
+  .headerWrapper {
+    .headerBar {
+      margin-top: 50px;
+      height: 62px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: 0.5s;
+      .titleLogo {
+        cursor: pointer;
+        margin-left: 2.5vw;
+        width: 129px;
+      }
+      .pcScrollBtns {
+        cursor: pointer;
+        display: none;
+        align-items: center;
+        justify-content: space-between;
+        width: 260px;
+        margin-right: 75px;
+      }
+      .hamburgerWrapper {
+        border: solid 1px black;
+        background-color: white;
+        border-radius: 18px 0px 0px 18px;
+        border-right: 1px solid white;
+        width: 60px;
+        height: 45px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .hamburger {
+          z-index: 15;
+          position: relative;
+          width: 26px;
+          height: 23px;
+          cursor: pointer;
+          display: inline-block;
+          box-sizing: border-box;
+          margin-left: 5px;
+          span {
+            position: absolute;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background-color: black;
+            border-radius: 2px;
+            display: inline-block;
+            transition: all 0.5s;
+            box-sizing: border-box;
+          }
+          span:nth-of-type(1) {
+            top: 0;
+          }
+          span:nth-of-type(2) {
+            top: 10px;
+          }
+          span:nth-of-type(3) {
+            bottom: 0;
+          }
+        }
+      }
+      .openHamburger {
+        span:nth-of-type(1) {
+          transform: translateY(10px) rotate(-45deg);
+        }
+        span:nth-of-type(2) {
+          opacity: 0;
+        }
+        span:nth-of-type(3) {
+          transform: translateY(-10px) rotate(45deg);
+        }
+      }
+    }
+    .headerContent {
+      z-index: 10;
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 0vw;
+      height: 100vh;
+      background-color: white;
+      transition: 0.4s;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: scroll;
+      .borderTop {
+        position: absolute;
+        top: 20px;
+        width: 100vw;
+        height: 1px;
+        background-color: black;
+      }
+      .borderBottom {
+        position: absolute;
+        bottom: 20px;
+        width: 100vw;
+        height: 1px;
+        background-color: black;
+      }
+      .scrollBtnWrapper {
+        width: 100%;
+        margin-top: 20px;
+        .scrollBtn {
+          margin: 80px 35px;
+          font-weight: bold;
+          font-size: 36px;
+          line-height: 45px;
+        }
+      }
+    }
+    .openContent {
+      width: 100vw;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .headerBar {
+    border-top: 0.5px solid black;
+    border-bottom: 0.5px solid black;
+    background-color: white;
+
+    .pcScrollBtns {
+      display: flex !important;
+    }
+    .hamburgerWrapper {
+      display: none !important;
+    }
+  }
+}
+
+// ヘッダーメニュー