Feature/#3 front design adjustment

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"

components/molecules/header-menu.tsx

@@ -0,0 +1,65 @@
+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>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>

components/organisms/works-layout.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { useWorks } from "hooks/works/useWorks";
 import { WrapLink } from "@components/atoms/wrap-link";
@@ -9,6 +9,22 @@ type Props = {
   work: Work;
 };
 
+const useAutoResizeTextArea = (value: string | undefined) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const { borderTopWidth, borderBottomWidth } = getComputedStyle(element);
+
+    element.style.height = "40px";
+    element.style.height = `calc(${element.scrollHeight}px + ${borderTopWidth} + ${borderBottomWidth})`;
+  }, [value]);
+
+  return ref;
+}
+
 export const WorksLayout: React.FC<Props> = (props) => {
   const { work } = props;
   const { addComment } = useWorks();
@@ -32,89 +48,92 @@ export const WorksLayout: React.FC<Props> = (props) => {
     (activeElement as HTMLElement).blur();
   };
 
+  const textAreaRef = useAutoResizeTextArea(text);
+
   const hasComments = !!work.comments.length;
 
   return (
     <div className="layout">
-      <div className="opus-container">
-        <div className="image-wrapper">
-          <Image
-            src={work.image}
-            layout="fill"
-            alt={work.title}
-            className="image"
-          />
-        </div>
-        <div className="text-container">
-          <div className="text-title">
-            <span>{work.title}</span>
+      <div className="work-wrapper">
+        <div className="opus-container">
+          <div className="image-wrapper">
+            <Image
+              src={work.image}
+              layout="fill"
+              alt={work.title}
+              className="image"
+            />
           </div>
-          <div className="text-artist-info">
-            <div>
-              <span>{work.artist.name}</span>
+          <div className="text-container">
+            <div className="text-title">
+              <span>{work.title}</span>
             </div>
-            <div>
-              <span>入学年: {work.artist.admittedAt}</span>
-              <span>制作年: {work.workedAt}</span>
+            <div className="text-artist-info">
+              <div>
+                <span>{work.artist.name}</span>
+              </div>
+              <div>
+                <span>入学年：{work.artist.admittedAt}　</span>
+                <span>制作年：{work.workedAt}</span>
+              </div>
             </div>
-          </div>
-          {work.artist.social && (
-            <div className="text-social-link">
-              <div className="social-link">
-                <WrapLink
-                  path={`https://twitter.com/${work.artist.social?.twitter}`}
-                  outerLink={true}
-                >
-                  <button className="social-link">
-                    <TwitterIcon />
-                  </button>
-                </WrapLink>
+            {work.artist.social && (
+              <div className="text-social-link">
+                <div className="social-link">
+                  <WrapLink
+                    path={`https://twitter.com/${work.artist.social?.twitter}`}
+                    outerLink={true}
+                  >
+                    <button className="social-link">
+                      <TwitterIcon />
+                    </button>
+                  </WrapLink>
+                </div>
               </div>
+            )}
+            <div className="text-description">
+              {work.description.split("\n").map((p, idx) => (
+                <p key={idx}>{p}</p>
+              ))}
             </div>
-          )}
-          <div className="text-description">
-            {work.description.split("\n").map((p, idx) => (
-              <p key={idx}>{p}</p>
-            ))}
           </div>
         </div>
-      </div>
 
-      <hr />
-      <div>
-        <div>コメント</div>
-
-        <div className="inputs">
-          <input
-            className="name-input"
-            placeholder="名前"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-          <input
-            className="text-input"
-            placeholder="コメントする..."
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key !== "Enter") return;
-              registerComment();
-            }}
-          />
+        <hr />
+        <div>
+          <div className="comment-title">コメント</div>
+          <div className="inputs-wrapper">
+            <div className="inputs">
+              <input
+                className="name-input"
+                placeholder="名前"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+              <textarea
+                className="text-input"
+                placeholder="コメントする..."
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                ref={textAreaRef}
+              />
+            </div>
+            <button className="submit-btn" onClick={() => registerComment()}></button>
+          </div>
         </div>
-      </div>
 
-      <div>
-        {!hasComments && <span>コメントはまだ無いよ ノシ</span>}
-        {hasComments &&
-          Object.values(work.comments)
-            .reverse()
-            .map((comment, idx) => (
-              <div key={idx} className="comment">
-                <div>{comment.name}</div>
-                <div>{comment.text}</div>
-              </div>
-            ))}
+        <div>
+          {!hasComments && <span>コメントはまだありません。</span>}
+          {hasComments &&
+            Object.values(work.comments)
+              .reverse()
+              .map((comment, idx) => (
+                <div key={idx} className="comment">
+                  <div>{comment.name}</div>
+                  <div>{comment.text}</div>
+                </div>
+              ))}
+        </div>
       </div>
     </div>
   );

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",
+  });
+};