[Refactor] Move to src-ui/views and src-ui/logics structure.

src-ui/views/common_components/homepage_link_button/HomepageLinkButton.jsx

@@ -0,0 +1,54 @@
+import ExternalLink from "@images/external_link.svg?react";
+import styles from "./HomepageLinkButton.module.scss";
+import { useRef, useState, useCallback } from "react";
+
+export const HomepageLinkButton = ({ homepage_link, speed = 40 /* px/s */ }) => {
+    const containerRef = useRef(null);
+    const textRef = useRef(null);
+    const [inlineStyle, setInlineStyle] = useState({});
+
+    const handleMouseEnter = useCallback(() => {
+        const container = containerRef.current;
+        const text = textRef.current;
+        if (!container || !text) return;
+        const overflow = text.scrollWidth - container.clientWidth;
+        if (overflow > 0) {
+            const duration = overflow / speed;
+            setInlineStyle({
+                transform: `translateX(-${overflow}px)`,
+                transition: `transform ${duration}s linear`,
+            });
+        }
+    }, [speed]);
+
+    const handleMouseLeave = useCallback(() => {
+        setInlineStyle({
+            transform: 'translateX(0)',
+            transition: 'transform 0.3s ease-out',
+        });
+    }, []);
+
+    return (
+        <div className={styles.open_homepage_button_wrapper}>
+            <a
+                className={styles.open_homepage_button}
+                href={homepage_link}
+                target="_blank"
+                rel="noreferrer"
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <div className={styles.text_container} ref={containerRef}>
+                    <p
+                    className={styles.open_homepage_text}
+                    ref={textRef}
+                    style={inlineStyle}
+                    >
+                    {homepage_link}
+                    </p>
+                </div>
+                <ExternalLink className={styles.external_link_svg} />
+            </a>
+        </div>
+    );
+};

src-ui/views/common_components/homepage_link_button/HomepageLinkButton.module.scss

@@ -0,0 +1,39 @@
+.open_homepage_button_wrapper {
+    width: 100%;
+}
+
+.open_homepage_button {
+    padding: 0.6rem 0;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    text-decoration: none;
+    &:hover .external_link_svg {
+        color: var(--dark_200_color);
+    }
+    &:hover .open_homepage_text {
+        border-bottom: 0.1rem solid var(--dark_500_color);
+    }
+}
+
+.text_container {
+    position: relative;
+    overflow: hidden;
+}
+
+.open_homepage_text {
+    margin: 0; /* pタグのデフォルトマージン除去 */
+    font-size: 1.4rem;
+    color: var(--sent_400_color);
+    white-space: nowrap;
+    display: inline-block;
+    transform: translateX(0);
+    border-bottom: 0.1rem solid var(--sent_400_color);
+}
+
+.external_link_svg {
+    flex-shrink: 0;
+    width: 1.6rem;
+    color: var(--dark_500_color);
+}