Helpページの追加

[AKIYAMA-HAYATE]

対応Issue

• resolve helpページの作成(user) #204

概要

Helpページを実装しました

実装詳細

Embla Carouselライブラリの導入
Helpコンポーネントを作成

画面スクリーンショット等

テスト項目

• [ ]ヘッダーのヘルプボタンからHelpページが開けるか
• [ ]モーダル外もしくはヘッダーのヘルプボタンを押すとページが消えるか
• [ ]戻るボタン、次へボタン、ドットボタンを押すことで画像が切り替わるか

備考

[hikahana]

ルートディレクトリ配下にnode_modulesがインストールされちゃってるけどこれなにも参照されないし、すべてのデータはview-user/node_modulesに入っているのでpushしたnode_moduelsは削除しちゃっておけ。
package.jsonとpackage-lock.jsonもいらない

[hikahana]

ちらっとみて気になったところコメントしました

[hikahana]

DotButton

Bを大文字にしてほしい。多分タイポ
パスカルケースにしてね

[hikahana]

ディレクトリ全てね

[hikahana]

HelpCarousel
とかにしましょう。Helpだけだと分かりづらいので

[hikahana]

最後だけ次へではなく"閉じる"とかにしてほしい。
またできるなら言語切り替えによって英語と日本語を切り替えるようにしてほしい

[hikahana]

あとlocalstrageとかを使ってページを開いた際にこのhelpを表示するようにしてほしい。

[hikahana]

Suggested change

	<Button onClick={scrollPrev} inversion={true}>
	戻る
	</Button>
	<Button onClick={scrollNext} inversion={true}>
	次へ
	</Button>
	{selectedIndex === 0 ? (
	<Button onClick={() => setIsOpened(false)} inversion={true}>
	{t.helpCarousel.close}
	</Button>
	) : (
	<Button onClick={scrollPrev} inversion={true}>
	{t.helpCarousel.back}
	</Button>
	)}
	{selectedIndex === slidesCount - 1 ? (
	<Button onClick={() => setIsOpened(false)} inversion={true}>
	{t.helpCarousel.close}
	</Button>
	) : (
	<Button onClick={scrollNext} inversion={true}>
	{t.helpCarousel.next}
	</Button>
	)}

多分こんな感じ

[hikahana]

localesの中身
jaに追記

  helpCarousel: {
    close: "閉じる",
    back: "戻る",
    next: "次へ",
  },

enに追記

  helpCarousel: {
    close: "close",
    back: "back",
    next: "next",
  },

[hikahana]

画像の差し替えもできたら理想だけどちょっとめんどいね
英文の表記の

[hikahana]

ごめん修正点だけ貼るのめんどくて全文貼っちゃった。
コピペして修正して欲しい

[hikahana]

React.FCは使わない方面で

import styles from "./DotButton.module.css";

interface DotButtonProps {
  selected: boolean;
  onClick: () => void;
}

const DotButton = ({ selected, onClick }: DotButtonProps) => {
  return (
    <button
      className={`${styles.dotButton} ${selected ? styles.selected : ""}`}
      onClick={onClick}
    />
  );
};

export default DotButton;

[hikahana]

useStateの変数名が気になったので

import styles from "./Header.module.css";
import { useRouter } from "next/router";
import Image from "next/image";
import { IoHelpCircleOutline } from "react-icons/io5";
import { HelpCarousel } from "@/components";
import { useState, useEffect } from "react";

const Header = () => {
  const router = useRouter();
  const [isOpenHelpCarousel, setIsOpenHelpCarousel] = useState(false);

  useEffect(() => {
    const isHelpShown = localStorage.getItem("helpShown");

    if (isHelpShown === null) {
      setIsOpenHelpCarousel(true);
      localStorage.setItem("isOpenHelpCarousel", JSON.stringify(true));
    }
  }, []);

  const handleClick = () => {
    setIsOpenHelpCarousel(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.main}>
        <Image
          className={styles.logo}
          src="/Bingo_logo.png"
          alt="sample"
          width={300}
          height={300}
          onClick={() => router.push("/")}
        />
        <button className={styles.icon} onClick={handleClick}>
          <IoHelpCircleOutline />
        </button>
      </div>
      {isOpenHelpCarousel && (
        <HelpCarousel
          isOpened={isOpenHelpCarousel}
          setIsOpened={setIsOpenHelpCarousel}
        />
      )}
    </div>
  );
};

