#7: Refactored

src/components/module/create/GoTopButton/GoTopButton.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/require-default-props */
+import { useRouter } from 'next/router';
+import { FC, useState } from 'react';
+import { useLocale } from '~/hooks/useLocale';
+import Button from '../../../ui/Button/Button';
+
+const GoTopButton: FC = () => {
+  const router = useRouter();
+  const { t } = useLocale();
+
+  return (
+    <Button variant="tertiary" onClick={() => router.push('/')} id="gotop">
+      ← {t.GOTOP}
+    </Button>
+  );
+};
+
+export default GoTopButton;

src/components/ui/RegexGuide/RegexGuide.tsx → src/components/module/create/RegexGuide/RegexGuide.tsx

@@ -4,7 +4,7 @@
 /* eslint-disable react/require-default-props */
 import { FC, useState } from 'react';
 import { useLocale } from '~/hooks/useLocale';
-import Button from '../Button/Button';
+import Button from '../../../ui/Button/Button';
 import styles from './RegexGuide.module.css';
 
 export type PropType = {

src/components/ui/GachaDetail/GachaDetail.tsx → src/components/module/gacha/GachaDetail/GachaDetail.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/require-default-props */
 import { FC } from 'react';
 import clsx from 'clsx';
-import useAgoText from '../../../hooks/useAgoText';
-import { IconPlay, IconTime } from '../../Icon';
-import Avatar from '../Avatar/Avatar';
+import useAgoText from '~/hooks/useAgoText';
+import { IconPlay, IconTime } from '~/components/Icon';
+import Avatar from '~/components/ui/Avatar/Avatar';
 import styles from './GachaDetail.module.css';
 
 export type PropType = {

src/components/ui/GachaItem/GachaItem.stories.tsx → src/components/module/gacha/GachaItem/GachaItem.stories.tsx

@@ -1,5 +1,5 @@
 import { Story, Meta } from '@storybook/react';
-import { IconRankingOne, IconRankingTwo } from '../../Icon';
+import { IconRankingOne, IconRankingTwo } from '~/components/Icon';
 import GachaDetail from '../GachaDetail/GachaDetail';
 import GachaItem, { PropType } from './GachaItem';
 

src/components/ui/GachaItem/GachaItem.tsx → src/components/module/gacha/GachaItem/GachaItem.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/require-default-props */
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
-import { IconPlay } from '../../Icon';
-import Button from '../Button/Button';
+import { IconPlay } from '~/components/Icon';
+import Button from '~/components/ui/Button/Button';
 import styles from './GachaItem.module.css';
 import GachaPreview from './GachaPreview/GachaPreview';
 import { useRouter } from 'next/router';

src/components/module/gacha/PartyStage/PartyStageBg.tsx

@@ -0,0 +1,101 @@
+import Script from 'next/script';
+import { FC } from 'react';
+import styles from './PartyStage.module.css';
+
+const PartyStageBg: FC = () => (
+  <>
+    <Script
+      src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"
+      onReady={() => {
+        if (typeof particlesJS !== 'undefined') {
+          particlesJS('particles', {
+            particles: {
+              number: {
+                value: 50,
+                density: {
+                  enable: false,
+                  value_area: 200,
+                },
+              },
+              color: {
+                value: [
+                  '#EA5532',
+                  '#F6AD3C',
+                  '#FFF33F',
+                  '#00A95F',
+                  '#00ADA9',
+                  '#00AFEC',
+                  '#4D4398',
+                  '#E85298',
+                ],
+              },
+              shape: {
+                type: 'polygon',
+                stroke: {
+                  width: 0,
+                },
+                polygon: {
+                  nb_sides: 3,
+                },
+              },
+              opacity: {
+                value: 1,
+                random: false,
+                anim: {
+                  enable: true,
+                  speed: 20,
+                  opacity_min: 0,
+                  sync: false,
+                },
+              },
+              size: {
+                value: 5,
+                random: true,
+                anim: {
+                  enable: true,
+                  speed: 1,
+                  size_min: 1,
+                  sync: false,
+                },
+              },
+              line_linked: {
+                enable: false,
+              },
+              move: {
+                enable: true,
+                speed: 8,
+                direction: 'bottom',
+                random: false,
+                straight: false,
+                out_mode: 'out',
+                bounce: false,
+                attract: {
+                  enable: false,
+                  rotateX: 600,
+                  rotateY: 1200,
+                },
+              },
+            },
+            interactivity: {
+              detect_on: 'canvas',
+              events: {
+                onhover: {
+                  enable: false,
+                },
+                onclick: {
+                  enable: false,
+                },
+                resize: true,
+              },
+            },
+            retina_detect: true,
+          });
+        }
+      }}
+    />
+    <div id="particles" />
+    <div className={`${styles.bg}`} />
+  </>
+);
+
+export default PartyStageBg;

src/components/ui/PartyStage/PartyStageCapsule.tsx → src/components/module/gacha/PartyStage/PartyStageCapsule.tsx

@@ -25,60 +25,62 @@ const PartyStageCapsule: FC<PropType> = ({ displayText }) => {
   }, [displayText]);
 
   const capsule = () => {
-    const illo = new Zdog.Illustration({
-      // set canvas with selector
-      element: '#zdogCanvas',
-      rotate: { x: -0.3 },
-    });
+    if (typeof Zdog !== 'undefined') {
+      const illo = new Zdog.Illustration({
+        // set canvas with selector
+        element: '#zdogCanvas',
+        rotate: { x: -0.3 },
+      });
 
-    const dome = new Zdog.Hemisphere({
-      addTo: illo,
-      diameter: 300,
-      // fill enabled by default
-      // disable stroke for crisp edge
-      stroke: false,
-      color: '#46B4AB',
-      backface: 'url("#gachaGradient")',
-      rotate: { x: -Zdog.TAU / 4 },
-    });
+      const dome = new Zdog.Hemisphere({
+        addTo: illo,
+        diameter: 300,
+        // fill enabled by default
+        // disable stroke for crisp edge
+        stroke: false,
+        color: '#46B4AB',
+        backface: 'url("#gachaGradient")',
+        rotate: { x: -Zdog.TAU / 4 },
+      });
 
-    const dome2 = dome.copy({
-      // overwrite original options
-      translate: { y: 0, x: -30 },
-      rotate: { x: -Zdog.TAU / -4, y: 0 },
-      color: '#EFAE2D',
-    });
+      const dome2 = dome.copy({
+        // overwrite original options
+        translate: { y: 0, x: -30 },
+        rotate: { x: -Zdog.TAU / -4, y: 0 },
+        color: '#EFAE2D',
+      });
 
-    let ticker = 0;
-    const cycleCount = 150;
+      let ticker = 0;
+      const cycleCount = 150;
 
-    const animate = () => {
-      const progress = ticker / cycleCount;
-      // apply easing to rotation
-      const tween = Zdog.easeInOut(progress % 1, 3);
-      illo.rotate.y = tween * Zdog.TAU + -4.8;
-      ticker++;
+      const animate = () => {
+        const progress = ticker / cycleCount;
+        // apply easing to rotation
+        const tween = Zdog.easeInOut(progress % 1, 3);
+        illo.rotate.y = tween * Zdog.TAU + -4.8;
+        ticker++;
 
-      /* if (dome2.rotate.y >= 0.7) {
+        /* if (dome2.rotate.y >= 0.7) {
         dome2.rotate.y = 0;
       }
       if (dome2.translate.y <= -100) {
         dome2.translate.y = 0;
       } */
 
-      if (dome2.rotate.y <= 0.7) {
-        dome2.rotate.y += 0.03;
-      }
-      if (dome2.translate.y >= -100) {
-        dome2.translate.y -= 4;
-      }
+        if (dome2.rotate.y <= 0.7) {
+          dome2.rotate.y += 0.03;
+        }
+        if (dome2.translate.y >= -100) {
+          dome2.translate.y -= 4;
+        }
 
-      illo.updateRenderGraph();
-      // animate next frame
-      requestAnimationFrame(animate);
-    };
-    // start animation
-    animate();
+        illo.updateRenderGraph();
+        // animate next frame
+        requestAnimationFrame(animate);
+      };
+      // start animation
+      animate();
+    }
   };
 
   return (

src/components/ui/Hero/Hero.tsx → src/components/module/home/Hero/Hero.tsx

@@ -2,8 +2,8 @@ import { useRouter } from 'next/router';
 import { FC, useEffect } from 'react';
 import ShuffleText from 'shuffle-text';
 import { useLocale } from '~/hooks/useLocale';
-import { IconPencil } from '../../Icon';
-import Button from '../Button/Button';
+import { IconPencil } from '~/components/Icon';
+import Button from '~/components/ui/Button/Button';
 import styles from './Hero.module.css';
 
 const Hero: FC = () => {

src/components/page/CreateGacha/CreateGacha.tsx

@@ -5,11 +5,12 @@ import { IconPencil, IconPlay } from '~/components/Icon';
 import Card from '~/components/ui/Card/Card';
 import CardHeader from '~/components/ui/CardHeader/CardHeader';
 import Textarea from '~/components/ui/Textarea/Textarea';
-import RegexGuide from '~/components/ui/RegexGuide/RegexGuide';
+import RegexGuide from '~/components/module/create/RegexGuide/RegexGuide';
 import Selector from '~/components/ui/Selector/Selector';
 import Button from '~/components/ui/Button/Button';
 import { useRouter } from 'next/router';
 import { useLocale } from '~/hooks/useLocale';
+import GoTopButton from '~/components/module/create/GoTopButton/GoTopButton';
 
 const CreateGacha: FC = () => {
   const router = useRouter();
@@ -85,9 +86,7 @@ const CreateGacha: FC = () => {
         </Button>
       </Card>
 
-      <Button variant="tertiary" onClick={() => router.push('/')} id="gotop">
-        ← {t.GOTOP}
-      </Button>
+      <GoTopButton />
     </div>
   );
 };

src/components/page/Home/Home.tsx

@@ -1,16 +1,16 @@
 import { FC } from 'react';
 import Head from 'next/head';
 import Logo from '~/components/ui/Logo/Logo';
-import Hero from '~/components/ui/Hero/Hero';
+import Hero from '~/components/module/home/Hero/Hero';
 import {
   IconRankingOne,
   IconRankingThree,
   IconRankingTwo,
 } from '~/components/Icon';
 import Card from '~/components/ui/Card/Card';
 import TabHeader from '~/components/ui/TabHeader/TabHeader';
-import GachaItem from '~/components/ui/GachaItem/GachaItem';
-import GachaDetail from '~/components/ui/GachaDetail/GachaDetail';
+import GachaItem from '~/components/module/gacha/GachaItem/GachaItem';
+import GachaDetail from '~/components/module/gacha/GachaDetail/GachaDetail';
 import { useLocale } from '~/hooks/useLocale';
 
 const Home: FC = () => {

src/components/page/Party/Party.tsx

@@ -1,7 +1,7 @@
 import { FC, useCallback, useEffect, useRef } from 'react';
 import Head from 'next/head';
 import Logo from '~/components/ui/Logo/Logo';
-import PartyStage from '~/components/ui/PartyStage/PartyStage';
+import PartyStage from '~/components/module/gacha/PartyStage/PartyStage';
 import Button from '~/components/ui/Button/Button';
 import { useRouter } from 'next/router';
 import { IconSkip } from '~/components/Icon';

src/components/page/Post/Post.tsx

@@ -6,12 +6,13 @@ import { useRouter } from 'next/router';
 import { IconPlay } from '~/components/Icon';
 import Card from '~/components/ui/Card/Card';
 import CardHeader from '~/components/ui/CardHeader/CardHeader';
-import GachaDetail from '~/components/ui/GachaDetail/GachaDetail';
+import GachaDetail from '~/components/module/gacha/GachaDetail/GachaDetail';
 import BigText from '~/components/ui/BigText/BigText';
 import Selector from '~/components/ui/Selector/Selector';
-import GachaItem from '~/components/ui/GachaItem/GachaItem';
+import GachaItem from '~/components/module/gacha/GachaItem/GachaItem';
 import CardStack from '~/components/ui/CardStack/CardStack';
 import { useLocale } from '~/hooks/useLocale';
+import GoTopButton from '~/components/module/create/GoTopButton/GoTopButton';
 
 const Post: FC = () => {
   const router = useRouter();
@@ -116,9 +117,7 @@ const Post: FC = () => {
         </Card>
       </CardStack>
 
-      <Button variant="tertiary" onClick={() => router.push('/')} id="gotop">
-        ← {t.GOTOP}
-      </Button>
+      <GoTopButton />
     </div>
   );
 };

src/components/page/Ranking/Ranking.tsx

@@ -1,16 +1,16 @@
 import { FC } from 'react';
 import Head from 'next/head';
 import Logo from '~/components/ui/Logo/Logo';
-import Hero from '~/components/ui/Hero/Hero';
+import Hero from '~/components/module/home/Hero/Hero';
 import {
   IconRankingOne,
   IconRankingThree,
   IconRankingTwo,
 } from '~/components/Icon';
 import Card from '~/components/ui/Card/Card';
 import TabHeader from '~/components/ui/TabHeader/TabHeader';
-import GachaItem from '~/components/ui/GachaItem/GachaItem';
-import GachaDetail from '~/components/ui/GachaDetail/GachaDetail';
+import GachaItem from '~/components/module/gacha/GachaItem/GachaItem';
+import GachaDetail from '~/components/module/gacha/GachaDetail/GachaDetail';
 import { useLocale } from '~/hooks/useLocale';
 
 const Home: FC = () => {