ryoctrl · takapan2 · Aug 26, 2022 · Aug 20, 2022 · Aug 20, 2022 · Aug 20, 2022
diff --git a/components/atoms/icons/twitter-icon.tsx b/components/atoms/icons/twitter-icon.tsx
@@ -4,11 +4,11 @@ export const TwitterIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 48 48"
+      viewBox="6.5 6.5 35 35"
       fill="currentColor"
       {...props}
     >
-      <path fill="#03a9f4" d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z" />
+      <path fill="000" d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z" />
       <path
         fill="#fff"
         d="M36,17.12c-0.882,0.391-1.999,0.758-3,0.88c1.018-0.604,2.633-1.862,3-3 c-0.951,0.559-2.671,1.156-3.793,1.372C31.311,15.422,30.033,15,28.617,15C25.897,15,24,17.305,24,20v2c-4,0-7.9-3.047-10.327-6 c-0.427,0.721-0.667,1.565-0.667,2.457c0,1.819,1.671,3.665,2.994,4.543c-0.807-0.025-2.335-0.641-3-1c0,0.016,0,0.036,0,0.057 c0,2.367,1.661,3.974,3.912,4.422C16.501,26.592,16,27,14.072,27c0.626,1.935,3.773,2.958,5.928,3c-1.686,1.307-4.692,2-7,2 c-0.399,0-0.615,0.022-1-0.023C14.178,33.357,17.22,34,20,34c9.057,0,14-6.918,14-13.37c0-0.212-0.007-0.922-0.018-1.13 C34.95,18.818,35.342,18.104,36,17.12"

diff --git a/components/molecules/header-menu.tsx b/components/molecules/header-menu.tsx
@@ -0,0 +1,74 @@
+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.png"
+              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>
+                <h3>01</h3>
+                <h3>TOP</h3>
+              </div>
+            </div>
+            <div className={styles.scrollBtn} onClick={() => scrollAndMenuClose(HeaderScrollRefs.ABOUT)}>
+              <div>
+                <h3>02</h3>
+                <h3>ABOUT</h3>
+              </div>
+            </div>
+            <div className={styles.scrollBtn} onClick={() => scrollAndMenuClose(HeaderScrollRefs.GALLERY)}>
+              <div>
+                <h3>03</h3>
+                <h3>GALLERY</h3>
+              </div>
+            </div>
+          </div>
+          <div className={styles.borderBottom}></div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/molecules/home/footer.tsx b/components/molecules/home/footer.tsx
@@ -0,0 +1,48 @@
+import Image from "next/image";
+
+import { HeaderScrollRefs, scroll } from "libs/utils/header";
+import { useExhibitions } from "hooks/exhibitions/use-exhibitions";
+
+export const HomeFooter: React.FC = () => {
+  const {
+    exhibitionsState: { currentExhibition },
+  } = useExhibitions();
+  return (
+    <div className="footer">
+      <div className="footer-wrapper">
+        <div className="footer-btn-wrapper">
+          <div className="footer-btn" onClick={() => scroll(HeaderScrollRefs.TOP)}>
+            <h4>01</h4>
+            <h4>TOP</h4>
+          </div>
+          <div className="footer-btn" onClick={() => scroll(HeaderScrollRefs.ABOUT)}>
+            <h4>02</h4>
+            <h4>ABOUT</h4>
+          </div>
+          <div className="footer-btn" onClick={() => scroll(HeaderScrollRefs.GALLERY)}>
+            <h4>03</h4>
+            <h4>GALLERY</h4>
+          </div>
+          <div className="page-top-btn">
+            <Image
+              alt="タイトルロゴ"
+              src="/pageTopBtn.png"
+              layout="fill"
+              objectFit="contain"
+              onClick={() => scroll(HeaderScrollRefs.TOP)}
+            />
+          </div>
+        </div>
+        <div className="footer-title-logo">
+          <Image
+            alt="タイトルロゴ"
+            src="/KUMD.png"
+            layout="fill"
+            objectFit="contain"
+            onClick={() => scroll(HeaderScrollRefs.TOP)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/molecules/home/header.tsx b/components/molecules/home/header.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 
 import { useExhibitions } from "hooks/exhibitions/use-exhibitions";
+import { HeaderScrollRefs, scroll } from "libs/utils/header";
 
 export const HomeHeader: React.FC = () => {
   const {
@@ -14,16 +15,29 @@ export const HomeHeader: React.FC = () => {
           src={currentExhibition.heroImage.pc}
           className="invisible md:visible"
           layout="fill"
+          objectFit="cover"
         />
       )}
       {currentExhibition?.heroImage.sp && (
-        <Image
-          alt={currentExhibition.title}
-          src={currentExhibition.heroImage.sp}
-          className="visible md:invisible"
-          layout="fill"
-        />
+        <div>
+          <div className="header-title">
+            <h2>漫画同好会</h2>
+            <h2>海賊版</h2>
+            <h2>パネル展示会</h2>
+          </div>
+          <Image
+            alt={currentExhibition.title}
+            src={currentExhibition.heroImage.sp}
+            className="visible md:invisible"
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
       )}
+      <div className="scroll-header-bar" onClick={() => scroll(HeaderScrollRefs.ABOUT)}>
+        <div className="bar"></div>
+        <p>scroll</p>
+      </div>
     </div>
   );
 };
diff --git a/components/molecules/index.ts b/components/molecules/index.ts
@@ -1,2 +1,3 @@
 export * from "./home";
+export * from "./header-menu";
 export * from "./section-title";
diff --git a/components/organisms/home-layout.tsx b/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>mosin つんぱ。</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) => {
@@ -82,8 +93,6 @@ export const HomeLayout: React.FC<Props> = ({ worksState }) => {
                     <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>
                     </div>
                   </div>
                 </Link>