コンポーネント整理

[AKIYAMA-HAYATE]

対応Issue

• resolve コンポーネント分け #316

概要

コンポーネント整理

実装詳細

以下の構造になるように各コンポーネントを移動
Components
├── Layout
├── common
│ ├── icons
│ │ ├── BackIcon
│ │ ├── BingoIcon
│ │ ├── PrizesIcon
│ │ ├── ReachIcon
│ │ ├── ReactionsIcon
│ │ ├── SettingsIcon
│ ├── buttons
│ │ ├── Button
│ │ ├── DotButton
│ │ ├── ToggleButton
│ ├── cards
│ │ ├── NumberCardList
│ │ ├── NumberCardSmall
│ │ ├── PrizeCard
│ │ ├── PrizeCardList
│ ├── Header
│ ├── HelpCarousel
│ ├── IconFramework
│ ├── Loading
│ ├── Modal
│ ├── NavigationBar
│ ├── ReachCount
│ ├── ReactionStampModal
│ └── index.ts
└── index.ts

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

テスト項目

• 各コンポーネントの場所があっているか
• 今まで通り動作するか
• [ ]

備考

[hikahana]

良いと思います。

よく考えたらiconFrameWorkからiconを作成しているのでiconsにまとめてもよさそうです。

[hikahana]

以下のようにカテゴリ別に分けときますか

Suggested change

	// Components
	export { default as Header } from "./Header";
	export { default as Modal } from "./Modal";
	export { default as Loading } from "./Loading";
	export { default as NavigationBar } from "./NavigationBar";
	export { default as ReactionStampModal } from "./ReactionStampModal";
	export { default as HelpCarousel } from "./HelpCarousel";
	export { default as ReachCount } from "./ReachCount";
	// Buttons
	export { default as Button } from "./buttons/Button";
	export { default as ToggleButton } from "./buttons/ToggleButton";
	export { default as DotButton } from "./buttons/DotButton";
	// Icons
	export { default as BingoIcon } from "./icons/BingoIcon";
	export { default as PrizesIcon } from "./icons/PrizesIcon";
	export { default as ReactionsIcon } from "./icons/ReactionsIcon";
	export { default as SettingsIcon } from "./icons/SettingsIcon";
	export { default as BackIcon } from "./icons/BackIcon";
	export { default as ReachIcon } from "./icons/ReachIcon";
	export { default as IconFramework } from "./icons/IconFramework";
	// Cards
	export { default as NumberCardSmall } from "./cards/NumberCardSmall";
	export { default as NumberCardLarge } from "./NumberCardLarge";
	export { default as PrizeCard } from "./cards/PrizeCard";
	export { default as PrizeCardList } from "./cards/PrizeCardList";
	export { default as NumberCardList } from "./cards/NumberCardList";

[hikahana]

ここ2行目空白なのは理由ありますでしょうか。

import React from "react";
import NumberCardSmall from "../NumberCardSmall";
import type { SubscribeListNumbersSubscription } from "@/types/graphql";
import styles from "./NumberCardList.module.css";

[hikahana]

おそらく直しました。
原因としてwebpackでimagesを再定義したことでremotePatternsが消えてしまったこと、"/bingo/**"というように前にスラッシュを付ける必要がある、であると思います。

images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "minio",
        port: "9000",
        pathname: "/bingo/**",
      },
      {
        protocol: "https",
        hostname: "storage.nutfes.net",
        pathname: "/**",
      },
    ],
    disableStaticImages: true,
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            svgo: false,
          },
        },
      ],
    });
    return config;
  },

[hikahana]

何も取得していないときはカードの表示をさせたくないかもです

            {imageURL && prizeImage.bucketName && prizeImage.fileName && (
              <Image src={imageURL} alt="PrizeImage" fill />
            )}

[AKIYAMA-HAYATE]

修正しました。
確認お願いします