export default Header;

[hikahana]

テキストサイズのcssを追加

Suggested change

	}
	}
	.buttonText {
	font-size: 2.5vw;
	}

[hikahana]

つかってない変数とtextのcssを追記

import { useCallback, useState, useEffect } from "react";
import styles from "./HelpCarousel.module.css";
import { Button, Modal, DotButton } from "@/components";
import useEmblaCarousel from "embla-carousel-react";
import Image from "next/image";
import { useRouter } from "next/router";
import { ja, en } from "@/locales";

interface HelpCarouselProps {
  isOpened: boolean;
  setIsOpened: (isOpened: boolean) => void;
}

const HelpCarousel = ({ isOpened, setIsOpened }: HelpCarouselProps) => {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false });
  const [selectedIndex, setSelectedIndex] = useState<number>(0);
  const [slidesCount, setSlidesCount] = useState<number>(0);
  const { locale } = useRouter();
  const [] = useState<string>(locale || "ja");
  const t = locale === "ja" ? ja : en;

  const onSelect = useCallback(() => {
    if (!emblaApi) return;
    setSelectedIndex(emblaApi.selectedScrollSnap());
  }, [emblaApi]);
  useEffect(() => {
    if (!emblaApi) return;
    onSelect();
    setSlidesCount(emblaApi.slideNodes().length);
    emblaApi.on("select", onSelect);
  }, [emblaApi, onSelect]);
  const scrollTo = useCallback(
    (index: number) => {
      if (emblaApi) emblaApi.scrollTo(index);
    },
    [emblaApi],
  );

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev();
  }, [emblaApi]);
  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext();
  }, [emblaApi]);

  const images = [
    { src: "/Help_slide1.png", alt: "Help_slide1" },
    { src: "/Help_slide2.png", alt: "Help_slide2" },
    { src: "/Help_slide3.png", alt: "Help_slide3" },
    { src: "/Help_slide4.png", alt: "Help_slide4" },
    { src: "/Help_slide5.png", alt: "Help_slide5" },
  ];

  return (
    <Modal isOpened={isOpened} setIsOpened={setIsOpened}>
      <div className={styles.container}>
        <div className={styles.embla} ref={emblaRef}>
          <div className={styles.embla__container}>
            {images.map((image, index) => (
              <Image
                key={index}
                className={styles.embla__slide}
                src={image.src}
                alt={image.alt}
                width={1000}
                height={1000}
              />
            ))}
          </div>
          <div className={styles.carousel__dots}>
            {Array.from({ length: slidesCount }).map((_, index) => (
              <DotButton
                key={index}
                selected={index === selectedIndex}
                onClick={() => scrollTo(index)}
              />
            ))}
          </div>
          <div className={styles.screenTransition}>
            {selectedIndex === 0 ? (
              <Button onClick={() => setIsOpened(false)} inversion>
                <div className={styles.buttonText}>{t.helpCarousel.close}</div>
              </Button>
            ) : (
              <Button onClick={scrollPrev} inversion>
                <div className={styles.buttonText}>{t.helpCarousel.back}</div>
              </Button>
            )}
            {selectedIndex === slidesCount - 1 ? (
              <Button onClick={() => setIsOpened(false)} inversion>
                <div className={styles.buttonText}>{t.helpCarousel.close}</div>
              </Button>
            ) : (
              <Button onClick={scrollNext} inversion>
                <div className={styles.buttonText}>{t.helpCarousel.next}</div>
              </Button>
            )}
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default HelpCarousel;

[hikahana]

Suggested change

	export { default as Help } from "./HelpCarousel";
	export { default as HelpCarousel } from "./HelpCarousel";

直ってないよ

[AKIYAMA-HAYATE]

修正終わりました。確認お願いします。
・React.FCを使用し無くする
・useStateの変数名変更
・テキストサイズのcssを追加
・未使用の変数、関数を削除
・ボタンのCSSを追記
・HelpCarouselにしていないところを修正

[hikahana]